/* Généré par tools/build-css.php — ne pas modifier à la main.
   Sources : resources/css/tokens.css, base.css, composants.css, tableau-bord.css, lateral-vert.css, bureau.css, densite.css, graphiques.css, tableaux.css, livreur.css, commercant.css, comptoir.css */

/* =============================================================================
   Tikoo Delivery — jetons de design
   Référence : § 6 de CLAUDE.md

   Deux couleurs de marque, l'orange et le vert profond, sur des fonds toujours
   blancs. Dans une interface entièrement blanche, la structure ne peut plus
   venir d'aplats gris : elle vient des filets vert profond, de la typographie
   et de l'espacement. L'orange devient alors la seule couleur d'action de
   l'application — impossible à rater sur un téléphone en plein soleil, ce qui
   est le contexte d'usage réel d'un livreur.
   ========================================================================== */

:root {
    /* Orange — action, et rien d'autre */
    --tk-orange:       #F97316;
    --tk-orange-press: #EA6800;
    --tk-orange-wash:  #FFF3E9;

    /* Vert profond — structure, navigation, titres */
    --tk-vert-900:     #0C3025;
    --tk-vert-700:     #14503E;
    --tk-vert-500:     #1E7A5E;
    --tk-vert-wash:    #E9F5F0;

    /* Encre & filets */
    --tk-ink:          #10201B;
    --tk-ink-2:        #566862;
    --tk-ink-3:        #8A9A94;
    --tk-line:         #E2E9E5;
    --tk-blanc:        #FFFFFF;

    /* Fonctionnel uniquement — jamais décoratif */
    --tk-danger:       #C43D2E;
    --tk-danger-wash:  #FCEEEC;
    --tk-warning:      #B4761A;
    --tk-warning-wash: #FDF4E7;

    /* Espacement — échelle de 4 */
    --tk-1: 4px;  --tk-2: 8px;  --tk-3: 12px; --tk-4: 16px;
    --tk-5: 20px; --tk-6: 24px; --tk-8: 32px; --tk-10: 40px; --tk-14: 56px;

    /* Rayons */
    --tk-r-ctrl:    10px;
    --tk-r-carte:   14px;
    --tk-r-feuille: 20px;
    --tk-r-pill:    999px;

    /* Élévation — teintée vert, jamais du noir pur */
    --tk-e1: 0 1px 2px rgba(12,48,37,.06), 0 1px 3px rgba(12,48,37,.04);
    --tk-e2: 0 2px 8px rgba(12,48,37,.08);
    --tk-e3: 0 8px 24px rgba(12,48,37,.14);

    /* Mouvement */
    --tk-t-micro:   140ms cubic-bezier(.2,0,0,1);
    --tk-t-entre:   220ms cubic-bezier(.2,0,0,1);
    --tk-t-page:    280ms cubic-bezier(.2,0,0,1);
    --tk-t-feuille: 320ms cubic-bezier(.05,.7,.1,1);

    /* Typographie */
    --tk-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --tk-corps:   'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Gabarits mobiles */
    --tk-barre-h:  56px;
    --tk-touche:   44px;   /* cible tactile minimale, sans exception */
}

/* Le mouvement sert à expliquer où l'on va. Quand l'utilisateur a demandé
   moins d'animation, il n'explique plus rien : il gêne. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   Base — réinitialisation et typographie
   ========================================================================== */

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

/* L'attribut `hidden` doit gagner, toujours.
   Le navigateur lui applique `display: none`, mais avec la spécificité la plus
   faible qui soit : la moindre règle de composant l'écrase. `.tk-champ` était
   en `display: block`, `.tk-argent > div` en `flex`, `.tk-panier-barre` en
   `flex` — résultat, `element.hidden = true` ne masquait RIEN sur ces
   éléments. Le champ « frais de livraison » restait affiché quand la course
   était gratuite, la ligne « Expédition » restait à 0 F, et la barre de panier
   de la boutique s'affichait même vide.

   Le `!important` est justifié ici et à cet endroit seulement : `hidden` est
   une déclaration d'intention du HTML, aucun style de composant n'a de raison
   de la contredire. */
[hidden] { display: none !important; }

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

body {
    margin: 0;
    background: var(--tk-blanc);
    color: var(--tk-ink);
    font-family: var(--tk-corps);
    font-size: 15px;
    line-height: 1.47;
    -webkit-font-smoothing: antialiased;
    /* Zones sûres : encoche en haut, barre gestuelle en bas. */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

h1, h2, h3 {
    font-family: var(--tk-display);
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--tk-vert-900);
    margin: 0;
}

h1 { font-size: 1.5rem;   line-height: 1.16; }
h2 { font-size: 1.25rem;  line-height: 1.2; }
h3 { font-size: 1.0625rem; line-height: 1.25; }

a {
    color: var(--tk-orange-press);
    text-decoration: none;
    font-weight: 600;
}
a:hover { text-decoration: underline; }

/* Tout chiffre est tabulaire : sans cela une colonne de montants danse d'une
   ligne à l'autre et devient illisible. */
.tk-chiffre, td.tk-num, .tk-montant {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.tk-montant { font-weight: 700; color: var(--tk-vert-900); }

.tk-label {
    font-size: .8125rem;
    color: var(--tk-ink-2);
}

.tk-caption {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tk-ink-3);
    font-weight: 600;
}

/* Le focus clavier doit rester visible : c'est le plancher d'accessibilité. */
:focus-visible {
    outline: 2px solid var(--tk-orange);
    outline-offset: 2px;
    border-radius: 4px;
}

.tk-conteneur {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--tk-4);
}

/* Aucune information ni action ne dépend du survol : sur mobile il n'existe pas. */
@media (hover: none) {
    a:hover { text-decoration: none; }
}

/* =============================================================================
   Composants — § 6 et § 7 de CLAUDE.md

   Règle de fond : c'est une application, pas un site rétréci. Cibles tactiles
   de 44 px minimum, cartes plutôt que tableaux sous 768 px, mouvement limité
   à transform et opacity.
   ========================================================================== */

/* --- En-tête d'écran ------------------------------------------------------ */

.tk-entete {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--tk-blanc);
    border-bottom: 1px solid var(--tk-line);
    padding: var(--tk-3) var(--tk-4);
    padding-top: calc(var(--tk-3) + env(safe-area-inset-top));
    display: flex;
    align-items: center;
    gap: var(--tk-3);
}

.tk-entete__titre { flex: 1; min-width: 0; }

.tk-retour {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tk-touche);
    height: var(--tk-touche);
    margin-left: calc(var(--tk-2) * -1);
    border-radius: var(--tk-r-pill);
    color: var(--tk-vert-900);
    transition: background var(--tk-t-micro);
}
.tk-retour:active { background: var(--tk-vert-wash); }

/* --- Carte ---------------------------------------------------------------- */

.tk-carte {
    background: var(--tk-blanc);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-carte);
    padding: var(--tk-4);
    box-shadow: var(--tk-e1);
}

/* Une carte cliquable réagit à la pression : sur mobile c'est le seul retour
   d'état disponible, il n'y a pas de survol. */
a.tk-carte {
    display: block;
    color: inherit;
    font-weight: inherit;
    transition: transform var(--tk-t-micro), box-shadow var(--tk-t-micro);
}
a.tk-carte:hover { text-decoration: none; }
a.tk-carte:active {
    transform: scale(.985);
    box-shadow: none;
}

.tk-liste { display: grid; gap: var(--tk-3); }

/* Cascade d'apparition, plafonnée : au-delà de huit lignes l'effet devient une
   attente au lieu d'une explication. */
.tk-liste > * { animation: tk-monte var(--tk-t-entre) both; }
.tk-liste > :nth-child(1) { animation-delay: 0ms; }
.tk-liste > :nth-child(2) { animation-delay: 30ms; }
.tk-liste > :nth-child(3) { animation-delay: 60ms; }
.tk-liste > :nth-child(4) { animation-delay: 90ms; }
.tk-liste > :nth-child(5) { animation-delay: 120ms; }
.tk-liste > :nth-child(6) { animation-delay: 150ms; }
.tk-liste > :nth-child(7) { animation-delay: 180ms; }
.tk-liste > :nth-child(n+8) { animation-delay: 210ms; }

@keyframes tk-monte {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* --- Badge de statut ------------------------------------------------------
   Huit statuts, deux teintes. La distinction passe par le remplissage, pas par
   la multiplication des couleurs. Un statut porte toujours son libellé : il
   n'est jamais signalé par la seule couleur. */

.tk-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--tk-1);
    padding: 3px 10px;
    border-radius: var(--tk-r-pill);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}

.tk-badge--nouveau       { border-color: var(--tk-vert-900); color: var(--tk-vert-900); }
.tk-badge--assigne       { background: var(--tk-vert-wash);  color: var(--tk-vert-700); }
.tk-badge--en_cours      { background: var(--tk-orange-wash); color: var(--tk-orange-press); }
.tk-badge--livre         { background: var(--tk-vert-500);   color: #fff; }
.tk-badge--livre_partiel { border-color: var(--tk-vert-500); color: var(--tk-vert-700);
    background-image: repeating-linear-gradient(45deg,
        transparent 0 5px, var(--tk-vert-wash) 5px 10px); }
.tk-badge--reporte       { border-color: var(--tk-ink-2);    color: var(--tk-ink-2); }
.tk-badge--annule        { border-color: var(--tk-danger);   color: var(--tk-danger); }
.tk-badge--retourne      { border-color: var(--tk-warning);  color: var(--tk-warning); }

/* Point qui respire sur l'étape en cours : la seule animation ambiante de
   l'interface, réservée à l'information « ça bouge en ce moment ». */
.tk-pouls {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: tk-pouls 2s ease-in-out infinite;
}
@keyframes tk-pouls {
    0%, 100% { opacity: 1;  transform: scale(1); }
    50%      { opacity: .45; transform: scale(.8); }
}

/* --- Rail de statut — l'élément signature --------------------------------
   Le parcours de la commande est le cœur du métier : c'est donc ce qu'on
   dessine. C'est le seul endroit où l'on dépense de l'audace visuelle. */

.tk-rail { list-style: none; margin: 0; padding: 0; }

.tk-rail__etape {
    position: relative;
    padding: 0 0 var(--tk-5) var(--tk-6);
    min-height: var(--tk-6);
}

/* Le filet vertical relie les étapes ; la dernière ne prolonge rien. */
.tk-rail__etape::before {
    content: '';
    position: absolute;
    left: 5px; top: 14px; bottom: -2px;
    width: 2px;
    background: var(--tk-line);
}
.tk-rail__etape:last-child::before { display: none; }

.tk-rail__etape::after {
    content: '';
    position: absolute;
    left: 0; top: 4px;
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid var(--tk-line);
    background: var(--tk-blanc);
}

.tk-rail__etape--franchie::before { background: var(--tk-vert-500); }
.tk-rail__etape--franchie::after  { border-color: var(--tk-vert-500); background: var(--tk-vert-500); }

.tk-rail__etape--courante::after {
    border-color: var(--tk-orange);
    background: var(--tk-orange);
    animation: tk-pouls 2s ease-in-out infinite;
}

.tk-rail__libelle { font-weight: 600; color: var(--tk-vert-900); }
.tk-rail__etape--a_venir .tk-rail__libelle { color: var(--tk-ink-3); font-weight: 500; }
.tk-rail__date { font-size: .75rem; color: var(--tk-ink-2); font-variant-numeric: tabular-nums; }

/* --- Filtres par pastilles ------------------------------------------------ */

.tk-filtres {
    display: flex;
    gap: var(--tk-2);
    overflow-x: auto;
    padding: var(--tk-3) var(--tk-4);
    margin: 0 calc(var(--tk-4) * -1);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.tk-filtres::-webkit-scrollbar { display: none; }

.tk-pastille {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--tk-2);
    min-height: 36px;
    padding: 0 var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-pill);
    background: var(--tk-blanc);
    color: var(--tk-ink-2);
    font-size: .8125rem;
    font-weight: 600;
    transition: transform var(--tk-t-micro), background var(--tk-t-micro);
}
.tk-pastille:hover { text-decoration: none; }
.tk-pastille:active { transform: scale(.96); }

.tk-pastille--active {
    background: var(--tk-vert-900);
    border-color: var(--tk-vert-900);
    color: #fff;
}

.tk-pastille__compte {
    font-variant-numeric: tabular-nums;
    opacity: .7;
    font-weight: 500;
}

/* --- Bouton --------------------------------------------------------------- */

.tk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tk-2);
    min-height: var(--tk-touche);
    padding: 0 var(--tk-5);
    border: 1px solid transparent;
    border-radius: var(--tk-r-ctrl);
    font-family: var(--tk-corps);
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--tk-t-micro), background var(--tk-t-micro);
    -webkit-tap-highlight-color: transparent;
}
.tk-btn:active { transform: scale(.97); }
.tk-btn:hover  { text-decoration: none; }

.tk-btn--principal { background: var(--tk-orange); color: #fff; }
.tk-btn--principal:active { background: var(--tk-orange-press); }

.tk-btn--discret {
    background: var(--tk-blanc);
    border-color: var(--tk-line);
    color: var(--tk-vert-900);
}

/* --- Bouton d'action flottant --------------------------------------------
   L'action principale de l'écran, dans la zone atteignable au pouce. */

.tk-fab {
    position: fixed;
    right: var(--tk-4);
    bottom: calc(var(--tk-4) + var(--tk-barre-h) + env(safe-area-inset-bottom));
    z-index: 30;
    width: var(--tk-14);
    height: var(--tk-14);
    border-radius: var(--tk-r-pill);
    background: var(--tk-orange);
    color: #fff;
    box-shadow: var(--tk-e3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform var(--tk-t-micro);
}
.tk-fab:active { transform: scale(.92); }

/* --- Barre d'onglets basse -----------------------------------------------
   Le pouce atteint le bas de l'écran, pas le coin haut-gauche : la navigation
   principale y vit, et le menu hamburger disparaît. */

.tk-onglets {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex;
    background: var(--tk-blanc);
    border-top: 1px solid var(--tk-line);
    padding-bottom: env(safe-area-inset-bottom);
}

.tk-onglet {
    flex: 1;
    min-height: var(--tk-barre-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--tk-ink-3);
    font-size: .6875rem;
    font-weight: 600;
    transition: color var(--tk-t-micro);
    -webkit-tap-highlight-color: transparent;
}
.tk-onglet:hover { text-decoration: none; }
.tk-onglet--actif { color: var(--tk-orange); }
.tk-onglet__icone { font-size: 1.125rem; line-height: 1; }

/* --- État vide ------------------------------------------------------------
   Un écran vide est une invitation à agir, pas une impasse. */

.tk-vide {
    text-align: center;
    padding: var(--tk-14) var(--tk-4);
    color: var(--tk-ink-2);
}
.tk-vide__titre {
    font-family: var(--tk-display);
    font-weight: 700;
    color: var(--tk-vert-900);
    margin-bottom: var(--tk-2);
}

/* --- Squelette de chargement ---------------------------------------------
   Aux dimensions du contenu réel : un sablier centré n'apprend rien. */

.tk-squelette {
    background: linear-gradient(90deg, var(--tk-line) 25%, #EFF3F1 50%, var(--tk-line) 75%);
    background-size: 200% 100%;
    animation: tk-brille 1.4s ease-in-out infinite;
    border-radius: 6px;
}
@keyframes tk-brille {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* --- Contenu large --------------------------------------------------------
   Un tableau à défilement horizontal est un échec de conception : sous 768 px
   on passe aux cartes. Quand un tableau est inévitable, il défile dans son
   propre conteneur — jamais la page. */

.tk-defile-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.tk-mobile-seul  { display: none; }
.tk-bureau-seul  { display: block; }

@media (max-width: 767px) {
    .tk-mobile-seul { display: block; }
    .tk-bureau-seul { display: none; }
}

/* Le contenu doit passer au-dessus de la barre d'onglets. */
.tk-page { padding-bottom: calc(var(--tk-barre-h) + var(--tk-8) + env(safe-area-inset-bottom)); }

/* --- Compteurs du jour (livreur) -----------------------------------------
   Le gain occupe toute la largeur : c'est le chiffre pour lequel le livreur
   ouvre l'application. Les deux autres se partagent la ligne suivante. */

.tk-compteurs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tk-2);
    margin: var(--tk-4) 0 var(--tk-6);
}

.tk-compteur {
    background: var(--tk-blanc);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-carte);
    padding: var(--tk-3) var(--tk-4);
}

.tk-compteur--vedette {
    grid-column: 1 / -1;
    background: var(--tk-vert-900);
    border-color: var(--tk-vert-900);
}
.tk-compteur--vedette .tk-caption { color: rgba(255,255,255,.65); }
.tk-compteur--vedette .tk-compteur__valeur { color: #fff; }

.tk-compteur__valeur {
    font-family: var(--tk-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.15;
    margin-top: 2px;
    color: var(--tk-vert-900);
    font-variant-numeric: tabular-nums;
}

/* --- Titre de section ----------------------------------------------------- */

.tk-section {
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tk-ink-2);
    font-weight: 700;
    margin: var(--tk-6) 0 var(--tk-3);
}
.tk-section:first-of-type { margin-top: 0; }

/* La course en cours porte un liseré orange : elle se repère sans lire. */
.tk-carte--active {
    border-color: var(--tk-orange);
    box-shadow: var(--tk-e2);
}

/* --- Montant à encaisser --------------------------------------------------
   L'information la plus consultée de l'écran de course, donc la plus grande. */

.tk-encaisse { text-align: center; }

.tk-encaisse__valeur {
    font-family: var(--tk-display);
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1.1;
    color: var(--tk-vert-900);
    font-variant-numeric: tabular-nums;
    margin: var(--tk-1) 0 var(--tk-2);
}

.tk-quantite {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--tk-orange-press);
    margin-right: var(--tk-1);
}

/* --- Alertes et notes ----------------------------------------------------- */

.tk-alerte {
    padding: var(--tk-3) var(--tk-4);
    border-radius: var(--tk-r-carte);
    font-size: .875rem;
    line-height: 1.45;
}
.tk-alerte--warning { background: var(--tk-warning-wash); color: var(--tk-warning); }
.tk-alerte--danger  { background: var(--tk-danger-wash);  color: var(--tk-danger); }

.tk-note {
    margin-top: var(--tk-3);
    padding: var(--tk-3);
    background: var(--tk-orange-wash);
    border-radius: var(--tk-r-ctrl);
    font-size: .875rem;
    color: var(--tk-ink);
}

.tk-lien-tel {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Paire d'actions ------------------------------------------------------ */

.tk-actions-paire {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tk-2);
    margin-top: var(--tk-4);
}

/* --- Barre d'action ancrée -----------------------------------------------
   Au-dessus de la barre d'onglets, dans la zone que le pouce atteint sans
   changer de prise. */

.tk-barre-action {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--tk-barre-h) + env(safe-area-inset-bottom));
    z-index: 35;
    display: flex;
    gap: var(--tk-2);
    padding: var(--tk-3) var(--tk-4);
    background: var(--tk-blanc);
    border-top: 1px solid var(--tk-line);
    box-shadow: 0 -2px 12px rgba(12,48,37,.06);
}

.tk-btn--large { width: 100%; min-height: 52px; font-size: 1rem; }

/* La barre d'action recouvre le bas du contenu : on le décale d'autant. */
.tk-barre-action ~ * { padding-bottom: 0; }
body:has(.tk-barre-action) .tk-page {
    padding-bottom: calc(var(--tk-barre-h) + 76px + env(safe-area-inset-bottom));
}

/* --- Bandeau hors ligne ---------------------------------------------------
   Un livreur perd le réseau en permanence : il doit le savoir avant de croire
   qu'une action a été enregistrée. */

.tk-hors-ligne {
    position: sticky;
    top: 0;
    z-index: 45;
    padding: var(--tk-2) var(--tk-4);
    background: var(--tk-warning);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    text-align: center;
}

/* --- Écrans hors session --------------------------------------------------
   Sur un fond entièrement blanc, la page de connexion tient par sa typographie
   et son espacement. Le seul élément orange est le bouton : sur un téléphone
   en plein soleil, l'action à faire ne se cherche pas. */

.tk-corps-nu { min-height: 100dvh; display: flex; }

.tk-auth {
    width: 100%;
    max-width: 26rem;
    margin: auto;
    padding: var(--tk-8) var(--tk-5);
    padding-top: calc(var(--tk-8) + env(safe-area-inset-top));
    padding-bottom: calc(var(--tk-8) + env(safe-area-inset-bottom));
}

.tk-auth__marque { text-align: center; margin-bottom: var(--tk-8); }

.tk-logo {
    font-family: var(--tk-display);
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: -.02em;
    color: var(--tk-vert-900);
}
.tk-logo span { color: var(--tk-orange); }

.tk-auth__accroche {
    margin: var(--tk-2) 0 0;
    color: var(--tk-ink-2);
    font-size: .9375rem;
    line-height: 1.4;
}

.tk-auth__carte { animation: tk-monte var(--tk-t-entre) both; }

.tk-auth__pied {
    margin: var(--tk-6) 0 0;
    text-align: center;
    font-size: .875rem;
    color: var(--tk-ink-2);
}

/* --- Segment (deux choix exclusifs) --------------------------------------- */

.tk-segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 3px;
    background: var(--tk-vert-wash);
    border-radius: var(--tk-r-pill);
    margin-bottom: var(--tk-6);
}

.tk-segment__choix {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tk-r-pill);
    font-size: .875rem;
    font-weight: 600;
    color: var(--tk-vert-700);
    transition: background var(--tk-t-micro), color var(--tk-t-micro);
}
.tk-segment__choix:hover { text-decoration: none; }
.tk-segment__choix--actif {
    background: var(--tk-blanc);
    color: var(--tk-vert-900);
    box-shadow: var(--tk-e1);
}

