/* ============================================================
   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;
    --radius-btn: 11px;
    --radius-champ: 11px;
    --radius-pilule: 999px;
    --sur-accent: #fff;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .35);
    /* LE marqueur d'état actif — en sombre, ses arrêts se foncent (≈4,7:1
       sous le libellé blanc) : l'accent pur resterait sous le seuil AA.
       Le mix suit --accent : les neuf palettes en héritent d'office. */
    --degrade-actif: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 82%, #000),
        color-mix(in srgb, var(--accent-2) 82%, #000));

    /* 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;
    /* En clair, l'accent porte déjà le blanc à plus de 5:1 : dégradé pur. */
    --degrade-actif: linear-gradient(135deg, var(--accent), var(--accent-2));
    --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;
}

/* ============================================================
   Les thèmes — Réglages › Apparence. Quatre mondes graphiques :
   sans data-style, KronoFix (la signature maison : tokens ci-dessus,
   dégradé de nuit, verre, dégradés d'accent). data-style="apple",
   "windows" ou "android" : le poste adopte les codes complets de la
   plateforme — fonds, surfaces, rayons, typo, ombres — pas une simple
   couleur de boutons. Le clair/sombre (data-theme) reste un axe
   indépendant qui traverse les quatre.
   ============================================================ */

/* ── Apple — Human Interface Guidelines + Liquid Glass (macOS Tahoe) ──
   Les couleurs des Réglages Système : sombre anthracite (pas le noir
   iOS) aux cartes gris élevé, clair gris perle aux cartes blanches —
   opaques et sans bordure, le verre est réservé au chrome (topbar).
   Accent systemBlue en aplat, boutons rectangulaires à arrondi modéré,
   séparateurs hairline, ombres d'élévation douces.
   Réf. : .claude/skills/kronofix-style/references/charte-apple.md */
:root[data-style="apple"] {
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
    --bg: #1b1f21;
    --body-grad: linear-gradient(180deg, #1b1f21, #1b1f21);
    --surface: #2b2f30;
    --surface-solid: #313536;
    --border: rgba(255, 255, 255, .09);
    --text: #ffffff;
    --text-soft: rgba(235, 235, 245, .66);
    --placeholder: rgba(235, 235, 245, .3);
    --accent: #1e4bb0; --accent-2: #1e4bb0; --accent-strong: #4f9bff;
    --accent-soft: rgba(54, 110, 220, .22); --accent-tint: rgba(54, 110, 220, .12);
    --danger: #ff453a; --danger-soft: rgba(255, 69, 58, .16);
    --success: #30d158; --success-soft: rgba(48, 209, 88, .14);
    --warning: #ff9f0a; --warning-soft: rgba(255, 159, 10, .14);
    --radius: 12px; --radius-btn: 10px; --radius-champ: 10px;
    --shadow: 0 1px 3px rgb(0 0 0 / .3), 0 12px 32px rgb(0 0 0 / .25);
    --topbar-bg: rgba(27, 31, 33, .7);
    --hover: rgba(255, 255, 255, .06);
    --raise: rgba(255, 255, 255, .05);
    --input-bg: rgba(118, 118, 128, .24);
    --sunken: rgba(118, 118, 128, .12);
}
:root[data-style="apple"][data-theme="light"] {
    --bg: #ecedef;
    --body-grad: linear-gradient(180deg, #ecedef, #ecedef);
    --surface: #ffffff;
    --surface-solid: #ffffff;
    --border: rgba(60, 60, 67, .24);
    --text: #000000;
    --text-soft: rgba(60, 60, 67, .6);
    --placeholder: rgba(60, 60, 67, .3);
    --accent: #007aff; --accent-2: #007aff; --accent-strong: #0071eb;
    --accent-soft: rgba(0, 122, 255, .12); --accent-tint: rgba(0, 122, 255, .07);
    --danger: #d70015; --danger-soft: rgba(215, 0, 21, .1);
    --success: #248a3d; --success-soft: rgba(36, 138, 61, .12);
    --warning: #b25000; --warning-soft: rgba(178, 80, 0, .13);
    --shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .06);
    --topbar-bg: rgba(246, 246, 248, .74);
    --hover: rgba(0, 0, 0, .04);
    --raise: rgba(0, 0, 0, .03);
    --input-bg: rgba(118, 118, 128, .12);
    --sunken: rgba(118, 118, 128, .07);
}
/* Chez Apple le contenu n'est jamais en verre : cartes opaques sans
   bordure, l'élévation fait la structure. Seule la topbar est du verre. */
:root[data-style="apple"] .card,
:root[data-style="apple"] .box {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: transparent;
}
:root[data-style="apple"] .topbar {
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
:root[data-style="apple"][data-theme="light"] .topbar { border-bottom-color: rgba(0, 0, 0, .08); }
/* Boutons Liquid Glass : rectangles à arrondi modéré, en VERRE.
   Le principal est teinté systemBlue, le secondaire est le verre
   neutre — blanc translucide, liseré clair, gros flou. Au survol le
   bouton se soulève d'un pixel, au clic il s'enfonce d'un pixel :
   la physique du verre, pas un écrasement. */
:root[data-style="apple"] .btn {
    font-weight: 600;
    transition: background .2s, border-color .2s, box-shadow .2s, transform .15s, filter .2s;
}
:root[data-style="apple"] .btn:active { transform: translateY(1px); }
:root[data-style="apple"] .btn-primary {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 50%),
        color-mix(in srgb, var(--accent) 84%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .5),
        inset 0 0 0 1px rgba(255, 255, 255, .3),
        0 8px 32px rgba(0, 0, 0, .25);
}
:root[data-style="apple"] .btn-primary:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .7),
        inset 0 0 0 1px rgba(255, 255, 255, .5),
        0 12px 40px rgba(0, 0, 0, .3);
}
:root[data-style="apple"] .btn-outline {
    background: rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, .3);
    color: var(--text);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .5),
        0 8px 32px rgba(0, 0, 0, .25);
}
:root[data-style="apple"] .btn-outline:hover {
    background: rgba(255, 255, 255, .25);
    border-color: rgba(255, 255, 255, .5);
    transform: translateY(-1px);
}
:root[data-style="apple"][data-theme="light"] .btn-outline {
    background: rgba(255, 255, 255, .55);
    border-color: rgba(0, 0, 0, .12);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .9),
        0 8px 24px rgba(0, 0, 0, .12);
}
:root[data-style="apple"][data-theme="light"] .btn-outline:hover {
    background: rgba(255, 255, 255, .8);
    border-color: rgba(0, 0, 0, .2);
}
/* Les onglets de section (Réglages…) : rectangles à arrondi modéré,
   alignés sur les boutons Sombre/Clair — pas des pilules. */
:root[data-style="apple"] .subnav a { border-radius: 12px; }
/* …et les carrés colorés des Réglages macOS en thème Apple : chaque
   section porte son icône sur une pastille système — c'est ce qui rend
   la page vivante sur les fonds anthracite. */
