/* Bilan : réglages propres à l'application (lot « bilan-coque »). Le socle (kit/styles) fait le reste. */

html, body { background: var(--couleur-fond-app); }
body { margin: 0; overscroll-behavior: none; }
.bi-sans-js { padding: 24px 16px; color: var(--couleur-texte-2); font-family: var(--police-sans); }

/* Espace réservé discret tant que l'écran d'un autre lot n'est pas chargé */
.bi-reserve { min-height: 56px; border-radius: var(--rayon-lg); background: var(--voile-texte-04); }
.bi-reserve--page {
  min-height: 50vh; background: none;
  display: flex; align-items: center; justify-content: center;
}

/* =====================================================================================================================
   Styles communs à plusieurs écrans du Bilan (passe d'assemblage) : un seul endroit, aucun doublon dans ecrans/*.css.
   ===================================================================================================================== */

/* ---------- en-tête d'onglet (Accueil, Frais fixes, Créatives) : symbole, nom, chevron ; œil discret à droite ---------- */
.bi-entete { display: flex; align-items: center; gap: 10px; padding-top: 8px; min-width: 0; }
.bi-entete__titre {
  display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto;
  color: var(--couleur-texte); text-align: left;
}
.bi-entete__titre:active { opacity: 0.7; }
.bi-entete__symbole { display: inline-flex; color: var(--couleur-teinte); flex: none; }
.bi-entete__nom { min-width: 0; }
.bi-entete__chevron { display: inline-flex; color: var(--couleur-texte-3); flex: none; }
.bi-entete__droite { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }

/* œil discret : icône muette sans verre, 36 × 36 ; plus visible quand le mode est actif */
.bi-oeil {
  width: var(--haut-oeil, 36px); height: var(--haut-oeil, 36px);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--couleur-texte-3);
}
.bi-oeil.est-actif { color: var(--couleur-texte-2); }
.bi-oeil:active { opacity: 0.7; }

/* ---------- rangées de formulaire (Form groupé d'iOS) : Réglages et formulaires des Frais fixes (ecrans/formulaire.js) ---------- */
.bi-rangee-form {
  --retrait-filet: 16px;
  min-height: 52px; gap: 12px; justify-content: space-between; cursor: default;
  font: 400 17px/1.3 var(--police-systeme);
}
button.bi-rangee-form, a.bi-rangee-form { cursor: pointer; }
.bi-rangee-form::before { border-top-color: var(--couleur-filet-systeme) !important; }   /* filet système d'un Form iOS */
.bi-rangee-form__libelle { flex: 1 1 auto; min-width: 0; color: var(--couleur-texte); }

/* interrupteur iOS 26 (Toggle teinté gain) : piste 63 × 28, bouton en capsule 38 × 24, course 21 */
.bi-interrupteur {
  position: relative; flex: none; width: 63px; height: 28px; border-radius: 14px;
  background: rgba(120, 120, 128, 0.36);
  transition: background-color 220ms ease-out;
}
.bi-interrupteur.est-actif { background: var(--couleur-gain); }
.bi-interrupteur__bouton {
  position: absolute; top: 2px; left: 2px; width: 38px; height: 24px; border-radius: 12px;
  background: #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: transform var(--duree-doux, 454ms) var(--ressort, ease-out), width var(--duree-doux, 454ms) var(--ressort, ease-out);
}
.bi-interrupteur.est-actif .bi-interrupteur__bouton { transform: translateX(21px); }
.bi-bascule:active { background: transparent; }
.bi-bascule:active .bi-interrupteur__bouton { width: 44px; }
.bi-bascule:active .bi-interrupteur.est-actif .bi-interrupteur__bouton { transform: translateX(15px); }
.bi-bascule:disabled { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) { .bi-interrupteur, .bi-interrupteur__bouton { transition: none; } }