/* --- Champ de formulaire --------------------------------------------------
   52 px de haut : au-dessus du minimum de 44, parce qu'on saisit ces champs
   debout, souvent d'une seule main. */

.tk-champ { display: block; position: relative; margin-bottom: var(--tk-4); }

.tk-champ__libelle {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--tk-ink-2);
    margin-bottom: var(--tk-1);
}

.tk-champ input,
.tk-champ select,
.tk-champ textarea {
    width: 100%;
    min-height: 52px;
    padding: 0 var(--tk-4);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
    color: var(--tk-ink);
    font-family: var(--tk-corps);
    font-size: 1rem;              /* 16px : en dessous, iOS zoome au focus */
    transition: border-color var(--tk-t-micro), box-shadow var(--tk-t-micro);
}

.tk-champ input:focus,
.tk-champ select:focus,
.tk-champ textarea:focus {
    outline: none;
    border-color: var(--tk-orange);
    box-shadow: 0 0 0 3px var(--tk-orange-wash);
}

.tk-champ__action {
    position: absolute;
    right: var(--tk-2);
    bottom: 5px;
    height: 42px;
    padding: 0 var(--tk-3);
    border: 0;
    background: transparent;
    color: var(--tk-orange-press);
    font-family: var(--tk-corps);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}

/* --- Repli ---------------------------------------------------------------- */

.tk-repli { margin-bottom: var(--tk-4); }

.tk-repli summary {
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--tk-ink-2);
    min-height: var(--tk-touche);
    display: flex;
    align-items: center;
}
.tk-repli summary::marker { color: var(--tk-ink-3); }

/* --- Recherche ------------------------------------------------------------ */

.tk-recherche {
    display: flex;
    gap: var(--tk-2);
    margin: var(--tk-4) 0 var(--tk-2);
}

.tk-recherche input {
    flex: 1;
    min-width: 0;
    min-height: var(--tk-touche);
    padding: 0 var(--tk-4);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
    color: var(--tk-ink);
    font-family: var(--tk-corps);
    font-size: 1rem;              /* 16px : en dessous, iOS zoome au focus */
}
.tk-recherche input:focus {
    outline: none;
    border-color: var(--tk-orange);
    box-shadow: 0 0 0 3px var(--tk-orange-wash);
}

/* --- Plan du partenaire ---------------------------------------------------
   Trois plans, une seule teinte : c'est le remplissage qui les sépare, comme
   pour les statuts de commande. */

.tk-plan {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--tk-r-pill);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.tk-plan--sans_compte { border-color: var(--tk-line);      color: var(--tk-ink-3); }
.tk-plan--connect     { background: var(--tk-vert-wash);   color: var(--tk-vert-700); }
.tk-plan--business    { background: var(--tk-vert-900);    color: #fff; }

/* --- Stock : deux valeurs, une hiérarchie --------------------------------
   Le stock confié est le seul immédiatement livrable : il domine. Le stock
   propre reste visible parce qu'il annonce les ruptures à venir. */

.tk-stock-paire {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tk-2);
    margin-top: var(--tk-3);
}

.tk-stock {
    padding: var(--tk-2) var(--tk-3);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-vert-wash);
}
.tk-stock--secondaire { background: transparent; border: 1px solid var(--tk-line); }

.tk-stock__valeur {
    font-family: var(--tk-display);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--tk-vert-900);
    font-variant-numeric: tabular-nums;
}
.tk-stock--secondaire .tk-stock__valeur { color: var(--tk-ink-2); }

/* --- Feuille basse --------------------------------------------------------
   Remplace la fenêtre modale centrée : elle se ferme au glissement, laisse le
   clavier remonter sans masquer le champ, et reste dans la zone du pouce. */

.tk-feuille { position: fixed; inset: 0; z-index: 60; }

.tk-feuille__voile {
    position: absolute;
    inset: 0;
    background: rgba(12, 48, 37, .32);
    animation: tk-fondu var(--tk-t-micro) both;
}

.tk-feuille__panneau {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 88dvh;
    overflow-y: auto;
    padding: var(--tk-3) var(--tk-5) var(--tk-6);
    padding-bottom: calc(var(--tk-6) + env(safe-area-inset-bottom));
    background: var(--tk-blanc);
    border-radius: var(--tk-r-feuille) var(--tk-r-feuille) 0 0;
    box-shadow: var(--tk-e3);
    animation: tk-remonte var(--tk-t-feuille) both;
}

@keyframes tk-remonte {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: none; }
}

/* Sur grand écran, une feuille pleine largeur serait absurde : elle se centre
   et se borne, sans changer de comportement. Le panneau étant translaté en X,
   son animation doit conserver ce décalage — d'où une seconde règle, déclarée
   APRÈS la règle de base pour la surcharger réellement. */
@media (min-width: 768px) {
    .tk-feuille__panneau {
        left: 50%;
        transform: translateX(-50%);
        width: min(28rem, 100%);
        bottom: var(--tk-8);
        border-radius: var(--tk-r-feuille);
        animation-name: tk-remonte-centre;
    }

    @keyframes tk-remonte-centre {
        from { opacity: 0; transform: translateX(-50%) translateY(16px); }
        to   { opacity: 1; transform: translateX(-50%); }
    }
}

.tk-feuille__poignee {
    width: 36px; height: 4px;
    margin: 0 auto var(--tk-4);
    border-radius: var(--tk-r-pill);
    background: var(--tk-line);
}

@keyframes tk-fondu { from { opacity: 0; } to { opacity: 1; } }

/* --- Sélection de période -------------------------------------------------- */

.tk-periode {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--tk-2);
    align-items: end;
    margin-bottom: var(--tk-4);
}
.tk-periode .tk-champ { margin-bottom: 0; }
.tk-periode .tk-champ input { min-height: var(--tk-touche); }

/* --- Liste de définitions --------------------------------------------------- */

.tk-detail { display: grid; gap: var(--tk-2); margin: 0; }
.tk-detail > div {
    display: flex;
    justify-content: space-between;
    gap: var(--tk-3);
    align-items: baseline;
}
.tk-detail dt { color: var(--tk-ink-2); font-size: .875rem; }
.tk-detail dd { margin: 0; font-weight: 600; color: var(--tk-vert-900); }

/* --- Jauge proportionnelle -------------------------------------------------
   Une barre plutôt qu'un graphique : sur un écran de téléphone, comparer dix
   valeurs se fait mieux à l'horizontale qu'avec des axes et une légende. */

.tk-jauge {
    height: 6px;
    margin: var(--tk-2) 0 var(--tk-1);
    border-radius: var(--tk-r-pill);
    background: var(--tk-vert-wash);
    overflow: hidden;
}
.tk-jauge span {
    display: block;
    height: 100%;
    border-radius: var(--tk-r-pill);
    background: var(--tk-orange);
    animation: tk-jauge var(--tk-t-entre) both;
    transform-origin: left;
}
@keyframes tk-jauge { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- Espace plateforme ----------------------------------------------------
   Le seul endroit où la couleur d'alerte sert d'identité : ici, une action
   porte sur toutes les entreprises à la fois. */

.tk-entete--plateforme { border-bottom: 2px solid var(--tk-danger); }

/* --- Grille de chiffres --------------------------------------------------- */

.tk-grille-chiffres {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tk-2);
    margin-bottom: var(--tk-6);
}

@media (max-width: 380px) {
    .tk-grille-chiffres { grid-template-columns: 1fr; }
}

/* --- Compteur à pas -------------------------------------------------------
   Corriger une quantité avec des boutons plutôt qu'au clavier : sur un
   téléphone tenu d'une main, un pavé numérique qui recouvre l'écran pour
   passer de 3 à 2 est une friction inutile. */

.tk-ligne-article {
    display: flex;
    align-items: center;
    gap: var(--tk-3);
}

.tk-pas {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    overflow: hidden;
}

.tk-pas__btn {
    width: var(--tk-touche);
    height: var(--tk-touche);
    border: 0;
    background: var(--tk-blanc);
    color: var(--tk-vert-900);
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tk-t-micro);
    -webkit-tap-highlight-color: transparent;
}
.tk-pas__btn:active { background: var(--tk-vert-wash); }

.tk-pas__val {
    width: 52px;
    height: var(--tk-touche);
    border: 0;
    border-left: 1px solid var(--tk-line);
    border-right: 1px solid var(--tk-line);
    text-align: center;
    font-family: var(--tk-corps);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--tk-vert-900);
    -moz-appearance: textfield;
}
.tk-pas__val::-webkit-outer-spin-button,
.tk-pas__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tk-pas__val:focus { outline: none; background: var(--tk-orange-wash); }

/* --- Choix exclusif en liste ---------------------------------------------- */

.tk-choix { display: grid; gap: var(--tk-2); }

.tk-choix__option {
    display: flex;
    align-items: center;
    gap: var(--tk-3);
    min-height: var(--tk-touche);
    padding: var(--tk-2) var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    cursor: pointer;
    transition: border-color var(--tk-t-micro), background var(--tk-t-micro);
}
.tk-choix__option input { width: 20px; height: 20px; accent-color: var(--tk-orange); }
.tk-choix__option:has(input:checked) {
    border-color: var(--tk-orange);
    background: var(--tk-orange-wash);
    font-weight: 600;
}

/* --- Bouton destructeur ---------------------------------------------------
   Le rouge n'est jamais décoratif : il signale ici une action irréversible,
   et se distingue nettement du report, qui est la sortie normale. */

.tk-btn--danger { background: var(--tk-danger); color: #fff; }
.tk-btn--danger:active { background: #A93326; }
.tk-btn[disabled] { opacity: .6; cursor: progress; }

/* --- Bascule d'entreprise (commerçant) -----------------------------------
   Un commerçant qui travaille avec deux transporteurs doit savoir en
   permanence de quel stock et de quel solde il parle. */

.tk-bascule {
    display: inline-flex;
    align-items: center;
    gap: var(--tk-1);
    margin-top: 2px;
    padding: 2px 8px 2px 0;
    border: 0;
    background: none;
    color: var(--tk-ink-2);
    font-family: var(--tk-corps);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.tk-bascule:active { color: var(--tk-orange-press); }

.tk-choix__option--actif {
    border-color: var(--tk-orange);
    background: var(--tk-orange-wash);
}

/* --- Carte en alerte ------------------------------------------------------
   Une course qui n'avance plus. Le liseré rouge n'est pas décoratif : il
   signale la seule chose sur laquelle un superviseur peut agir tout de suite. */

.tk-carte--alerte {
    border-color: var(--tk-danger);
    box-shadow: var(--tk-e2);
}

/* --- Repli (details/summary) ---------------------------------------------
   Réserve à un cas minoritaire la place qu'il mérite : visible, mais replié.
   Le marqueur natif est remplacé par un chevron aligné sur la typographie. */

.tk-repli > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tk-2);
    min-height: var(--tk-touche);
    padding: var(--tk-2) 0;
    color: var(--tk-ink-2);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.tk-repli > summary::-webkit-details-marker { display: none; }
.tk-repli > summary::after {
    content: '▾';
    color: var(--tk-ink-3);
    transition: transform var(--tk-t-micro);
}
.tk-repli[open] > summary::after { transform: rotate(180deg); }
.tk-repli[open] > summary { color: var(--tk-vert-900); }

/* --- Champ de formulaire --------------------------------------------------- */

.tk-champ { display: block; margin-bottom: var(--tk-4); }

.tk-champ__libelle {
    display: block;
    margin-bottom: var(--tk-1);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--tk-ink-2);
}

.tk-champ input,
.tk-champ select,
.tk-champ textarea {
    width: 100%;
    min-height: var(--tk-touche);
    padding: var(--tk-2) var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
    color: var(--tk-ink);
    font-family: var(--tk-corps);
    /* 16px minimum : en dessous, iOS zoome automatiquement au focus et casse
       la mise en page de l'écran. */
    font-size: 16px;
}
.tk-champ input:focus,
.tk-champ select:focus,
.tk-champ textarea:focus {
    outline: none;
    border-color: var(--tk-orange);
    box-shadow: 0 0 0 3px var(--tk-orange-wash);
}

/* --- Tendance hebdomadaire ------------------------------------------------
   Sept barres, creux compris. Une tendance dont les jours vides sont absents
   ment sur la régularité de l'activité. */

.tk-semaine {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--tk-1);
    align-items: end;
    height: 140px;
}

.tk-semaine__jour {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tk-1);
    height: 100%;
}

.tk-semaine__valeur {
    font-size: .75rem;
    font-weight: 700;
    color: var(--tk-ink-2);
}

.tk-semaine__barre {
    width: 100%;
    max-width: 28px;
    min-height: 4px;
    border-radius: 4px 4px 0 0;
    background: var(--tk-vert-wash);
    border-top: 2px solid var(--tk-vert-500);
    transform-origin: bottom;
    animation: tk-pousse var(--tk-t-entre) both;
}

/* Le jour courant est en orange : c'est le seul sur lequel on peut encore agir. */
.tk-semaine__barre--auj {
    background: var(--tk-orange-wash);
    border-top-color: var(--tk-orange);
}

@keyframes tk-pousse { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* --- États secondaires ----------------------------------------------------- */

/* Un élément inactif reste lisible : on le retire du premier plan sans le
   rendre illisible, sinon on ne peut plus le réactiver. */
.tk-carte--inactif { opacity: .62; }

.tk-choix__option--bloque {
    opacity: .5;
    cursor: not-allowed;
}

.tk-erreur {
    display: block;
    margin-top: var(--tk-1);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--tk-danger);
}

/* --- Ligne d'article (saisie de commande) --------------------------------- */

.tk-article {
    padding: var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
}

.tk-article__nom,
.tk-article__prix {
    min-height: var(--tk-touche);
    padding: var(--tk-2) var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    font-family: var(--tk-corps);
    /* 16px : en dessous, iOS zoome au focus et casse la mise en page. */
    font-size: 16px;
    color: var(--tk-ink);
}
.tk-article__nom  { flex: 1; min-width: 0; }
.tk-article__prix { width: 7.5rem; font-variant-numeric: tabular-nums; }

.tk-article__nom:focus,
.tk-article__prix:focus {
    outline: none;
    border-color: var(--tk-orange);
    box-shadow: 0 0 0 3px var(--tk-orange-wash);
}

.tk-article__retirer {
    flex: 0 0 auto;
    width: var(--tk-touche);
    height: var(--tk-touche);
    border: 0;
    border-radius: var(--tk-r-ctrl);
    background: none;
    color: var(--tk-ink-3);
    font-size: 1.375rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--tk-t-micro), background var(--tk-t-micro);
    -webkit-tap-highlight-color: transparent;
}
.tk-article__retirer:active { background: var(--tk-danger-wash); color: var(--tk-danger); }

/* =============================================================================
   NAVIGATION — deux rendus du même menu

   Poste de travail : menu latéral permanent. C'est un outil de travail, pas un
   téléphone — masquer les entrées derrière un bouton ferait perdre du temps à
   quelqu'un qui enchaîne les commandes toute la journée.

   Téléphone : barre flottante réduite, le reste dans une feuille ouverte
   depuis l'en-tête.
   ========================================================================== */

.tk-ico { width: 20px; height: 20px; flex: 0 0 auto; }

/* --- Entrées de menu, communes aux deux rendus ---------------------------- */

.tk-nav__lien {
    display: flex;
    align-items: center;
    gap: var(--tk-3);
    min-height: var(--tk-touche);
    padding: var(--tk-2) var(--tk-3);
    border-radius: var(--tk-r-ctrl);
    color: var(--tk-ink-2);
    font-size: .9375rem;
    font-weight: 500;
    transition: background var(--tk-t-micro), color var(--tk-t-micro);
    -webkit-tap-highlight-color: transparent;
}
.tk-nav__lien:hover { background: var(--tk-vert-wash); color: var(--tk-vert-900); text-decoration: none; }
.tk-nav__lien:active { transform: scale(.99); }

.tk-nav__lien--actif {
    background: var(--tk-vert-wash);
    color: var(--tk-vert-900);
    font-weight: 600;
    /* Un filet orange marque la page courante : la seule couleur d'action de
       l'interface sert aussi à dire « vous êtes ici ». */
    box-shadow: inset 3px 0 0 var(--tk-orange);
}

.tk-nav__texte { flex: 1; min-width: 0; }

.tk-nav__badge {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: var(--tk-r-pill);
    background: var(--tk-orange);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tk-nav__section {
    margin: var(--tk-4) var(--tk-3) var(--tk-1);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tk-ink-3);
}
.tk-nav__section:first-child { margin-top: 0; }

/* --- Menu latéral (poste de travail) -------------------------------------- */

.tk-lateral { display: none; }

@media (min-width: 1024px) {
    .tk-lateral {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 264px;
        padding: var(--tk-4) var(--tk-3);
        background: var(--tk-blanc);
        border-right: 1px solid var(--tk-line);
        overflow-y: auto;
        z-index: 30;
    }

    .tk-lateral__marque {
        display: block;
        padding: var(--tk-2) var(--tk-3) var(--tk-5);
        font-family: var(--tk-display);
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--tk-vert-900);
        letter-spacing: -.02em;
    }
    .tk-lateral__marque span { color: var(--tk-orange); }
    .tk-lateral__marque:hover { text-decoration: none; }

    .tk-lateral__menu { flex: 1; }

    .tk-lateral__pied {
        padding-top: var(--tk-3);
        margin-top: var(--tk-4);
        border-top: 1px solid var(--tk-line);
    }

    /* Le contenu se décale du menu, et la barre flottante disparaît. */
    body { padding-left: 264px; }

    /* Sauf là où il n'y a pas de menu. Deux gabarits sont dans ce cas — la
       boutique publique, qui s'adresse à des inconnus, et l'écran de connexion,
       où « une navigation qu'on ne peut pas encore emprunter est du bruit ».
       Leur réserver la place du menu laissait une bande vide de 264 px à
       gauche et décalait toute la page vers la droite. */
    body.tk-boutique,
    body.tk-corps-nu { padding-left: 0; }
    /* `.tk-onglets` est la barre basse du super admin. Sans cette ligne, il
       aurait DEUX menus à l'écran — exactement ce que le § 6.3 interdit. */
    .tk-flottante,
    .tk-onglets,
    .tk-menu-mobile,
    .tk-entete__menu { display: none !important; }

    .tk-page { padding-bottom: var(--tk-10); }
    body:has(.tk-barre-action) .tk-page { padding-bottom: 120px; }

    .tk-barre-action { left: 264px; bottom: 0; }
    .tk-fab { bottom: var(--tk-6); }

    /* Sur grand écran on respire : le contenu ne s'étire pas indéfiniment. */
    .tk-conteneur { max-width: 1040px; }
}

/* --- Barre flottante (téléphone) -----------------------------------------
   Forme reprise des applications de streaming : une pilule posée au-dessus du
   contenu, détachée du bord, avec peu d'entrées. Elle est en vert profond —
   la couleur de structure du produit — et l'entrée active passe en orange. */

.tk-flottante {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--tk-3) + env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.tk-flottante__pilule {
    display: flex;
    align-items: center;
    gap: var(--tk-1);
    max-width: calc(100vw - var(--tk-8));
    padding: var(--tk-1);
    border-radius: var(--tk-r-pill);
    background: var(--tk-vert-900);
    box-shadow: 0 6px 24px rgba(12, 48, 37, .28);
    pointer-events: auto;
}

.tk-flottante__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 64px;
    min-height: 52px;
    padding: 0 var(--tk-2);
    border-radius: var(--tk-r-pill);
    color: rgba(255, 255, 255, .62);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: color var(--tk-t-micro), background var(--tk-t-micro);
    -webkit-tap-highlight-color: transparent;
}
.tk-flottante__item:hover { text-decoration: none; }
.tk-flottante__item:active { transform: scale(.94); }

.tk-flottante__item--actif {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}
.tk-flottante__item--actif .tk-ico { color: var(--tk-orange); }

/* La barre flotte : le contenu doit finir au-dessus d'elle. */
.tk-page { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
body:has(.tk-barre-action) .tk-page { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }

.tk-fab { bottom: calc(84px + env(safe-area-inset-bottom)); }
.tk-barre-action { bottom: calc(76px + env(safe-area-inset-bottom)); }

/* --- Bouton menu dans l'en-tête, à côté de la cloche ---------------------- */

.tk-entete__actions { display: flex; align-items: center; gap: var(--tk-1); }

.tk-entete__bouton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tk-touche);
    height: var(--tk-touche);
    border: 0;
    border-radius: var(--tk-r-pill);
    background: none;
    color: var(--tk-vert-900);
    cursor: pointer;
    transition: background var(--tk-t-micro);
    -webkit-tap-highlight-color: transparent;
}
.tk-entete__bouton:active { background: var(--tk-vert-wash); }
.tk-entete__bouton:hover { text-decoration: none; }

.tk-entete__pastille {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: var(--tk-r-pill);
    background: var(--tk-orange);
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* La feuille du menu mobile se déroule : elle peut être longue. */
.tk-menu-mobile .tk-feuille__panneau { max-height: 84dvh; }
.tk-nav__menu { display: grid; gap: 2px; }

/* --- Actions rapides ------------------------------------------------------
   Ce qu'on peut lancer sans réfléchir, en haut de l'écran. Deux colonnes sur
   téléphone, quatre sur poste de travail. */

.tk-actions-rapides {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tk-2);
    margin-bottom: var(--tk-5);
}

.tk-action {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 64px;
    padding: var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-carte);
    background: var(--tk-blanc);
    transition: transform var(--tk-t-micro), border-color var(--tk-t-micro);
    -webkit-tap-highlight-color: transparent;
}
.tk-action:hover { border-color: var(--tk-orange); text-decoration: none; }
.tk-action:active { transform: scale(.98); }