:root[data-style="apple"] .subnav-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1;
    background: var(--ico, #8e8e93);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .3);
}
:root[data-style="apple"] .ico-gris { --ico: #8e8e93; }
:root[data-style="apple"] .ico-bleu { --ico: #0a84ff; }
:root[data-style="apple"] .ico-vert { --ico: #30d158; }
:root[data-style="apple"] .ico-indigo { --ico: #5e5ce6; }
:root[data-style="apple"] .ico-orange { --ico: #ff9f0a; }
:root[data-style="apple"] .ico-violet { --ico: #bf5af2; }
:root[data-style="apple"] .ico-rose { --ico: #ff375f; }
:root[data-style="apple"] .ico-cyan { --ico: #32ade6; }
:root[data-style="apple"] h1,
:root[data-style="apple"] h2,
:root[data-style="apple"] h3 { font-weight: 700; }
/* Le segmented control : les filtres vivent dans un rail discret, le
   segment actif est une plaque posée — LE contrôle signature d'Apple. */
:root[data-style="apple"] .filtre-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    background: var(--input-bg);
    border-radius: 10px;
}
:root[data-style="apple"] .filtre-chips .chip {
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-soft);
    font-weight: 600;
}
:root[data-style="apple"] .filtre-chips .chip:hover { color: var(--text); }
:root[data-style="apple"] .filtre-chips .chip.actif {
    background: #5c5c61;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
}
:root[data-style="apple"][data-theme="light"] .filtre-chips .chip.actif {
    background: #ffffff;
    color: #000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
:root[data-style="apple"] .filtre-chips .chip.actif .chip-n {
    background: rgba(255, 255, 255, .25);
    color: inherit;
}
:root[data-style="apple"][data-theme="light"] .filtre-chips .chip.actif .chip-n {
    background: rgba(0, 0, 0, .08);
}
/* Le ressort Apple : les tuiles se soulèvent avec un léger rebond au
   survol et se compriment au clic — la courbe à dépassement maison. */
:root[data-style="apple"] .kpi-card {
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
}
:root[data-style="apple"] .kpi-card:hover { transform: translateY(-2px) scale(1.012); }
:root[data-style="apple"] .kpi-card:active { transform: scale(.98); }
:root[data-style="apple"] table { font-variant-numeric: tabular-nums; }

/* ── Windows — Fluent Design (Windows 11) ──────────────────────────────
   Fond « Mica », cartes à peine détachées cerclées d'un liseré fin,
   coins serrés (8 / 5), accent bleu Windows en aplat, ombres minimales,
   Segoe UI. En sombre l'accent s'éclaircit et le texte posé dessus
   passe en encre — c'est --sur-accent qui porte cette règle Fluent. */
:root[data-style="windows"] {
    --font: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    --bg: #202020;
    --body-grad: linear-gradient(180deg, #202020, #1b1b1b);
    --surface: #2b2b2b;
    --surface-solid: #2f2f2f;
    --border: rgba(255, 255, 255, .09);
    --text: #ffffff;
    --text-soft: rgba(255, 255, 255, .62);
    --placeholder: rgba(255, 255, 255, .38);
    --accent: #60cdff; --accent-2: #60cdff; --accent-strong: #7cd6ff;
    --sur-accent: rgba(0, 22, 34, .92);
    --accent-soft: rgba(96, 205, 255, .14); --accent-tint: rgba(96, 205, 255, .07);
    --danger: #ff6b70; --danger-soft: rgba(255, 107, 112, .15);
    --success: #6ccb5f; --success-soft: rgba(108, 203, 95, .14);
    --warning: #fce100; --warning-soft: rgba(252, 225, 0, .1);
    /* Un seul arrondi pour tout le style : boutons, champs et pilules
       épousent celui des cartes et fenêtres — cohérence avant tout. */
    --radius: 8px; --radius-btn: 8px; --radius-champ: 8px; --radius-pilule: 8px;
    --shadow: 0 0 2px rgb(0 0 0 / .22), 0 2px 8px rgb(0 0 0 / .26);
    --topbar-bg: rgba(32, 32, 32, .82);
    --hover: rgba(255, 255, 255, .06);
    --raise: rgba(255, 255, 255, .04);
    --input-bg: rgba(255, 255, 255, .06);
    --sunken: rgba(255, 255, 255, .04);
}
:root[data-style="windows"][data-theme="light"] {
    --bg: #f3f3f3;
    --body-grad: linear-gradient(180deg, #f3f3f3, #ececec);
    --surface: #fbfbfb;
    --surface-solid: #ffffff;
    --border: rgba(0, 0, 0, .09);
    --text: #1b1b1b;
    --text-soft: rgba(27, 27, 27, .61);
    --placeholder: rgba(27, 27, 27, .4);
    --accent: #005fb8; --accent-2: #005fb8; --accent-strong: #0f5ca8;
    --sur-accent: #ffffff;
    --accent-soft: rgba(0, 95, 184, .1); --accent-tint: rgba(0, 95, 184, .06);
    --danger: #c42b1c; --danger-soft: rgba(196, 43, 28, .09);
    --success: #0f7b0f; --success-soft: rgba(15, 123, 15, .1);
    --warning: #9d5d00; --warning-soft: rgba(157, 93, 0, .12);
    --shadow: 0 0 2px rgb(0 0 0 / .1), 0 2px 8px rgb(0 0 0 / .08);
    --topbar-bg: rgba(243, 243, 243, .85);
    --hover: rgba(0, 0, 0, .04);
    --raise: rgba(0, 0, 0, .03);
    --input-bg: #ffffff;
    --sunken: rgba(0, 0, 0, .03);
}
/* Fluent : la structure passe par les liserés, pas par le verre ni les
   grandes ombres. La topbar est de l'acrylique discret. */
:root[data-style="windows"] .card,
:root[data-style="windows"] .box {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
:root[data-style="windows"] .topbar {
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    backdrop-filter: blur(30px) saturate(150%);
}
/* Boutons WinUI : rectangles nets et denses, aplat d'accent cerclé d'un
   liseré ; l'appui n'écrase pas le bouton (pas de scale chez Fluent),
   il l'assombrit. Le secondaire est le bouton « standard » : surface
   légèrement levée + liseré. */
:root[data-style="windows"] .btn { padding: 9px 20px; font-size: 15px; font-weight: 600; }
:root[data-style="windows"] .btn-lg { padding: 12px 28px; font-size: 16px; }
:root[data-style="windows"] .btn-sm { padding: 6px 11px; font-size: 13.5px; }
:root[data-style="windows"] .btn:active { transform: none; filter: brightness(.85); }
:root[data-style="windows"] .btn-primary {
    background: var(--accent);
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / .18);
}
:root[data-style="windows"] .btn-primary:hover { filter: brightness(1.06); }
:root[data-style="windows"] .btn-outline {
    background: var(--raise);
    border: 1px solid var(--border);
}

/* ── Android — Material You (Android 14, graine « désert ») ──────────
   Palette dynamique tirée d'un fond d'écran sable : accent pêche,
   fonds brun-noir chauds, surfaces terreuses. Boutons en pilule
   pleine, barre du haut OPAQUE (pas de verre chez Material),
   élévation courte, Roboto. En sombre le primaire est pêche et son
   texte encre brune — la règle Material des tons 80/20. */
:root[data-style="android"] {
    --font: Roboto, "Helvetica Neue", system-ui, sans-serif;
    --bg: #161110;
    --body-grad: linear-gradient(180deg, #161110, #161110);
    --surface: #211a16;
    --surface-solid: #292019;
    --border: rgba(213, 196, 182, .2);
    --text: #ede0d6;
    --text-soft: #d0c0b3;
    --placeholder: rgba(208, 192, 179, .55);
    --accent: #fac4a6; --accent-2: #fac4a6; --accent-strong: #fac4a6;
    --sur-accent: #442a12;
    --accent-soft: rgba(250, 196, 166, .15); --accent-tint: rgba(250, 196, 166, .08);
    --danger: #ff8a80; --danger-soft: rgba(255, 138, 128, .15);
    --success: #63d18b; --success-soft: rgba(99, 209, 139, .14);
    --warning: #ffb95c; --warning-soft: rgba(255, 185, 92, .13);
    --radius: 20px; --radius-btn: 999px; --radius-champ: 8px;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 1px 3px 1px rgb(0 0 0 / .15);
    --topbar-bg: #211a16;
    --hover: rgba(237, 224, 214, .08);
    --raise: rgba(237, 224, 214, .05);
    --input-bg: rgba(237, 224, 214, .06);
    --sunken: rgba(237, 224, 214, .05);
}
:root[data-style="android"][data-theme="light"] {
    --bg: #fff8f4;
    --body-grad: linear-gradient(180deg, #fff8f4, #fff8f4);
    --surface: #fdf1e9;
    --surface-solid: #ffffff;
    --border: rgba(139, 110, 88, .4);
    --text: #221a14;
    --text-soft: #52443a;
    --placeholder: rgba(82, 68, 58, .55);
    --accent: #96602e; --accent-2: #96602e; --accent-strong: #8a5424;
    --sur-accent: #ffffff;
    --accent-soft: rgba(150, 96, 46, .12); --accent-tint: rgba(150, 96, 46, .07);
    --danger: #b3261e; --danger-soft: rgba(179, 38, 30, .1);
    --success: #146c2e; --success-soft: rgba(20, 108, 46, .12);
    --warning: #7a5900; --warning-soft: rgba(122, 89, 0, .13);
    --shadow: 0 1px 2px rgb(0 0 0 / .12), 0 1px 3px 1px rgb(0 0 0 / .08);
    --topbar-bg: #f8ece2;
    --hover: rgba(34, 26, 20, .05);
    --raise: rgba(34, 26, 20, .04);
    --input-bg: rgba(34, 26, 20, .05);
    --sunken: rgba(34, 26, 20, .04);
}
:root[data-style="android"] .card,
:root[data-style="android"] .box {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: transparent;
}
:root[data-style="android"] .topbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* Boutons Material 3 : la pilule pleine (via --radius-btn), posée à plat
   — l'élévation n'apparaît qu'au survol. Le secondaire est le « outlined
   button » : pilule cerclée, libellé primaire. */
:root[data-style="android"] .btn { font-weight: 550; letter-spacing: .1px; font-size: 15px; }
:root[data-style="android"] .btn-primary {
    background: var(--accent);
    box-shadow: none;
}
:root[data-style="android"] .btn-primary:hover {
    filter: brightness(1.05);
    box-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 1px 3px 1px rgb(0 0 0 / .15);
}
:root[data-style="android"] .btn-outline {
    border: 1px solid var(--border);
    color: var(--accent-strong);
}
/* L'indicateur actif M3 : une pilule tonale « container », pas un
   aplat vif — comme les réglages d'Android. */
:root[data-style="android"] .subnav a.active {
    background: rgba(250, 196, 166, .24);
    color: #ffdcc2;
    border-color: transparent;
}
:root[data-style="android"][data-theme="light"] .subnav a.active {
    background: rgba(150, 96, 46, .16);
    color: #5a3210;
}
/* Le vrai switch Material 3 : anneau cerclé, petit pouce discret qui
   grossit et se remplit quand on l'active. */
:root[data-style="android"] .sw {
    width: 44px;
    height: 26px;
    background: transparent;
    border: 2px solid var(--border);
}
:root[data-style="android"] .sw::after {
    /* La géométrie reste 18px : le repos est un scale(.667) — même centre
       exact que l'ancien 12px@5,5, mais l'animation vit au compositeur. */
    width: 18px;
    height: 18px;
    top: 2px;
    left: 2px;
    background: var(--text-soft);
    box-shadow: none;
    transform: scale(.667);
    transition: transform .2s, background .2s;
}
:root[data-style="android"] .pouvoir-tuile input:checked ~ .sw,
:root[data-style="android"] .acc-ligne.on .sw {
    background: var(--accent);
    border-color: var(--accent);
}
:root[data-style="android"] .pouvoir-tuile input:checked ~ .sw::after,
:root[data-style="android"] .acc-ligne.on .sw::after {
    background: var(--sur-accent);
    transform: translateX(18px) scale(1);
}

/* ── Néon — l'atelier de nuit électrique ──────────────────────────────
   Cinquième monde : marine profond, cyan et magenta électriques,
   lueurs colorées. Les tuiles du tableau de bord portent un liseré
   néon en rotation (la carte animée du repo Minimal UI, adaptée aux
   tokens) et les boutons rayonnent. Assumé spectaculaire — les autres
   thèmes restent sobres. */
:root[data-style="neon"] {
    --bg: #061733;
    --body-grad:
        radial-gradient(900px 520px at 78% -12%, rgba(0, 183, 255, .13), transparent 60%),
        radial-gradient(720px 480px at 8% 112%, rgba(255, 48, 255, .09), transparent 55%),
        linear-gradient(170deg, #081a38 0%, #061229 55%, #0a0f2e 100%);
    --surface: rgba(7, 24, 46, .92);
    --surface-solid: #0a1f3b;
    --border: #223a66;
    --text: #e6efff;
    --text-soft: #a1acc9;
    --placeholder: #5d6f96;
    --accent: #00b7ff; --accent-2: #b44bff; --accent-strong: #4fc9ff;
    --sur-accent: #fff;
    --accent-soft: rgba(0, 183, 255, .16); --accent-tint: rgba(0, 183, 255, .09);
    --danger: #ff5d8f; --danger-soft: rgba(255, 93, 143, .16);
    --success: #2fe08a; --success-soft: rgba(47, 224, 138, .13);
    --warning: #ffc46b; --warning-soft: rgba(255, 196, 107, .13);
    --radius: 12px; --radius-btn: 10px; --radius-champ: 8px;
    --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 14px 40px rgba(0, 90, 200, .22);
    --topbar-bg: rgba(6, 20, 42, .8);
    --hover: rgba(160, 200, 255, .07);
    --raise: rgba(160, 200, 255, .05);
    --input-bg: rgba(4, 14, 30, .6);
    --sunken: rgba(4, 14, 30, .5);
}
:root[data-style="neon"][data-theme="light"] {
    --bg: #eaf1fc;
    --body-grad:
        radial-gradient(900px 520px at 78% -12%, rgba(0, 135, 216, .1), transparent 60%),
        radial-gradient(720px 480px at 8% 112%, rgba(139, 63, 240, .07), transparent 55%),
        linear-gradient(170deg, #eef4fd 0%, #eaf1fc 55%, #f0ecfb 100%);
    --surface: rgba(255, 255, 255, .92);
    --surface-solid: #ffffff;
    --border: #c9d8f0;
    --text: #12203a;
    --text-soft: #52648a;
    --placeholder: #93a3c2;
    --accent: #0087d8; --accent-2: #8b3ff0; --accent-strong: #016cb0;
    --sur-accent: #fff;
    --accent-soft: rgba(0, 135, 216, .12); --accent-tint: rgba(0, 135, 216, .07);
    --danger: #d61f5e; --danger-soft: rgba(214, 31, 94, .1);
    --success: #0f8a55; --success-soft: rgba(15, 138, 85, .12);
    --warning: #a86a00; --warning-soft: rgba(168, 106, 0, .13);
    --shadow: 0 1px 2px rgb(30 60 120 / .08), 0 14px 40px rgba(0, 110, 220, .14);
    --topbar-bg: rgba(240, 246, 254, .85);
    --hover: rgba(20, 50, 110, .05);
    --raise: rgba(20, 50, 110, .04);
    --input-bg: #f2f6fd;
    --sunken: rgba(20, 50, 110, .04);
}
/* Les boutons rayonnent : le dégradé maison passe au cyan→magenta et
   gagne une lueur ; les tuiles du tableau de bord portent le liseré
   néon en rotation (statique si l'utilisateur préfère moins de
   mouvement). Le contenu des tuiles flotte au-dessus du masque. */
:root[data-style="neon"] .btn-primary {
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent),
        0 6px 20px rgba(0, 0, 0, .3);
}
:root[data-style="neon"] .kpi-card {
    position: relative;
    overflow: hidden;
    border-color: transparent;
}
:root[data-style="neon"] .kpi-card::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 620px;
    height: 620px;
    translate: -50% -50%;
    background: conic-gradient(#00b7ff, #b44bff, #ff30ff, #00b7ff);
    animation: kf-neon-tour 5s linear infinite;
}
:root[data-style="neon"] .kpi-card::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 10px;
    background: var(--surface-solid);
}
:root[data-style="neon"][data-theme="light"] .kpi-card::after { background: #ffffff; }
:root[data-style="neon"] .kpi-card > * {
    position: relative;
    z-index: 1;
}
:root[data-style="neon"] .kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent);
}
@keyframes kf-neon-tour {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    :root[data-style="neon"] .kpi-card::before { animation: none; }
}

* { box-sizing: border-box; }

html { min-height: 100%; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--body-grad);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font);
    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: var(--raise);
    border: 1.5px solid var(--border);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--text-soft);
    padding: 8px 10px;
    border-radius: 10px;
    transition: background .15s, border-color .15s;
}

.theme-toggle:hover { background: var(--hover); border-color: var(--text-soft); }
.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: var(--radius-pilule);
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s, transform .15s, box-shadow .15s;
}

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

.techbtn.active {
    color: var(--sur-accent);
    background: var(--degrade-actif);
    border-color: transparent;
}

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

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

/* La pleine envergure : pour les pages-outils denses (le Stock et son
   rail + huit colonnes) — tout se contrôle d'un regard, sans défilement
   horizontal sur un écran de bureau. */
.container-max { max-width: 1580px; }

/* ---------- 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); }
/* Le geste a abouti, mais quelque chose n'a pas suivi (un SMS non parti) : on le dit sans le dramatiser. */
.flash-warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-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: var(--radius-pilule);
}

.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: var(--degrade-actif); color: var(--sur-accent); }

/* ---------- 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"], input[type="date"], input[type="url"], input[type="time"],
input[type="search"], select, textarea {
    width: 100%;
    padding: 13px 15px;
    font-size: 16px;
    font-family: inherit;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-champ);
    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); }

/* Régime fiscal : deux cartes à cocher, la choisie s'allume. */
.regime-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; }
.regime-carte {
    display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; cursor: pointer;
    border: 1.5px solid var(--border); border-radius: 12px; background: var(--sunken);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.regime-carte:hover { border-color: var(--accent); }
.regime-carte.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-tint); }
.regime-carte input { position: absolute; opacity: 0; pointer-events: none; }
.regime-titre { font-weight: 800; font-size: 14.5px; }
.regime-desc { font-size: 12.5px; color: var(--text-soft); line-height: 1.5; }
.regime-desc strong { color: var(--text); }

/* Le bandeau « un ticket t'attend » — pleine largeur, cliquable,
   visible de l'autre bout du comptoir sans hurler. */
.ticket-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 28px; font-size: 14px; text-decoration: none;
    color: var(--accent-strong); background: var(--accent-soft);
    border-bottom: 2px solid var(--accent);
    transition: background .15s;
}
.ticket-bar:hover { background: var(--accent-tint); }
.ticket-bar strong { color: var(--text); }
.ticket-bar-point {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
    background: #e5484d; color: #fff; font-size: 13px; font-weight: 800;
    animation: ticket-pulse 2.4s ease-in-out infinite;
}
.ticket-bar-cta { margin-left: auto; font-weight: 700; }
@keyframes ticket-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); }
    50% { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0); }
}
@media (prefers-reduced-motion: reduce) { .ticket-bar-point { animation: none; } }

