/* Atelia · CONSOLE « RELEVÉS » : styles du kit de saisie (screens/saisie-kit.js) et de ses écrans.
   Chargé APRÈS css/components.css, AVANT css/franchise.css, css/responsive.css et css/lot-s-b.css.
   Portée : chaque sélecteur porte une classe sk- ; rien ici ne touche l'espace Réseau, l'app du
   restaurateur, ni un composant partagé hors des écrans de saisie.
   Couleurs, rayons et ombres : uniquement les variables de css/tokens.css.
   Tailles : 12 px au moins, sauf les libellés en capitales (11,5 px).
   Largeurs visées : 1440, 1024 (menu latéral ouvert) et 390 px.
   Réutilise .segment, .btn, .card, .chip, .st, .tbl, .field, .note, .fr-row.lecture, .lsb,
   .drawer-actions et le message d'erreur [data-field-error] posé par App.fieldError. */

/* ================================================================ 1. onglets « Relevés » */
/* <nav class="segment sk-onglets" aria-label="Relevés"> puis un <button type="button" data-view>
   par onglet. L'onglet actif porte .on ET aria-current="page" ; l'un ou l'autre suffit à l'afficher
   actif. Même boîte que « Tous / Succursales / Franchisés » dans la barre du haut. Les sélecteurs de
   bouton ont deux classes : ils l'emportent sur « .segment button » de responsive.css, chargé après. */