.tk-action__libelle { font-weight: 600; color: var(--tk-vert-900); font-size: .9375rem; }
.tk-action__sous    { font-size: .75rem; color: var(--tk-ink-2); }

/* --- Mise en colonnes ----------------------------------------------------
   Sur poste de travail, la file d'attente et les indicateurs se regardent
   ensemble. Sur téléphone, tout s'empile — rien n'est retiré. */

.tk-colonnes { display: grid; gap: var(--tk-4); }

@media (min-width: 900px) {
    .tk-colonnes { grid-template-columns: 1.15fr 1fr; gap: var(--tk-6); align-items: start; }
    .tk-actions-rapides { grid-template-columns: repeat(4, 1fr); }
    .tk-compteurs { grid-template-columns: repeat(4, 1fr); }
    .tk-compteur--vedette { grid-column: span 4; }
    .tk-grille-chiffres { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1400px) {
    .tk-compteur--vedette { grid-column: span 2; }
    .tk-compteurs { grid-template-columns: repeat(5, 1fr); }
}

/* ── Bannière d'activation des notifications ────────────────────────────────
   Elle s'affiche par-dessus le contenu, en bas sur téléphone — là où le pouce
   arrive — et au-dessus de la barre d'onglets, dont elle respecte la hauteur
   et la zone sûre. Sans ce décalage, le bouton « Activer » se retrouve sous
   la navigation et devient intouchable.                                      */
.tk-push {
    position: fixed;
    left: var(--tk-3);
    right: var(--tk-3);
    bottom: calc(72px + env(safe-area-inset-bottom) + var(--tk-3));
    z-index: 900;

    display: flex;
    align-items: center;
    gap: var(--tk-3);

    padding: var(--tk-3) var(--tk-3) var(--tk-3) var(--tk-4);
    background: var(--tk-vert-900);
    color: var(--tk-blanc);
    border-radius: var(--tk-r-carte);
    box-shadow: var(--tk-e3);

    animation: tk-push-entre var(--tk-t-entre) both;
}

.tk-push__texte { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tk-push__texte strong { font-size: .875rem; line-height: 1.25; }
.tk-push__texte .tk-label { color: rgba(255, 255, 255, .62); }

.tk-push__fermer {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, .5);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--tk-r-pill);
}
.tk-push__fermer:active { background: rgba(255, 255, 255, .1); }

@keyframes tk-push-entre {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Sur poste de travail, pas de barre d'onglets : la bannière se cale en bas à
   droite plutôt que de barrer toute la largeur de l'écran. */
@media (min-width: 1024px) {
    .tk-push {
        left: auto;
        right: var(--tk-6);
        bottom: var(--tk-6);
        max-width: 26rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tk-push { animation: none; }
}

/* ── État d'accès d'un compte, et durées d'abonnement ───────────────────────
   L'état d'accès est le sujet de la fiche : il tient sur une ligne, avec sa
   pastille et une phrase qui dit ce qui va se passer. Une pastille seule
   laisserait chercher la conséquence.                                        */
.tk-etat-acces {
    display: flex;
    align-items: flex-start;
    gap: var(--tk-3);
    margin-top: var(--tk-4);
    padding-top: var(--tk-3);
    border-top: 1px solid var(--tk-line);
    flex-wrap: wrap;
}
.tk-etat-acces__phrase {
    flex: 1 1 16rem;
    min-width: 0;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--tk-ink-2);
}
.tk-etat-acces__phrase strong { color: var(--tk-ink); }

/* Quatre durées, quatre boutons. La grille se comprime au lieu de déborder :
   `minmax(0, 1fr)` et non `1fr`, sinon un libellé long pousse la colonne. */
.tk-durees {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tk-2);
    margin-top: var(--tk-3);
}
@media (min-width: 640px) {
    .tk-durees { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tk-duree {
    width: 100%;
    min-height: var(--tk-touche);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--tk-3) var(--tk-2);

    background: var(--tk-blanc);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    cursor: pointer;
    transition: border-color var(--tk-t-micro), background var(--tk-t-micro),
                transform var(--tk-t-micro);
    -webkit-tap-highlight-color: transparent;
}
.tk-duree:hover  { border-color: var(--tk-orange); background: var(--tk-orange-wash); }
.tk-duree:active { transform: scale(.98); }

.tk-duree__valeur {
    font-weight: 600;
    font-size: .875rem;
    color: var(--tk-vert-900);
    white-space: nowrap;
}
.tk-duree__sous {
    font-size: .75rem;
    color: var(--tk-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .tk-duree { transition: none; }
    .tk-duree:active { transform: none; }
}

/* Bouton de tableau : la ligne est déjà dense, l'action doit y tenir. */
.tk-btn--mini {
    min-height: 32px;
    padding: 0 var(--tk-3);
    font-size: .78rem;
}
.tk-tab__actions { display: flex; gap: var(--tk-2); align-items: center; }

/* La durée retenue dans la feuille de règlement. */
.tk-duree--actif {
    border-color: var(--tk-orange);
    background: var(--tk-orange-wash);
    box-shadow: inset 0 0 0 1px var(--tk-orange);
}

/* Le retour d'une action réussie. Les gabarits réécrits appelaient
   `afficherFlash()` sans afficher ce qu'elle retourne : AUCUN message —
   confirmation comme erreur — n'atteignait l'utilisateur. La variante manquait
   donc aussi, faute d'avoir jamais été rendue. */
.tk-alerte--succes {
    background: var(--tk-vert-wash);
    border-color: var(--tk-vert-500);
    color: var(--tk-vert-900);
}

/* Un message de retour se place au-dessus du contenu, avec de l'air : collé au
   titre, on le prend pour une partie de l'écran et on ne le lit pas. */
.tk-page > .tk-alerte { margin: 0 var(--tk-4) var(--tk-4); }

/* --- Les suggestions d'articles, à la saisie d'une commande --------------
   Une seule boîte pour toute la page, déplacée sous le champ actif : une par
   ligne recopierait la liste à chaque article ajouté. Elle est en `fixed`
   plutôt qu'en `absolute` pour ne pas dépendre du contexte de positionnement
   de la ligne, qui change selon l'écran. */
.tk-suggest {
    position: absolute;
    z-index: 60;
    max-height: 17rem;
    overflow-y: auto;
    background: var(--tk-blanc);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    box-shadow: var(--tk-e3);
    padding: var(--tk-1);
}
.tk-suggest__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tk-3);
    width: 100%;
    min-height: 44px;              /* cible tactile : § 7.2, sans exception */
    padding: var(--tk-2) var(--tk-3);
    background: none;
    border: 0;
    border-radius: var(--tk-r-ctrl);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--tk-ink);
}
.tk-suggest__item:hover,
.tk-suggest__item:focus-visible { background: var(--tk-vert-wash); }
.tk-suggest__nom  { font-weight: 600; color: var(--tk-vert-900); min-width: 0; overflow-wrap: anywhere; }
.tk-suggest__prix { color: var(--tk-ink-3); font-size: .8125rem; white-space: nowrap; }

/* Le message d'erreur sous un champ. Il vit sous le champ qu'il concerne et
   non en tête de formulaire : une liste d'erreurs en haut oblige à retrouver
   soi-même lequel des huit champs est en cause. */
.tk-champ__erreur {
    margin: calc(-1 * var(--tk-2)) 0 var(--tk-4);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--tk-danger);
}

/* =============================================================================
   Tableau de bord

   La couleur porte du sens et rien d'autre : vert profond pour ce qui est
   acquis, orange pour ce qui est en cours, rouge pour ce qui a échoué. Aucune
   teinte n'est décorative — c'est ce qui permet d'en mettre beaucoup sans que
   l'écran devienne bavard.
   ========================================================================== */

/* --- Recherche globale ---------------------------------------------------- */

.tk-recherche {
    display: flex;
    align-items: center;
    gap: var(--tk-2);
    padding: var(--tk-1) var(--tk-1) var(--tk-1) var(--tk-4);
    margin-bottom: var(--tk-4);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-pill);
    background: var(--tk-blanc);
    transition: border-color var(--tk-t-micro), box-shadow var(--tk-t-micro);
}
.tk-recherche:focus-within {
    border-color: var(--tk-orange);
    box-shadow: 0 0 0 3px var(--tk-orange-wash);
}
.tk-recherche__loupe { color: var(--tk-ink-3); }

.tk-recherche input {
    flex: 1;
    min-width: 0;
    min-height: var(--tk-touche);
    border: 0;
    background: none;
    font-family: var(--tk-corps);
    /* 16px : en dessous, iOS zoome au focus et casse la mise en page. */
    font-size: 16px;
    color: var(--tk-ink);
}
.tk-recherche input:focus { outline: none; }
.tk-recherche input::-webkit-search-cancel-button { -webkit-appearance: none; }

.tk-recherche__btn {
    width: var(--tk-touche);
    height: var(--tk-touche);
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--tk-r-pill);
    background: var(--tk-orange);
    color: #fff;
    font-size: 1.125rem;
    cursor: pointer;
    transition: background var(--tk-t-micro);
}
.tk-recherche__btn:active { background: var(--tk-orange-press); }

/* --- Barre de période ----------------------------------------------------- */

.tk-periode-barre { margin-bottom: var(--tk-4); }
.tk-periode-barre .tk-filtres { padding-top: 0; }
.tk-periode-barre__perso { margin-top: var(--tk-1); }

/* --- Carte héros ---------------------------------------------------------
   La marchandise en circulation. Fond vert profond : c'est le chiffre autour
   duquel tourne la journée, il occupe la place qui va avec. */

.tk-heros {
    padding: var(--tk-5);
    margin-bottom: var(--tk-3);
    border-radius: var(--tk-r-carte);
    background: var(--tk-vert-900);
    color: #fff;
    box-shadow: var(--tk-e2);
}

.tk-heros__tete {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--tk-3);
}

.tk-heros__label {
    font-size: .8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .66);
}

.tk-heros__montant {
    margin-top: var(--tk-1);
    font-family: var(--tk-display);
    font-weight: 700;
    font-size: 2.125rem;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.tk-heros__lien {
    flex: 0 0 auto;
    padding: var(--tk-1) var(--tk-3);
    border-radius: var(--tk-r-pill);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}
.tk-heros__lien:hover { text-decoration: none; background: rgba(255, 255, 255, .22); }

.tk-heros__jauge {
    height: 5px;
    margin: var(--tk-4) 0;
    border-radius: var(--tk-r-pill);
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
}
.tk-heros__jauge span {
    display: block;
    height: 100%;
    border-radius: var(--tk-r-pill);
    background: var(--tk-orange);
    transform-origin: left;
    animation: tk-jauge var(--tk-t-entre) both;
}

.tk-heros__paire {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tk-2);
}

.tk-heros__bloc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--tk-3);
    border-radius: var(--tk-r-ctrl);
    background: rgba(255, 255, 255, .09);
    color: #fff;
    transition: background var(--tk-t-micro), transform var(--tk-t-micro);
}
.tk-heros__bloc:hover  { background: rgba(255, 255, 255, .15); text-decoration: none; }
.tk-heros__bloc:active { transform: scale(.985); }

.tk-heros__bloc-label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
}
.tk-heros__bloc-valeur {
    font-family: var(--tk-display);
    font-weight: 700;
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
}
.tk-heros__bloc-sous { font-size: .75rem; color: rgba(255, 255, 255, .6); }

/* --- Cartes teintées ------------------------------------------------------ */

.tk-cartes-teintees {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tk-2);
    margin-bottom: var(--tk-5);
}

.tk-teinte {
    display: block;
    padding: var(--tk-4);
    border-radius: var(--tk-r-carte);
    border: 1px solid transparent;
    transition: transform var(--tk-t-micro), border-color var(--tk-t-micro);
}
.tk-teinte:hover  { text-decoration: none; }
.tk-teinte:active { transform: scale(.99); }

.tk-teinte--vert   { background: var(--tk-vert-wash);   color: var(--tk-vert-700); }
.tk-teinte--orange { background: var(--tk-orange-wash); color: var(--tk-orange-press); }
.tk-teinte--rouge  { background: var(--tk-danger-wash); color: var(--tk-danger); }

.tk-teinte--vert:hover   { border-color: var(--tk-vert-500); }
.tk-teinte--orange:hover { border-color: var(--tk-orange); }
.tk-teinte--rouge:hover  { border-color: var(--tk-danger); }

.tk-teinte__tete { display: flex; align-items: center; gap: var(--tk-2); }

.tk-teinte__pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--tk-r-ctrl);
    background: rgba(255, 255, 255, .7);
}

.tk-teinte__label { font-size: .8125rem; font-weight: 600; }

.tk-teinte__valeur {
    margin-top: var(--tk-2);
    font-family: var(--tk-display);
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1.1;
    color: var(--tk-vert-900);
    font-variant-numeric: tabular-nums;
}
.tk-teinte--rouge .tk-teinte__valeur { color: var(--tk-danger); }

.tk-teinte__detail { margin-top: 2px; font-size: .75rem; color: var(--tk-ink-2); }

/* --- Actions rapides : pastilles colorées --------------------------------- */

.tk-action {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--tk-2);
    min-height: 92px;
}

.tk-action__pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--tk-r-pill);
}
.tk-action__pastille--orange { background: var(--tk-orange-wash); color: var(--tk-orange-press); }
.tk-action__pastille--vert   { background: var(--tk-vert-wash);   color: var(--tk-vert-700); }

.tk-action__libelle { font-size: .8125rem; line-height: 1.25; }

/* --- Carte de commande, avec son bouton d'actions -------------------------
   Agir sans quitter le tableau de bord : ouvrir la commande pour la réassigner
   casse le rythme quand on en traite quinze à la suite. */

.tk-carte--commande { position: relative; padding: 0; }

.tk-carte__corps {
    display: block;
    padding: var(--tk-4);
    padding-right: var(--tk-10);
    color: inherit;
}
.tk-carte__corps:hover { text-decoration: none; }

.tk-carte__actions {
    position: absolute;
    top: var(--tk-2);
    right: var(--tk-2);
    width: var(--tk-touche);
    height: var(--tk-touche);
    border: 0;
    border-radius: var(--tk-r-pill);
    background: none;
    color: var(--tk-ink-3);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--tk-t-micro), color var(--tk-t-micro);
    -webkit-tap-highlight-color: transparent;
}
.tk-carte__actions:hover,
.tk-carte__actions:active { background: var(--tk-vert-wash); color: var(--tk-vert-900); }

/* --- Adaptations ---------------------------------------------------------- */

@media (min-width: 600px) {
    .tk-cartes-teintees { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
    .tk-heros { padding: var(--tk-6); }
    .tk-heros__montant { font-size: 2.75rem; }
    .tk-periode-barre {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--tk-4);
    }
    .tk-periode-barre__perso { margin-top: 0; }
}

/* =============================================================================
   Menu latéral en vert profond (poste de travail)

   Le menu devient une colonne de couleur pleine : il cesse d'être « une partie
   de la page » pour devenir le cadre de l'application. Le contenu, resté blanc,
   gagne en présence par contraste — c'est le blanc qui ressort, pas le menu.

   Toutes les surcharges vivent ici plutôt que dispersées : le menu clair reste
   le cas de base dans composants.css, et cette feuille le retourne d'un bloc.
   ========================================================================== */

@media (min-width: 1024px) {

    .tk-lateral {
        background: var(--tk-vert-900);
        border-right: 0;
    }

    .tk-lateral__marque       { color: #fff; }
    .tk-lateral__marque span  { color: var(--tk-orange); }

    /* Les entrées passent en clair sur fond sombre. */
    .tk-lateral .tk-nav__lien {
        color: rgba(255, 255, 255, .72);
    }
    .tk-lateral .tk-nav__lien:hover {
        background: rgba(255, 255, 255, .09);
        color: #fff;
    }

    /* La page courante : fond légèrement éclairci et filet orange. L'orange
       reste la seule couleur qui dise « ici ». */
    .tk-lateral .tk-nav__lien--actif {
        background: rgba(255, 255, 255, .13);
        color: #fff;
        box-shadow: inset 3px 0 0 var(--tk-orange);
    }

    .tk-lateral .tk-nav__section {
        color: rgba(255, 255, 255, .42);
    }

    .tk-lateral__pied {
        border-top-color: rgba(255, 255, 255, .14);
    }

    /* Le rouge de déconnexion ne tient pas sur ce fond : il vire à l'illisible.
       On l'éclaircit juste assez pour rester distinct sans crier. */
    .tk-lateral__pied .tk-nav__lien span[style] {
        color: #FF9C8E !important;
    }

    /* La pastille de compteur garde l'orange, mais son texte doit rester net. */
    .tk-lateral .tk-nav__badge {
        background: var(--tk-orange);
        color: #fff;
    }

    /* Barre de défilement discrète : un menu long ne doit pas afficher une
       barre grise épaisse au milieu d'une colonne colorée. */
    .tk-lateral { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
    .tk-lateral::-webkit-scrollbar        { width: 6px; }
    .tk-lateral::-webkit-scrollbar-thumb  { background: rgba(255,255,255,.22); border-radius: 3px; }
    .tk-lateral::-webkit-scrollbar-track  { background: transparent; }
}

/* =============================================================================
   Bandeau de chiffres — en-tête commun aux pages de liste

   Chaque écran de liste ouvre sur les deux ou trois nombres qui résument ce
   qu'on regarde. Sans eux, on lit une liste sans savoir ce qu'elle pèse.
   ========================================================================== */

.tk-bandeau {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--tk-2);
    margin-bottom: var(--tk-4);
}

.tk-bandeau__item {
    padding: var(--tk-3) var(--tk-4);
    border-radius: var(--tk-r-carte);
    background: var(--tk-vert-wash);
}
.tk-bandeau__item--orange { background: var(--tk-orange-wash); }
.tk-bandeau__item--rouge  { background: var(--tk-danger-wash); }
.tk-bandeau__item--neutre { background: var(--tk-blanc); border: 1px solid var(--tk-line); }

.tk-bandeau__label {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tk-ink-2);
}

.tk-bandeau__valeur {
    margin-top: 2px;
    font-family: var(--tk-display);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.15;
    color: var(--tk-vert-900);
    font-variant-numeric: tabular-nums;
}
.tk-bandeau__item--rouge .tk-bandeau__valeur  { color: var(--tk-danger); }
.tk-bandeau__item--orange .tk-bandeau__valeur { color: var(--tk-orange-press); }

.tk-bandeau__sous { font-size: .75rem; color: var(--tk-ink-2); }

/* --- Barre d'écran : titre, compte, action ------------------------------- */

.tk-barre-ecran {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tk-3);
    margin-bottom: var(--tk-3);
}

.tk-barre-ecran__compte {
    font-size: .8125rem;
    color: var(--tk-ink-2);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
    .tk-bandeau { gap: var(--tk-3); }
    .tk-bandeau__valeur { font-size: 1.625rem; }
}

/* =============================================================================
   Poste de travail — densité et mise en colonnes

   Le mobile impose l'empilement : une carte par élément, tout sur une colonne.
   Transposer cela tel quel sur un écran de 1900 px donne une bande étroite
   perdue au milieu du vide, et un champ « téléphone » large de 900 px.

   Ces règles ne changent PAS le contenu — elles le redisposent. Une ligne de
   liste devient une ligne, un formulaire devient deux colonnes.
   ========================================================================== */

/* --- Ligne de liste ------------------------------------------------------
   Sur téléphone : un bloc empilé, comme avant.
   Sur écran large : une vraie ligne, colonnes alignées d'une ligne à l'autre —
   c'est l'alignement qui rend une liste lisible en diagonale. */

.tk-ligne {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--tk-1) var(--tk-3);
    align-items: start;
    padding: var(--tk-4);
    background: var(--tk-blanc);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-carte);
    box-shadow: var(--tk-e1);
    color: inherit;
    transition: transform var(--tk-t-micro), border-color var(--tk-t-micro);
}
.tk-ligne:hover  { text-decoration: none; border-color: var(--tk-vert-500); }
.tk-ligne:active { transform: scale(.99); }

.tk-ligne__code {
    grid-column: 1;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tk-ink-3);
    font-variant-numeric: tabular-nums;
}

