/* Page d'une marque (MarqueView), feuille « Par heure », carte « Ventes par produit ». Lot « bilan-marque ».
   Téléphone (≤ 599 px) = l'app ; 600-1099 : colonne de 560 ; ≥ 1100 : mêmes cartes, même ordre, Colonnes du socle, 2 colonnes au plus (jamais 3 dans le Bilan). */

/* ---------- page ---------- */
.bi-marque { display: flex; flex-direction: column; gap: var(--espace-bloc, 24px); min-width: 0; }
.bi-marque > * { min-width: 0; }
.bi-marque:not(.bi-marque--integree) { padding: 0 var(--espace-page, 16px) 32px; }
.bi-marque__note { padding: 16px; }
.bi-marque__pied { text-align: center; }
.bi-marque__savoir { display: flex; justify-content: center; }
.bi-marque__reserve { min-height: 120px; }
.bi-marque__attente {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 240px; width: 100%;
}

/* fond d'appui immédiat (RangeeStyle) */
.bi-pressable { -webkit-tap-highlight-color: transparent; cursor: pointer; }
.bi-pressable:active { background: var(--couleur-pressee); }
@media (hover: hover) and (pointer: fine) { .bi-pressable:hover { background: var(--voile-texte-04); } }
.bi-pressable:focus-visible { outline: 2px solid var(--couleur-teinte); outline-offset: -2px; }

/* ---------- sélecteur de période (segments en verre + calendrier + « … ») ---------- */
.bi-periode { display: flex; align-items: center; gap: 8px; }
.bi-periode__segments { flex: 1 1 auto; display: flex; min-width: 0; height: var(--haut-segment, 40px); padding: 0; }
.bi-periode__segment {
  position: relative; flex: 1 1 0; min-width: 0; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; padding: 0;
  font: var(--graisse-normale) var(--taille-sous-titre)/1 var(--police-sans); color: var(--couleur-texte-2);
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.bi-periode__segment.est-actif { font-weight: var(--graisse-moyenne); color: var(--couleur-texte); }
.bi-periode__segment.est-actif::before {
  content: ""; position: absolute; inset: 3px; border-radius: var(--rayon-capsule); background: var(--voile-texte-12); z-index: -1;
}
.bi-periode__segment { z-index: 0; isolation: isolate; }
.bi-periode__segment:focus-visible { outline: 2px solid var(--couleur-teinte); outline-offset: -3px; border-radius: var(--rayon-capsule); }
.bi-periode__rond {
  flex: none; width: 40px; height: 40px; padding: 0; border: 0;
  display: grid; place-items: center; cursor: pointer;
}

/* ---------- puces d'onglets (page non intégrée) ---------- */
.bi-puces { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
.bi-puces::-webkit-scrollbar { display: none; }
.bi-puce {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px;
  border: 0; border-radius: var(--rayon-md); background: var(--couleur-surface-2); color: var(--couleur-texte); cursor: pointer;
}
.bi-puce.est-actif { background: var(--couleur-teinte); color: var(--couleur-sur-teinte); }
.bi-puce.est-archive { color: var(--couleur-texte-3); }
.bi-puce--archives { padding: 0 12px; color: var(--couleur-texte-2); }

/* ---------- rétrofacturations ---------- */
.bi-retro__comptees { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; min-height: 48px; }
.bi-retro__note { padding: 0 16px 12px; }
.bi-segmente {
  flex: none; width: 180px; height: 32px; display: flex; padding: 2px; gap: 0;
  border-radius: var(--rayon-capsule); background: rgba(118, 118, 128, 0.24);
}
.bi-segmente > button {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: 0; text-align: center; border: 0; border-radius: var(--rayon-capsule); background: transparent; cursor: pointer;
  font: var(--graisse-moyenne) 13px/1 var(--police-sans); color: var(--couleur-texte);
}
.bi-segmente > button.est-actif { background: rgba(255, 255, 255, 0.22); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }

/* ---------- créatives ---------- */
.bi-creas__rangee { display: flex; padding: 12px 0; color: inherit; text-decoration: none; }
.bi-creas__case { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.bi-creas__valeur { display: block; max-width: 100%; }
.bi-creas__pourquoi {
  padding: 0 16px 10px; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- détail par jour ---------- */
.bi-jour {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 16px;
  border: 0; margin: 0; background: transparent; color: var(--couleur-texte); text-align: left; font: inherit;
}
.bi-jour__gauche { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 6px 0; }
.bi-jour__droite { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.bi-jour__chevron { flex: none; display: inline-flex; }
.bi-jour--plus { justify-content: space-between; min-height: 48px; }

/* ---------- paiements ---------- */
.bi-paiement { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 16px; box-sizing: border-box; }
.bi-paiement__point { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.bi-paiement__nom { flex: 1 1 auto; min-width: 0; }
.bi-paiement__droite { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }

/* ---------- ventes par produit ---------- */
.bi-ventes__vide { padding: 16px; }
.bi-ventes__tete { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.bi-ventes__total { display: flex; align-items: baseline; gap: 8px; }
.bi-ventes__filet { height: 0.5px; margin-left: 64px; background: var(--couleur-filet); }
.bi-ventes__rangee { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 16px; }
.bi-ventes__textes { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bi-ventes__droite { flex: none; margin-left: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }

/* ---------- feuille « Par heure » ---------- */
.bi-heures__note { cursor: default; min-height: 0; }
.bi-heures__ligne { gap: 8px; cursor: default; --retrait-filet: 64px; }
.bi-heures__h { flex: none; width: 40px; }
.bi-heures__centre { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bi-heures__droite { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }

/* ---------- responsive ---------- */
@media (min-width: 600px) and (max-width: 1099px) {
  .bi-marque:not(.bi-marque--integree) { max-width: var(--largeur-colonne, 560px); margin: 0 auto; }
}
/* ≥ 1100 px : les cartes passent par Colonnes equilibre (ordre ORDRE_LARGE) ; la période est posée dans la 1re colonne, sur toute sa largeur,
   au-dessus de la carte des chiffres (comme à 402 px) */