/* La pastille de notification (assistance / supervision). */
.notif-lien { position: relative; }
.notif-pastille {
    position: absolute; top: -7px; right: -13px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; background: #e5484d; color: #fff;
    font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
    box-shadow: 0 0 0 2px var(--topbar-bg);
}

/* Quantités : un champ court mais LISIBLE — padding réduit, chiffre
   centré, spinners natifs retirés (ils cachaient la valeur à 64 px). */
.qte-input {
    max-width: 84px;
    padding: 11px 8px;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.qte-input::-webkit-outer-spin-button,
.qte-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Champ date relié au calendrier maison : l'icône native du navigateur
   s'efface — le popover au thème prend le relais (natif au tactile). */
input[data-calendrier-target="date"]::-webkit-calendar-picker-indicator { display: none; }

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: var(--radius-pilule);
}

.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: var(--radius-pilule);
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s, transform .15s, box-shadow .15s;
}

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

.unlock-methods button.active {
    color: var(--sur-accent);
    background: var(--degrade-actif);
    border-color: transparent;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}

.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: color .12s, background .12s, border-color .12s, transform .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: var(--sur-accent);
    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: var(--radius-btn);
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s, transform .05s, background .15s;
}

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

.btn-primary {
    background: var(--degrade-actif);
    color: var(--sur-accent);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 30%, transparent);
}
.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; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

.subnav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--text-soft);
    font-weight: 600;
    font-size: 14.5px;
    padding: 9px 16px;
    border-radius: var(--radius-pilule);
    border: 1.5px solid var(--border);
    transition: color .15s, background .15s, border-color .15s, transform .15s, box-shadow .15s;
}

.subnav a:hover { color: var(--text); border-color: var(--text-soft); }
.subnav a.active {
    color: var(--sur-accent);
    background: var(--degrade-actif);
    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: var(--radius-pilule);
    border: 1.5px solid var(--border);
    transition: color .15s, background .15s, border-color .15s, transform .15s, box-shadow .15s;
}

.marque-pills a:hover { color: var(--text); border-color: var(--text-soft); }
.marque-pills a.active {
    color: var(--sur-accent);
    background: var(--degrade-actif);
    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: var(--radius-pilule);
    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: var(--radius) !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: var(--radius-pilule);
    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: var(--radius-pilule);
    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; }

/* Ligne "à définir" : le prix se saisit et s'enregistre directement dans la liste */
.ds-row--saisie { padding: 6px 15px 6px 0; }
.ds-nom--btn {
    background: transparent;
    border: none;
    padding: 11px 0 11px 15px;
    font: inherit;
    font-weight: 550;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    flex: 1;
}
.ds-prix-form { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ds-prix-input {
    width: 88px;
    padding: 6px 9px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    text-align: right;
    background: var(--surface, #fff);
}
.ds-prix-input:focus { outline: none; border-color: var(--accent); }
.ds-prix-euro { color: var(--text-soft); font-size: 14px; }
.ds-prix-save {
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 5px 9px;
    cursor: pointer;
    font-size: 14px;
}
.ds-prix-save:hover { border-color: var(--accent); }
.ds-prix-save:disabled { opacity: 0.5; cursor: default; }
.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); }

/* Carte d'alerte du tableau de bord (stock bas, SMS) : une ligne, un lien pour agir. */
.card-alerte {
    display: block;
    color: inherit;
    text-decoration: none;
    border-color: var(--warning-soft);
}
.card-alerte a { color: var(--accent-strong); font-weight: 700; text-decoration: none; }
.card-alerte a:hover { text-decoration: underline; }

.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; }

/* La grille des journées (Statistiques › Temps) : lignes = techniciens,
   colonnes = jours du mois. L'intensité d'une case dit la charge de la
   journée — l'échelle vient du template (--part, repère 7 h). */
.tmp-grille { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.tmp-grille th,
.tmp-grille td {
    padding: 8px 4px;
    text-align: center;
    border: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    white-space: nowrap;
}
.tmp-grille th { color: var(--text-soft); font-weight: 650; background: var(--sunken); }
.tmp-ini { display: block; font-size: 10px; letter-spacing: .5px; opacity: .7; }
.tmp-grille .tmp-nom { text-align: left; font-weight: 550; padding: 8px 12px; min-width: 120px; }
.tmp-plein { background: color-mix(in srgb, var(--accent) calc(var(--part) * .35), transparent); font-weight: 650; }
.tmp-vide { color: var(--placeholder); }
.tmp-dim { background: var(--sunken); }
td.tmp-plein.tmp-dim { background: color-mix(in srgb, var(--accent) calc(var(--part) * .35), var(--sunken)); }
th.tmp-auj { box-shadow: inset 0 -2px 0 var(--accent); }
.tmp-tot { color: var(--accent-strong); font-weight: 700; background: var(--sunken); }

/* La bulle d'info des cases (contrôleur bulle) : en fixed sur le body,
   jamais rognée par le défilement horizontal de la grille. */
.bulle {
    position: fixed;
    z-index: 60;
    background: var(--surface-solid);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 550;
    box-shadow: var(--shadow);
    pointer-events: none;
    white-space: nowrap;
}

/* 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; }
/* Le lien-cible d'une ligne cliquable : le VRAI lien que le clavier atteint
   — la ligne entière n'est qu'un raccourci de souris (ligne_lien_controller). */
.ligne-cible { color: var(--text); font-weight: 700; text-decoration: none; transition: color .12s; }
.ligne-cible:hover { color: var(--accent-strong); text-decoration: underline; }
.ligne-cible:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

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

/* ---------- Badges de statut ---------- */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-pilule);
    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: var(--radius-pilule);
    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 {
    /* inline-block : un span inline ignore width/height — hors d'un flex
       (label dans un .field, par exemple), la pilule disparaissait. */
    display: inline-block;
    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; }
}


/* ── Fil d'Ariane des statuts (fiche dossier) : un clic = un statut ── */
.fil-statuts {
    display: flex;
    align-items: center;
    justify-content: center;   /* la frise trône au centre */
    gap: 5px;
    flex-wrap: wrap;
    width: 100%;
    margin: 4px 0 6px;
}
.fil-statut {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: var(--radius-pilule);
    border: 2px solid var(--border);
    background: var(--card, transparent);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-soft);
    transition: border-color .25s, background .25s, color .25s, transform .15s;
}
.fil-statut:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
.fil-statut.fait {
    border-color: var(--success, #1f8a5b);
    color: var(--success, #1f8a5b);
    background: color-mix(in srgb, var(--success, #1f8a5b) 12%, transparent);
}
.fil-statut.actuel {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--sur-accent);
    cursor: default;
    opacity: 1;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 45%, transparent);
}
.fil-statut .fs-point { font-size: 12px; font-weight: 800; }
.fil-lien { width: 16px; height: 2.5px; background: var(--border); flex-shrink: 0; border-radius: 2px; }
.fil-lien.fait { background: var(--success, #1f8a5b); }
@media (max-width: 900px) {
    .fil-statut .fs-label { font-size: 12px; }
    .fil-lien { display: none; }
}

/* ── Pilotage du dossier : avancement + actions mises en avant ────── */
.pilotage { margin-bottom: 18px; }
.pil-titre {
    display: block; text-align: center; margin-bottom: 10px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-soft);
}
/* Sous la frise : ce que le prochain clic déclenchera côté SMS, dit avant plutôt que subi après. */
.pil-note {
    margin: 2px 0 0;
    text-align: center;
    font-size: 12.5px;
    font-weight: 550;
    color: var(--text-soft);
}
.pil-note.attention { color: var(--warning); }
.pil-note a { color: inherit; font-weight: 750; text-decoration: none; }
.pil-note a:hover { text-decoration: underline; }
.pil-actions {
    display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}
.btn-action {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 26px; border-radius: 12px;
    font-size: 15px; font-weight: 800; text-decoration: none;
    border: 2px solid var(--accent);
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    transition: transform .15s, box-shadow .2s;
}
.btn-action:hover { transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn-action-plein {
    background: var(--degrade-actif);
    border-color: transparent; color: var(--sur-accent);
}
@media (max-width: 640px) {
    .btn-action { flex: 1 1 auto; justify-content: center; }
}

/* ── Communication client (dossier → page de suivi publique) ───────── */
.sm-card {
    border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-solid));
}
.sm-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sm-tete h2 { margin: 0; }
.sm-vis {
    font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
    padding: 4px 11px; border-radius: var(--radius-pilule);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent-strong);
}
.sm-lien { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--accent-strong); }
.sm-message { display: flex; align-items: baseline; gap: 10px; padding: 8px 2px; border-bottom: 1px dashed var(--border); }
.sm-texte { flex: 1; line-height: 1.45; }
.sm-date { color: var(--text-soft); font-size: 12px; white-space: nowrap; }
.sm-message form { display: inline; }
.sm-suppr { border: none; background: none; color: var(--text-soft); cursor: pointer; font-size: 13px; padding: 2px 7px; border-radius: 6px; }
.sm-suppr:hover { background: var(--danger-soft); color: var(--danger); }
.sm-form { display: flex; gap: 8px; margin-top: 12px; }
.sm-form input[type="text"] { flex: 1; }
@media (max-width: 640px) {
    .sm-form { flex-direction: column; }
}

/* ── Zone danger du dossier : suppression (pouvoir pec.supprimer) ──── */
.pec-danger { display: flex; justify-content: center; margin: 6px 0 24px; }
.btn-danger-doux {
    border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
    background: transparent; color: var(--danger);
    padding: 9px 18px; border-radius: 10px; cursor: pointer;
    font-size: 13.5px; font-weight: 700;
    transition: background .2s, color .2s;
}
.btn-danger-doux:hover { background: var(--danger); color: #fff; }

/* ── Factures ──────────────────────────────────────────────────────── */
.fa-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }

/* ── La pilule .chip — partout : barres de filtres, pagination,
      variables de SMS, états de rendez-vous. Un bouton-chip reste une
      pilule (fond neutre, pas le look bouton du navigateur). ────────── */