.tk-ligne__principal { grid-column: 1; min-width: 0; }
.tk-ligne__titre     { display: block; font-weight: 600; color: var(--tk-vert-900); }
.tk-ligne__sous      { display: block; font-size: .8125rem; color: var(--tk-ink-2);
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tk-ligne__statut  { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.tk-ligne__meta    { grid-column: 1; font-size: .8125rem; color: var(--tk-ink-2);
                     padding-top: var(--tk-2); margin-top: var(--tk-1);
                     border-top: 1px solid var(--tk-line); }
.tk-ligne__montant { grid-column: 2; justify-self: end; align-self: end;
                     font-weight: 700; color: var(--tk-vert-900);
                     font-variant-numeric: tabular-nums;
                     padding-top: var(--tk-2); margin-top: var(--tk-1);
                     border-top: 1px solid var(--tk-line); }

.tk-ligne__actions {
    grid-column: 2;
    justify-self: end;
}

@media (min-width: 1024px) {
    /* La liste devient un tableau sans en être un : pas de <table>, mais des
       colonnes alignées. Les cartes perdent leur ombre — vingt ombres à la
       suite font une bouillie grise. */
    .tk-liste { gap: 1px; background: var(--tk-line); border-radius: var(--tk-r-carte); overflow: hidden; }
    .tk-liste > * { border-radius: 0; border: 0; box-shadow: none; }

    .tk-ligne {
        /* Chaque colonne peut se comprimer. En largeur fixe (8.5 + 12 + 8.5 +
           7.5 = 36.5 rem plus les gouttières), la grille DÉBORDAIT dès que la
           colonne principale était réduite — menu latéral plus colonne de
           droite sur un écran de 1 280 px. Le minmax laisse la place au
           contenu et la reprend quand elle manque. */
        grid-template-columns:
            minmax(0, 8.5rem) minmax(0, 1fr) minmax(0, 12rem)
            minmax(0, 8.5rem) minmax(0, 7.5rem);
        align-items: center;
        gap: var(--tk-4);
        padding: var(--tk-3) var(--tk-4);
    }
    .tk-ligne:hover { background: var(--tk-vert-wash); }

    .tk-ligne > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

    .tk-ligne__code      { grid-column: 1; grid-row: 1; }
    .tk-ligne__principal { grid-column: 2; grid-row: 1; }
    .tk-ligne__meta      { grid-column: 3; grid-row: 1; padding: 0; margin: 0; border: 0; }
    .tk-ligne__statut    { grid-column: 4; grid-row: 1; justify-self: start; }
    .tk-ligne__montant   { grid-column: 5; grid-row: 1; padding: 0; margin: 0; border: 0; }
    .tk-ligne__actions   { grid-column: 6; grid-row: 1; }

    /* En-tête de colonnes : sans lui, on devine ce que veut dire chaque colonne. */
    .tk-liste-entete {
        display: grid;
        /* Les mêmes colonnes que la ligne, aux mêmes contraintes : sans cela,
           l'en-tête et le contenu ne s'alignent plus dès qu'on comprime. */
        grid-template-columns:
            minmax(0, 8.5rem) minmax(0, 1fr) minmax(0, 12rem)
            minmax(0, 8.5rem) minmax(0, 7.5rem);
        gap: var(--tk-4);
        padding: 0 var(--tk-4) var(--tk-2);
        font-size: .6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--tk-ink-3);
    }
    .tk-liste-entete > :last-child { text-align: right; }
}

@media (max-width: 1023px) {
    .tk-liste-entete { display: none; }
}

/* --- Formulaire sur poste de travail --------------------------------------
   Deux colonnes : la saisie à gauche, le récapitulatif et l'action à droite,
   collé au défilement. Sur un long formulaire, devoir redescendre en bas pour
   voir le total puis remonter corriger une ligne est une perte de temps que
   personne ne devrait subir. */

.tk-formulaire { display: grid; gap: var(--tk-4); }

@media (min-width: 1100px) {
    .tk-formulaire {
        grid-template-columns: minmax(0, 1fr) 22rem;
        gap: var(--tk-6);
        align-items: start;
    }

    .tk-formulaire__principal { display: grid; gap: var(--tk-4); }

    .tk-formulaire__cote {
        position: sticky;
        top: var(--tk-4);
        display: grid;
        gap: var(--tk-3);
    }

    /* L'action vit dans la colonne de droite : la barre ancrée en bas d'écran
       est une réponse au pouce, elle n'a pas de sens à la souris. */
    .tk-formulaire ~ .tk-barre-action,
    .tk-formulaire .tk-barre-action { display: none; }
}

/* --- Champs : largeur selon le contenu ------------------------------------
   Un numéro de téléphone n'a pas besoin de 900 px. Les champs courts se
   rangent par deux ou trois, les champs longs gardent la pleine largeur. */

.tk-champs { display: grid; gap: 0 var(--tk-3); }

@media (min-width: 700px) {
    .tk-champs--2 { grid-template-columns: 1fr 1fr; }
    .tk-champs--3 { grid-template-columns: 1fr 1fr 1fr; }
    .tk-champs__large { grid-column: 1 / -1; }
}

/* --- Densité générale ---------------------------------------------------- */

@media (min-width: 1024px) {
    /* Les écrans de saisie et de détail respirent ; les écrans de liste
       exploitent la largeur. */
    .tk-conteneur--large { max-width: 1400px; }

    .tk-carte { padding: var(--tk-5); }

    /* Le bouton flottant appartient au monde tactile. */
    .tk-fab { display: none; }
}

/* =============================================================================
   Densité mobile

   Sur un téléphone, chaque pixel vertical coûte un mouvement de pouce. Une
   carte à 16 px de marge intérieure et 12 px d'écart, répétée quinze fois,
   fait défiler deux écrans pour rien.

   On resserre donc les surfaces SANS toucher aux cibles tactiles : les boutons,
   les liens et les champs gardent leurs 44 px. C'est le vide qui maigrit, pas
   ce qu'on touche.
   ========================================================================== */

@media (max-width: 1023px) {

    .tk-conteneur { padding: var(--tk-3); }

    /* Cartes et lignes : moins de marge intérieure, moins d'écart entre elles. */
    .tk-carte,
    .tk-ligne { padding: var(--tk-3); }

    .tk-liste { gap: var(--tk-2); }

    /* Les titres de section prenaient autant de place qu'une ligne de contenu. */
    .tk-section { margin: var(--tk-4) 0 var(--tk-2); font-size: .75rem; }

    /* Les compteurs et bandeaux se resserrent : ce sont des chiffres, pas des
       affiches. */
    .tk-bandeau        { gap: var(--tk-1); margin-bottom: var(--tk-3); }
    .tk-bandeau__item  { padding: var(--tk-2) var(--tk-3); }
    .tk-bandeau__valeur{ font-size: 1.25rem; }

    .tk-compteurs      { gap: var(--tk-1); margin: var(--tk-3) 0 var(--tk-4); }
    .tk-compteur       { padding: var(--tk-2) var(--tk-3); }

    .tk-heros          { padding: var(--tk-4); }
    .tk-heros__jauge   { margin: var(--tk-3) 0; }

    .tk-cartes-teintees { gap: var(--tk-1); margin-bottom: var(--tk-4); }
    .tk-teinte          { padding: var(--tk-3); }

    /* Les blocs de formulaire : l'espace entre deux champs suffit, la marge
       de la carte par-dessus était de trop. */
    .tk-champ { margin-bottom: var(--tk-3); }

    /* Une liste de plus de dix éléments n'a pas besoin d'apparaître en
       cascade : l'effet devient une attente. */
    .tk-liste > :nth-child(n+7) { animation: none; }
}

/* Écrans très étroits : on gagne encore quelques lignes. */
@media (max-width: 380px) {
    .tk-conteneur      { padding: var(--tk-2); }
    .tk-bandeau        { grid-template-columns: 1fr 1fr; }
    .tk-bandeau__valeur{ font-size: 1.125rem; }
    .tk-heros__montant { font-size: 1.75rem; }
}

/* =============================================================================
   Ligne compacte sur téléphone

   La même ligne que sur poste de travail, mais empilée en deux niveaux :
   l'essentiel en haut, le contexte en dessous. Trois lignes de texte au lieu
   de cinq.
   ========================================================================== */

@media (max-width: 1023px) {
    .tk-ligne {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px var(--tk-3);
    }

    /* Le code passe en tête de ligne, discret, sur la même ligne que rien
       d'autre : c'est un repère, pas une information qu'on lit. */
    .tk-ligne__code { grid-column: 1 / -1; }

    .tk-ligne__principal { grid-column: 1; grid-row: 2; }
    .tk-ligne__statut    { grid-column: 2; grid-row: 2; align-self: center; }

    /* Livreur et montant partagent la dernière ligne, sans filet séparateur :
       la carte est déjà assez courte pour qu'on n'ait pas besoin de la couper. */
    .tk-ligne__meta {
        grid-column: 1;
        grid-row: 3;
        padding-top: var(--tk-1);
        margin-top: 0;
        border-top: 0;
    }
    .tk-ligne__meta .tk-label { display: inline !important; }
    .tk-ligne__meta .tk-label::before { content: ' · '; }

    .tk-ligne__montant {
        grid-column: 2;
        grid-row: 3;
        padding-top: var(--tk-1);
        margin-top: 0;
        border-top: 0;
        font-size: .9375rem;
    }
}

/* --- Ligne avec action ---------------------------------------------------
   La ligne ouvre le détail, l'action fait autre chose : les deux ne peuvent
   pas être imbriquées, un lien dans un lien n'est pas cliquable. Elles vivent
   donc côte à côte dans un groupe. */

.tk-ligne-groupe {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    background: var(--tk-blanc);
}
.tk-ligne-groupe .tk-ligne { border: 0; box-shadow: none; background: none; }

.tk-ligne__action {
    padding: var(--tk-2) var(--tk-3);
    margin-right: var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--tk-vert-900);
    white-space: nowrap;
}
.tk-ligne__action:hover { text-decoration: none; border-color: var(--tk-orange); color: var(--tk-orange-press); }

/* Une course qui n'avance plus : le liseré rouge n'est pas décoratif, c'est la
   seule chose sur laquelle un superviseur peut agir tout de suite. */
.tk-ligne-groupe--alerte,
.tk-ligne--alerte { box-shadow: inset 3px 0 0 var(--tk-danger); }

@media (max-width: 1023px) {
    .tk-ligne-groupe { grid-template-columns: 1fr; }
    .tk-ligne__action {
        margin: 0 var(--tk-3) var(--tk-3);
        text-align: center;
        min-height: var(--tk-touche);
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Sous le seuil de stock : c'est une alerte de réapprovisionnement, pas un
   échec. Le liseré est orange-brun, réservé à ce qui demande une action
   planifiée, quand le rouge reste aux courses qui ont échoué. */
.tk-ligne-groupe--attention { box-shadow: inset 3px 0 0 var(--tk-warning); }

/* --- Paire de nombres ----------------------------------------------------
   Deux quantités liées, dont une seule compte vraiment : le stock confié est
   livrable aujourd'hui, le stock propre annonce la rupture de demain. Les
   afficher sur deux colonnes séparées doublerait la largeur pour un chiffre
   qu'on ne lit qu'en second. */
.tk-duo {
    display: inline-flex;
    align-items: baseline;
    gap: var(--tk-1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tk-duo__fort   { font-weight: 700; color: var(--tk-vert-900); }
.tk-duo__faible { font-size: .8125rem; color: var(--tk-ink-3); }
.tk-duo__faible::before { content: "/"; margin-right: var(--tk-1); color: var(--tk-line); }

@media (min-width: 1024px) {
    /* L'action garde une largeur fixe, sinon deux lignes voisines n'ont pas
       leurs colonnes au même endroit — et une liste dont les colonnes dansent
       ne se lit plus en diagonale. */
    .tk-ligne-groupe { grid-template-columns: minmax(0, 1fr) 10rem; }
    .tk-ligne-groupe .tk-ligne__action {
        margin-right: var(--tk-4);
        text-align: center;
    }
    /* L'en-tête recule d'autant : les titres restent au-dessus de leur colonne. */
    .tk-liste-entete:has(+ .tk-liste .tk-ligne-groupe) {
        padding-right: calc(10rem + var(--tk-4));
    }
}

/* --- Filtre actif --------------------------------------------------------
   Un filtre qu'on ne voit pas est un filtre dont on accuse la liste d'être
   incomplète. Il s'annonce, et il se retire d'un seul geste. */
.tk-filtre-actif {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tk-3);
    padding: var(--tk-2) var(--tk-3);
    margin-bottom: var(--tk-3);
    background: var(--tk-vert-wash);
    border-radius: var(--tk-r-ctrl);
    font-size: .875rem;
    color: var(--tk-vert-900);
}
.tk-filtre-actif a {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--tk-orange-press);
    white-space: nowrap;
}

/* --- Lignes de transfert -------------------------------------------------
   Une ligne = un produit et sa quantité. Le raccourci « Tout » évite trente
   appuis sur « + » quand un commerçant vide son dépôt. */
.tk-transfert__ligne {
    display: flex;
    align-items: center;
    gap: var(--tk-2);
    padding: var(--tk-2) 0;
    border-top: 1px solid var(--tk-line);
}
.tk-transfert__ligne:first-child { border-top: 0; padding-top: 0; }

.tk-transfert__produit { flex: 1; min-width: 0; display: grid; }
.tk-transfert__produit .tk-label { margin: 0; }

.tk-transfert__tout {
    min-height: 32px;
    padding: 0 var(--tk-2);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
    font-size: .75rem;
    font-weight: 600;
    color: var(--tk-ink-2);
}
.tk-transfert__tout:active { transform: scale(.96); }

/* --- Classement à barres -------------------------------------------------
   Un montant seul ne se compare pas ; la barre donne l'échelle d'un coup
   d'œil, sans imposer un graphique et sa bibliothèque. */
.tk-classement { padding: var(--tk-3) 0; border-top: 1px solid var(--tk-line); }
.tk-classement:first-child { border-top: 0; padding-top: 0; }
.tk-classement__tete {
    display: flex; justify-content: space-between;
    gap: var(--tk-3); align-items: baseline;
}
.tk-classement__nom { font-weight: 600; color: var(--tk-vert-900); min-width: 0; }

/* Dans une ligne dense, la jauge tient sous le nom : elle informe sans
   pousser une colonne de plus. */
.tk-ligne__principal .tk-jauge { margin-top: var(--tk-1); max-width: 14rem; }

/* --- Demande en attente --------------------------------------------------
   Le liseré orange dit « on attend quelque chose de vous » sans crier : une
   demande de partenariat n'est pas une alerte, c'est une décision à prendre. */
.tk-carte--attente { box-shadow: inset 3px 0 0 var(--tk-orange); }

.tk-demande__actions {
    display: grid;
    gap: var(--tk-2);
    margin-top: var(--tk-3);
    padding-top: var(--tk-3);
    border-top: 1px solid var(--tk-line);
}
@media (min-width: 640px) {
    /* Le plan et le bouton sur la même ligne : on choisit et on valide d'un
       seul regard, sans que le bouton parte sous le pli. */
    .tk-demande__actions { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* --- Ligne d'attente -----------------------------------------------------
   Une commande que personne n'a prise, avec depuis combien de temps. Le délai
   est la seule information qui compte : il passe donc en chiffres tabulaires,
   et vire à l'orange quand il devient anormal. */
.tk-attente {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tk-3);
    padding: var(--tk-2) 0;
    border-top: 1px solid var(--tk-line);
    color: inherit;
}
.tk-attente:first-of-type { border-top: 0; }
.tk-attente:hover { text-decoration: none; }
.tk-attente__nom { display: grid; min-width: 0; }
.tk-attente__nom .tk-label { margin: 0; }
.tk-attente__delai { font-weight: 700; color: var(--tk-ink-2); white-space: nowrap; }
.tk-attente__delai--tard { color: var(--tk-orange-press); }

/* --- Bascule ------------------------------------------------------------
   Une case à cocher qui engage de l'argent mérite mieux qu'un carré de 13 px :
   toute la ligne est cliquable, et le libellé explique la conséquence. */
.tk-bascule {
    display: flex;
    gap: var(--tk-3);
    align-items: flex-start;
    padding: var(--tk-3);
    margin-bottom: var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    cursor: pointer;
    transition: border-color var(--tk-t-micro), background var(--tk-t-micro);
}
.tk-bascule input { width: 22px; height: 22px; flex: none; accent-color: var(--tk-orange); }
.tk-bascule__titre { display: block; font-weight: 600; color: var(--tk-vert-900); }
.tk-bascule .tk-label { margin: 0; }
.tk-bascule:has(input:checked) {
    border-color: var(--tk-orange);
    background: var(--tk-orange-wash);
}

/* --- Le détail de l'argent ----------------------------------------------
   Une commande peut porter cinq montants qui n'appartiennent pas aux mêmes
   personnes. Les empiler sans hiérarchie oblige à faire le calcul de tête ;
   la ligne « le client doit » est donc la seule mise en avant, et ce qui n'est
   pas réclamé est barré plutôt que masqué — on doit voir qu'il existe. */
.tk-argent { display: grid; gap: var(--tk-2); margin: var(--tk-4) 0 0; }
.tk-argent > div { display: flex; justify-content: space-between; gap: var(--tk-3); align-items: baseline; }
.tk-argent dt { font-size: .8125rem; color: var(--tk-ink-2); }
.tk-argent dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }

.tk-argent__barre { color: var(--tk-ink-3); text-decoration: line-through; }

.tk-argent__cle {
    padding-top: var(--tk-2);
    border-top: 1px solid var(--tk-line);
}
.tk-argent__cle dt { font-weight: 600; color: var(--tk-vert-900); font-size: .875rem; }

.tk-argent__separe {
    padding-top: var(--tk-2);
    margin-top: var(--tk-1);
    border-top: 1px solid var(--tk-line);
}
.tk-argent__alerte dt,
.tk-argent__alerte dd { color: var(--tk-danger); font-weight: 600; }
.tk-argent__du { color: var(--tk-orange-press); font-weight: 700; }

/* L'action principale dans l'en-tête, sur poste de travail seulement : le
   bouton flottant y est masqué, et une liste sans moyen d'ajouter une ligne
   n'est pas une liste, c'est un cul-de-sac. */
.tk-entete__action {
    min-height: 38px;
    padding: 0 var(--tk-4);
    font-size: .875rem;
    white-space: nowrap;
}

/* --- Bandeau compact ------------------------------------------------------
   Trois chiffres de pilotage n'ont pas besoin d'occuper le premier écran d'un
   téléphone. En compact, ils tiennent sur une ligne et la légende disparaît :
   le chiffre et son étiquette suffisent à savoir où l'on en est. */
@media (max-width: 1023px) {
    .tk-bandeau--compact {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--tk-1);
    }
    .tk-bandeau--compact .tk-bandeau__item   { padding: var(--tk-2); }
    .tk-bandeau--compact .tk-bandeau__label  { font-size: .625rem; }
    .tk-bandeau--compact .tk-bandeau__valeur { font-size: 1.125rem; }
    .tk-bandeau--compact .tk-bandeau__sous   { display: none; }
}

/* Les alertes en pleine largeur, au-dessus des colonnes : ce sont les seules
   choses sur lesquelles on agit tout de suite, elles ne peuvent pas se
   retrouver sous une liste de vingt lignes. */
.tk-alertes-haut { display: grid; gap: var(--tk-2); margin-bottom: var(--tk-4); }
@media (min-width: 1024px) {
    .tk-alertes-haut { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
}

/* =========================================================================
   Boutique publique du commerçant
   =========================================================================
   Le visiteur n'est pas un utilisateur de Tikoo : il ne voit ni menu, ni
   cloche, ni jargon. La vitrine emprunte les jetons du produit — vert profond
   pour la structure, orange pour l'action — et rien d'autre. */

.tk-boutique { background: var(--tk-blanc); padding-bottom: var(--tk-14); }

/* --- L'enseigne ----------------------------------------------------------
   Deux choses, et deux seulement : le nom de la boutique, qui alterne avec sa
   promesse, et le numero qu'on appelle. L'ancien entete y ajoutait l'accroche
   du commercant et alignait le tout sur une ligne ; sur un telephone, le nom
   se tronquait pour laisser la place a une phrase que personne ne lit. */
.tk-ens {
    display: grid;
    justify-items: center;
    gap: var(--tk-2);
    padding: var(--tk-6) var(--tk-4) var(--tk-5);
    padding-top: calc(var(--tk-6) + env(safe-area-inset-top));
    background: var(--tk-vert-900);
    color: #fff;
    text-align: center;
}

/* La scene : une seule fenetre, deux lignes qui s'y relaient. La hauteur est
   fixe — sans elle, la page sauterait a chaque changement de texte. */
.tk-ens__scene {
    position: relative;
    display: block;
    width: 100%;
    max-width: 32rem;
    height: 2.75rem;
    color: inherit;
}
.tk-ens__scene:hover { text-decoration: none; }

.tk-ens__ligne {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    opacity: 0;                      /* l'animation seule les revele */
    line-height: 1.15;
    overflow-wrap: anywhere;
    animation: tk-ens-relais 7s cubic-bezier(.2,0,0,1) infinite both;
}
.tk-ens__ligne--nom {
    font-family: var(--tk-display);
    font-size: clamp(1.375rem, 6vw, 1.875rem);
    font-weight: 700;
    letter-spacing: -.01em;
}
.tk-ens__ligne--promesse {
    font-size: clamp(.9375rem, 4vw, 1.125rem);
    font-weight: 600;
    color: rgba(255,255,255,.82);
    text-transform: uppercase;
    letter-spacing: .1em;
    animation-delay: 3.5s;           /* la moitie du cycle : elles alternent */
}

@keyframes tk-ens-relais {
    0%   { opacity: 0; transform: translateY(55%); }
    5%   { opacity: 1; transform: translateY(0); }
    45%  { opacity: 1; transform: translateY(0); }
    50%  { opacity: 0; transform: translateY(-55%); }
    100% { opacity: 0; transform: translateY(-55%); }
}

/* Sans mouvement, le nom reste — c'est l'identite, la promesse est l'accessoire. */
@media (prefers-reduced-motion: reduce) {
    .tk-ens__ligne { animation: none; }
    .tk-ens__ligne--nom      { opacity: 1; }
    .tk-ens__ligne--promesse { display: none; }
}

.tk-ens__tel {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    white-space: nowrap;
    padding: var(--tk-2) var(--tk-4);
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: var(--tk-r-pill);
}
.tk-ens__tel:hover { text-decoration: none; background: rgba(255,255,255,.12); }

.tk-vitrine        { max-width: 1100px; margin: 0 auto; padding: var(--tk-4); }
.tk-vitrine__titre { font-family: var(--tk-display); font-size: 1.5rem; margin: 0 0 var(--tk-4); }

.tk-vitrine__compte {
    font-size: .8125rem;
    color: var(--tk-ink-3);
    margin: 0 0 var(--tk-3);
    font-variant-numeric: tabular-nums;
}
.tk-vitrine__compte span { color: var(--tk-ink-3); }

.tk-vitrine__pied {
    padding: var(--tk-5) var(--tk-4) calc(var(--tk-8) + env(safe-area-inset-bottom));
    text-align: center;
    font-size: .8125rem;
    color: var(--tk-ink-3);
}
.tk-vitrine__pied a { color: var(--tk-vert-700); font-weight: 600; }

/* --- La grille de produits --------------------------------------------- */
/* Deux par ligne sur telephone : c'est la grammaire de toutes les boutiques
   en ligne. `auto-fill` en donnait une seule sur un ecran de 360 px — une
   carte par ecran, donc rien a comparer, juste du defilement. */
.tk-produits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tk-3);
}
@media (min-width: 700px)  { .tk-produits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tk-4); } }
@media (min-width: 1000px) { .tk-produits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tk-produit {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--tk-blanc);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-carte);
    overflow: hidden;
    transition: border-color var(--tk-t-micro), box-shadow var(--tk-t-micro);
}
@media (hover: hover) {
    .tk-produit:hover { border-color: var(--tk-vert-500); box-shadow: var(--tk-e2); }
    .tk-produit:hover .tk-produit__image img { transform: scale(1.04); }
}