/* sélecteur (Picker menu) : valeur à droite + chevron.up.chevron.down ; <select> natif invisible par-dessus */
.bi-choix { position: relative; cursor: pointer; }
.bi-choix:active { background: transparent; }
.bi-choix__valeur {
  flex: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  color: var(--feuille-texte-systeme, rgba(235, 235, 245, 0.6));
}
.bi-choix__select {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0;
  font-size: 16px; /* pas de zoom automatique de Safari iOS */
}
.bi-choix:focus-within { outline: 2px solid var(--couleur-teinte); outline-offset: -2px; }

/* pied de section (footer d'un Form) */
.bi-pied-section {
  margin: 0; padding: 8px 16px 0;
  font: 400 13px/1.3 var(--police-systeme); color: var(--feuille-texte-systeme, rgba(235, 235, 245, 0.6));
}

/* ---------- roue de chargement (ProgressView) : 20 px, couleur du texte courant ; petite (18) dans le bouton du vocal ---------- */
.bi-roue {
  display: inline-block; width: 20px; height: 20px; border-radius: 50%; color: var(--couleur-texte-2);
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor;
  animation: bi-tourne 0.9s linear infinite;
}
.bi-roue--petite { width: 18px; height: 18px; }
@keyframes bi-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bi-roue { animation-duration: 2.4s; } }

/* ---------- marges communes des cinq onglets (AccueilView / FraisView / CreativesView : en-tête .padding(.top, 8) sous la zone
   sûre, contenu .padding(.bottom, 40) au-dessus de la barre) : haut = zone sûre seule (l'en-tête porte ses 8), bas = barre + 40.
   Mesuré sur les captures 10, 50, 61 (402 × 874, zone sûre 62) : titre à 81 pt du haut ⇒ zone sûre + 8 + l'œil du texte.
   Le kit pose ici zone sûre + 8 (base.css) puis remplace le bas par la seule barre (navigation.css). ---------- */
.ak-app[data-espace="pnl"] .ak-page {
  padding-top: var(--sur-haut);
  padding-bottom: calc(var(--haut-zone-barre) + var(--espace-bas-page));
}

/* ---------- grand écran (≥ 1100 px, bilan/scene.js) : colonne 1 = l'écran du téléphone, globe compris ; piles des colonnes ----------
   Mêmes proportions qu'à 402 px : globe 402 × 340, contenu à 150 (accueil) ou 120 (marque) du haut, rapportés à la largeur de la
   colonne (plafonnée à 600 pour que le globe reste net). Le globe ne sort pas de sa colonne. */
.bi-pile { display: flex; flex-direction: column; gap: var(--espace-bloc); min-width: 0; }
.bi-pile > * { min-width: 0; }
.bi-scene-col { position: relative; min-width: 0; container-type: inline-size; }
/* calque : largeur de colonne = (largeur − (n − 1) écarts) / n, comme .ak-colonnes ; globe centré dans la colonne 1 */
.bi-large { position: relative; container-type: inline-size; display: flex; flex-direction: column; gap: var(--espace-bloc); }
.bi-large__globe {
  --l-col: calc((100cqw - (var(--n-col, 2) - 1) * var(--ecart-colonnes, var(--espace-bloc, 24px))) / var(--n-col, 2));
  --l-globe: min(var(--l-col), 600px);
  --haut-globe: calc(var(--l-globe) * 340 / 402);
  position: absolute; top: 0; left: calc((var(--l-col) - var(--l-globe)) / 2); z-index: 0; pointer-events: none;
  width: var(--l-globe); height: var(--haut-globe);
}
.bi-large__contenu { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--espace-bloc); min-width: 0; }
.bi-scene-col__contenu { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--espace-bloc); }
.bi-scene-col__contenu > * { min-width: 0; }
.bi-scene-col--globe > .bi-scene-col__contenu { padding-top: calc(min(100cqw, 600px) * 150 / 402); }
/* marque : la carte des chiffres (et non le sélecteur) garde son recouvrement de 402 px : 184 = 120 + sélecteur 40 + écart 24 */
.bi-scene-col--globe.bi-scene-col--marque > .bi-scene-col__contenu { padding-top: calc(min(100cqw, 600px) * 184 / 402 - 64px); }