.filtre-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 14px; }
.chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px; border-radius: var(--radius-pilule);
    border: 1.5px solid var(--border); background: transparent; color: var(--text-soft);
    text-decoration: none; font: inherit; font-size: 13.5px; font-weight: 700;
    transition: border-color .2s, color .2s, background .2s;
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip.actif {
    border-color: var(--accent); color: var(--sur-accent);
    background: var(--degrade-actif);
}
.filtre-chips .chip-n {
    font-size: 11.5px; padding: 1px 8px; border-radius: var(--radius-pilule);
    background: var(--accent-soft); color: var(--accent-strong);
}
.filtre-chips .chip.actif .chip-n { background: rgba(255, 255, 255, .22); color: var(--sur-accent); }
.filtre-form {
    display: flex; gap: 14px 22px; align-items: center; flex-wrap: wrap;
    margin: 0 0 22px; padding: 14px 18px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 13.5px; color: var(--text-soft);
}
.filtre-groupe { display: inline-flex; align-items: center; gap: 9px; }
.filtre-titre { font-weight: 800; color: var(--text); }
.filtre-form label { cursor: pointer; }
.filtre-form input[type="date"],
.filtre-form select {
    color-scheme: dark; /* le sélecteur natif suit le thème sombre */
    background: var(--surface-solid); border: 1.5px solid var(--border);
    color: var(--text); border-radius: 10px; padding: 9px 12px;
    font: inherit; font-weight: 600;
    transition: border-color .2s;
}
:root[data-theme="light"] .filtre-form input[type="date"],
:root[data-theme="light"] .filtre-form select { color-scheme: light; }
.filtre-form input[type="date"]:focus,
.filtre-form select:focus { border-color: var(--accent); outline: none; }
.filtre-form select { max-width: 230px; }
.filtre-sav {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-pilule);
    font-weight: 700; transition: border-color .2s;
}
.filtre-sav:hover { border-color: var(--accent); }
.filtre-sav input { accent-color: var(--accent); }
.filtre-actions { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
@media (max-width: 760px) {
    .filtre-form { align-items: stretch; flex-direction: column; }
    .filtre-groupe { flex-wrap: wrap; }
    .filtre-actions { margin-left: 0; }
    .filtre-form select { max-width: none; width: 100%; }
}

/* ── Facture libre : catalogue au clic ─────────────────────────────── */
.fc-zone { position: relative; }
.fc-zone > input { width: 100%; }
.fc-resultats { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.fc-vide { color: var(--text-soft); font-size: 13px; padding: 4px 2px; }
.fc-modele { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.fc-modele-nom { font-weight: 800; font-size: 13.5px; margin-bottom: 8px; }
.fc-reps { display: flex; flex-wrap: wrap; gap: 7px; }
.fc-rep {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border-radius: var(--radius-pilule); cursor: pointer;
    border: 1.5px solid var(--border); background: none;
    color: var(--text); font-size: 12.5px; font-weight: 600;
    transition: border-color .15s, background .15s;
}
.fc-rep:hover { border-color: var(--accent); background: var(--accent-soft); }
.fc-prix { color: var(--accent-strong); font-weight: 800; }
.fc-prix-vide { color: var(--text-soft); font-weight: 500; font-style: italic; }
.fc-lien-fiche {
    align-items: center; gap: 6px; margin-left: 10px;
    font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: var(--radius-pilule);
    background: color-mix(in srgb, var(--success, #1f8a5b) 15%, transparent);
    color: var(--success, #1f8a5b);
}
.lf-occ {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    font-size: 12px; font-weight: 700; color: var(--text-soft); cursor: pointer;
    padding: 7px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-pilule);
}
.lf-occ:hover { border-color: var(--accent); }
.lf-occ input { accent-color: var(--accent); }
.lf-suppr {
    border: none; background: none; cursor: pointer;
    color: var(--text-soft); font-size: 14px; padding: 6px 9px; border-radius: 8px;
    transition: background .15s, color .15s;
}
.lf-suppr:hover { background: var(--danger-soft); color: var(--danger); }

/* ── Calendrier maison (champs date des filtres) ───────────────────── */
.filtre-groupe { position: relative; }
.filtre-form input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
.cal-pop {
    position: absolute; z-index: 1000;
    background: var(--surface-solid); border: 1px solid var(--border);
    border-radius: 14px; padding: 12px; width: 256px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .35);
}
.cal-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-mois { font-weight: 800; font-size: 13.5px; color: var(--text); text-transform: capitalize; }
.cal-nav {
    border: none; background: var(--accent-soft); color: var(--accent-strong);
    width: 27px; height: 27px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1;
    transition: background .15s, color .15s;
}
.cal-nav:hover { background: var(--accent); color: var(--sur-accent); }
.cal-sem {
    display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
    font-size: 10.5px; font-weight: 800; color: var(--text-soft); margin-bottom: 4px;
}
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-jour {
    border: none; background: none; color: var(--text);
    font-size: 12.5px; font-weight: 600; padding: 6px 0; border-radius: 8px; cursor: pointer;
    transition: background .12s, color .12s;
}
.cal-jour:hover { background: var(--accent-soft); color: var(--accent-strong); }
.cal-jour.auj { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-jour.on { background: var(--degrade-actif); color: var(--sur-accent); }
.cal-pied { display: flex; justify-content: space-between; margin-top: 8px; }
.cal-lien {
    border: none; background: none; color: var(--accent-strong);
    font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 7px; border-radius: 6px;
}
.cal-lien:hover { background: var(--accent-soft); }

/* ── Bouton en attente (imports de fichiers) ───────────────────────── */
button.patiente { position: relative; opacity: .8; overflow: hidden; }
button.patiente::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 45%;
    background: rgba(255, 255, 255, .75); border-radius: 2px;
    animation: patiente-balaie 1s ease-in-out infinite alternate;
}
@keyframes patiente-balaie { from { transform: translateX(-30%); } to { transform: translateX(230%); } }

/* ── Récapitulatif vivant de la facture libre ──────────────────────── */
.fl-total {
    margin-top: 18px; padding: 13px 18px; border-radius: 12px;
    background: var(--accent-soft); border: 1.5px solid var(--accent);
    color: var(--text); font-size: 16px; font-weight: 800;
}

/* La barre d'export comptable (liste des factures) : compacte, discrète. */
.export-comptable {
    display: flex; flex-direction: column; gap: 12px;
    margin: 0 0 16px; padding: 14px 16px;
    border: 1px dashed var(--border); border-radius: 12px;
}
.export-criteres { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.export-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.export-comptable .export-titre { font-weight: 700; font-size: 14px; margin-right: 4px; }
.export-comptable .export-ou { color: var(--muted); font-size: 13px; }
.export-comptable select, .export-comptable input[type="date"] {
    width: auto; flex: 0 1 auto; padding: 8px 11px; font-size: 14px;
}
.export-comptable .btn-export { padding: 9px 18px; font-size: 14.5px; }
.export-comptable .btn-export-pdf { padding: 9px 16px; font-size: 14px; }
@media (max-width: 640px) {
    .export-actions { flex-direction: column; }
    .export-actions .btn { width: 100%; }
}

/* ── Stock — les rayons ───────────────────────────────────────────────
   Le stock se lit par rayons (catégories) : sections repliables,
   valorisation par rayon, bandeau de rangement, gestion des rayons. */

/* Le nom d'article est LE lien de sa ligne — accessible au clavier,
   sans onclick sur la ligne. */
.stk-lien {
    color: var(--text); font-weight: 700; text-decoration: none;
    transition: color .12s;
}
.stk-lien:hover { color: var(--accent-strong); text-decoration: underline; }

/* Valeur d'achat (rayon ou ligne) : des chiffres qui s'alignent. */
.stk-rayon-val {
    font-variant-numeric: tabular-nums; font-weight: 700;
    color: var(--text-soft); white-space: nowrap;
}

/* Tri par en-tête de colonne : le lien reste discret, l'actif s'accentue. */
.th-tri { color: inherit; text-decoration: none; transition: color .12s; white-space: nowrap; }
.th-tri:hover { color: var(--accent-strong); }
.th-tri.actif { color: var(--accent-strong); }

/* Le bandeau « ranger » : une invitation, pas une alarme. */
.stk-ranger {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 14px; padding: 13px 16px;
    background: linear-gradient(100deg, var(--accent-soft), transparent 55%), var(--surface);
    border: 1px solid var(--border); border-radius: 12px;
    color: var(--text); text-decoration: none; font-size: 14px;
    transition: border-color .15s, transform .15s;
}
.stk-ranger:hover { border-color: var(--accent); transform: translateY(-1px); }
.stk-ranger-ico { font-size: 20px; flex-shrink: 0; }
.stk-ranger span:nth-child(2) { flex: 1; }

/* Les articles sans rayon ouvrent la page, surlignés : à ranger sur place. */
.stk-a-ranger {
    background: linear-gradient(var(--warning-soft), transparent 70%), var(--surface);
    margin-bottom: 16px;
}
.stk-a-ranger-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stk-a-ranger-tete h2 { margin: 0; }
.stk-a-ranger-liste { max-height: 320px; overflow-y: auto; }
.stk-a-ranger-ligne {
    display: grid; grid-template-columns: 1fr auto auto;
    align-items: center; gap: 12px;
    padding: 8px 2px; border-top: 1px solid var(--border);
}
.stk-a-ranger-ligne:first-child { border-top: none; }
.stk-a-ranger-qte { color: var(--text-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stk-a-ranger-ligne select { width: auto; min-width: 190px; padding: 6px 10px; font-size: 13px; }
@media (max-width: 700px) {
    .stk-a-ranger-ligne { grid-template-columns: 1fr auto; }
    .stk-a-ranger-qte { display: none; }
}

/* Intérieur des blocs repliés (ajout d'article, gestion des rayons). */
.stk-bloc { padding: 16px; }

/* La supervision à deux colonnes : le rail des boutiques à gauche, la
   fiche à droite — la liste ne devient pas un mur de tuiles à 50 clientes. */
.sup-layout {
    display: grid; grid-template-columns: 285px minmax(0, 1fr);
    gap: 18px; align-items: start; margin-top: 4px;
}
.sup-rail {
    position: sticky; top: 84px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 10px 8px;
    max-height: calc(100vh - 110px); overflow-y: auto;
}
.sup-rail .stk-rail-item { flex-wrap: wrap; }
.sup-rail .badge { font-size: 10.5px; }
.sup-rail-cherche {
    width: 100%; margin: 4px 0 8px;
    padding: 7px 10px; font-size: 13px;
}
.sup-rail-vide { padding: 10px; font-size: 12.5px; color: var(--text-soft); }
.sup-suspendue { opacity: .55; }
/* Les enseignes : un titre de groupe dans le rail, ses boutiques en retrait ;
   une ligne de groupe dans le tableau. */
.sup-rail-groupe {
    font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
    color: var(--text-soft); font-weight: 650; padding: 12px 10px 4px;
}
.sup-rail .stk-rail-item.dans-groupe { margin-left: 10px; }
/* Le titre d'une enseigne ouvre son panel : ce que voit sa direction. */
a.sup-rail-panel { display: flex; justify-content: space-between; text-decoration: none; border-radius: 8px; transition: color .12s, background .12s; }
a.sup-rail-panel:hover { color: var(--accent-strong); background: var(--accent-tint); }
.sup-rail-panel-ico { opacity: .6; }
.sup-groupe-ligne td {
    background: var(--sunken); font-weight: 650; font-size: 12.5px;
    padding: 5px 12px; border-bottom: 1px solid var(--border);
}
/* Le tableau des boutiques reste léger à cinquante lignes : cellules
   serrées, nom sur une ligne (le titre complet au survol). */
.sup-table td, .sup-table th { padding: 5px 10px; line-height: 1.3; font-size: 13px; }
.sup-table .sup-nom { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-table .btn-sm { padding: 4px 9px; font-size: 12px; }
/* Les comptes d'une boutique : une ligne-volet par compte — le clic sur
   la ligne ouvre tout ce qui se gère (rôle, accès, pouvoirs, mot de passe). */
.sup-compte { margin: 6px 0; }
.sup-compte summary .muted { font-weight: 400; font-size: 12.5px; margin-left: 8px; }
.sup-compte summary .badge { margin-left: 8px; }
.sup-compte-corps { padding: 12px 14px 14px; border-top: 1px solid var(--border); }
.sup-compte-corps .grid-2 { margin-bottom: 4px; }
.sup-contenu { min-width: 0; }
@media (max-width: 1000px) {
    .sup-layout { grid-template-columns: 1fr; }
    .sup-rail { position: static; max-height: 260px; }
}

/* Les trois formules dans la fiche : comparer et changer sans quitter
   la page — la courante se distingue, la conseillée s'annonce. */
.abo-formules {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px; margin: 18px 0 4px;
}
.abo-formule {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--raise);
    transition: border-color .15s, transform .15s;
}
.abo-formule:hover { border-color: var(--accent); transform: translateY(-1px); }
.abo-formule.actuelle { border-color: var(--success); background: var(--success-soft); }
.abo-formule.conseillee:not(.actuelle) { border-color: var(--accent); }
.abo-f-nom { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.abo-f-prix { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.abo-f-prix small { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.abo-f-slogan { color: var(--text-soft); font-size: 12.5px; }
.abo-f-plus { font-size: 12.5px; line-height: 1.4; margin: 6px 0 10px; flex: 1; }
.abo-f-actuelle {
    text-align: center; font-size: 12.5px; font-weight: 650;
    color: var(--text-soft); padding: 7px 0;
}

/* Les gestes de l'abonnement : l'action courante d'abord, la
   résiliation à côté mais sans crier, l'explication en dessous. */
.abo-actions {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 20px;
}
.abo-actions .hint { flex-basis: 100%; margin: 0; }
.abo-detail { margin-top: 20px; }
.abo-detail summary {
    cursor: pointer; font-size: 13.5px; font-weight: 650; color: var(--text-soft);
    padding: 6px 0;
}
.abo-detail summary:hover { color: var(--accent-strong); }
.abo-pied {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* Les contrôles avant vitrine : tant qu'ils ne sont pas cochés, le bloc
   se signale ; une fois en règle, il se fait discret. */
.rac-controles {
    border: 1px solid var(--warning); border-radius: var(--radius);
    background: var(--warning-soft);
    padding: 14px 16px; margin-bottom: 18px;
    transition: border-color .15s, background .15s;
}
.rac-controles.ok { border-color: var(--success); background: var(--success-soft); }
.rac-controles h3 { margin: 0 0 10px; font-size: 15px; }
.rac-check { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; cursor: pointer; }
.rac-check input { margin-top: 3px; flex-shrink: 0; }
.rac-check strong { display: block; font-weight: 650; }
.rac-check small { color: var(--text-soft); font-size: 12.5px; line-height: 1.4; }

/* La vie d'un objet racheté : les gestes du comptoir, sur une ligne. */
.rac-vie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rac-vie-form { display: flex; align-items: center; gap: 8px; }
.rac-vie-form input { width: 160px; }

/* Le catalogue proposé SOUS le champ (marque et modèle du tunnel) : une
   liste ancrée, jamais la datalist native qui se posait hors de l'écran. */
/* L'ancre entoure l'input SEUL : la liste tombe juste sous lui, jamais
   sous le hint qui suit. */
.cat-ancre { position: relative; }
.cat-liste {
    position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
    margin-top: 3px; max-height: 280px; overflow-y: auto;
    background: var(--surface-solid); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow);
}
.cat-liste:empty { display: none; }
.cat-item {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    width: 100%; padding: 9px 13px;
    background: none; border: none; border-top: 1px solid var(--border);
    color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
    transition: background .12s;
}
.cat-item:first-child { border-top: none; }
.cat-item:hover, .cat-item:focus-visible { background: var(--accent-tint); }
.cat-nom { font-weight: 600; }
.cat-marque { color: var(--text-soft); font-size: 12.5px; white-space: nowrap; }

/* Le ménage du catalogue : supprimer un modèle depuis son accordéon. */
.modele-suppr { display: flex; justify-content: flex-end; padding: 8px 12px 0; }

/* Les dossiers mis de côté : le comptoir s'interrompt, pas le travail. */
.steps .pause-form { margin-left: auto; align-self: center; }
.pause-carte {
    background: linear-gradient(100deg, var(--accent-soft), transparent 55%), var(--surface);
    margin-bottom: 16px;
    padding-top: 14px; padding-bottom: 10px;
}
.pause-carte h2 { margin: 0 0 6px; font-size: 16px; }
.pause-ligne {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 2px; border-top: 1px solid var(--border);
}
.pause-ligne:first-of-type { border-top: none; }
.pause-label { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pause-quand { color: var(--text-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Tuile banque (Finances) : la croix se découvre au survol ---------- */
.kpi-banque { position: relative; }
.kpi-banque .kpi-label a { color: var(--accent-strong); font-weight: 650; text-decoration: none; }
.kpi-banque .kpi-label a:hover { text-decoration: underline; }
.kpi-fermer-form { position: absolute; top: 6px; right: 8px; margin: 0; }
.kpi-fermer {
    border: none; background: none; cursor: pointer; padding: 4px 7px;
    color: var(--text-soft); font-size: 12px; line-height: 1; border-radius: 8px;
    opacity: 0; transition: opacity .15s, background-color .15s;
}
.kpi-banque:hover .kpi-fermer, .kpi-fermer:focus-visible { opacity: 1; }
.kpi-fermer:hover { background: var(--hover); color: var(--text); }

/* ---------- Banque (Réglages › Banque) ---------- */
.banque-etat { margin: 4px 0 16px; }
.banque-orga { font-weight: 650; margin-bottom: 10px; }
.banque-comptes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.banque-compte {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 12px 16px; border: 1.5px solid var(--border); border-radius: var(--radius);
    background: var(--raise);
}
.banque-compte-nom { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banque-solde { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--accent-strong); }
.banque-option { margin: 0 0 14px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.banque-solde.hors-suivi { color: var(--text-soft); opacity: .6; text-decoration: line-through; }
.banque-compte label.sw-label { margin: 0; min-width: 0; }
/* L'encart-guide vers la clé Qonto : la main tendue avant les deux champs. */
.banque-guide {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 16px; margin-bottom: 16px;
    background: var(--raise); border: 1.5px solid var(--border); border-radius: var(--radius);
}
.banque-guide-ico { font-size: 22px; flex-shrink: 0; }
.banque-guide-txt { flex: 1; min-width: 220px; font-size: 13.5px; color: var(--text-soft); line-height: 1.5; }
.banque-guide-txt b { color: var(--text); }
.banque-guide-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* « Comment ça pointe ? » : quatre pas aérés plutôt qu'un pavé. */
.banque-etapes { display: flex; flex-direction: column; gap: 11px; margin: 2px 0 14px; }
.banque-etape { display: flex; gap: 12px; align-items: flex-start; }
.banque-etape-num {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent-strong); font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.banque-etape-txt { font-size: 13.5px; line-height: 1.55; color: var(--text-soft); }
.banque-etape-txt b { color: var(--text); font-weight: 650; }
.banque-astuce { margin: 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-soft); }

/* ---------- Packs de SMS (Réglages › SMS) ---------- */
.sms-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.sms-pack {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 16px 14px; border: 1.5px solid var(--border); border-radius: var(--radius);
    background: var(--raise); text-align: center;
}
.sms-pack.conseille { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sms-pack .badge { margin-bottom: 4px; }
.sms-pack-n { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.sms-pack-n small { font-size: 12px; font-weight: 700; color: var(--text-soft); }
.sms-pack-prix { font-size: 19px; font-weight: 800; color: var(--accent-strong); margin-top: 4px; }
.sms-pack-unit { font-size: 12px; color: var(--text-soft); margin-bottom: 10px; }
.sms-pack form, .sms-pack > a { width: 100%; margin-top: auto; }

/* Le lien direct de prise de rendez-vous et son QR de vitrine. */
.rdv-lien { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 14px; }
.rdv-lien-corps { flex: 1; min-width: 0; }
.rdv-lien-corps .v { word-break: break-all; }
.rdv-lien-qr {
    display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 10px; border-radius: 10px; background: #fff; border: 1px solid var(--border);
    text-decoration: none; font-size: 11.5px; font-weight: 700; color: var(--text-soft);
}
.rdv-lien-qr img { display: block; }
.rdv-lien-qr:hover { border-color: var(--accent); }
@media (max-width: 640px) { .rdv-lien { flex-direction: column; } }

/* Les horaires d'ouverture : une ligne par jour, deux plages, un jour fermé s'efface. */
.hor-table td { vertical-align: middle; }
.hor-plage { white-space: nowrap; }
.hor-plage input[type="time"] { width: auto; display: inline-block; padding: 6px 8px; font-variant-numeric: tabular-nums; }
.hor-table tr.ferme .hor-plage { opacity: .4; }
.hor-table tr:has(input[type="checkbox"]:checked) .hor-plage { opacity: 1; }
.hor-table tr:has(input[type="checkbox"]:not(:checked)) .hor-plage { opacity: .4; }

/* Un service piloté par switch dans la fiche boutique (supervision).
   « label.… » : il faut battre « .field label » qui repasserait en block. */
label.sw-label.opt-switch { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; font-size: inherit; }
.opt-switch .sw { margin-top: 2px; }
.opt-corps { flex: 1; }
/* Vert = le service est actif — un état de santé, pas une préférence.
   (label.… pour l'emporter sur le bleu accent du switch générique.) */
label.opt-switch input:checked ~ .sw { background: var(--success); border-color: var(--success); }

/* Un switch générique, hors des tuiles de pouvoirs. */
label.sw-label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; margin-bottom: 14px; }
.sw-label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-label input:checked ~ .sw { background: var(--accent); }
.sw-label input:checked ~ .sw::after { transform: translateX(16px); }
.sw-label input:focus-visible ~ .sw { outline: 3px solid var(--accent); outline-offset: 2px; }
.sw-label input:disabled ~ .sw { opacity: .45; }
.sw-label input:disabled ~ span { color: var(--text-soft); }
/* Android : le switch Material vaut aussi pour ces labels génériques. */
:root[data-style="android"] .sw-label input:checked ~ .sw { background: var(--accent); border-color: var(--accent); }
:root[data-style="android"] .sw-label input:checked ~ .sw::after {
    /* La géométrie 18px vient de la base : seul le transform voyage. */
    background: var(--sur-accent); transform: translateX(16px) scale(1);
}

/* Les textes de SMS : les variables en chips, l'aperçu rendu, le compteur. */
.sms-gabarit { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.sms-gabarit textarea { font-family: inherit; }
.sms-variables { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 10px; }
.sms-variables .chip { cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.sms-apercu {
    display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline;
    padding: 10px 14px; border-radius: 10px; background: var(--sunken);
}
.sms-apercu .k { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.sms-apercu .v { font-size: 13.5px; line-height: 1.45; }
.sms-compteur { grid-column: 2; }
.sms-compteur.neg { color: var(--danger); font-weight: 700; }

/* ---------- Agenda (rendez-vous) ---------- */
/* Un jour à la fois : la navigation tient sur une ligne, la date en évidence. */
.rdv-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.rdv-date { font-size: 18px; font-weight: 800; }
.rdv-date::first-letter { text-transform: uppercase; }
.rdv-nav-droite { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.rdv-nav-droite input[type="date"] { width: auto; }

.rdv-liste { display: flex; flex-direction: column; }
.rdv-ligne {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 12px 8px;
    border-top: 1px solid var(--border);
}
.rdv-liste > .rdv-ligne:first-child { border-top: none; }
.rdv-heure { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent-strong); }
.rdv-duree { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-soft); }
.rdv-corps { min-width: 0; }
.rdv-qui { font-weight: 700; }
.rdv-qui .muted { font-weight: 500; margin-left: 6px; font-variant-numeric: tabular-nums; }
.rdv-quoi { color: var(--text-soft); font-size: 13px; margin-top: 2px; }
.rdv-actions { display: flex; gap: 8px; align-items: center; }
/* L'heure est passée sans pointage : la ligne s'efface, sans disparaître. */
.rdv-ligne.passe .rdv-heure { color: var(--warning); }
.rdv-ligne.annule .rdv-heure, .rdv-ligne.annule .rdv-qui { text-decoration: line-through; opacity: .55; }
.rdv-ligne.honore .rdv-heure { color: var(--success); }
/* Le titre d'un jour dans la liste « À venir » : un micro-label cliquable. */
.rdv-jour-titre {
    display: block; margin: 14px 0 2px; padding: 0 8px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-soft); text-decoration: none;
}
.rdv-jour-titre::first-letter { text-transform: uppercase; }
.rdv-jour-titre:hover { color: var(--accent-strong); }
.rdv-jour-titre + .rdv-ligne { border-top: none; }
@media (max-width: 640px) {
    .rdv-ligne { grid-template-columns: 64px minmax(0, 1fr); }
    .rdv-ligne > .badge, .rdv-actions { grid-column: 2; justify-self: start; }
}

/* Sur le tableau de bord : la carte du jour, même accent que les brouillons. */
.rdv-carte { background: linear-gradient(100deg, var(--accent-soft), transparent 55%), var(--surface); margin-bottom: 16px; }

/* Le fil du jour : une frise horizontale, les rendez-vous en pilules reliées. */
.rdvfil {
    display: flex; align-items: center; gap: 0;
    overflow-x: auto; padding: 8px 2px 6px; scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
.rdvfil-item { flex-shrink: 0; scroll-snap-align: center; }
.rdvfil-bulle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: var(--radius-pilule); cursor: pointer;
    border: 2px solid var(--border); background: var(--card, transparent); color: var(--text);
    font-size: 13.5px; font-weight: 650; white-space: nowrap;
    transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.rdvfil-bulle:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.rdvfil-heure { font-weight: 800; font-variant-numeric: tabular-nums; }
.rdvfil-etat { font-size: 11.5px; font-weight: 700; color: var(--text-soft); }
/* Les couleurs disent l'urgence : passé et validé, à venir, imminent, en retard. */
.rdvfil-bulle.honore { border-color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.rdvfil-bulle.honore .rdvfil-etat { color: var(--success); }
.rdvfil-bulle.absent { border-color: var(--border); opacity: .55; }
.rdvfil-bulle.absent .rdvfil-nom { text-decoration: line-through; }
.rdvfil-bulle.bientot { border-color: var(--warning); background: var(--warning-soft); }
.rdvfil-bulle.bientot .rdvfil-etat { color: var(--warning); }
.rdvfil-bulle.retard { border-color: var(--danger); background: var(--danger-soft); }
.rdvfil-bulle.retard .rdvfil-etat { color: var(--danger); }
/* Le prochain : plein, c'est lui qu'on regarde. */
.rdvfil-bulle.prochain.prevu, .rdvfil-bulle.prochain.bientot {
    border-color: transparent; color: var(--sur-accent, #fff);
    background: var(--degrade-actif);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 45%, transparent);
}
.rdvfil-bulle.prochain.prevu .rdvfil-etat, .rdvfil-bulle.prochain.bientot .rdvfil-etat { color: inherit; opacity: .9; }
.rdvfil-lien { width: 22px; height: 2.5px; background: var(--border); flex-shrink: 0; border-radius: 2px; }
.rdvfil-lien.fait { background: var(--success); }
@media (prefers-reduced-motion: reduce) { .rdvfil-bulle { transition: none; } }
.rdv-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.rdv-tete h2 { margin: 0; font-size: 16px; }

/* ── La grille de la semaine : heures en lignes, jours en colonnes, pastilles ── */
.agd-carte { padding: 0; overflow-x: auto; }
.agd {
    --agd-h: 56px;                      /* la hauteur d'une heure */
    display: grid;
    grid-template-columns: 52px repeat(7, minmax(112px, 1fr));
    grid-template-rows: auto calc(var(--agd-lignes) * var(--agd-h));
    min-width: 860px;
}
/* Les traits de la grille : plus légers que les bordures de l'app, comme Calendrier. */
.agd { --agd-trait: color-mix(in srgb, var(--border) 70%, transparent); }
.agd-coin { position: sticky; top: 0; z-index: 3; background: var(--surface-solid); border-bottom: 1px solid var(--border); }
/* L'en-tête d'un jour : le nom en petit, le numéro dans un disque — plein pour aujourd'hui. */
.agd-jour {
    position: sticky; top: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 6px; background: var(--surface-solid); border-bottom: 1px solid var(--border);
    font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--text-soft);
}
.agd-jour-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; border-radius: 50%;
    font-size: 17px; font-weight: 700; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums;
}
.agd-jour.auj .agd-jour-nom { color: var(--accent-strong); }
.agd-jour.auj .agd-jour-num { background: var(--accent); color: var(--sur-accent, #fff); font-weight: 800; }
.agd-jour.dim .agd-jour-num, .agd-jour.dim .agd-jour-nom { color: var(--text-soft); opacity: .7; }
.agd-jour-n {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent-strong); font-size: 11px; font-weight: 800;
}
/* Les heures : le libellé se cale sur son trait, comme dans Calendrier. */
.agd-heures { display: grid; grid-template-rows: repeat(var(--agd-lignes), var(--agd-h)); }
.agd-heure {
    position: relative; font-size: 11px; font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums;
    text-align: right; padding-right: 8px;
}
.agd-heure > span, .agd-heure { line-height: 1; }
.agd-heure { transform: translateY(-6px); }
.agd-col { position: relative; border-left: 1px solid var(--agd-trait); }
.agd-col.dim { background: color-mix(in srgb, var(--sunken) 45%, transparent); }
/* Chaque case vide : un « + » discret vers la prise à cette heure. */
.agd-case {
    display: flex; align-items: flex-start; justify-content: flex-end;
    height: var(--agd-h); padding: 4px 8px; border-top: 1px solid var(--agd-trait);
    color: transparent; text-decoration: none; font-weight: 800; transition: background .12s, color .12s;
}
.agd-case:hover { background: var(--hover); color: var(--accent-strong); }
/* Le trait rouge de l'heure qu'il est, dans la colonne du jour. */
.agd-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 2; pointer-events: none; }
.agd-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
/* L'événement : un bloc teinté, posé à son heure, haut comme sa durée. */
.agd-rdv { position: absolute; padding: 1px 2px; z-index: 1; }
/* Les calendriers du dehors : un fantôme hachuré sous les vraies pastilles —
   « occupé ailleurs », sans détail criard et sans interaction possible. */
.agd-ext {
    position: absolute; left: 2px; right: 2px; z-index: 0;
    border: 1px dashed var(--border); border-radius: 8px;
    background: repeating-linear-gradient(-45deg, transparent 0 5px, color-mix(in srgb, var(--text-soft) 12%, transparent) 5px 7px), var(--sunken);
    padding: 3px 7px; overflow: hidden;
}
.agd-ext-txt {
    display: block; font-size: 11px; font-weight: 550; color: var(--text-soft); font-style: italic;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* La journée entière (congés, salon…) : un ruban sous le numéro du jour. */
.agd-entiere {
    display: block; max-width: 100%; margin-top: 3px; padding: 1px 7px;
    border-radius: 999px; background: var(--sunken); border: 1px dashed var(--border);
    font-size: 10.5px; font-style: italic; color: var(--text-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Sous la grille : l'état des calendriers fusionnés, ou la porte pour en brancher. */
.agd-fusion {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 10px; padding: 10px 14px;
    background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius);
}
.agd-fusion-etat { font-size: 13px; color: var(--text-soft); }
.agd-fusion-etat b { color: var(--text); font-weight: 650; }
/* La gestion des calendriers fusionnés (Réglages › Rendez-vous). */
.agd-cals-liste { margin-bottom: 16px; }
.agd-cals-ligne {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 2px; border-bottom: 1px solid var(--border);
}
.agd-cals-ligne:last-child { border-bottom: none; }
.agd-cals-nom { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agd-cals-ajout { display: grid; grid-template-columns: 180px 1fr auto; gap: 10px; align-items: end; }
@media (max-width: 640px) { .agd-cals-ajout { grid-template-columns: 1fr; } }
/* Glisser-déposer : la pastille se soulève, un fantôme marque l'heure visée. */
.agd-rdv[draggable="true"] .agd-pastille { cursor: grab; }
.agd-rdv.en-vol { opacity: .45; }
.agd-rdv.en-vol .agd-pastille { cursor: grabbing; }
.agd-fantome { position: absolute; left: 2px; right: 2px; height: 2px; z-index: 3; pointer-events: none; background: var(--accent); }
.agd-fantome::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.agd-fantome::after {
    content: attr(data-heure); position: absolute; right: 4px; top: -20px;
    padding: 2px 7px; border-radius: 6px; background: var(--accent); color: var(--sur-accent, #fff);
    font-size: 11px; font-weight: 800; line-height: 1.4; font-variant-numeric: tabular-nums;
}
.agd-pastille {
    width: 100%; height: 100%; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: baseline;
    column-gap: 6px; row-gap: 1px;
    padding: 3px 7px; overflow: hidden; text-align: left; cursor: pointer;
    border: none; border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 22%, var(--surface-solid)); color: var(--accent-strong);
    box-shadow: inset 3px 0 0 var(--accent);
    font-size: 12.5px; line-height: 1.25;
    transition: transform .12s, box-shadow .15s, filter .15s;
}
.agd-pastille:hover { filter: brightness(1.06); box-shadow: inset 3px 0 0 var(--accent), var(--shadow); z-index: 2; }
.agd-pastille.honore { background: color-mix(in srgb, var(--success) 20%, var(--surface-solid)); color: var(--success); box-shadow: inset 3px 0 0 var(--success); }
.agd-pastille.absent { background: color-mix(in srgb, var(--warning) 22%, var(--surface-solid)); color: var(--warning); box-shadow: inset 3px 0 0 var(--warning); }
.agd-pastille.annule { background: var(--sunken); color: var(--text-soft); box-shadow: inset 3px 0 0 var(--border); opacity: .7; }
.agd-pastille.annule .agd-p-nom { text-decoration: line-through; }
.agd-p-heure { font-weight: 600; font-size: 11.5px; font-variant-numeric: tabular-nums; opacity: .85; }
.agd-p-nom { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.agd-p-quoi { color: var(--text-soft); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-basis: 100%; }
/* La bulle : la fiche du rendez-vous, et les gestes. */
dialog.agd-bulle { width: min(560px, 92vw); }

/* ── La grille suit le style du poste : Apple par défaut (ci-dessus),
      Windows (Calendrier de Windows : blocs pleins, jour souligné),
      Android (Google Agenda : cercle du jour, blocs pleins arrondis). ── */
:root[data-style="windows"] .agd { --agd-trait: var(--border); }
:root[data-style="windows"] .agd-jour {
    justify-content: flex-start; padding: 10px 12px; gap: 8px;
    text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--text);
    border-bottom: 2px solid transparent;
}
:root[data-style="windows"] .agd-jour-num { min-width: 0; height: auto; border-radius: 0; font-size: 13px; font-weight: 700; }
:root[data-style="windows"] .agd-jour.auj { border-bottom-color: var(--accent); }
:root[data-style="windows"] .agd-jour.auj .agd-jour-num { background: none; color: var(--accent-strong); }
:root[data-style="windows"] .agd-jour.auj .agd-jour-nom { color: var(--accent-strong); }
:root[data-style="windows"] .agd-heure { transform: none; padding-top: 4px; font-size: 12px; }
:root[data-style="windows"] .agd-case { border-top-color: var(--border); }
:root[data-style="windows"] .agd-pastille {
    border-radius: 4px; box-shadow: none;
    background: var(--accent); color: var(--sur-accent, #fff);
    border-left: 4px solid color-mix(in srgb, var(--accent) 60%, #000);
}
:root[data-style="windows"] .agd-pastille:hover { filter: brightness(1.08); box-shadow: 0 2px 8px rgb(0 0 0 / .3); }
:root[data-style="windows"] .agd-pastille.honore { background: var(--success); color: #fff; border-left-color: color-mix(in srgb, var(--success) 60%, #000); box-shadow: none; }
:root[data-style="windows"] .agd-pastille.absent { background: var(--warning); color: #fff; border-left-color: color-mix(in srgb, var(--warning) 60%, #000); box-shadow: none; }
:root[data-style="windows"] .agd-pastille.annule { background: var(--sunken); color: var(--text-soft); border-left-color: var(--border); box-shadow: none; }
:root[data-style="windows"] .agd-p-heure, :root[data-style="windows"] .agd-pastille.honore .agd-p-heure { color: inherit; opacity: .85; }
:root[data-style="windows"] .agd-p-quoi { color: inherit; opacity: .8; }
:root[data-style="windows"] .agd-now { background: var(--accent); }
:root[data-style="windows"] .agd-now::before { background: var(--accent); }

:root[data-style="android"] .agd-jour { flex-direction: column; gap: 2px; padding: 8px 6px 6px; font-size: 11px; letter-spacing: .06em; }
:root[data-style="android"] .agd-jour-num { min-width: 36px; height: 36px; font-size: 20px; font-weight: 500; }
:root[data-style="android"] .agd-jour.auj .agd-jour-num { font-weight: 600; }
:root[data-style="android"] .agd-jour-n { position: absolute; top: 6px; right: 6px; }
:root[data-style="android"] .agd-heure { font-size: 10.5px; font-weight: 500; }
:root[data-style="android"] .agd-pastille {
    border-radius: 6px; box-shadow: none;
    background: var(--accent); color: var(--sur-accent, #fff);
    font-size: 12px; padding: 4px 8px;
}
:root[data-style="android"] .agd-pastille:hover { filter: brightness(1.06); box-shadow: 0 1px 3px 1px rgb(0 0 0 / .25); }
:root[data-style="android"] .agd-pastille.honore { background: var(--success); color: #fff; box-shadow: none; }
:root[data-style="android"] .agd-pastille.absent { background: var(--warning); color: #fff; box-shadow: none; }
:root[data-style="android"] .agd-pastille.annule { background: var(--sunken); color: var(--text-soft); box-shadow: none; }
:root[data-style="android"] .agd-p-heure, :root[data-style="android"] .agd-pastille.honore .agd-p-heure { color: inherit; opacity: .85; font-weight: 500; }
:root[data-style="android"] .agd-p-nom { font-weight: 500; }
:root[data-style="android"] .agd-p-quoi { color: inherit; opacity: .8; }
:root[data-style="android"] .agd-now::before { left: -6px; top: -5px; width: 12px; height: 12px; }
.agd-bulle-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.agd-bulle-etats { display: flex; gap: 6px; margin-left: auto; }

/* La prise : le formulaire, et à droite ce qui est déjà noté ce jour-là. */
.rdv-prise { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.rdv-colonne { position: sticky; top: 84px; }
.rdv-col-jour { font-weight: 800; margin-bottom: 10px; }
.rdv-col-jour::first-letter { text-transform: uppercase; }
.rdv-col-ligne {
    display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
    padding: 7px 0; border-top: 1px solid var(--border);
}
.rdv-col-ligne:first-child { border-top: none; }
.rdv-col-heure { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent-strong); }
.rdv-col-nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdv-col-duree { font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.rdv-col-ligne.annule .rdv-col-heure, .rdv-col-ligne.annule .rdv-col-nom { text-decoration: line-through; opacity: .55; }
.rdv-col-vide { margin: 4px 0 0; font-size: 13px; }
@media (max-width: 900px) {
    .rdv-prise { grid-template-columns: 1fr; }
    .rdv-colonne { position: static; }
}

/* La fiche : les gestes en tête, les états en chips. */
.rdv-gestes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rdv-statuts { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.rdv-statuts .chip { cursor: pointer; }
.rdv-statuts .chip:disabled { cursor: default; }

/* Une ligne de rayon dans la gestion : édition, ordre, suppression. */
.stk-cat-ligne {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 0; border-top: 1px solid var(--border); margin-top: 9px;
}
.stk-cat-ligne:first-of-type { border-top: none; }
.stk-cat-form { flex: 1; min-width: 260px; flex-wrap: nowrap; }
.stk-cat-n { font-size: 12.5px; white-space: nowrap; }

/* La quantité suggérée de la liste de courses. */
.stk-suggestion { color: var(--accent-strong); font-variant-numeric: tabular-nums; }

/* Prix et quantités : jamais coupés en deux lignes. */
.stk-prix { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Le rail des rayons : la navigation technique du stock — une colonne
   collée au défilement, chiffres alignés, trente rayons sans déborder. */
.stk-layout {
    display: grid; grid-template-columns: 295px minmax(0, 1fr);
    gap: 18px; align-items: start; margin-top: 4px;
}
/* Les noms d'articles restent sur une ligne — la table défile au besoin. */
.stk-layout .pec-table td:first-child { white-space: nowrap; }

/* Densité « outil » à côté du rail : cellules resserrées, huit colonnes
   qui tiennent. Le clic se fait sur le nom, pas sur la ligne. */
.stk-layout .pec-table th { padding: 10px 12px; }
.stk-layout .pec-table td { padding: 10px 12px; font-size: 13.5px; }
.stk-layout .pec-table tbody tr { cursor: default; }

/* Géométrie de colonnes COMMUNE à tous les rayons : chaque section est
   une table, mais les colonnes tombent au même endroit partout — l'œil
   descend de haut en bas comme dans un seul grand tableau. */
.stk-layout .pec-table { table-layout: fixed; min-width: 1010px; }
.stk-layout .pec-table th:nth-child(2) { width: 200px; } /* Référence */
.stk-layout .pec-table th:nth-child(3) { width: 130px; } /* Emplacement */
.stk-layout .pec-table th:nth-child(4) { width: 112px; } /* En stock */
.stk-layout .pec-table th:nth-child(5) { width: 86px; }  /* Achat */
.stk-layout .pec-table th:nth-child(6) { width: 86px; }  /* Vente */
.stk-layout .pec-table th:nth-child(7) { width: 86px; }  /* Valeur */
.stk-layout .pec-table th:nth-child(8) { width: 130px; } /* Fournisseur */
.stk-layout .pec-table td { overflow: hidden; text-overflow: ellipsis; }
/* La quantité en stock se lit au centre de sa colonne. */
.stk-layout .pec-table th:nth-child(4),
.stk-layout .pec-table td:nth-child(4) { text-align: center; }
.stk-rail {
    position: sticky; top: 18px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 10px 8px;
}
.stk-rail-titre {
    font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
    color: var(--text-soft); font-weight: 650; padding: 4px 10px 8px;
}
.stk-rail-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 8px; border-left: 3px solid transparent;
    text-decoration: none; color: var(--text);
    font-size: 13.5px; font-weight: 600;
    transition: background .12s, border-color .12s, color .12s;
}
.stk-rail-item:hover { background: var(--accent-tint); }
.stk-rail-item.actif {
    background: var(--accent-soft); border-left-color: var(--accent);
    color: var(--accent-strong);
}
.stk-rail-nom { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-rail-val {
    font-size: 12px; color: var(--text-soft);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stk-rail-n {
    font-size: 11.5px; font-weight: 700; color: var(--text-soft);
    background: var(--raise); padding: 1px 7px;
    border-radius: var(--radius-pilule);
    min-width: 26px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.stk-rail-item.actif .stk-rail-n { background: var(--accent-soft); color: var(--accent-strong); }
.stk-rail-alerte { font-size: 11.5px; color: var(--warning); font-weight: 700; white-space: nowrap; }
.stk-rail-sep { height: 1px; background: var(--border); margin: 8px 6px; }
@media (max-width: 900px) {
    .stk-layout { grid-template-columns: 1fr; }
    .stk-rail { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
    .stk-rail-titre { width: 100%; padding-bottom: 4px; }
    .stk-rail-item { flex: 1 1 44%; border: 1px solid var(--border); }
    .stk-rail-item.actif { border-color: var(--accent); }
    .stk-rail-val { display: none; }
    .stk-rail-sep { display: none; }
}

/* Le glisser-déposer du stock : la ligne saisie s'estompe, le rayon
   survolé s'allume, la poignée ⠿ réordonne les rayons. */
.stk-layout tr[data-article] { cursor: grab; }
.stk-layout tr.drag-en-cours { opacity: .45; }
.stk-rail-item.drop-cible {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1.5px var(--accent);
    color: var(--accent-strong);
}
.stk-rail-aide {
    font-size: 11.5px; color: var(--text-soft);
    padding: 10px 10px 4px; line-height: 1.45;
}

/* Créer un rayon depuis le rail, sans quitter la page. */
.stk-rail-nouveau { margin-top: 8px; padding: 0 6px; }
.stk-rail-nouveau summary {
    cursor: pointer; list-style: none;
    font-size: 13px; font-weight: 650; color: var(--text-soft);
    padding: 7px 4px; border-radius: 8px;
    transition: color .15s, background .15s;
}
.stk-rail-nouveau summary:hover { color: var(--accent-strong); background: var(--hover); }
.stk-rail-nouveau input {
    width: 100%; margin: 6px 0 8px;
    padding: 7px 10px; font-size: 13px;
}
.stk-rail-etat { display: block; font-size: 12px; color: var(--text-soft); padding: 6px 2px 0; }
@media (max-width: 900px) { .stk-rail-nouveau { display: none; } }
.stk-grip {
    cursor: grab; color: var(--text-soft); user-select: none;
    font-size: 15px; padding: 0 4px; flex-shrink: 0;
}
.stk-grip:active { cursor: grabbing; }
.stk-cat-ligne.fantome { opacity: .4; }
@media (max-width: 900px) { .stk-rail-aide { display: none; } }

/* L'inventaire chiffré : mêmes largeurs de colonnes dans tous les rayons,
   les prix et valeurs s'empilent bien droit de haut en bas. */
.inv-grille .pec-table { table-layout: fixed; min-width: 1010px; }
.inv-grille .pec-table th { padding: 10px 12px; }
.inv-grille .pec-table td {
    padding: 10px 12px; font-size: 13.5px;
    overflow: hidden; text-overflow: ellipsis;
}
.inv-grille .pec-table tbody tr { cursor: default; }
.inv-grille .pec-table th:nth-child(2) { width: 150px; } /* Référence */
.inv-grille .pec-table th:nth-child(3) { width: 128px; } /* Emplacement */
.inv-grille .pec-table th:nth-child(4) { width: 90px; }  /* Achat */
.inv-grille .pec-table th:nth-child(5) { width: 90px; }  /* Vente */
.inv-grille .pec-table th:nth-child(6) { width: 96px; }  /* Valeur */
.inv-grille .pec-table th:nth-child(7) { width: 96px; }  /* Théorique */
.inv-grille .pec-table th:nth-child(8) { width: 110px; } /* Compté */
/* Les quantités (théorique et comptée) se lisent au centre. */
.inv-grille .pec-table th:nth-child(7), .inv-grille .pec-table td:nth-child(7),
.inv-grille .pec-table th:nth-child(8), .inv-grille .pec-table td:nth-child(8) { text-align: center; }

/* La zone de dépôt de fichiers (import) : dessinée en pointillés,
   elle s'allume au survol d'un fichier. */
.depot-zone {
    border: 2px dashed var(--border); border-radius: 12px;
    padding: 24px 16px; text-align: center; cursor: pointer;
    margin-bottom: 14px;
    transition: border-color .15s, background .15s;
}
.depot-zone:hover, .depot-zone.survol { border-color: var(--accent); background: var(--accent-tint); }
.depot-ico { font-size: 26px; margin-bottom: 4px; }
.depot-noms { margin-top: 8px; font-weight: 600; color: var(--accent-strong); font-size: 13px; }

/* La détection en direct du formulaire d'ajout : le rayon deviné s'annonce. */
.hint.stk-indice-ok { color: var(--accent-strong); font-weight: 600; }

/* Le filtre des longs sélecteurs (réception) : discret au-dessus de la liste. */
.fs-filtre {
    display: block; max-width: 240px; margin-top: 6px;
    padding: 7px 11px; font-size: 12.5px;
}

/* Réception : chaque article du bon se lit en deux rangées collées —
   les valeurs du bon en haut (article, réf, qté, achat, vente), la mise
   en stock dessous (filtre, article visé, rayon), centrée. */
tr.rcp-haut td { border-bottom: none; padding-bottom: 6px; }
tr.rcp-suite td { padding-top: 0; }
.pec-table tbody tr.rcp-haut, .pec-table tbody tr.rcp-suite { cursor: default; }
.pec-table tbody tr.rcp-haut:hover, .pec-table tbody tr.rcp-suite:hover { background: transparent; }
.rcp-ref .muted { font-size: 11.5px; }
.rcp-ref input { max-width: 190px; padding: 6px 10px; font-size: 12.5px; margin: 4px 0; }
.rcp-outils {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: wrap;
}
.rcp-outils .fs-filtre { margin-top: 0; flex: 0 1 210px; }
.rcp-article { flex: 0 1 340px; min-width: 220px; }
.rcp-rayon { flex: 0 1 220px; }
.rcp-etat { font-size: 11.5px; white-space: nowrap; }

/* La création de rayon à la volée, en tête d'aperçu de réception. */
.rcp-rayon-volee {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 18px; padding: 11px 16px;
    border: 1px dashed var(--border); border-radius: 12px;
    font-size: 13.5px;
}
.rcp-volee-titre { font-weight: 650; white-space: nowrap; }
.rcp-rayon-volee input { flex: 1 1 260px; max-width: 340px; padding: 8px 12px; font-size: 13.5px; }
.rcp-volee-etat { font-size: 12.5px; font-weight: 600; color: var(--accent-strong); }

/* Le rayon en tête de fiche article : un sélecteur compact, façon badge —
   choisir, c'est enregistré. */
.stk-rayon-fiche {
    display: inline-block; width: auto; max-width: 230px;
    padding: 5px 28px 5px 12px; margin-left: 8px;
    font-size: 12.5px; font-weight: 650;
    color: var(--accent-strong); background-color: var(--accent-soft);
    border: 1.5px solid transparent; border-radius: var(--radius-pilule);
    cursor: pointer; vertical-align: middle;
    transition: border-color .15s;
}
.stk-rayon-fiche:hover { border-color: var(--accent); }

/* ── Tarification de la fiche article ─────────────────────────────────
   Quatre chiffres qui se répondent : dernier achat, prix moyen pondéré,
   prix de vente, marge. */
.tar-chips {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.tar-chip {
    background: var(--raise); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 3px;
}
.tar-val { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tar-val.neg { color: var(--danger); }
.tar-lbl {
    font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
    color: var(--text-soft); font-weight: 650;
}

/* Le coefficient de marge, dans la gestion des rayons. */
.stk-coef { width: 74px; text-align: center; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* Les codes en vue sur la fiche : fond blanc obligatoire — une douchette
   ne lit rien sur fond sombre, même à l'écran. */
.cb-visuels { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; justify-content: center; margin-bottom: 12px; }
/* Le QR de la fiche article : ancré en HAUT à droite de la carte, en
   face du nom — hors du flux, le wrap ne le fait plus descendre. */
.stk-tete { position: relative; padding-right: 118px; }
.stk-tete .ch-qr { position: absolute; top: 0; right: 0; }
/* Étiquette et Archiver : la même carrure. */
.btn-egal { min-width: 132px; justify-content: center; }
.cb-carte {
    background: #fff; border-radius: 10px; padding: 12px 16px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.cb-carte.cb-barres svg { width: 250px; height: 62px; display: block; }
.cb-carte img { display: block; }
.cb-code { color: #111; font-size: 12.5px; font-variant-numeric: tabular-nums; letter-spacing: 2px; }
.cb-legende { font-size: 11.5px; color: var(--text-soft); text-align: center; margin-top: 5px; }

/* ── Finances — le graphe mensuel en CSS pur ──────────────────────────
   Douze mois, deux barres : ce qui rentre (accent), ce qui sort
   (orange doux). Thémable, imprimable, zéro bibliothèque. */
.fin-graphe {
    display: grid; grid-template-columns: repeat(12, 1fr);
    gap: 8px; height: 200px; align-items: end; margin-top: 8px;
}
.fin-mois { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.fin-barres {
    flex: 1; display: flex; align-items: flex-end; justify-content: center;
    gap: 3px; border-bottom: 1px solid var(--border); padding-bottom: 1px;
}
.fin-barre { width: 38%; max-width: 22px; border-radius: 3px 3px 0 0; min-height: 0; }
.fin-barre.fin-vente { background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.fin-barre.fin-depense { background: var(--warning); opacity: .75; }
.fin-nom {
    text-align: center; font-size: 10.5px; color: var(--text-soft);
    margin-top: 5px; white-space: nowrap; overflow: hidden;
}
.fin-legende { display: flex; gap: 18px; justify-content: center; margin-top: 12px; font-size: 12.5px; color: var(--text-soft); }
.fin-puce { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.fin-puce.fin-vente { background: var(--accent); }
.fin-puce.fin-depense { background: var(--warning); opacity: .75; }
.fin-pos { color: var(--success); }
.fin-neg { color: var(--danger); }
tr.fin-vide td { opacity: .45; }
tr.fin-total td { background: var(--sunken); border-top: 2px solid var(--border); }
/* Une ligne qui porte une destination se montre cliquable. */
tr[data-href] { cursor: pointer; }
.fin-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
/* La barre des grandes listes (Dossiers, Factures) : compte, taille de page, boutons. */
.pagination-liste { justify-content: space-between; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.pagination-liste .pg-compte { font-size: 13px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.pagination-liste .pg-tailles { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-soft); }
.pagination-liste .chip { padding: 5px 12px; font-size: 12.5px; }
.pagination-liste .pg-boutons { display: inline-flex; align-items: center; gap: 10px; }
.pagination-liste .pg-ou { font-size: 13px; color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-aide-regime { color: var(--warning); font-weight: 600; }
.fin-aide-regime:empty { display: none; }
.fin-prevision { display: flex; gap: 22px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.fin-prevision-chips { flex: 0 1 380px; }

/* ── Appareils du client & modale ─────────────────────────────────────
   Chaque appareil est une carte compacte ; le détail des réparations
   s'ouvre dans une <dialog> native — Échap, croix ou fond pour fermer. */
.app-grille {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px; margin-bottom: 16px;
}
.app-carte {
    display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
    padding: 16px; text-align: left; width: 100%;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    cursor: pointer; font: inherit; color: var(--text);
    transition: border-color .15s, transform .15s;
}
.app-carte:hover { border-color: var(--accent); transform: translateY(-2px); }
.app-ico { font-size: 22px; }
.app-nom { font-weight: 700; font-size: 15px; }
.app-meta { font-size: 12.5px; overflow-wrap: anywhere; }

dialog.modale {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface-solid); color: var(--text);
    padding: 0; width: min(780px, 92vw);
    box-shadow: var(--shadow);
}
dialog.modale::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); }
.modale-boite { padding: 20px; }
.modale-tete {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}

/* ── Accessibilité — Réglages › Apparence ─────────────────────────────
   Réglages du poste, cumulables, valables dans les cinq thèmes et les
   deux modes. Déclarés en fin de feuille : ils ont le dernier mot. */

/* Couleurs d'état distinguables (base Okabe-Ito) : succès, alerte et
   danger restent différenciables quel que soit le type de vision. */
:root[data-acc-couleurs] {
    --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-acc-couleurs][data-theme="light"] {
    --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);
}

/* Interface calme : plus aucune animation ni transition décorative
   (liseré Néon compris) — pour les personnes sensibles au mouvement. */
:root[data-acc-calme] *,
:root[data-acc-calme] *::before,
:root[data-acc-calme] *::after {
    animation: none !important;
    transition-duration: .01ms !important;
}

/* Interface agrandie : tout prend ~12 % de plus, d'un seul geste. */
:root[data-acc-grand] body { zoom: 1.12; }

/* Contraste renforcé : bordures et textes secondaires plus francs,
   focus clavier impossible à manquer. */
:root[data-acc-contraste]:not([data-theme="light"]) {
    --border: rgba(255, 255, 255, .34);
    --text-soft: rgba(240, 242, 250, .82);
    --placeholder: rgba(240, 242, 250, .5);
}
:root[data-acc-contraste][data-theme="light"] {
    --border: rgba(0, 0, 0, .45);
    --text-soft: rgba(15, 20, 35, .8);
    --placeholder: rgba(15, 20, 35, .5);
}
:root[data-acc-contraste] :focus-visible {
    outline: 3px solid var(--accent-strong);
    outline-offset: 2px;
}

/* Les lignes-interrupteurs de la carte Accessibilité. */
.acc-lignes { display: flex; flex-direction: column; gap: 10px; }
.acc-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px;
    font: inherit;
    text-align: left;
    color: var(--text);
    background: var(--raise);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-champ);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.acc-ligne:hover { border-color: var(--text-soft); }
.acc-ligne.on { border-color: var(--accent); background: var(--accent-tint); }
.acc-txt b { display: block; font-weight: 650; }
.acc-txt small { color: var(--text-soft); font-size: 13px; line-height: 1.45; }
.acc-ligne.on .sw { background: var(--accent); }
.acc-ligne.on .sw::after { transform: translateX(16px); }

/* ── Ripple Material (posé par ripple_controller, thème Android) ────── */
.ripple-hote { position: relative; overflow: hidden; }
.md-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: currentColor;
    opacity: .16;
    transform: scale(0);
    animation: md-ripple .5s ease-out forwards;
}
@keyframes md-ripple {
    to { transform: scale(1); opacity: 0; }
}

/* ── Écrans tactiles — les petites cibles s'élargissent au doigt ──────
   @media (pointer: coarse) : la tablette d'atelier et le téléphone
   gagnent leurs 44px ; la souris du comptoir garde le compact. */
@media (pointer: coarse) {
    .chip { padding: 12px 18px; }
    .pagination-liste .chip { padding: 11px 16px; }
    .btn-sm { padding: 12px 16px; }
    .kpi-fermer { opacity: 1; padding: 10px 14px; font-size: 14px; }
    .sw-label { padding: 6px 0; }
}

/* ═══ L'établi — la page du scan d'atelier ══════════════════════════
   Un téléphone posé sur le banc, des doigts pleins de cambouis :
   colonne unique, boutons larges, l'essentiel à portée de pouce. */
.atl-page { max-width: 560px; margin: 0 auto; display: grid; gap: 16px; }
.atl-tete { display: grid; gap: 10px; }
.atl-ref { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.atl-icone { font-size: 30px; line-height: 1; }
/* La référence d'abord : sur petit écran, le badge cède et passe dessous. */
.atl-ref-txt { flex: 1; min-width: 55%; }
.atl-num { margin: 0; font-size: clamp(17px, 5vw, 21px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.atl-machine { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 16px; }
.atl-serie { color: var(--text-soft); font-variant-numeric: tabular-nums; font-size: 13.5px; }
.atl-client { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-weight: 550; }
.atl-tel { color: var(--accent-strong); text-decoration: none; font-weight: 650; }
.atl-tel:hover { text-decoration: underline; }
.atl-panne { background: var(--sunken); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; color: var(--text-soft); font-weight: 550; }
.atl-compteur { font-size: 14px; color: var(--text-soft); }
.atl-compteur strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* Le chrono se mérite un bouton qu'on ne peut pas rater. */
.atl-btn-geant { width: 100%; min-height: 58px; font-size: 17px; font-weight: 700; }
.atl-chrono-live { display: grid; gap: 12px; justify-items: center; }
.atl-chrono-badge { font-size: 17px; padding: 8px 18px; font-variant-numeric: tabular-nums; }
.atl-hint { margin-top: 8px; }

.atl-pointer { margin-top: 14px; display: grid; gap: 8px; }
.atl-pointer input[name="note"] { width: 100%; }
.atl-pointer-ligne { display: flex; gap: 8px; }
.atl-pointer-ligne input[name="duree"] { max-width: 110px; }
.atl-pointer-ligne .btn { flex: 1; }
.atl-pointages { margin-top: 14px; }

.atl-form-empile { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.atl-form-empile select, .atl-form-empile input[type="text"] { flex: 1; min-width: 180px; }
.atl-vers-fiche { margin-top: 2px; }
/* Le seul lien du haut de l'établi : la fiche, sans jamais se plier. */
.atl-lien-fiche { white-space: nowrap; }

/* ═══ Le burger — la nav se replie sur petit écran ══════════════════
   Scopé à .burger : la nav minimale de l'établi, elle, reste visible. */
.burger { display: flex; align-items: center; }
.burger-btn {
    display: none;
    background: var(--raise);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 19px;
    line-height: 1;
    padding: 9px 13px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.burger-btn:hover { background: var(--hover); border-color: var(--accent); }
.burger-btn:active { transform: scale(.96); }

@media (max-width: 1200px) {
    .burger-btn { display: inline-flex; }
    .burger .topnav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 12px 16px 16px;
        background: var(--surface-solid);
        -webkit-backdrop-filter: blur(26px) saturate(180%);
        backdrop-filter: blur(26px) saturate(180%);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow);
    }
    .burger .topnav.ouvert { display: flex; }
    .burger .topnav a { padding: 13px 16px; font-size: 15.5px; }
    .burger .topnav .theme-toggle { align-self: flex-start; margin-top: 6px; }
}