/* Toute la carte mene a la fiche. Sur un telephone, viser une photo est plus
   sur que viser un lien de trois mots. */
.tk-produit__lien { position: absolute; inset: 0; z-index: 1; }
.tk-produit__lien:focus-visible { outline: 2px solid var(--tk-orange); outline-offset: 2px; }

/* Le bouton repasse DEVANT le lien, sinon « Ajouter » ouvrirait la fiche. */
.tk-produit__ajouter { position: relative; z-index: 2; }
.tk-produit--rupture { opacity: .6; }

.tk-produit__image {
    position: relative;
    aspect-ratio: 1;
    background: var(--tk-vert-wash);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tk-produit__image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--tk-t-entre);
}
.tk-produit__initiale {
    font-family: var(--tk-display);
    font-size: 2.5rem;
    color: var(--tk-vert-700);
    opacity: .4;
}
.tk-produit__rupture {
    position: absolute;
    inset: auto var(--tk-2) var(--tk-2) auto;
    background: var(--tk-vert-900);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px var(--tk-2);
    border-radius: var(--tk-r-pill);
}

.tk-produit__corps { display: flex; flex-direction: column; flex: 1; padding: var(--tk-3); gap: var(--tk-1); }
.tk-produit__nom   { font-size: .9375rem; font-weight: 600; color: var(--tk-vert-900); margin: 0; }
.tk-produit__desc  {
    font-size: .8125rem; color: var(--tk-ink-2); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tk-produit__bas   {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--tk-2); margin-top: auto; padding-top: var(--tk-2);
}
.tk-produit__prix    { font-weight: 700; color: var(--tk-vert-900); font-variant-numeric: tabular-nums; }
.tk-produit__ajouter { min-height: 36px; padding: 0 var(--tk-3); font-size: .8125rem; }

/* --- La barre de panier -------------------------------------------------
   Elle suit le défilement : sur un téléphone, le bouton « commander » ne doit
   jamais se trouver trente lignes plus bas que le produit qu'on regarde. */
.tk-panier-barre {
    position: fixed;
    left: var(--tk-4); right: var(--tk-4);
    bottom: calc(var(--tk-4) + env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--tk-3);
    max-width: 500px;
    margin: 0 auto;
    padding: var(--tk-3) var(--tk-4);
    background: var(--tk-orange);
    color: #fff;
    border: 0;
    border-radius: var(--tk-r-pill);
    box-shadow: var(--tk-e3);
    font-size: .9375rem;
    font-weight: 600;
}
.tk-panier-barre:active { transform: scale(.98); }
.tk-panier-barre__compte {
    min-width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.25);
    border-radius: var(--tk-r-pill);
    font-variant-numeric: tabular-nums;
}
.tk-panier-barre__total { margin-left: auto; }

.tk-panier-ligne {
    display: flex;
    align-items: center;
    gap: var(--tk-3);
    padding: var(--tk-3) 0;
    border-bottom: 1px solid var(--tk-line);
}
.tk-panier-ligne__nom  { flex: 1; min-width: 0; font-weight: 600; }
.tk-panier-ligne__prix { font-weight: 700; white-space: nowrap; }

/* Le champ piège : invisible pour un humain, présent pour un robot. Ni
   `display:none` ni `hidden`, que certains robots savent détecter. */
.tk-piege {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* --- L'adresse de la boutique, côté commerçant -------------------------- */
.tk-adresse-boutique { background: var(--tk-vert-wash); border-color: var(--tk-vert-500); }
.tk-adresse-boutique__url {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--tk-vert-900);
    word-break: break-all;
    margin-top: var(--tk-1);
}

/* --- Bloc des montants, à la saisie -------------------------------------
   L'opérateur d'accueil enchaîne les commandes toute la journée : ce bloc est
   celui qu'il relit le plus souvent. Il doit tenir sans défilement, sur un
   téléphone comme sur un écran de bureau. */
.tk-montants { display: grid; gap: var(--tk-3); }
.tk-montants > * { margin: 0 !important; }

.tk-montants__note {
    margin: 0 !important;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--tk-ink-2);
}

.tk-montants__recap {
    padding-top: var(--tk-3);
    border-top: 1px solid var(--tk-line);
}
.tk-montants .tk-champs--2 { gap: var(--tk-2); }
.tk-montants .tk-champ     { margin-bottom: 0; }

/* Choix serré : deux options qui tiennent côte à côte plutôt que l'une sous
   l'autre. « Qui paie la livraison » est une question binaire, elle n'a pas
   besoin de deux lignes pleine largeur. */
.tk-choix--serre { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tk-2); }
.tk-choix--serre .tk-choix__option {
    padding: var(--tk-2) var(--tk-3);
    font-size: .875rem;
    margin: 0;
}

@media (max-width: 400px) {
    /* Sur les plus petits écrans, les deux libellés ne tiennent plus côte à
       côte sans se couper : on repasse à l'empilement. */
    .tk-choix--serre { grid-template-columns: 1fr; }
}

/* --- Onglets de fiche ----------------------------------------------------
   Quatre questions qu'on ne se pose jamais en même temps : ce qu'il est, ce
   qu'il vend, ce qu'on lui livre, ce qu'on lui doit. Les empiler sur un seul
   écran oblige à traverser trois sections pour en atteindre une.

   Ce sont de vrais liens : ils survivent au rechargement après une action, se
   partagent, et fonctionnent sans JavaScript. */
.tk-onglets-fiche {
    display: flex;
    gap: var(--tk-1);
    margin-bottom: var(--tk-4);
    border-bottom: 1px solid var(--tk-line);
    overflow-x: auto;
    scrollbar-width: none;
}
.tk-onglets-fiche::-webkit-scrollbar { display: none; }

.tk-onglet-fiche {
    display: inline-flex;
    align-items: center;
    gap: var(--tk-2);
    padding: var(--tk-3) var(--tk-4);
    white-space: nowrap;
    font-size: .875rem;
    font-weight: 600;
    color: var(--tk-ink-2);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--tk-t-micro), border-color var(--tk-t-micro);
}
.tk-onglet-fiche:hover { text-decoration: none; color: var(--tk-vert-900); }

.tk-onglet-fiche--actif {
    color: var(--tk-vert-900);
    border-bottom-color: var(--tk-orange);
}

.tk-onglet-fiche__compte {
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--tk-r-pill);
    background: var(--tk-line);
    color: var(--tk-ink-2);
    font-size: .6875rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.tk-onglet-fiche--actif .tk-onglet-fiche__compte {
    background: var(--tk-orange-wash);
    color: var(--tk-orange-press);
}

/* Quatre chiffres en bandeau compact : sur téléphone ils tiennent en deux
   lignes de deux plutôt qu'en une file de quatre illisibles. */
@media (max-width: 1023px) {
    .tk-bandeau--compact:has(> :nth-child(4)) { grid-template-columns: 1fr 1fr; }
}

/* --- La fiche d'un article ----------------------------------------------
   Deux colonnes sur poste de travail : l'image a gauche, la decision a droite.
   Empilees, le prix et le bouton tombaient sous la ligne de flottaison d'un
   ecran de 1 280 px — hors de vue au moment precis ou l'on hesite. */
.tk-fil { margin: 0 0 var(--tk-4); font-size: .875rem; }
.tk-fil a { color: var(--tk-vert-700); font-weight: 600; }

.tk-fiche { display: grid; gap: var(--tk-5); align-items: start; }
@media (min-width: 860px) {
    .tk-fiche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--tk-8); }
}

.tk-fiche__visuel { display: grid; gap: var(--tk-3); min-width: 0; }
.tk-fiche__grande {
    position: relative;
    aspect-ratio: 1;
    background: var(--tk-vert-wash);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-carte);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tk-fiche__grande img { width: 100%; height: 100%; object-fit: cover; }
.tk-fiche__grande .tk-produit__initiale { font-size: 5rem; }

/* Les vignettes defilent horizontalement : c'est une bande d'images, pas un
   tableau — le defilement lateral y est le geste attendu, pas un echec. */
.tk-fiche__vignettes {
    display: flex;
    gap: var(--tk-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.tk-fiche__vignettes::-webkit-scrollbar { display: none; }
.tk-fiche__vignette {
    flex: 0 0 auto;
    width: 64px; height: 64px;
    padding: 0;
    background: none;
    border: 2px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    overflow: hidden;
    cursor: pointer;
}
.tk-fiche__vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-fiche__vignette.est-active { border-color: var(--tk-orange); }

.tk-fiche__infos { display: grid; gap: var(--tk-3); align-content: start; min-width: 0; }
.tk-fiche__nom {
    font-family: var(--tk-display);
    font-size: clamp(1.375rem, 5vw, 2rem);
    font-weight: 700;
    color: var(--tk-vert-900);
    line-height: 1.15;
    margin: 0;
    overflow-wrap: anywhere;
}
.tk-fiche__prix {
    font-family: var(--tk-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tk-vert-900);
    font-variant-numeric: tabular-nums;
}
.tk-fiche__dispo { margin-bottom: var(--tk-1); }
.tk-fiche__texte {
    color: var(--tk-ink-2);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* L'achat colle en bas sur telephone : c'est le geste de la page, il ne doit
   jamais demander de faire defiler pour le retrouver. */
.tk-fiche__achat {
    display: flex;
    align-items: center;
    gap: var(--tk-3);
    margin-top: var(--tk-2);
}
.tk-fiche__ajouter { flex: 1; }
.tk-pas--grand { flex: 0 0 auto; }
.tk-pas--grand .tk-pas__btn { width: 44px; height: 44px; font-size: 1.25rem; }
.tk-pas--grand .tk-pas__val { min-width: 2.5rem; font-size: 1.0625rem; }

.tk-fiche__note { font-size: .8125rem; color: var(--tk-ink-3); margin: 0; }

.tk-fiche__suite { margin-top: var(--tk-10); }
.tk-fiche__suite .tk-vitrine__titre { font-size: 1.25rem; }

/* =============================================================================
   Graphiques — SVG, sans bibliothèque

   Pourquoi pas Chart.js ou Recharts : 70 à 300 Ko de JavaScript pour tracer
   une ligne dont le serveur connaît déjà tous les points. Sur un réseau 3G
   ivoirien, c'est deux secondes d'attente avant de voir un chiffre. Le SVG
   part avec la page, s'affiche instantanément, s'imprime proprement, se
   redimensionne seul, et fonctionne sans JavaScript.

   La couleur suit la règle du § 6 : orange pour ce qui se passe bien et qu'on
   suit, vert profond pour la structure, et les seules autres teintes sont
   fonctionnelles — rouge pour l'échec, brun pour l'attente.
   ========================================================================== */

.tk-graphique { margin: 0; }

.tk-graphique__svg {
    width: 100%;
    height: 200px;
    display: block;
    overflow: visible;
}

@media (min-width: 1024px) {
    .tk-graphique__svg { height: 260px; }
}

.tk-graphique__grille {
    stroke: var(--tk-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.tk-graphique__echelle {
    fill: var(--tk-ink-3);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.tk-graphique__abscisse {
    fill: var(--tk-ink-3);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.tk-graphique__trace {
    fill: none;
    stroke: var(--tk-orange);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* La comparaison est en retrait : elle éclaire la série principale, elle ne
   lui dispute pas l'attention. */
.tk-graphique__trace--compare {
    stroke: var(--tk-ink-3);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

.tk-graphique__point {
    fill: var(--tk-blanc);
    stroke: var(--tk-orange);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
.tk-graphique__point--vide { stroke: var(--tk-line); }

.tk-graphique__legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tk-4);
    margin-bottom: var(--tk-3);
    font-size: .8125rem;
    color: var(--tk-ink-2);
}
.tk-graphique__cle { display: inline-flex; align-items: center; gap: var(--tk-2); }
.tk-graphique__puce {
    width: 12px; height: 3px;
    border-radius: 2px;
    background: var(--tk-orange);
}
.tk-graphique__cle--compare .tk-graphique__puce { background: var(--tk-ink-3); }

/* --- Anneau de répartition ---------------------------------------------- */

.tk-anneau { position: relative; width: 180px; margin: 0 auto; }
.tk-anneau__svg { width: 100%; display: block; transform: rotate(-90deg); }

.tk-anneau__fond {
    fill: none;
    stroke: var(--tk-line);
    stroke-width: 4;
}
.tk-anneau__part {
    fill: none;
    stroke-width: 4;
    transition: stroke-width var(--tk-t-micro);
}
.tk-anneau__part:hover { stroke-width: 5.5; }

.tk-anneau__centre {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}
.tk-anneau__valeur {
    font-family: var(--tk-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tk-vert-900);
    line-height: 1;
}
.tk-anneau__sous {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tk-ink-3);
    margin-top: 2px;
}

.tk-anneau__legende {
    list-style: none;
    margin: var(--tk-4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--tk-1);
}
.tk-anneau__legende li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto auto;
    gap: var(--tk-2);
    align-items: center;
    padding: var(--tk-1) 0;
    font-size: .8125rem;
}
.tk-anneau__puce  { width: 10px; height: 10px; border-radius: 3px; }
.tk-anneau__libelle { color: var(--tk-ink-2); }
.tk-anneau__compte  { font-weight: 700; color: var(--tk-vert-900); }
.tk-anneau__part    { color: var(--tk-ink-3); min-width: 3rem; text-align: right; }

/* --- Entonnoir ----------------------------------------------------------- */

.tk-entonnoir { display: grid; gap: var(--tk-4); }

.tk-entonnoir__tete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--tk-3);
    margin-bottom: var(--tk-2);
}
.tk-entonnoir__libelle { font-weight: 600; color: var(--tk-vert-900); font-size: .875rem; }
.tk-entonnoir__valeur  { font-weight: 700; font-size: 1.0625rem; color: var(--tk-vert-900); }

.tk-entonnoir__piste {
    height: 12px;
    background: var(--tk-line);
    border-radius: var(--tk-r-pill);
    overflow: hidden;
}
.tk-entonnoir__barre {
    display: block;
    height: 100%;
    border-radius: var(--tk-r-pill);
    transition: width var(--tk-t-entre);
}

.tk-entonnoir__pied {
    display: flex;
    justify-content: space-between;
    gap: var(--tk-3);
    margin-top: var(--tk-1);
    font-size: .75rem;
    color: var(--tk-ink-3);
}
.tk-entonnoir__perte { color: var(--tk-danger); font-weight: 600; }

/* --- Comparaison avec la période précédente ------------------------------ */
/* Un chiffre seul ne dit rien : quarante livraisons, c'est bien ou mal ? La
   réponse est dans l'écart, et l'écart mérite sa propre couleur. */

.tk-ecart {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 1px 6px;
    border-radius: var(--tk-r-pill);
    white-space: nowrap;
}
.tk-ecart--hausse { color: var(--tk-vert-500);   background: var(--tk-vert-wash); }
.tk-ecart--baisse { color: var(--tk-danger);     background: var(--tk-danger-wash); }
.tk-ecart--stable { color: var(--tk-ink-3);      background: var(--tk-line); }

/* --- Barres de classement ------------------------------------------------ */
/* Un montant seul ne se compare pas. La barre donne l'échelle sans imposer un
   second graphique. */

.tk-classe { display: grid; gap: var(--tk-3); }

.tk-classe__ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--tk-2) var(--tk-3);
    align-items: baseline;
    padding: var(--tk-2) 0;
    border-top: 1px solid var(--tk-line);
    color: inherit;
}
.tk-classe__ligne:first-child { border-top: 0; }
.tk-classe__ligne:hover { text-decoration: none; }
.tk-classe__ligne:hover .tk-classe__nom { color: var(--tk-orange-press); }

.tk-classe__nom    { font-weight: 600; color: var(--tk-vert-900); min-width: 0; }
.tk-classe__valeur { font-weight: 700; color: var(--tk-vert-900); font-variant-numeric: tabular-nums; }

.tk-classe__piste {
    grid-column: 1 / -1;
    height: 6px;
    background: var(--tk-line);
    border-radius: var(--tk-r-pill);
    overflow: hidden;
}
.tk-classe__barre { display: block; height: 100%; background: var(--tk-orange); border-radius: var(--tk-r-pill); }
.tk-classe__barre--vert { background: var(--tk-vert-500); }

.tk-classe__detail {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--tk-1) var(--tk-3);
    font-size: .75rem;
    color: var(--tk-ink-3);
}
.tk-classe__detail b { color: var(--tk-ink-2); font-weight: 600; }

/* --- Tuiles de chiffres clés --------------------------------------------- */
/* Quatre à six indicateurs, lisibles d'un coup d'œil, avec leur évolution.
   C'est la première chose que regarde un exploitant, et souvent la seule. */

.tk-tuiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tk-2);
    margin-bottom: var(--tk-4);
}
@media (min-width: 700px)  { .tk-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tk-tuiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--tk-3); } }

.tk-tuile {
    padding: var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-carte);
    background: var(--tk-blanc);
    display: grid;
    gap: 2px;
    align-content: start;
}
.tk-tuile--vedette { background: var(--tk-vert-900); border-color: var(--tk-vert-900); }
.tk-tuile--vedette .tk-tuile__label  { color: rgba(255,255,255,.65); }
.tk-tuile--vedette .tk-tuile__valeur { color: #fff; }
.tk-tuile--vedette .tk-tuile__sous   { color: rgba(255,255,255,.55); }

.tk-tuile--orange { background: var(--tk-orange-wash); border-color: var(--tk-orange); }
.tk-tuile--orange .tk-tuile__valeur { color: var(--tk-orange-press); }
.tk-tuile--rouge  { background: var(--tk-danger-wash); border-color: var(--tk-danger); }
.tk-tuile--rouge  .tk-tuile__valeur { color: var(--tk-danger); }

.tk-tuile__label {
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tk-ink-3);
    line-height: 1.3;
}
.tk-tuile__valeur {
    font-family: var(--tk-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--tk-vert-900);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
@media (min-width: 1200px) { .tk-tuile__valeur { font-size: 1.5rem; } }

.tk-tuile__sous { font-size: .6875rem; color: var(--tk-ink-2); line-height: 1.35; }

/* --- Le calcul d'un versement, ligne à ligne ----------------------------- */
/* « Pourquoi ce montant et pas l'autre » : la question se pose à chaque
   versement, et la réponse doit tenir sur un écran sans être calculée de tête. */

.tk-calcul {
    display: grid;
    gap: var(--tk-1);
    padding: var(--tk-3);
    background: var(--tk-vert-wash);
    border-radius: var(--tk-r-ctrl);
}
.tk-calcul__ligne {
    display: flex;
    justify-content: space-between;
    gap: var(--tk-3);
    font-size: .8125rem;
    color: var(--tk-ink-2);
}
.tk-calcul__ligne b { font-variant-numeric: tabular-nums; color: var(--tk-vert-900); }
.tk-calcul__total {
    margin-top: var(--tk-1);
    padding-top: var(--tk-2);
    border-top: 1px solid var(--tk-vert-500);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--tk-vert-900);
}

/* Deux graphiques côte à côte sur poste de travail : l'entonnoir répond au
   « où ça se perd », l'anneau au « dans quelles proportions ». Les séparer
   obligerait à faire défiler entre la question et sa réponse. */
.tk-repartition { display: grid; gap: var(--tk-3); }

@media (min-width: 900px) {
    .tk-repartition { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
}

/* =============================================================================
   Tableaux de rapport

   Un rapport se lit en colonnes : on compare deux commerçants en balayant une
   colonne du regard. C'est exactement ce qui rend un fichier Excel plus clair
   qu'un écran fait de pavés, et l'écran doit soutenir cette comparaison.

   Sur téléphone, le tableau ne défile PAS latéralement — un tableau à
   défilement horizontal reste un échec de conception (§ 7.4). Chaque ligne
   devient un bloc compact dont les cellules portent leur intitulé, en deux
   colonnes serrées. On garde la densité sans imposer un balayage.
   ========================================================================== */

.tk-tab { width: 100%; }

.tk-tab table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

/* --- Poste de travail : un vrai tableau, serré ---------------------------- */
@media (min-width: 1024px) {
    .tk-tab table { font-size: .8125rem; }

    .tk-tab thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: var(--tk-2) var(--tk-2);
        text-align: left;
        font-size: .625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--tk-ink-3);
        background: var(--tk-blanc);
        border-bottom: 2px solid var(--tk-vert-900);
        white-space: nowrap;
    }

    .tk-tab tbody td {
        padding: var(--tk-2);
        border-bottom: 1px solid var(--tk-line);
        white-space: nowrap;
    }

    /* La première colonne porte le nom : elle seule peut respirer et se
       tronquer, les autres sont des chiffres de largeur connue. */
    .tk-tab tbody td:first-child {
        white-space: normal;
        min-width: 10rem;
        max-width: 18rem;
        font-weight: 600;
        color: var(--tk-vert-900);
    }

    .tk-tab tbody tr:hover td { background: var(--tk-vert-wash); }

    .tk-tab__num { text-align: right; }

    .tk-tab tfoot td {
        padding: var(--tk-2);
        font-weight: 700;
        color: var(--tk-vert-900);
        background: var(--tk-vert-wash);
        border-top: 2px solid var(--tk-vert-900);
        white-space: nowrap;
    }
}