.sk-onglets { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; min-width: 0; margin: 0 0 18px; }
.segment.sk-onglets button { min-height: 32px; padding: 7px 14px; font-size: 13px; line-height: 1.3; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.segment.sk-onglets button:not(.on):not([aria-current="page"]):hover { background: var(--surface); color: var(--navy); }
.segment.sk-onglets button.on,
.segment.sk-onglets button[aria-current="page"] { background: var(--accent); color: var(--surface); cursor: default; }
.segment.sk-onglets button.on .muted,
.segment.sk-onglets button[aria-current="page"] .muted { color: var(--surface); }
.segment.sk-onglets button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* Rangée des onglets avec le point de vente précédent / suivant (ordre du parc filtré) :
   <div class="sk-onglets-rang"> <nav class="segment sk-onglets">…</nav>
     <div class="sk-suite"> <button class="btn ghost sm">‹ Précédent</button>
       <span class="sk-suite-pos">3 sur 12</span> <button class="btn ghost sm">Suivant ›</button> </div> </div>
   Si la rangée ne tient pas, « précédent / suivant » passe à la ligne, toujours à droite. */
.sk-onglets-rang { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; min-width: 0; margin: 0 0 18px; }
.sk-onglets-rang > .sk-onglets { flex: 0 1 auto; margin: 0; }
.sk-suite { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; margin-left: auto; }
.sk-suite .btn { white-space: nowrap; }
.sk-suite .btn:disabled, .sk-suite .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.sk-suite-pos { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ================================================================ 2. tableaux de la console */
/* Grille « À relever » (6 colonnes, dans .sk-matrice) : cellules resserrées pour tenir à 1024 px ;
   les bords gardent 18 px, alignés sur l'en-tête de la carte. En cartes (≤ 639 px ou .en-cartes),
   les règles de responsive.css, plus précises, reprennent la main. */
.sk-matrice .tbl th, .sk-matrice .tbl td { padding-inline: 10px; }
.sk-matrice .tbl th:first-child, .sk-matrice .tbl td:first-child { padding-left: 18px; }
.sk-matrice .tbl th:last-child, .sk-matrice .tbl td:last-child { padding-right: 18px; }
.sk-matrice .tbl td { vertical-align: top; }

/* Case cliquable : <button type="button" class="sk-cellule" data-hub-vue data-hub-pdvid aria-label>
   autour de l'état d'un relevé. La ligne n'est jamais cliquable en plus : un seul élément interactif.
   La pastille (.st, atome en ligne) n'est pas soulignée au survol ; le texte l'est. */
.sk-cellule { display: block; width: calc(100% + 12px); max-width: none; margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: var(--r-xs); background: none; color: var(--ink); font: inherit; line-height: 1.45; text-align: left; cursor: pointer; transition: background .12s ease; }
.sk-cellule:hover { background: var(--surface-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sk-cellule:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.sk-cellule .st { vertical-align: middle; }
.sk-cellule .lsb-sec { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--muted); }
/* En cartes, la valeur se range à droite de son libellé de colonne. */
.tbl.empile.en-cartes .sk-cellule { display: inline-block; width: auto; margin: -4px -6px -4px 0; text-align: right; }

/* État d'un relevé écrit en toutes lettres (K.etatCellule) :
   « Rien de saisi » en encre et en gras, c'est le travail à faire ; « Publié » en encre, sans
   pastille ; un exemple de démonstration s'écrit « Publié » lui aussi, suivi de « exemple » en
   petite mention grise sur la même ligne (audit 27/09, UX-console-releves-11). Ni .na ni « — » :
   la légende « pas de mesure » ne se pose pas. */
.sk-rien { color: var(--ink); font-weight: 700; }
.sk-publie { color: var(--ink); font-weight: 500; }
.sk-exemple { color: var(--muted); font-weight: 500; font-style: normal; }
.sk-publie + .sk-exemple { font-size: 12px; }
/* R-publie-exemple (27/09) : « Publié exemple » s'écrit avec une espace ordinaire (K.etatCellule).
   À partir de 1200 px, chaque liste de Relevés le tient sur une ligne en restant en tableau (mesuré
   sur le parc entier et sur un seul point de vente) : la ligne y reste d'un seul tenant. En dessous, « exemple »
   peut passer à la ligne au lieu d'élargir la colonne, ce qui faisait passer la liste en cartes
   (Remboursements d'un point de vente à 820 px, Avis du parc entier à 820 px). */
@media (min-width: 1200px) {
  .tbl td:has(> .sk-publie + .sk-exemple), .sk-cellule:has(> .sk-publie + .sk-exemple) { white-space: nowrap; }
  .tbl td:has(> .sk-publie + .sk-exemple) > .lsb-sec, .sk-cellule:has(> .sk-publie + .sk-exemple) > .lsb-sec { white-space: normal; }
}
/* Chiffre que la plateforme calculera : « — » gris neutre et droit, sans la classe .na (qui dit
   « pas de mesure » et appelle sa légende). Utilisable dans une tuile, une ligne ou un tableau. */
.sk-tiret { color: var(--muted); font-weight: 600; font-style: normal; letter-spacing: 0; }
/* « Accès perdu sur Uber Eats Manager » sous le nom d'un point de vente. */
.sk-alerte { color: var(--rouge); font-weight: 600; }
.tbl td .sk-alerte { display: block; margin-top: 2px; font-size: 12px; }

/* ================================================================ 3. puces et repli des calculs */
/* Puces avec compteur, juste au-dessus de la carte qu'elles filtrent :
   <div class="chips sk-puces"><span class="sk-puces-lb">Filtres :</span><button class="chip on">…</button></div> */
.sk-puces { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.sk-puces-lb { font-size: 12px; font-weight: 700; color: var(--muted); }
.card + .sk-puces, .grid + .sk-puces, .sk-formules + .sk-puces { margin-top: 20px; }

/* « Comment ces chiffres seront calculés (N) » (K.formules) : un repli habillé comme une carte, après
   les tableaux. Lignes .fr-row.lecture : libellé en gras, formule puis « Chez le client : … » en gris,
   valeur « — » en texte .muted (jamais .na). Posé dans une carte, le repli perd son habillage. */
.sk-formules { min-width: 0; margin: 20px 0 0; padding: 0 20px; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
details.sk-formules { margin: 20px 0 0; }
details.sk-formules > summary { display: flex; align-items: center; gap: 7px; min-height: 46px; padding: 12px 0; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--blue); list-style: none; }
details.sk-formules > summary::-webkit-details-marker { display: none; }
details.sk-formules:not(.disclose) > summary::before { content: "\203A"; font-size: 15px; font-weight: 800; line-height: 1; transition: transform .15s ease; }
details.sk-formules:not(.disclose)[open] > summary::before { transform: rotate(90deg); }
details.sk-formules[open] { padding-bottom: 4px; }
details.sk-formules[open] > summary { border-bottom: 1px solid var(--line-2); }
.sk-formules .fr-row.lecture { align-items: flex-start; gap: 16px; padding: 12px 0; }
.sk-formules .fr-row.lecture .fr-t > span { display: block; margin-top: 3px; line-height: 1.45; }
.sk-formules .fr-row.lecture .lecture-v { color: var(--muted); font-weight: 600; }
.card .sk-formules { margin-top: 12px; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.sk-formules + .note { margin-top: 20px; }

/* ================================================================ 4. tiroir de saisie */
/* Ligne d'introduction : rythme du relevé · précaution · « * obligatoire ». */
.sk-tiroir-intro { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.sk-tiroir-intro b, .sk-tiroir-intro strong { color: var(--ink-2); font-weight: 700; }
.sk-tiroir-intro + .sk-tiroir-intro { margin-top: -6px; }
/* Tiroir rouvert à vide pour enchaîner (garderOuvert) : ce qui vient d'être enregistré, en tête.
   <p class="sk-tiroir-fait">[icône]Avis 2 ★ du 06/09 enregistré</p> */
.sk-tiroir-fait { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.sk-tiroir-fait svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--vert); }
/* Intertitre d'un tiroir (K.groupe → <h4 class="sk-groupe sk-large">) : capitales grises, trait
   au-dessus, sauf en tête du tiroir ou de sa grille. */
.sk-groupe { margin: 6px 0 12px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 11.5px; font-weight: 700; line-height: 1.3; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.sk-grille > .sk-groupe:first-child, .db > .sk-groupe:first-child,
.sk-tiroir-intro + .sk-groupe, .sk-tiroir-fait + .sk-groupe { margin-top: 0; padding-top: 0; border-top: 0; }
/* Étape 1 d'un tiroir, la période relevée (jour, semaine ou mois) : le champ prend la largeur. */
.drawer .sk-f { margin-bottom: 16px; }
.drawer .sk-f input, .drawer .sk-f select { width: 100%; min-width: 0; min-height: 40px; }
/* CR-26 : le choix d'une liste fermée coupé dans le champ porte « … » et se relit en entier dessous. */
.sk-champ .field select { text-overflow: ellipsis; }
.sk-choix { margin: 4px 0 0; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.sk-choix[hidden] { display: none; }

/* ================================================================ 5. champs */
/* align-items: start : chaque champ garde sa propre hauteur. La grille est un conteneur de requête :
   un champ date + heure y prend deux colonnes dès qu'il y en a deux (voir .sk-duo). Dans un tiroir
   de 440 px, une seule colonne. */
.sk-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 4px 22px; align-items: start; container-type: inline-size; }
.sk-grille .sk-large { grid-column: 1 / -1; }
.sk-champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-bottom: 16px; }
.sk-champ > .field, .sk-champ .sk-duo > .field { margin-bottom: 0; }
.sk-champ .field label, .sk-etoiles-f legend { line-height: 1.35; }
/* Radios et cases exclus : les radios des étoiles portent .visually-hidden (1 px, position absolue) ;
   un width: 100 % les étirait à la largeur de la fenêtre. */
.sk-champ .field input:not([type="radio"]):not([type="checkbox"]), .sk-champ .field select, .sk-champ .field textarea { width: 100%; min-width: 0; }
.sk-champ .field textarea { resize: vertical; min-height: 88px; line-height: 1.45; }
.sk-champ input[type="text"][inputmode] { font-variant-numeric: tabular-nums; }
/* Champ obligatoire : un astérisque après le libellé (aria-required reste sur la zone de saisie). */
.sk-requis { margin-left: 2px; color: var(--ink); font-weight: 800; }
/* Qualificatifs écrits après un libellé (« Heure facultatif ») : du texte gris, plus de pastille. */
.sk-oblig, .sk-facult { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--muted); }

/* Unité posée DANS le champ, à droite : « € », « % », « commandes ». */
.sk-ctl { position: relative; display: flex; align-items: center; min-width: 0; }
.sk-ctl.a-unite input { padding-right: calc(18px + var(--sk-unite-l, 1) * .62em); }
.sk-unite { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 700; color: var(--muted); pointer-events: none; white-space: nowrap; }
/* Date + heure : les deux champs alignés sur leur bas. */
.sk-duo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.sk-heure label { white-space: nowrap; }
/* 522 px = deux colonnes de 250 px + l'espace entre elles : la grille a au moins deux colonnes. */
@container (min-width: 522px) {
  .sk-champ:has(> .sk-duo) { grid-column: span 2; }
}

/* ================================================================ 6. où le trouver, rythme, détail */
/* Sous le champ, une ligne grise courte : « Manager › Paiements › « Total payout » ». Le texte complet
   est en title et dans le repli « Détail ». La loupe (12 px, comme l'horloge de la fréquence) est le
   repère visible de « Où le trouver » (audit 27/09, UX-console-releves-37). .sk-doute n'est plus
   posé par le kit (UX-console-releves-03) ; la règle reste pour un écran qui l'écrirait encore. */
.sk-aide { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.sk-ou { font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: break-word; }
.sk-ou > svg { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; color: var(--muted); }
.sk-ou b { color: var(--ink-2); font-weight: 600; }
.sk-doute, .sk-ou.sk-a-confirmer, .sk-ou.sk-a-confirmer b { color: var(--orange); font-weight: 600; }
/* Rythme propre à un champ, écrit sous lui quand il diffère de celui du tiroir (statut et temps en
   ligne à chaque passage, avis critique chaque jour…) : du texte, jamais seulement un title. */
.sk-freq { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.sk-freq svg { flex: none; width: 12px; height: 12px; color: var(--muted); }
/* « Détail » replié : texte complet du chemin, aide, valeur d'un champ vide (ouvert de lui-même
   quand le champ est en erreur). */
.sk-precisions { min-width: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.sk-precisions > summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; min-height: 24px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink-2); }
.sk-precisions > summary::-webkit-details-marker { display: none; }
.sk-precisions > summary::before { content: ""; flex: none; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .12s ease; }
.sk-precisions[open] > summary::before { transform: rotate(90deg); }
.sk-precisions .sk-plus { margin: 2px 0 0; }

/* ================================================================ 7. étoiles et cases */
/* Note 1 à 5 étoiles : cinq boutons radio natifs (clavier : flèches), jamais de 0. */
.sk-etoiles-f { display: block; border: 0; padding: 0; margin: 0; min-width: 0; }
.sk-etoiles-f legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.sk-etoiles { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
/* Garde-fou : les radios masqués restent à 1 px, sans le padding ni la bordure de .field input. */
.sk-etoiles input.visually-hidden { width: 1px; min-width: 0; height: 1px; padding: 0; border: 0; }
.sk-champ .sk-etoiles label { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-xs); cursor: pointer; color: var(--na); font-size: inherit; font-weight: 400; transition: color .12s ease, background .12s ease; }
.sk-etoiles label:hover { background: var(--surface-2); color: var(--orange); }
.sk-etoiles label.on { color: var(--orange); }
.sk-etoiles label.on svg { fill: currentColor; }
.sk-etoiles input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 1px; }
.sk-etoiles-lu { margin-left: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sk-etoiles-f.sk-err .sk-etoiles { border-radius: var(--r-xs); box-shadow: 0 0 0 1px var(--rouge-bd); background: var(--rouge-bg); }
/* Case à cocher : libellé cliquable en entier. */
.sk-champ .field label.sk-case { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.sk-champ .field .sk-case input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--blue); }

/* ================================================================ 8. pastille d'état */
.sk-pastille { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sk-pastille-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* « Rien de saisi » rendu par la pastille du kit (ETATS.vide, ton « sk-vide plain ») : du texte
   d'encre, sans cadre ni point, comme .sk-rien. */
.st.sk-vide { padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 12.5px; font-weight: 700; }
.sk-pastille-slot:empty { display: none; }

/* ================================================================ 9. barre d'actions */
.sk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 32px; padding: 14px 20px; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
/* Hors tiroir (héritage, plus appelé par les écrans) : la barre se colle à la carte de formulaire
   qu'elle enregistre ; un emplacement de message vide entre les deux ne les sépare pas. */
.card:has(.sk-grille) + .sk-actions:not(.drawer-actions),
.card:has(.sk-grille) + :empty + .sk-actions:not(.drawer-actions) { margin-top: 0; border-top: 1px solid var(--line-2); border-top-left-radius: 0; border-top-right-radius: 0; clip-path: inset(0 -24px -24px); }
.card:has(.sk-grille):has(+ .sk-actions:not(.drawer-actions)),
.card:has(.sk-grille):has(+ :empty + .sk-actions:not(.drawer-actions)) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; clip-path: inset(-24px -24px 0); }
.sk-actions-etat { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; }
.sk-statut, .sk-manque { margin: 0; font-size: 12.5px; line-height: 1.45; }
.sk-statut { color: var(--ink-2); }
.sk-statut.sk-bloque { color: var(--rouge); font-weight: 700; }
.sk-manque { color: var(--muted); }
.sk-statut:empty, .sk-manque:empty { margin: 0; line-height: 0; }
.sk-actions-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
/* aria-disabled et non disabled : le bouton reste atteignable au clavier et dit, au clic, ce qui manque. */
.sk-actions .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.sk-actions .btn.primary[aria-disabled="true"]:hover { background: var(--accent); }

/* Dans un tiroir, la barre reprend .drawer-actions : collée en bas du tiroir (components.css, G9),
   le corps défile derrière elle. Sa hauteur varie : état, « ce qui manque » sur une ou deux lignes,
   et deux boutons qui, dans 440 px, passent sur deux rangées. Le corps réserve donc, sous le dernier
   champ, la plus grande hauteur de la barre plus 16 px : défilé au bout, le dernier champ se lit en
   entier. Un troisième bouton (« Enregistrer et jour suivant ») ajoute une rangée. */
.drawer .db .sk-actions.drawer-actions { margin: 16px 0 0; padding: 12px 20px; border-radius: 0; box-shadow: none; gap: 8px 12px; }
.drawer .db:has(.sk-tiroir), .drawer .db:has(.sk-actions.drawer-actions) { padding-bottom: 200px; }
.drawer .db:has(.sk-actions.drawer-actions .sk-actions-btns > :nth-child(3)) { padding-bottom: 250px; }
.drawer .sk-tiroir .sk-actions-etat { flex-basis: 100%; }
.drawer .sk-tiroir .sk-actions-btns { margin-left: 0; }

/* ================================================================ 10. dépôt de fichier */
.sk-depot { margin-bottom: 20px; }
.sk-depot-titre { margin-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
/* Zone sobre : trait gris, icône grise. Le bleu n'apparaît qu'au survol ou quand un fichier passe
   au-dessus (.sk-survol). */
.sk-depot-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 124px; padding: 20px 18px; border: 2px dashed var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); text-align: center; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.sk-depot-zone svg { color: var(--muted); transition: color .15s ease; }
.sk-depot-zone:hover, .sk-depot-zone.sk-survol { border-color: var(--blue); background: var(--blue-soft); }
.sk-depot-zone:hover svg, .sk-depot-zone.sk-survol svg { color: var(--blue); }
.sk-depot-zone:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.sk-depot-texte { max-width: 52ch; font-size: 13px; font-weight: 500; line-height: 1.45; }
.sk-depot[data-etat="refuse"] .sk-depot-zone { border-color: var(--rouge-bd); background: var(--rouge-bg); }
.sk-depot[data-etat="accepte"] .sk-depot-zone { border-color: var(--vert-bd); background: var(--vert-bg); }
.sk-depot-statut { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.sk-depot-statut:empty { margin: 0; line-height: 0; }
.sk-depot[data-etat="refuse"] .sk-depot-statut { color: var(--rouge); font-weight: 700; }
.sk-roue { display: inline-block; width: 13px; height: 13px; margin-right: 7px; vertical-align: -2px; border: 2px solid var(--line); border-top-color: var(--blue); border-radius: 50%; animation: sk-tourne .8s linear infinite; }
@keyframes sk-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sk-roue { animation: none; } }

/* ================================================================ 11. choix du point de vente */
/* Liste de boutons du kit (choixPdv). */
.sk-choix-pdv { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.sk-pdv-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 44px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-family: inherit; text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.sk-pdv-btn:hover { background: var(--surface-2); border-color: var(--blue-bd); }
.sk-pdv-btn b { font-size: 13.5px; color: var(--navy); }
.sk-pdv-btn span { font-size: 12px; color: var(--muted); }
.sk-pdv-btn .sk-alerte { color: var(--rouge); }
.sk-empty-act { margin-top: 12px; }
/* Facultatif, pour le sélecteur de périmètre (App.openPdvPicker) : les trois listes du repli
   « Affiner : type, ville, franchisé », l'une sous l'autre, à la largeur du tiroir.
   <div class="sk-pp-filtres"><div class="field"><label>…</label><select>…</select></div>…</div> */
.sk-pp-filtres { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 6px 0 12px; }
.sk-pp-filtres .field { margin: 0; }
.sk-pp-filtres select { width: 100%; min-width: 0; min-height: 40px; }

/* ================================================================ 12. HÉRITÉ, inerte */
/* Barre de contexte « Filtrer le parc » (K.barre) et tuiles « Calculé par la plateforme »
   (K.calcule, K.calcules) : gardées dans le kit, plus appelées par les écrans refaits. Styles
   conservés pour qu'un appel resté en place ne casse pas la mise en page. */
.sk-barre { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin-bottom: 20px; padding: 16px 20px; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
.sk-barre-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sk-barre-titre { margin: 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.sk-compte { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sk-barre-h .btn { margin-left: auto; }
.sk-filtres { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 12px; align-items: end; }
.sk-choix { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px 16px; align-items: start; }
.sk-affiner { min-width: 0; padding-top: 12px; border-top: 1px solid var(--line-2); }
.sk-affiner > summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 32px; cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.sk-affiner > summary::-webkit-details-marker { display: none; }
.sk-affiner > summary::before { content: ""; flex: none; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .12s ease; }
.sk-affiner[open] > summary::before { transform: rotate(90deg); }
.sk-affiner[open] > summary { margin-bottom: 10px; }
.sk-affiner-axes { font-weight: 400; color: var(--muted); }
.sk-affiner-n { padding: 0 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-strong); font-size: 12px; line-height: 20px; }
.sk-barre .field { margin: 0; min-width: 0; }
.sk-barre .field select, .sk-barre .field input { width: 100%; min-width: 0; min-height: 38px; }
.sk-barre .field .sk-actif { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.sk-pdv-ligne { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.sk-pdv-ligne select { flex: 1 1 auto; }
.sk-pdv-ligne .btn { flex: 0 0 auto; white-space: nowrap; }
.sk-pdv-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sk-pdv-meta { font-size: 12px; color: var(--muted); }
.sk-barre .note { margin: 0; flex-wrap: wrap; }
.sk-barre .note .btn { margin-left: 6px; }
.sk-calcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.sk-calc { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.sk-calc-top { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sk-calc-lb { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.sk-calc-badge { padding: 1px 8px; border: 1px solid var(--blue-bd); border-radius: var(--r-pill); background: var(--blue-soft); font-size: 12px; font-weight: 600; color: var(--blue-strong); white-space: nowrap; }
.sk-calc-val { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--muted); }
.sk-calc-formule { font-size: 12px; color: var(--ink-2); }
.sk-calc-note { font-size: 12px; color: var(--muted); }
/* Espacements hérités entre blocs du kit posés dans la page. */
.sk-barre + .card, .card + .sk-actions, .sk-depot + .card, .card + .sk-depot { margin-top: 20px; }
.sk-actions + .card { margin-top: 0; }

/* ================================================================ 13. largeurs */
/* 1 024 px : le menu latéral laisse environ 720 px au contenu. */
@media (max-width: 1100px) {
  .sk-filtres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sk-choix { grid-template-columns: 1fr; }
}
/* Repli et grille en cartes : mêmes retraits que les cartes (responsive.css, ≤ 560 px). */
@media (max-width: 560px) {
  .sk-formules { padding: 0 14px; }
  .card .sk-formules { padding: 0; }
}
/* Tableau en cartes sous 640 px : la case cliquable se range à droite de son libellé. */
@media (max-width: 639px) {
  .tbl.empile .sk-cellule { display: inline-block; width: auto; margin: -4px -6px -4px 0; text-align: right; }
}
/* Téléphone (390 px) : cibles de 40 à 44 px, saisie à 16 px (pas de zoom iOS). */
@media (max-width: 640px) {
  /* Onglets sur toute la largeur, à la ligne dans leur boîte, 40 px de haut. */
  .sk-onglets { width: 100%; }
  .segment.sk-onglets button { flex: 1 1 auto; min-height: 40px; padding: 8px 10px; }
  .sk-onglets-rang { flex-direction: column; align-items: stretch; gap: 10px; }
  .sk-suite { justify-content: space-between; margin-left: 0; }
  .sk-suite .btn { flex: 1 1 0; justify-content: center; min-height: 40px; }
  .sk-cellule { min-height: 32px; }
  /* Repli des calculs : les lignes s'empilent (responsive.css) ; l'écart revient à 4 px. */
  .sk-formules .fr-row.lecture { align-items: stretch; gap: 4px; }
  /* Champs. */
  .sk-champ .field input:not([type="checkbox"]):not([type="radio"]), .sk-champ .field select,
  .drawer .sk-f input, .drawer .sk-f select, .sk-pp-filtres select,
  .sk-barre .field select, .sk-barre .field input { min-height: 44px; font-size: 16px; }
  .sk-champ .field textarea { font-size: 16px; }
  .sk-champ .sk-etoiles label { width: 44px; height: 44px; }
  .sk-precisions > summary { display: flex; min-height: 32px; }
  .sk-champ .field label.sk-case { min-height: 44px; }
  .sk-duo { grid-template-columns: 1fr; }
  .sk-actions .btn, .sk-choix-pdv .sk-pdv-btn, .sk-barre .btn { min-height: 44px; }
  .sk-actions { padding: 14px; }
  .sk-actions-btns { margin-left: 0; width: 100%; }
  .sk-actions-btns .btn { flex: 1 1 auto; justify-content: center; }
  /* Tiroir plein écran : les deux boutons tiennent sur une rangée (libellé sur deux lignes au
     besoin), la barre garde la zone du geste d'accueil de l'iPhone, le corps réserve sa hauteur. */
  .drawer .db .sk-actions.drawer-actions { padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .drawer .sk-tiroir .sk-actions-btns .btn { flex: 1 1 150px; min-width: 0; white-space: normal; text-align: center; line-height: 1.25; }
  .drawer .db:has(.sk-tiroir), .drawer .db:has(.sk-actions.drawer-actions) { padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px)); }
  .drawer .db:has(.sk-actions.drawer-actions .sk-actions-btns > :nth-child(3)) { padding-bottom: calc(250px + env(safe-area-inset-bottom, 0px)); }
  /* Hérité. */
  .sk-barre { padding: 14px; }
  .sk-filtres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-affiner > summary { min-height: 44px; }
  .sk-pdv-ligne { flex-wrap: wrap; }
  .sk-pdv-ligne select { flex: 1 1 100%; }
  .sk-barre-h .btn { margin-left: 0; }
}

/* ================================================================ audit 27/09 · listes serrées */
/* UX-console-releves-01 : une liste qui porte Deliveroo (data-sk-dlv, posé par K.liste) essaie une
   marge serrée avant de passer en cartes. App.ajusterTableaux pose .serre sur le tableau qui déborde
   (fenêtre ≥ 640 px), mesure de nouveau, et ne pose .en-cartes que s'il déborde encore. Les en-têtes
   passent à la ligne, les cases gardent 10 px de marge au lieu de 18. Jamais en cartes. */
.lsb[data-sk-dlv] .tbl.empile.serre:not(.en-cartes) th { white-space: normal; }
.lsb[data-sk-dlv] .tbl.empile.serre:not(.en-cartes) th,
.lsb[data-sk-dlv] .tbl.empile.serre:not(.en-cartes) td { padding-left: 10px; padding-right: 10px; }
/* Finition 27/09 : dans une liste serrée, une pastille d'état longue (« Accès perdu · rôle Admin
   retiré », Onboarding à 820) peut passer à la ligne, comme les en-têtes ; même pastille, mêmes
   couleurs. Elle ne se coupe que si le tableau en a besoin pour tenir sans cartes. */
.lsb[data-sk-dlv] .tbl.empile.serre:not(.en-cartes) td .st { white-space: normal; }