/* --- Téléphone : la ligne devient un bloc, sans défilement latéral -------- */
@media (max-width: 1023px) {
    .tk-tab thead { display: none; }

    .tk-tab table,
    .tk-tab tbody,
    .tk-tab tfoot { display: block; }

    .tk-tab tbody tr,
    .tk-tab tfoot tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px var(--tk-2);
        padding: var(--tk-2) var(--tk-3);
        border: 1px solid var(--tk-line);
        border-radius: var(--tk-r-ctrl);
        margin-bottom: var(--tk-2);
        background: var(--tk-blanc);
    }

    .tk-tab tbody td,
    .tk-tab tfoot td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--tk-2);
        padding: 1px 0;
        font-size: .8125rem;
        min-width: 0;
    }

    /* Le nom occupe la ligne entière, en tête du bloc. */
    .tk-tab tbody td:first-child,
    .tk-tab tfoot td:first-child {
        grid-column: 1 / -1;
        font-weight: 700;
        font-size: .9375rem;
        color: var(--tk-vert-900);
        padding-bottom: var(--tk-1);
        margin-bottom: var(--tk-1);
        border-bottom: 1px solid var(--tk-line);
    }
    .tk-tab tbody td:first-child::before,
    .tk-tab tfoot td:first-child::before { content: none; }

    /* L'intitulé de la colonne accompagne la valeur : sans lui, un bloc de
       chiffres nus ne veut rien dire. */
    .tk-tab tbody td::before,
    .tk-tab tfoot td::before {
        content: attr(data-titre);
        font-size: .6875rem;
        color: var(--tk-ink-3);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Une cellule vide n'occupe pas de place dans un bloc. */
    .tk-tab tbody td:empty { display: none; }

    .tk-tab tfoot tr {
        background: var(--tk-vert-wash);
        border-color: var(--tk-vert-500);
    }
}

/* --- Mise en valeur, commune aux deux tailles ----------------------------- */
.tk-tab__fort     { font-weight: 700; color: var(--tk-vert-900); }
.tk-tab__sourdine { color: var(--tk-ink-3); }
.tk-tab__danger   { color: var(--tk-danger); font-weight: 600; }

.tk-tab tbody td a { color: inherit; }
.tk-tab tbody td a:hover { color: var(--tk-orange-press); }

.tk-tab__alerte td:first-child { box-shadow: inset 3px 0 0 var(--tk-danger); padding-left: var(--tk-3); }

/* =============================================================================
   Garde-fou : aucune page ne défile latéralement

   Le débordement horizontal est le défaut le plus visible sur téléphone — il
   décale l'en-tête, cache le bouton de menu, et donne l'impression que
   l'application est cassée. Une seule règle l'empêche partout, et les rares
   éléments réellement larges (un tableau volontairement scrollable) portent
   leur propre conteneur.
   ========================================================================== */

/* `clip` plutôt que `hidden` : `hidden` crée un contexte de défilement, ce qui
   casse `position: sticky` pour TOUT ce que la page contient — dont l'en-tête
   des tableaux et la barre de navigation. `clip` coupe sans rien scroller.
   Non supporté par Safari 15 et antérieurs : ces navigateurs retombent sur le
   comportement actuel, ce qui est acceptable pour un garde-fou. */
body { max-width: 100%; overflow-x: clip; }

/* Les enfants d'une grille ou d'un flex débordent par défaut dès que leur
   contenu est plus large qu'eux : `min-width: 0` le leur interdit. */
.tk-argent > div,
.tk-classe__ligne,
.tk-attente,
.tk-entonnoir__tete,
.tk-classement__tete { min-width: 0; }

.tk-argent dt,
.tk-classe__nom,
.tk-attente__nom .tk-ligne__titre { min-width: 0; overflow-wrap: anywhere; }

/* =============================================================================
   La page de rapport

   Compacte : un rapport se parcourt, il ne se contemple pas. Les titres sont
   des barres fines, les cadres sont serrés, et rien ne prend deux fois la
   place qu'il mérite.
   ========================================================================== */

.tk-rapport { --tk-espace-bloc: var(--tk-4); }

/* --- Titre de section : une barre, pas un bloc --------------------------- */
.tk-titre-tab {
    display: flex;
    align-items: baseline;
    gap: var(--tk-2);
    margin: var(--tk-espace-bloc) 0 var(--tk-2);
    font-family: var(--tk-corps);
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tk-vert-900);
}
.tk-titre-tab span {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: .75rem;
    color: var(--tk-ink-3);
}

/* --- Cadre neutre : la carte du rapport, sans l'épaisseur ---------------- */
.tk-cadre {
    padding: var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
}

/* --- Barre de filtres : tout sur une ligne, à portée immédiate ----------- */
/* Le commerçant est le point central du rapport : son filtre ne peut pas être
   replié dans une colonne latérale, il est le premier geste. */
.tk-barre-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tk-2);
    align-items: center;
    padding: var(--tk-2);
    margin-bottom: var(--tk-3);
    background: var(--tk-vert-wash);
    border-radius: var(--tk-r-ctrl);
}
.tk-barre-filtres select,
.tk-barre-filtres input[type="date"] {
    min-height: 34px;
    padding: 0 var(--tk-2);
    font-size: .8125rem;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
    color: var(--tk-ink);
    min-width: 0;
    flex: 1 1 8rem;
    max-width: 14rem;
}
.tk-barre-filtres .tk-btn {
    min-height: 34px;
    padding: 0 var(--tk-3);
    font-size: .8125rem;
    flex: 0 0 auto;
}
.tk-barre-filtres__vider {
    font-size: .75rem;
    font-weight: 600;
    color: var(--tk-orange-press);
    white-space: nowrap;
}

@media (max-width: 1023px) {
    /* Sur téléphone, deux filtres par ligne : plus, et ils deviennent des
       fentes illisibles. */
    .tk-barre-filtres { gap: var(--tk-1); padding: var(--tk-2); }
    .tk-barre-filtres select,
    .tk-barre-filtres input[type="date"] { flex: 1 1 calc(50% - var(--tk-1)); max-width: none; }
    .tk-barre-filtres .tk-btn { flex: 1 1 100%; }
}

/* --- Tuiles : plus serrées que des cartes ------------------------------- */
.tk-rapport .tk-tuiles { gap: var(--tk-1); margin-bottom: var(--tk-3); }
.tk-rapport .tk-tuile  { padding: var(--tk-2) var(--tk-3); border-radius: var(--tk-r-ctrl); }
.tk-rapport .tk-tuile__valeur { font-size: 1.1875rem; }

@media (min-width: 1200px) {
    .tk-rapport .tk-tuiles { gap: var(--tk-2); }
    .tk-rapport .tk-tuile__valeur { font-size: 1.375rem; }
}

/* --- Les trois blocs d'argent ------------------------------------------- */
.tk-argent-grille {
    display: grid;
    gap: var(--tk-2);
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .tk-argent-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tk-argent-bloc {
    display: grid;
    gap: 2px;
    align-content: start;
    padding: var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
}
.tk-argent-bloc--cle { border-color: var(--tk-vert-500); background: var(--tk-vert-wash); }

.tk-argent-bloc__titre {
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tk-ink-3);
    margin-bottom: var(--tk-1);
}
.tk-argent-bloc__ligne,
.tk-argent-bloc__total {
    display: flex;
    justify-content: space-between;
    gap: var(--tk-2);
    align-items: baseline;
    font-size: .8125rem;
    color: var(--tk-ink-2);
    min-width: 0;
}
.tk-argent-bloc__ligne span { min-width: 0; overflow-wrap: anywhere; }
.tk-argent-bloc__ligne b { font-variant-numeric: tabular-nums; color: var(--tk-vert-900); white-space: nowrap; }
.tk-argent-bloc__ligne--alerte b { color: var(--tk-danger); }

.tk-argent-bloc__total {
    margin-top: var(--tk-2);
    padding-top: var(--tk-2);
    border-top: 1px solid var(--tk-line);
    font-size: .875rem;
    font-weight: 700;
    color: var(--tk-vert-900);
}
.tk-argent-bloc__total b { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.tk-argent-bloc .tk-btn { margin-top: var(--tk-3); min-height: 36px; font-size: .8125rem; }

/* --- Deux colonnes de soutien ------------------------------------------- */
.tk-repartition { display: grid; gap: var(--tk-3); }
@media (min-width: 900px) { .tk-repartition { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Les graphiques du rapport sont plus bas : ils illustrent, ils ne dominent pas. */
.tk-rapport .tk-graphique__svg { height: 150px; }
@media (min-width: 1024px) { .tk-rapport .tk-graphique__svg { height: 190px; } }
.tk-rapport .tk-anneau { width: 130px; }

.tk-note-comparaison {
    margin: var(--tk-4) 0 0;
    font-size: .75rem;
    color: var(--tk-ink-3);
    line-height: 1.5;
}

.tk-rapport .tk-alerte { margin-top: var(--tk-2); font-size: .8125rem; padding: var(--tk-2) var(--tk-3); }

/* =============================================================================
   Ligne d'action : une liste fine, l'action discrète à droite

   Le motif « une grosse carte par élément avec un bouton pleine largeur »
   convient à un écran de saisie, pas à une file de travail. Valider dix
   retours ne doit pas demander dix écrans de défilement : une ligne, un
   bouton discret au bout, et on passe au suivant.
   ========================================================================== */

.tk-file { display: grid; gap: 1px; background: var(--tk-line); border-radius: var(--tk-r-ctrl); overflow: hidden; }

.tk-file__ligne {
    display: grid;
    gap: var(--tk-1) var(--tk-3);
    padding: var(--tk-2) var(--tk-3);
    background: var(--tk-blanc);
    align-items: center;
}

@media (min-width: 1024px) {
    /* Identité · détail · montant · actions. Les colonnes sont alignées d'une
       ligne à l'autre : c'est l'alignement qui rend une file lisible. */
    .tk-file__ligne {
        grid-template-columns: 9rem minmax(0, 1fr) 10rem auto;
        padding: var(--tk-2) var(--tk-3);
    }
}

.tk-file__code {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tk-ink-3);
    font-variant-numeric: tabular-nums;
}

.tk-file__principal { min-width: 0; }
.tk-file__titre { font-weight: 600; color: var(--tk-vert-900); }
.tk-file__sous  {
    display: block;
    font-size: .75rem;
    color: var(--tk-ink-2);
    overflow-wrap: anywhere;
}

.tk-file__montant {
    font-weight: 700;
    color: var(--tk-vert-900);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tk-file__actions { display: flex; gap: var(--tk-2); align-items: center; flex-wrap: wrap; }

/* Le bouton d'action : présent, jamais criard. Il se colore au survol, pour
   qu'on sache où l'on clique sans que dix boutons orange se disputent l'écran. */
.tk-file__bouton {
    min-height: 30px;
    padding: 0 var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
    font-size: .75rem;
    font-weight: 600;
    color: var(--tk-vert-900);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--tk-t-micro), color var(--tk-t-micro), background var(--tk-t-micro);
}
.tk-file__bouton:hover {
    text-decoration: none;
    border-color: var(--tk-vert-500);
    background: var(--tk-vert-wash);
}
.tk-file__bouton--sourdine { color: var(--tk-ink-3); font-weight: 500; }
.tk-file__bouton--sourdine:hover { border-color: var(--tk-danger); color: var(--tk-danger); background: var(--tk-danger-wash); }

@media (max-width: 1023px) {
    /* Sur téléphone, deux niveaux : identité et montant sur la première ligne,
       actions sur la seconde. Pas de troisième niveau : on ne défile pas pour
       valider. */
    .tk-file__ligne  { grid-template-columns: minmax(0, 1fr) auto; }
    .tk-file__code   { grid-column: 1 / -1; }
    .tk-file__montant { text-align: right; }
    .tk-file__actions { grid-column: 1 / -1; margin-top: var(--tk-1); }
    .tk-file__bouton  { flex: 1; min-height: 36px; text-align: center;
                        display: inline-flex; align-items: center; justify-content: center; }
}

/* Détail replié dans une ligne : le contenu d'un colis, le calcul d'un solde. */
.tk-file__detail {
    grid-column: 1 / -1;
    margin-top: var(--tk-1);
    padding-top: var(--tk-2);
    border-top: 1px dashed var(--tk-line);
    font-size: .75rem;
    color: var(--tk-ink-2);
}
.tk-file__detail summary { cursor: pointer; color: var(--tk-ink-3); font-weight: 600; }
.tk-file__detail ul { list-style: none; margin: var(--tk-2) 0 0; padding: 0; display: grid; gap: 2px; }
.tk-file__detail li { display: flex; justify-content: space-between; gap: var(--tk-3); }

/* =============================================================================
   Le terrain — les écrans du livreur

   Le contexte d'usage décide de tout : debout, à une main, sur un deux-roues à
   l'arrêt, parfois avec des gants, en plein soleil, sur un réseau qui tombe.

   Deux corrections par rapport à la première version :

     · la liste est faite de LIGNES, pas de grosses cartes. Une tournée de
       quinze courses tenait sur six écrans de défilement ; elle en fait deux.
     · les actions sont à l'EXTRÊME DROITE de la ligne, toujours au même
       endroit, pour que le pouce les trouve sans lire.

   La couleur suit celle du tableau de bord de l'administration : bandeau vert
   profond, pastilles teintées. Un écran tout blanc ne hiérarchise rien.

   Les cibles font 44 px au minimum, sans exception (§ 7.2).
   ========================================================================== */

/* --- Le bandeau : ce que le livreur a EN MAIN ----------------------------- */
/* Il décrit la liste qu'il surmonte. Compter les commandes créées aujourd'hui
   affichait « 0 colis » au-dessus de sept courses en cours — les chiffres
   contredisaient la liste, et un tableau de bord qui se contredit ne se lit
   plus. */

.tk-bilan {
    background: var(--tk-vert-900);
    color: #fff;
    border-radius: var(--tk-r-carte);
    padding: var(--tk-4);
    margin-bottom: var(--tk-3);
    box-shadow: var(--tk-e2);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tk-3);
}

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

.tk-bilan__bloc { min-width: 0; }

.tk-bilan__label {
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tk-bilan__valeur {
    font-family: var(--tk-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.tk-bilan__sous {
    font-size: .6875rem;
    color: rgba(255, 255, 255, .55);
    margin-top: 1px;
}

/* La valeur mise en avant passe en orange : c'est la seule couleur d'action du
   produit, et sur fond vert profond elle ressort au soleil. */
.tk-bilan__bloc--cle .tk-bilan__valeur { color: var(--tk-orange); }

/* --- Les pastilles du jour ------------------------------------------------ */
/* Une pastille n'apparaît que si son chiffre n'est pas nul : c'est ce qui
   évitait à la page d'origine de ressembler à un mur de zéros. */

.tk-puces {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tk-2);
    margin-bottom: var(--tk-3);
}

.tk-puce {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 5px var(--tk-3);
    border-radius: var(--tk-r-pill);
    border: 1px solid transparent;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}
.tk-puce b { font-size: .9375rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.tk-puce--vert   { background: var(--tk-vert-wash);   color: var(--tk-vert-700);   border-color: #C8E4D9; }
.tk-puce--orange { background: var(--tk-orange-wash); color: var(--tk-orange-press); border-color: #FFD9BC; }
.tk-puce--rouge  { background: var(--tk-danger-wash); color: var(--tk-danger);      border-color: #F3C9C4; }
.tk-puce--brun   { background: #FBF1DF;               color: var(--tk-warning);     border-color: #EBD7AE; }
.tk-puce--gris   { background: #F4F7F5;               color: var(--tk-ink-2);       border-color: var(--tk-line); }

/* --- La recherche --------------------------------------------------------- */
/* Toujours visible, jamais repliée derrière une loupe : chercher un colis est
   le geste le plus fréquent d'une tournée chargée. */

.tk-chercher {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--tk-2);
    margin-bottom: var(--tk-3);
}

.tk-chercher input {
    min-height: 44px;
    padding: 0 var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
    font-size: 1rem; /* 16 px : en dessous, iOS zoome sur le champ au focus */
    font-family: inherit;
    color: var(--tk-ink);
    width: 100%;
    min-width: 0;
}
.tk-chercher input:focus {
    outline: none;
    border-color: var(--tk-orange);
    box-shadow: 0 0 0 3px var(--tk-orange-wash);
}

.tk-chercher__resultat {
    grid-column: 1 / -1;
    font-size: .8125rem;
    color: var(--tk-ink-2);
    display: flex;
    align-items: center;
    gap: var(--tk-2);
}
.tk-chercher__resultat a { color: var(--tk-orange-press); font-weight: 600; }

/* --- Le titre d'une section de tournée ------------------------------------ */

.tk-groupe {
    display: flex;
    align-items: center;
    gap: var(--tk-2);
    margin: var(--tk-4) 0 var(--tk-2);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tk-vert-900);
}
.tk-groupe__compte {
    font-size: .6875rem;
    font-weight: 800;
    padding: 1px 8px;
    border-radius: var(--tk-r-pill);
    background: var(--tk-vert-wash);
    color: var(--tk-vert-700);
}
.tk-groupe--chaud .tk-groupe__compte { background: var(--tk-orange-wash); color: var(--tk-orange-press); }

/* =============================================================================
   La ligne de course — le composant central de la tournée

   UNE commande par ligne. À gauche ce qu'on lit, à droite ce qu'on touche.
   Les boutons sont à la même abscisse sur toutes les lignes : le pouce les
   retrouve sans regarder, ce qui est exactement ce qu'on fait en marchant.
   ========================================================================== */

.tk-tour { display: grid; gap: var(--tk-2); }

.tk-tour__ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--tk-2) var(--tk-3);
    align-items: center;
    padding: var(--tk-3);
    background: var(--tk-blanc);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    /* Le liseré de gauche porte l'état : quatre pixels de couleur remplacent
       un badge, et se lisent en balayant la liste du regard. */
    box-shadow: inset 3px 0 0 var(--tk-line);
}
.tk-tour__ligne--en_cours { box-shadow: inset 3px 0 0 var(--tk-orange); }
.tk-tour__ligne--assigne  { box-shadow: inset 3px 0 0 var(--tk-vert-500); }
.tk-tour__ligne--reporte  { box-shadow: inset 3px 0 0 var(--tk-warning); }
.tk-tour__ligne--annule   { box-shadow: inset 3px 0 0 var(--tk-danger); }
.tk-tour__ligne--livre    { box-shadow: inset 3px 0 0 var(--tk-vert-500); }
.tk-tour__ligne--retourne { box-shadow: inset 3px 0 0 var(--tk-ink-3); }

/* Une course assignée depuis plus d'une demi-heure et jamais démarrée : c'est
   le seul signal qui mérite de crier. */
.tk-tour__ligne--urgent { border-color: var(--tk-danger); background: #FFFBFA; }

.tk-tour__infos { min-width: 0; }

.tk-tour__tete {
    display: flex;
    align-items: baseline;
    gap: var(--tk-2);
    min-width: 0;
}

.tk-tour__code {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--tk-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tk-tour__urgent {
    font-size: .625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tk-danger);
    white-space: nowrap;
}

.tk-tour__nom {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--tk-vert-900);
    margin-top: 1px;
    overflow-wrap: anywhere;
    text-decoration: none;
}
a.tk-tour__nom:hover { color: var(--tk-orange-press); text-decoration: none; }

.tk-tour__adresse {
    font-size: .8125rem;
    line-height: 1.3;
    color: var(--tk-ink-2);
    overflow-wrap: anywhere;
}

/* La ligne de contexte : commerçant · durée · articles · tentatives. La durée
   est la donnée qui manquait — un colis en main depuis trois jours n'est pas
   un colis en main depuis dix minutes. */
.tk-tour__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--tk-2);
    margin-top: 2px;
    font-size: .6875rem;
    color: var(--tk-ink-3);
    min-width: 0;
}
.tk-tour__meta b { color: var(--tk-ink-2); font-weight: 600; }
.tk-tour__duree  { font-variant-numeric: tabular-nums; }
.tk-tour__duree--vieux { color: var(--tk-danger); font-weight: 700; }
.tk-tour__report { color: var(--tk-warning); font-weight: 700; }
.tk-tour__tent   { color: var(--tk-danger); font-weight: 700; }

.tk-tour__argent {
    font-weight: 700;
    color: var(--tk-vert-900);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tk-tour__argent--rien { color: var(--tk-ink-3); font-weight: 500; }

/* --- Les actions, à l'extrême droite -------------------------------------- */

.tk-tour__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
.tk-tour__actions form { display: contents; }

.tk-tour__faire {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--tk-4);
    border: 0;
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-orange);
    color: var(--tk-blanc);
    font-size: .875rem;
    font-weight: 700;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--tk-t-micro), background var(--tk-t-micro);
    -webkit-tap-highlight-color: transparent;
}
.tk-tour__faire:hover  { background: var(--tk-orange-press); color: var(--tk-blanc); text-decoration: none; }
.tk-tour__faire:active { transform: scale(.97); }

/* La variante sourde sert aux courses qu'on ne peut qu'ouvrir : même place,
   même taille, mais elle ne réclame pas l'attention. */
.tk-tour__faire--sourd {
    background: var(--tk-blanc);
    color: var(--tk-vert-900);
    border: 1px solid var(--tk-line);
    font-weight: 600;
}
.tk-tour__faire--sourd:hover { background: var(--tk-vert-wash); color: var(--tk-vert-700); }

.tk-tour__ico {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
    color: var(--tk-vert-900);
    font-size: 1.0625rem;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: transform var(--tk-t-micro), border-color var(--tk-t-micro);
    -webkit-tap-highlight-color: transparent;
}
.tk-tour__ico:hover  { border-color: var(--tk-vert-500); color: var(--tk-vert-700); text-decoration: none; }

/* L'action qui fait avancer la course : la seule icône pleine, en orange.
   Toutes les autres sont des raccourcis — voir, appeler, écrire — et restent
   en contour. Une rangée de carrés identiques se parcourt du pouce sans lire ;
   c'est la couleur, pas le mot, qui dit laquelle fait avancer. */
.tk-tour__ico--faire {
    border-color: var(--tk-orange);
    background: var(--tk-orange);
    color: var(--tk-blanc);
    font-size: 1.125rem;
}
.tk-tour__ico--faire:hover {
    background: var(--tk-orange-press);
    border-color: var(--tk-orange-press);
    color: var(--tk-blanc);
}
.tk-tour__ico:active { transform: scale(.94); }

/* Sur un téléphone étroit, les actions passent sous les informations et
   restent collées à droite : la ligne reste UNE ligne logique, et le pouce
   garde son repère. */
/* Toutes les actions sont des icônes : la rangée fait 4 x 44 px, donc la ligne
   tient d'un seul tenant jusqu'à 400 px de large. En dessous, elle passe sur
   deux niveaux et les icônes restent collées à droite. */
@media (max-width: 400px) {
    .tk-tour__ligne { grid-template-columns: minmax(0, 1fr); }
    .tk-tour__actions { grid-column: 1; }
}

/* --- L'historique du jour, en lecture seule ------------------------------- */
/* Les colis annulés y figurent : le livreur les transporte encore, mais c'est
   l'administration qui confirme leur retour au dépôt — la règle d'origine. */

.tk-tour__ligne--histo { opacity: .78; }
.tk-tour__ligne--histo:hover { opacity: 1; }

.tk-tour__mention {
    font-size: .6875rem;
    color: var(--tk-warning);
    font-weight: 600;
    white-space: nowrap;
}

/* --- Mouvement ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
    .tk-tour__ligne { animation: tk-monte var(--tk-t-entre) both; }
    .tk-tour__ligne:nth-child(1) { animation-delay: 0ms; }
    .tk-tour__ligne:nth-child(2) { animation-delay: 25ms; }
    .tk-tour__ligne:nth-child(3) { animation-delay: 50ms; }
    .tk-tour__ligne:nth-child(4) { animation-delay: 75ms; }
    .tk-tour__ligne:nth-child(5) { animation-delay: 100ms; }
    .tk-tour__ligne:nth-child(6) { animation-delay: 125ms; }
    .tk-tour__ligne:nth-child(7) { animation-delay: 150ms; }
    .tk-tour__ligne:nth-child(n+8) { animation-delay: 175ms; }
}

@keyframes tk-monte {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tk-tour__ligne { animation: none; }
}

/* --- Le rapport : les tuiles de chiffres ---------------------------------- */

.tk-jour {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tk-2);
    margin-bottom: var(--tk-3);
}

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

.tk-jour__case {
    padding: var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
    min-width: 0;
}
.tk-jour__case--vedette { border-color: var(--tk-vert-500); background: var(--tk-vert-wash); }
.tk-jour__case--orange  { border-color: var(--tk-orange); background: var(--tk-orange-wash); }

.tk-jour__label {
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tk-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tk-jour__valeur {
    font-family: var(--tk-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--tk-vert-900);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.tk-jour__case--vedette .tk-jour__valeur { color: var(--tk-vert-700); }

/* Un pourcentage sans sa définition se discute : la sous-ligne dit sur quoi
   il porte, sinon « 75 % de quoi ? » revient à chaque fin de mois. */
.tk-jour__sous {
    font-size: .6875rem;
    color: var(--tk-ink-3);
    margin-top: 1px;
    overflow-wrap: anywhere;
}

/* --- Les issues, en pastilles (rapport) ----------------------------------- */

.tk-issues { display: flex; flex-wrap: wrap; gap: var(--tk-2); margin-bottom: var(--tk-3); }

.tk-issue {
    display: inline-flex;
    align-items: baseline;
    gap: var(--tk-1);
    padding: var(--tk-1) var(--tk-3);
    border-radius: var(--tk-r-pill);
    border: 1px solid var(--tk-line);
    background: var(--tk-blanc);
    font-size: .75rem;
    color: var(--tk-ink-2);
    text-decoration: none;
    min-height: 32px;
}
.tk-issue b { font-size: .9375rem; font-weight: 700; color: var(--tk-vert-900); font-variant-numeric: tabular-nums; }
.tk-issue--livre    { background: var(--tk-vert-wash);   border-color: #C8E4D9; }
.tk-issue--annule   { background: var(--tk-danger-wash); border-color: #F3C9C4; }
.tk-issue--retourne { background: #FBF1DF;               border-color: #EBD7AE; }
.tk-issue--reporte  { background: #F4F7F5;               border-color: var(--tk-line); }

/* --- Le pied de feuille basse : des choix pleine largeur ------------------ */

.tk-choix-feuille { display: grid; gap: var(--tk-2); }

.tk-choix-feuille a,
.tk-choix-feuille button {
    display: flex;
    align-items: center;
    gap: var(--tk-3);
    width: 100%;
    min-height: 52px;
    padding: 0 var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
    color: var(--tk-vert-900);
    font-size: .9375rem;
    font-weight: 600;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.tk-choix-feuille a:active,
.tk-choix-feuille button:active { transform: scale(.99); background: var(--tk-vert-wash); }
.tk-choix-feuille .tk-choix-feuille__danger { color: var(--tk-danger); border-color: var(--tk-danger); }
.tk-choix-feuille small {
    display: block;
    font-size: .75rem;
    font-weight: 400;
    color: var(--tk-ink-3);
    margin-top: 1px;
}


/* =============================================================================
   La fiche de course

   Elle suit la tournée : même bandeau vert profond, mêmes gestes au même
   endroit. Deux écrans qui s'enchaînent doivent se ressembler, sinon le livreur
   croit avoir changé d'application.
   ========================================================================== */

.tk-bilan--course { grid-template-columns: minmax(0, 1fr); }

.tk-bilan__detail {
    list-style: none;
    margin: var(--tk-3) 0 0;
    padding: var(--tk-3) 0 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: grid;
    gap: 3px;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .78);
}

/* --- Un mot d'explication dans une carte ---------------------------------- */

.tk-mot {
    margin-top: var(--tk-3);
    padding: var(--tk-3);
    border-radius: var(--tk-r-ctrl);
    font-size: .8125rem;
    line-height: 1.4;
}
.tk-mot--attente { background: #FBF1DF;               color: var(--tk-warning); }
.tk-mot--danger  { background: var(--tk-danger-wash); color: var(--tk-danger); }

/* --- Les trois gestes du terrain ------------------------------------------ */
/* Appeler, écrire, naviguer : à la même taille, parce qu'on ne sait pas lequel
   aboutira. Trois colonnes égales, 44 px de haut, jamais moins. */

.tk-trio {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--tk-2);
    margin-top: var(--tk-3);
}

.tk-trio__btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--tk-2);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
    color: var(--tk-vert-900);
    font-size: .875rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform var(--tk-t-micro), border-color var(--tk-t-micro);
    -webkit-tap-highlight-color: transparent;
}
.tk-trio__btn:hover  { border-color: var(--tk-vert-500); color: var(--tk-vert-700); text-decoration: none; }
.tk-trio__btn:active { transform: scale(.98); }

.tk-trio__btn--cle {
    background: var(--tk-orange);
    border-color: var(--tk-orange);
    color: var(--tk-blanc);
    font-weight: 700;
}
.tk-trio__btn--cle:hover { background: var(--tk-orange-press); border-color: var(--tk-orange-press); color: var(--tk-blanc); }

/* --- La marchandise à remettre -------------------------------------------- */

.tk-remise { display: grid; gap: var(--tk-2); }

.tk-remise__ligne {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--tk-2);
    align-items: baseline;
    padding: var(--tk-2) 0;
    border-bottom: 1px solid var(--tk-line);
}
.tk-remise__ligne:last-child { border-bottom: 0; }
.tk-remise__nom { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

.tk-remise__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tk-3);
    margin-top: var(--tk-4);
    padding-top: var(--tk-3);
    border-top: 1px solid var(--tk-line);
    flex-wrap: wrap;
}


/* --- La distance livreur → client, a l'accueil ---------------------------- */
/* Elle sert a repartir, pas a surveiller : elle est discrete, et elle passe en
   rouge seulement quand elle remet l'assignation en question. */

.tk-distance {
    display: inline-block;
    padding: 0 6px;
    border-radius: var(--tk-r-pill);
    background: var(--tk-vert-wash);
    color: var(--tk-vert-700);
    font-size: .6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tk-distance--loin { background: var(--tk-danger-wash); color: var(--tk-danger); }

/* Un point deduit du quartier n'est pas un point releve sur place : il est
   affiche en contour, avec un « ~ ». Presenter les deux pareil ferait croire
   a une precision qu'on n'a pas. */
.tk-distance--approx {
    background: transparent;
    border: 1px dashed var(--tk-line);
    color: var(--tk-ink-3);
    font-weight: 600;
}

/* =============================================================================
   L'espace commerçant

   Le contexte n'est pas celui du livreur. Elle est derrière son comptoir, entre
   deux clients, souvent sur un téléphone posé à côté de la caisse. Elle a
   trente secondes, pas cinq minutes.

   Trois règles en découlent, et elles expliquent tout ce fichier :

     · **La saisie tient dans un écran.** Ajouter un produit, enregistrer une
       vente, approvisionner : aucun de ces gestes ne doit demander de faire
       défiler. Les formulaires sont en grille dense, pas en colonne.
     · **Une ligne par chose.** Produits, ventes, commandes, mouvements : des
       lignes fines qu'on parcourt du regard, jamais des cartes empilées.
     · **Le chiffre avant le décor.** Ce qu'elle vient vérifier — son stock, ce
       qu'on lui doit — est en tête, en grand, sans détour.
   ========================================================================== */

/* --- Le bandeau de tête --------------------------------------------------- */
/* Même langage que la tournée du livreur : vert profond, l'orange pour la
   valeur qui compte. Deux écrans du même produit doivent se ressembler. */

.tk-cm-tete {
    background: var(--tk-vert-900);
    color: #fff;
    border-radius: var(--tk-r-carte);
    padding: var(--tk-4);
    margin-bottom: var(--tk-3);
    box-shadow: var(--tk-e2);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tk-3);
}

@media (min-width: 720px) {
    .tk-cm-tete { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tk-cm-tete__bloc  { min-width: 0; }
.tk-cm-tete__label {
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tk-cm-tete__valeur {
    font-family: var(--tk-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.tk-cm-tete__sous { font-size: .6875rem; color: rgba(255, 255, 255, .55); margin-top: 1px; }
.tk-cm-tete__bloc--cle .tk-cm-tete__valeur { color: var(--tk-orange); }

/* Un chiffre qui APPELLE UNE SUITE — des colis annulés qui ne sont pas revenus,
   de l'argent qu'on attend encore. Le rouge n'est jamais décoratif : il dit
   qu'il reste quelque chose à faire, et il disparaît quand le compte est à
   zéro. Sans cette nuance, « 3 » et « 0 » se lisent pareil. */
.tk-cm-tete__bloc--alerte .tk-cm-tete__valeur { color: #FF9E92; }

/* --- Le bandeau d'abonnement --------------------------------------------- */
/* Il annonce l'essai puis l'échéance. Il ne crie que le dernier jour : une
   alerte permanente cesse d'être lue au bout de trois jours. */

.tk-essai {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--tk-2) var(--tk-3);
    padding: var(--tk-2) var(--tk-3);
    border-radius: var(--tk-r-ctrl);
    margin-bottom: var(--tk-3);
    font-size: .8125rem;
    background: var(--tk-vert-wash);
    color: var(--tk-vert-700);
    border: 1px solid #C8E4D9;
}
.tk-essai--bientot { background: var(--tk-orange-wash); color: var(--tk-orange-press); border-color: #FFD9BC; }
.tk-essai--fini    { background: var(--tk-danger-wash); color: var(--tk-danger);       border-color: #F3C9C4; }
.tk-essai b { font-weight: 700; }

/* --- La barre d'actions d'un écran ---------------------------------------- */
/* Titre à gauche, l'action à droite. Toujours au même endroit, sur tous les
   écrans : elle ne doit jamais chercher « où on ajoute ». */

.tk-cm-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tk-2);
    flex-wrap: wrap;
    margin: var(--tk-4) 0 var(--tk-2);
}
.tk-cm-barre__titre {
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tk-vert-900);
    display: flex;
    align-items: baseline;
    gap: var(--tk-2);
}
.tk-cm-barre__titre span {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: .75rem;
    color: var(--tk-ink-3);
}

/* --- La ligne : produit, vente, mouvement, commande ----------------------- */

.tk-cm-liste { display: grid; gap: var(--tk-2); }

.tk-cm-ligne {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--tk-2) var(--tk-3);
    align-items: center;
    padding: var(--tk-2) var(--tk-3);
    background: var(--tk-blanc);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
}
.tk-cm-ligne--alerte { box-shadow: inset 3px 0 0 var(--tk-danger); }
.tk-cm-ligne--publie { box-shadow: inset 3px 0 0 var(--tk-vert-500); }

/* La vignette du produit. Carrée, petite, et elle rate proprement : un carré
   vide avec l'initiale vaut mieux qu'une image cassée. */
.tk-vignette {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: var(--tk-r-ctrl);
    object-fit: cover;
    background: var(--tk-vert-wash);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--tk-vert-700);
    font-size: 1rem;
    overflow: hidden;
}
.tk-vignette--vide { border: 1px dashed var(--tk-line); color: var(--tk-ink-3); background: transparent; }

.tk-cm-ligne__nom {
    display: block;
    font-weight: 600;
    color: var(--tk-vert-900);
    text-decoration: none;
    overflow-wrap: anywhere;
    line-height: 1.25;
}
a.tk-cm-ligne__nom:hover { color: var(--tk-orange-press); text-decoration: none; }

.tk-cm-ligne__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--tk-2);
    font-size: .6875rem;
    color: var(--tk-ink-3);
    margin-top: 1px;
}
.tk-cm-ligne__meta b { color: var(--tk-ink-2); font-weight: 600; }

.tk-cm-ligne__droite {
    display: flex;
    align-items: center;
    gap: var(--tk-2);
    justify-content: flex-end;
}

.tk-cm-prix {
    font-weight: 700;
    color: var(--tk-vert-900);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Le stock, lu d'un coup d'œil : le chiffre porte sa couleur. */
.tk-cm-stock {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--tk-r-pill);
    font-size: .6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--tk-vert-wash);
    color: var(--tk-vert-700);
    white-space: nowrap;
}
.tk-cm-stock--bas   { background: var(--tk-orange-wash); color: var(--tk-orange-press); }
.tk-cm-stock--vide  { background: var(--tk-danger-wash); color: var(--tk-danger); }
.tk-cm-stock--confie{ background: #F4F7F5; color: var(--tk-ink-2); }

.tk-cm-ico {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
    color: var(--tk-vert-900);
    font-size: 1rem;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: transform var(--tk-t-micro), border-color var(--tk-t-micro);
    -webkit-tap-highlight-color: transparent;
}
.tk-cm-ico:hover  { border-color: var(--tk-vert-500); color: var(--tk-vert-700); text-decoration: none; }
.tk-cm-ico:active { transform: scale(.94); }
.tk-cm-ico--cle   { background: var(--tk-orange); border-color: var(--tk-orange); color: #fff; }
.tk-cm-ico--cle:hover { background: var(--tk-orange-press); border-color: var(--tk-orange-press); color: #fff; }

@media (max-width: 460px) {
    .tk-cm-ligne { grid-template-columns: auto minmax(0, 1fr); }
    .tk-cm-ligne__droite { grid-column: 1 / -1; justify-content: space-between; }
}

/* =============================================================================
   Les formulaires : tout tient dans un écran

   Une grille dense plutôt qu'une colonne. Sur un téléphone, ajouter un produit
   demandait sept champs empilés, donc trois écrans de défilement ; ici c'est
   deux colonnes serrées et un seul écran.
   ========================================================================== */

.tk-cm-form {
    display: grid;
    gap: var(--tk-3);
    padding: var(--tk-4);
    background: var(--tk-blanc);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-carte);
}

.tk-cm-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tk-3);
}
.tk-cm-grille--large { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 720px) {
    .tk-cm-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Un champ qui prend toute la largeur dans une grille à deux colonnes. */
.tk-cm-plein { grid-column: 1 / -1; }

/* Le champ compact : libellé au-dessus, contrôle de 44 px. */
.tk-cm-champ { display: grid; gap: 4px; min-width: 0; }
.tk-cm-champ > span {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tk-ink-2);
}
.tk-cm-champ > span em {
    font-style: normal;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tk-ink-3);
}
.tk-cm-champ input,
.tk-cm-champ select,
.tk-cm-champ textarea {
    min-height: 44px;
    padding: 0 var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
    font-size: 1rem; /* 16 px : en dessous, iOS zoome au focus */
    font-family: inherit;
    color: var(--tk-ink);
    width: 100%;
    min-width: 0;
}
.tk-cm-champ textarea { padding: var(--tk-2) var(--tk-3); min-height: 76px; resize: vertical; }
.tk-cm-champ input:focus,
.tk-cm-champ select:focus,
.tk-cm-champ textarea:focus {
    outline: none;
    border-color: var(--tk-orange);
    box-shadow: 0 0 0 3px var(--tk-orange-wash);
}
.tk-cm-champ--erreur input,
.tk-cm-champ--erreur select { border-color: var(--tk-danger); }
.tk-cm-champ__erreur { font-size: .6875rem; color: var(--tk-danger); font-weight: 600; }

/* --- Les photos d'un produit ---------------------------------------------- */

.tk-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: var(--tk-2);
}

.tk-photo {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--tk-r-ctrl);
    overflow: hidden;
    border: 1px solid var(--tk-line);
    background: var(--tk-vert-wash);
}
.tk-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tk-photo__retirer {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 0;
    background: rgba(16, 32, 27, .72);
    color: #fff;
    font-size: .875rem;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}
.tk-photo__retirer:hover { background: var(--tk-danger); }

/* La première photo est la vitrine : elle le dit. */
.tk-photo__vitrine {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2px 6px;
    background: rgba(12, 48, 37, .78);
    color: #fff;
    font-size: .5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: center;
}

/* Le bouton d'ajout, à la taille d'une photo. */
.tk-photo--ajout {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--tk-line);
    background: transparent;
    color: var(--tk-ink-3);
    font-size: 1.5rem;
    cursor: pointer;
}
.tk-photo--ajout:hover { border-color: var(--tk-orange); color: var(--tk-orange); }
.tk-photo--ajout input { display: none; }

/* =============================================================================
   Le pas de quantité — le geste le plus répété de l'espace

   Vendre, approvisionner, confier : à chaque fois il faut poser un nombre. Un
   champ nu oblige à ouvrir le clavier numérique ; les boutons − et + font le
   travail en deux touches pour les petites quantités, et le champ reste là
   pour les grandes.
   ========================================================================== */

.tk-qte {
    display: inline-grid;
    grid-template-columns: 34px 52px 34px;
    align-items: stretch;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    overflow: hidden;
    background: var(--tk-blanc);
}
.tk-qte button {
    border: 0;
    background: var(--tk-blanc);
    color: var(--tk-vert-900);
    font-size: 1.125rem;
    font-family: inherit;
    cursor: pointer;
    min-height: 40px;
    -webkit-tap-highlight-color: transparent;
}
.tk-qte button:active { background: var(--tk-vert-wash); }
.tk-qte input {
    border: 0;
    border-left: 1px solid var(--tk-line);
    border-right: 1px solid var(--tk-line);
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--tk-vert-900);
    min-width: 0;
    background: var(--tk-blanc);
}
.tk-qte input:focus { outline: none; background: var(--tk-orange-wash); }

/* Une quantité posée se remarque : la ligne s'allume. */
.tk-cm-ligne--choisie { border-color: var(--tk-orange); background: var(--tk-orange-wash); }

/* --- Le total flottant d'une saisie --------------------------------------- */
/* Elle doit voir le total sans remonter : il colle en bas de l'écran pendant
   qu'elle coche ses articles. */

.tk-total-colle {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tk-3);
    padding: var(--tk-3);
    margin-top: var(--tk-3);
    background: var(--tk-vert-900);
    color: #fff;
    border-radius: var(--tk-r-carte);
    box-shadow: var(--tk-e3);
}
.tk-total-colle__label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.tk-total-colle__valeur {
    font-family: var(--tk-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tk-total-colle button {
    min-height: 44px;
    padding: 0 var(--tk-5);
    border: 0;
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-orange);
    color: #fff;
    font-size: .9375rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.tk-total-colle button:hover  { background: var(--tk-orange-press); }
.tk-total-colle button:active { transform: scale(.98); }
.tk-total-colle button[disabled] { opacity: .45; cursor: not-allowed; }

/* --- Le journal des mouvements -------------------------------------------- */

.tk-mvt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--tk-2) var(--tk-3);
    align-items: baseline;
    padding: var(--tk-2) 0;
    border-bottom: 1px solid var(--tk-line);
    font-size: .8125rem;
}
.tk-mvt:last-child { border-bottom: 0; }
.tk-mvt__date { font-size: .6875rem; color: var(--tk-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-mvt__quantite { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-mvt__quantite--plus  { color: var(--tk-vert-500); }
.tk-mvt__quantite--moins { color: var(--tk-danger); }

/* --- La boutique : sélection des produits en devanture --------------------
   Cette grille s'appelait `.tk-vitrine`, comme la PAGE publique d'une boutique.
   Deux composants, un seul nom — et `commercant.css` étant chargé après
   `densite.css`, c'est celui-ci qui gagnait : le `<main>` de la boutique
   publique devenait une grille, « 4 articles » prenait une colonne et les
   produits l'autre. La page se décalait, sur téléphone comme sur ordinateur.

   Une classe nomme UN composant. Ici, c'est le choix de ce qu'on met en
   devanture — pas la devanture elle-même. */

.tk-devanture {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--tk-2);
}

.tk-devanture__carte {
    position: relative;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    overflow: hidden;
    background: var(--tk-blanc);
    cursor: pointer;
    display: block;
}
.tk-devanture__carte img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.tk-devanture__carte input { position: absolute; opacity: 0; pointer-events: none; }
.tk-devanture__corps { padding: var(--tk-2); }
.tk-devanture__nom { font-size: .8125rem; font-weight: 600; color: var(--tk-vert-900); line-height: 1.2; overflow-wrap: anywhere; }
.tk-devanture__prix { font-size: .75rem; color: var(--tk-ink-2); font-variant-numeric: tabular-nums; margin-top: 2px; }

.tk-devanture__carte:has(input:checked) { border-color: var(--tk-orange); box-shadow: 0 0 0 2px var(--tk-orange-wash); }

.tk-devanture__coche {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--tk-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    color: transparent;
}
.tk-devanture__carte:has(input:checked) .tk-devanture__coche {
    background: var(--tk-orange);
    border-color: var(--tk-orange);
    color: #fff;
}

/* Un produit sans photo ne peut pas entrer en vitrine : la carte le dit au
   lieu de laisser cocher pour rien. */
.tk-devanture__carte--sans-photo { opacity: .55; cursor: not-allowed; }
.tk-devanture__manque {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--tk-2);
    font-size: .6875rem;
    color: var(--tk-ink-3);
    background: var(--tk-vert-wash);
}

/* =============================================================================
   Le comptoir — chercher, ajouter, valider

   LE DÉFAUT QU'ON CORRIGE
   -----------------------
   La première version affichait TOUT le catalogue avec un compteur par ligne.
   Avec quatre produits c'était agréable ; avec quatre cents, la page pèse un
   demi-mégaoctet et demande cinquante écrans de défilement pour trouver un
   article. Un écran qui ne marche qu'avec des données de démonstration ne
   marche pas.

   LE MOTIF QUI TIENT À L'ÉCHELLE
   ------------------------------
   Celui de toutes les caisses du monde : on **cherche**, on **ajoute au
   panier**, on **valide**. Le nombre d'articles du catalogue n'a plus aucune
   influence sur la page — dix ou dix mille, l'écran est le même.

     · à gauche, la recherche et ses résultats, vingt au plus ;
     · à droite sur poste de travail, le panier collant ;
     · sur téléphone, le panier devient une barre en bas avec son compteur, et
       s'ouvre en feuille — le pouce y arrive sans changer de prise.

   Le même motif sert à vendre, à approvisionner et à confier du stock : trois
   gestes qui posent tous « quels articles, en quelle quantité ».
   ========================================================================== */

.tk-comptoir {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tk-3);
    align-items: start;
}

@media (min-width: 1024px) {
    /* Le panier prend une colonne fixe : il ne doit ni pousser la recherche,
       ni se déplacer quand on ajoute une ligne. */
    .tk-comptoir { grid-template-columns: minmax(0, 1fr) 22rem; }
}

/* --- La recherche, en tête et toujours visible --------------------------- */

.tk-comptoir__cherche {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--tk-blanc);
    padding: var(--tk-2) 0;
}

.tk-comptoir__cherche input {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--tk-4);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
    font-size: 1rem; /* 16 px : en dessous, iOS zoome au focus */
    font-family: inherit;
    color: var(--tk-ink);
}
.tk-comptoir__cherche input:focus {
    outline: none;
    border-color: var(--tk-orange);
    box-shadow: 0 0 0 3px var(--tk-orange-wash);
}

.tk-comptoir__compte {
    font-size: .6875rem;
    color: var(--tk-ink-3);
    margin-top: var(--tk-1);
}

/* --- Les résultats : des lignes, pas des cartes -------------------------- */

.tk-resultats { display: grid; gap: 1px; }

.tk-resultat {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: var(--tk-3);
    align-items: center;
    width: 100%;
    padding: var(--tk-2) var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
    font-family: inherit;
    font-size: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.tk-resultat:hover  { border-color: var(--tk-orange); background: var(--tk-orange-wash); }
.tk-resultat:active { transform: scale(.995); }
.tk-resultat[disabled] { opacity: .45; cursor: not-allowed; }
.tk-resultat[disabled]:hover { border-color: var(--tk-line); background: var(--tk-blanc); }

/* Une ligne déjà au panier le dit : sinon on l'ajoute deux fois. */
.tk-resultat--dedans { border-color: var(--tk-vert-500); background: var(--tk-vert-wash); }

.tk-resultat__vignette {
    width: 38px;
    height: 38px;
    border-radius: var(--tk-r-ctrl);
    object-fit: cover;
    background: var(--tk-vert-wash);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--tk-vert-700);
    font-size: .875rem;
    overflow: hidden;
}

.tk-resultat__nom {
    display: block;
    font-weight: 600;
    color: var(--tk-vert-900);
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.tk-resultat__sous {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--tk-2);
    font-size: .6875rem;
    color: var(--tk-ink-3);
    margin-top: 1px;
}
.tk-resultat__prix {
    font-weight: 700;
    color: var(--tk-vert-900);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Le panier ----------------------------------------------------------- */

.tk-panier {
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-carte);
    background: var(--tk-blanc);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .tk-panier { position: sticky; top: var(--tk-3); }
}

.tk-panier__tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tk-2);
    padding: var(--tk-3);
    background: var(--tk-vert-900);
    color: #fff;
}
.tk-panier__titre {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .7);
}
.tk-panier__compte { font-size: .8125rem; font-weight: 700; }

.tk-panier__lignes { display: grid; max-height: 46vh; overflow-y: auto; }

.tk-panier__ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--tk-1) var(--tk-2);
    padding: var(--tk-2) var(--tk-3);
    border-bottom: 1px solid var(--tk-line);
    align-items: center;
}
.tk-panier__ligne:last-child { border-bottom: 0; }

.tk-panier__nom {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--tk-vert-900);
    overflow-wrap: anywhere;
    line-height: 1.2;
}
.tk-panier__detail {
    font-size: .6875rem;
    color: var(--tk-ink-3);
    font-variant-numeric: tabular-nums;
}
.tk-panier__montant {
    font-weight: 700;
    color: var(--tk-vert-900);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.tk-panier__outils {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--tk-2);
}

/* Le pas de quantité, en version compacte pour le panier. */
.tk-pasq {
    display: inline-grid;
    grid-template-columns: 30px 44px 30px;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    overflow: hidden;
}
.tk-pasq button {
    border: 0;
    background: var(--tk-blanc);
    color: var(--tk-vert-900);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    min-height: 34px;
    -webkit-tap-highlight-color: transparent;
}
.tk-pasq button:active { background: var(--tk-vert-wash); }
.tk-pasq input {
    border: 0;
    border-left: 1px solid var(--tk-line);
    border-right: 1px solid var(--tk-line);
    text-align: center;
    font-size: .875rem;
    font-weight: 700;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--tk-vert-900);
    min-width: 0;
}
.tk-pasq input:focus { outline: none; background: var(--tk-orange-wash); }

.tk-panier__retirer {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--tk-ink-3);
    font-size: 1.125rem;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    font-family: inherit;
}
.tk-panier__retirer:hover { color: var(--tk-danger); }

.tk-panier__vide {
    padding: var(--tk-6) var(--tk-4);
    text-align: center;
    font-size: .8125rem;
    color: var(--tk-ink-3);
}

.tk-panier__pied {
    padding: var(--tk-3);
    border-top: 1px solid var(--tk-line);
    background: var(--tk-vert-wash);
    display: grid;
    gap: var(--tk-2);
}
.tk-panier__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tk-2);
}
.tk-panier__total b {
    font-family: var(--tk-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tk-vert-900);
    font-variant-numeric: tabular-nums;
}
.tk-panier__note { font-size: .6875rem; color: var(--tk-ink-2); }

.tk-panier__valider {
    min-height: 48px;
    border: 0;
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-orange);
    color: #fff;
    font-size: .9375rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
}
.tk-panier__valider:hover  { background: var(--tk-orange-press); }
.tk-panier__valider:active { transform: scale(.99); }
.tk-panier__valider[disabled] { opacity: .45; cursor: not-allowed; }

/* --- Sur téléphone : le panier devient une barre en bas ------------------ */
/* Le pouce atteint le bas de l'écran, pas une colonne de droite qui n'existe
   pas. La barre ne s'affiche que lorsqu'il y a quelque chose dedans. */

@media (max-width: 1023px) {
    .tk-panier {
        position: fixed;
        left: var(--tk-3);
        right: var(--tk-3);
        bottom: calc(var(--tk-3) + env(safe-area-inset-bottom));
        z-index: 30;
        box-shadow: var(--tk-e3);
        transform: translateY(calc(100% + 2rem));
        transition: transform var(--tk-t-feuille);
    }
    .tk-panier--ouvert { transform: none; }

    /* Replié, on ne voit que la tête : le compteur et le total. */
    .tk-panier--replie .tk-panier__lignes { display: none; }

    .tk-panier__tete { cursor: pointer; }

    /* La barre d'onglets ne doit pas passer par-dessus le panier. */
    .tk-panier--ouvert ~ .tk-flottante { display: none; }
}

/* --- Les listes paginées ------------------------------------------------- */

.tk-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tk-2);
    margin-top: var(--tk-4);
    flex-wrap: wrap;
}
.tk-pages__lien {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--tk-3);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
    color: var(--tk-vert-900);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
}
.tk-pages__lien:hover { border-color: var(--tk-vert-500); text-decoration: none; }
.tk-pages__etat { font-size: .75rem; color: var(--tk-ink-3); font-variant-numeric: tabular-nums; }

/* ══ Inventaire ═══════════════════════════════════════════════════════════
   Compter, c'est une saisie répétitive : la ligne doit être basse, la case de
   quantité large et atteignable au pouce, et l'écart lisible sans réfléchir.  */

.tk-inv { display: grid; gap: var(--tk-4); }

@media (min-width: 1024px) {
    /* Le bilan colle à droite pendant qu'on compte : le total qu'on surveille
       ne doit pas demander de remonter. */
    .tk-inv { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
    .tk-inv__bilan { position: sticky; top: var(--tk-4); }
}

.tk-inv__rassure {
    margin: 0 0 var(--tk-4);
    padding: var(--tk-3);
    background: var(--tk-vert-wash);
    border-radius: var(--tk-r-ctrl);
    font-size: .8125rem;
    color: var(--tk-vert-900);
}

.tk-inv__bilan {
    padding: var(--tk-4);
    background: var(--tk-blanc);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-carte);
}

.tk-inv__liste {
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-carte);
    overflow: hidden;
}

.tk-inv__ligne {
    display: flex;
    align-items: center;
    gap: var(--tk-3);
    padding: var(--tk-2) var(--tk-3);
    min-height: 56px;
    border-bottom: 1px solid var(--tk-line);
    background: var(--tk-blanc);
}
.tk-inv__ligne:last-child { border-bottom: 0; }
.tk-inv__ligne--compte   { background: var(--tk-vert-wash); }

.tk-inv__texte { flex: 1; min-width: 0; display: grid; gap: 1px; }
.tk-inv__texte strong {
    font-size: .875rem;
    line-height: 1.25;
    /* Un nom long ne pousse pas la case de saisie hors de l'écran. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-inv__qte {
    flex: 0 0 5rem;
    width: 5rem;
    min-height: 44px;
    padding: 0 var(--tk-2);
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
}
.tk-inv__qte:focus {
    outline: none;
    border-color: var(--tk-orange);
    box-shadow: 0 0 0 3px var(--tk-orange-wash);
}

.tk-inv__ecart {
    flex: 0 0 4.5rem;
    text-align: right;
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.tk-inv__ecart--plus  { color: var(--tk-vert-500); }
.tk-inv__ecart--moins { color: var(--tk-danger); }
.tk-inv__ecart--juste { color: var(--tk-ink-3); font-weight: 400; }

/* ══ Catalogue : la barre et le tableau ═══════════════════════════════════
   Chercher est le geste le plus fréquent, ajouter et inventorier sont les deux
   qui ne portent pas sur une ligne. Les trois tiennent sur une bande.         */

.tk-barre-cat {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tk-3);
    align-items: center;
    margin: var(--tk-4) 0;
}

.tk-barre-cat__chercher {
    flex: 1 1 18rem;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--tk-2);
    padding: 0 var(--tk-3);
    background: var(--tk-blanc);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-pill);
    min-height: var(--tk-touche);
}
.tk-barre-cat__chercher:focus-within { border-color: var(--tk-orange); }
.tk-barre-cat__chercher .tk-ico { flex: 0 0 auto; color: var(--tk-ink-3); }

.tk-barre-cat__chercher input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    min-height: var(--tk-touche);
    font: inherit;
    color: inherit;
}
.tk-barre-cat__chercher input:focus { outline: none; }

.tk-barre-cat__etat { font-size: .75rem; color: var(--tk-ink-3); }

.tk-barre-cat__actions { display: flex; gap: var(--tk-2); flex: 0 0 auto; }

/* Sur téléphone, les deux boutons prennent la largeur : une cible de 44 px au
   bord de l'écran ne s'atteint pas au pouce. */
@media (max-width: 639px) {
    .tk-barre-cat__actions { width: 100%; }
    .tk-barre-cat__actions .tk-btn { flex: 1; justify-content: center; }
}

/* L'article : vignette + nom, sur une ligne qui ne pousse pas la colonne. */
.tk-cat__article { display: flex; align-items: center; gap: var(--tk-3); min-width: 0; }
.tk-cat__article > span { display: grid; gap: 1px; min-width: 0; }
.tk-cat__article a {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Approvisionner depuis la ligne : une case étroite et un bouton, rien de plus. */
.tk-appro { display: flex; gap: var(--tk-1); align-items: center; }
.tk-appro__qte {
    width: 3.75rem;
    min-height: 34px;
    padding: 0 var(--tk-2);
    text-align: center;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
}
.tk-appro__qte:focus {
    outline: none;
    border-color: var(--tk-orange);
    box-shadow: 0 0 0 3px var(--tk-orange-wash);
}

/* Un intitulé lu par les lecteurs d'écran, invisible à l'œil : une colonne
   d'actions sans en-tête reste une colonne, et le tableau doit le dire. */
.tk-visuellement-cache {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ══ Fiche produit : deux colonnes sur poste de travail ═══════════════════
   La saisie empilait tout en une colonne étroite : sur un écran large, elle
   occupait le tiers gauche et le reste était vide, ce qui obligeait à faire
   défiler pour sept champs. On décrit à gauche, on voit à droite.            */

.tk-fiche-produit { display: grid; gap: var(--tk-4); align-items: start; }

@media (min-width: 1024px) {
    .tk-fiche-produit { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.tk-fiche-produit__cote { display: grid; gap: var(--tk-4); align-content: start; }

/* Une phrase en tête d'écran qui dit à quoi il sert. Un écran dont le rôle se
   devine est un écran qu'on n'ouvre pas. */
.tk-intro-ecran {
    margin: 0 0 var(--tk-4);
    max-width: 46rem;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--tk-ink-2);
}
.tk-intro-ecran strong { color: var(--tk-ink); }

/* Les renvois : « ce que vous cherchez peut-être est là ». Ils remplacent la
   liste dupliquée qui rendait deux écrans indiscernables. */
.tk-renvois {
    display: grid;
    gap: var(--tk-2);
    margin: var(--tk-4) 0;
}
@media (min-width: 768px) {
    .tk-renvois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tk-renvoi {
    display: grid;
    gap: 2px;
    padding: var(--tk-3) var(--tk-4);
    background: var(--tk-blanc);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    min-height: var(--tk-touche);
    align-content: center;
}
.tk-renvoi:hover { border-color: var(--tk-orange); text-decoration: none; }
.tk-renvoi strong { font-size: .875rem; color: var(--tk-vert-900); }
.tk-renvoi span   { font-size: .75rem; color: var(--tk-ink-3); line-height: 1.35; }

/* Le prix, modifiable sur la ligne du ticket. Étroit : c'est un ajustement,
   pas une saisie principale — et la ligne doit rester lisible d'un regard. */
.tk-panier__prix {
    width: 4.5rem;
    min-height: 30px;
    padding: 0 var(--tk-1);
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: .8125rem;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-ctrl);
    background: var(--tk-blanc);
}
.tk-panier__prix:focus {
    outline: none;
    border-color: var(--tk-orange);
    box-shadow: 0 0 0 2px var(--tk-orange-wash);
}

/* Le prix catalogue rappelé dès qu'on s'en écarte : sans lui, une remise saisie
   de travers passe inaperçue jusqu'au rapport du soir. */
.tk-panier__remise { color: var(--tk-orange-press); font-weight: 600; }

/* L'abonnement : ce que ça couvre et comment payer se lisent ensemble.
   Empilés, le second passait sous la ligne de flottaison — et la personne qui
   voulait payer ne savait pas comment. */
.tk-abo { display: grid; gap: var(--tk-4); align-items: start; }
@media (min-width: 1024px) {
    .tk-abo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* Le catalogue : l'article prend la place, les chiffres n'en prennent que ce
   qu'il leur faut. Sans ces largeurs, « En boutique » et « Prix de vente »
   s'étalaient sur un écran large pendant que le nom de l'article se tronquait —
   or c'est le nom qu'on cherche du regard, pas la colonne des zéros. */
.tk-tab--catalogue table { table-layout: fixed; }
.tk-tab--catalogue th:nth-child(1) { width: auto; }
.tk-tab--catalogue th:nth-child(2),
.tk-tab--catalogue th:nth-child(3),
.tk-tab--catalogue th:nth-child(4) { width: 7.5rem; }
.tk-tab--catalogue th:nth-child(5) { width: 7rem; }
.tk-tab--catalogue th:nth-child(6) { width: 15rem; }

/* Sous 768 px le tableau redevient des blocs : les largeurs fixes n'ont plus
   de sens et écraseraient le contenu. */
@media (max-width: 768px) {
    .tk-tab--catalogue table { table-layout: auto; }
    .tk-tab--catalogue th { width: auto; }
}

/* Le stock confié sur la fiche d'un commerçant : quatre chiffres courts et une
   colonne d'action.

   Il empruntait `--catalogue`, dont les largeurs sont écrites pour SIX
   colonnes : la cinquième y vaut 7 rem, et c'est la colonne d'action de ce
   tableau-ci. Un champ de quantité plus un bouton « Confier » dans 112 px, et
   le tableau sortait de l'écran — c'est le débordement qu'on voyait.

   Les chiffres n'ont besoin que de leur largeur, l'article prend le reste :
   c'est le nom qu'on cherche du regard, pas la colonne des zéros. */
.tk-tab--confie table { table-layout: fixed; }
.tk-tab--confie th:nth-child(1) { width: auto; min-width: 10rem; }
.tk-tab--confie th:nth-child(2),
.tk-tab--confie th:nth-child(3),
.tk-tab--confie th:nth-child(4) { width: 6.5rem; }
.tk-tab--confie th:nth-child(5) { width: 8rem; }
.tk-tab--confie th:nth-child(6) { width: 11rem; }

@media (max-width: 768px) {
    .tk-tab--confie table { table-layout: auto; }
    .tk-tab--confie th { width: auto; min-width: 0; }
}

/* Les dépenses : la précision prend la place, le reste n'en prend que ce qu'il
   lui faut. C'est la précision qu'on relit — « taxi pour le marché » — pas la
   colonne des dates. */
.tk-tab--depenses table { table-layout: fixed; }
.tk-tab--depenses th:nth-child(1) { width: 7rem; }
.tk-tab--depenses th:nth-child(2) { width: 9rem; }
.tk-tab--depenses th:nth-child(3) { width: auto; }
.tk-tab--depenses th:nth-child(4) { width: 8rem; }
.tk-tab--depenses th:nth-child(5) { width: 7rem; }

@media (max-width: 768px) {
    .tk-tab--depenses table { table-layout: auto; }
    .tk-tab--depenses th { width: auto; }
}

/* Le journal : c'est « ce qui s'est passé » qu'on lit, le reste n'est que du
   repère. Sans largeurs, les six colonnes se partageaient la place a parts
   egales et le libelle se tronquait au profit des dates. */
.tk-tab--journal table { table-layout: fixed; }
.tk-tab--journal th:nth-child(1) { width: 10rem; }
.tk-tab--journal th:nth-child(2) { width: 12rem; }
.tk-tab--journal th:nth-child(3) { width: auto; }
.tk-tab--journal th:nth-child(4),
.tk-tab--journal th:nth-child(5) { width: 5.5rem; }
.tk-tab--journal th:nth-child(6) { width: 7rem; }

@media (max-width: 768px) {
    .tk-tab--journal table { table-layout: auto; }
    .tk-tab--journal th { width: auto; }
}

/* --- Deux colonnes, la grammaire de l'espace commerçant (§ 20) -------------
   Une colonne sur téléphone, deux à partir de 1024 px, et à gauche ce qui se
   lit, à droite ce qui se fait. Le nom dit la disposition et rien d'autre :
   `.tk-abo` la portait déjà, mais son nom parle de l'abonnement — réemployer
   une classe pour ce qu'elle ne nomme pas est la faute du § 6.9. */
.tk-cm-deux { display: grid; gap: var(--tk-4); align-items: start; }

@media (min-width: 1024px) {
    .tk-cm-deux { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--tk-6); }
}