/* =====================================================================
   Bascule — peau sombre, lecture d'instrument.

   Tabler porte la grille, les formulaires et le responsive. Ici on change
   la matière : fond sombre, chiffres énormes en condensé, une couleur par
   nature de donnée.

   Le parti pris de fond ne bouge pas : l'interface distingue ce qui est
   MESURÉ de ce qui est MODÉLISÉ. C'est la seule chose qui change la
   confiance qu'on accorde à un chiffre.
     pastille pleine = mesure (pesée, tonnage, distance)
     pastille creuse = modèle (toutes les kcal)

   Trois couleurs, trois rôles, jamais décoratives :
     menthe  = mesuré, et ce qui rentre
     ambre   = dépense, effort
     corail  = déficit, alerte
   ===================================================================== */

:root,
[data-bs-theme="dark"] {
  --fond:        #0e1418;
  --surface:     #161f26;
  --surface-2:   #1d2830;
  --bordure:     #26333d;
  --texte:       #e8eef2;
  --texte-doux:  #8b9aa6;

  --mesure:  #2ed3a7;
  --effort:  #ff8f3d;
  --deficit: #ff6b6b;
  --modele:  #6d7d89;

  /* Tabler lit ces variables : on le repeint sans toucher à sa mécanique */
  --tblr-body-bg: var(--fond);
  --tblr-body-color: var(--texte);
  --tblr-bg-surface: var(--surface);
  --tblr-bg-surface-secondary: var(--surface-2);
  --tblr-border-color: var(--bordure);
  --tblr-secondary: var(--texte-doux);
  --tblr-primary: var(--mesure);
  --tblr-font-sans-serif: "Barlow", system-ui, sans-serif;

  /* Tabler compose en .875rem, soit 14 px : correct pour un back-office
     qu'on survole, trop petit pour un écran de saisie qu'on scrute.
     On remonte le corps de texte sans toucher aux grands chiffres du
     bandeau, qui sont dimensionnés indépendamment. */
  --tblr-body-font-size: .95rem;
}

body { background: var(--fond); color: var(--texte); font-family: "Barlow", system-ui, sans-serif; }
.card { background: var(--surface); border: 1px solid var(--bordure); }
.card-header { border-bottom-color: var(--bordure); background: transparent; }
.card-footer { border-top-color: var(--bordure); background: transparent; color: var(--texte-doux); }
.navbar { background: var(--surface); border-bottom: 1px solid var(--bordure); }
.page-header { padding-top: 1.25rem; }
.text-secondary { color: var(--texte-doux) !important; }
.table { --tblr-table-color: var(--texte); --tblr-table-border-color: var(--bordure); }
.table tbody tr:hover { background: var(--surface-2); }
.form-control, .form-select {
  background: var(--surface-2); border-color: var(--bordure); color: var(--texte);
}
.form-control:focus, .form-select:focus {
  background: var(--surface-2); border-color: var(--mesure); color: var(--texte);
  box-shadow: 0 0 0 .2rem rgba(46, 211, 167, .18);
}
.input-group-text { background: var(--surface); border-color: var(--bordure); color: var(--texte-doux); }
.btn-primary { background: var(--mesure); border-color: var(--mesure); color: #06231c; font-weight: 600; }
.btn-primary:hover { background: #3fe6b8; border-color: #3fe6b8; color: #06231c; }
.btn-outline-secondary { border-color: var(--bordure); color: var(--texte-doux); }
.btn-outline-secondary:hover { background: var(--surface-2); color: var(--texte); border-color: var(--mesure); }

/* ---------------------------------------------------------- identité */
.marque {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--texte); text-decoration: none;
}
.marque::after {
  content: ""; display: inline-block; width: 7px; height: 7px;
  margin-left: .35rem; vertical-align: .35em;
  background: var(--mesure); border-radius: 50%;
}
.marque-xl { font-size: 2.6rem; }
.page-title { font-family: "Barlow Condensed", sans-serif; font-weight: 600;
              text-transform: uppercase; letter-spacing: .04em; }
.card-title { font-family: "Barlow Condensed", sans-serif; font-weight: 600;
              text-transform: uppercase; letter-spacing: .08em;
              color: var(--texte-doux); }
.subheader { color: var(--texte-doux); }

.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.chiffre {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: .95;
}

/* -------------------------------------------------- bandeau principal */
.hero {
  background: linear-gradient(135deg, var(--surface) 0%, #121b22 60%, #101820 100%);
  border: 1px solid var(--bordure); border-radius: var(--tblr-border-radius, 4px);
  padding: 1.4rem 1.5rem; position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--mesure), var(--effort));
}
.hero-solde { font-size: clamp(3rem, 9vw, 5.2rem); }
.hero-solde.deficit { color: var(--deficit); }
.hero-solde.excedent { color: var(--effort); }
.hero-unite { font-size: 1.1rem; color: var(--texte-doux); font-weight: 500;
              letter-spacing: .12em; text-transform: uppercase; }

/* ------------------------------------------------------------ anneaux */
.anneau { display: block; margin: 0 auto; }
.anneau-piste { fill: none; stroke: var(--surface-2); stroke-width: 9; }
.anneau-part  { fill: none; stroke-width: 9; stroke-linecap: round;
                transform: rotate(-90deg); transform-origin: 50% 50%;
                transition: stroke-dashoffset .9s cubic-bezier(.2,.7,.3,1); }
.anneau-part--mesure { stroke: var(--mesure); }
.anneau-part--effort { stroke: var(--effort); }
.anneau-valeur { font-family: "Barlow Condensed", sans-serif; font-weight: 700;
                 fill: var(--texte); font-size: 20px; text-anchor: middle;
                 font-variant-numeric: tabular-nums; }
.anneau-libelle { fill: var(--texte-doux); font-size: 8.5px; text-anchor: middle;
                  letter-spacing: .1em; text-transform: uppercase; }

/* ------------------------------ règle de balance : apports vs dépense */
.balance-piste {
  position: relative; height: 40px; overflow: hidden; border-radius: 3px;
  background: var(--surface-2); border: 1px solid var(--bordure);
}
.balance-seg { position: absolute; top: 0; height: 100%;
               animation: pousse .8s cubic-bezier(.2,.7,.3,1) both; }
.balance-seg--mb {
  background: repeating-linear-gradient(45deg, var(--modele) 0 2px, transparent 2px 7px);
}
.balance-seg--activite {
  background: repeating-linear-gradient(45deg, var(--effort) 0 2px, transparent 2px 7px);
}
.balance-seg--entrees {
  background: var(--mesure); height: 12px; top: 14px; border-radius: 2px;
  box-shadow: 0 0 18px rgba(46, 211, 167, .35);
}
@keyframes pousse { from { width: 0 !important; } }

/* ------------------------------------------- provenance des chiffres */
.prov { display: inline-block; width: 7px; height: 7px; margin-right: 5px;
        border: 1px solid var(--modele); vertical-align: 1px; }
.prov--mesure { background: var(--mesure); border-color: var(--mesure); }
.prov--modele { background: transparent; }

/* ------------------------------------------------------------ divers */
.stat-carte { background: var(--surface); border: 1px solid var(--bordure);
              border-radius: 4px; padding: .8rem 1rem;
              transition: border-color .18s, transform .18s; }
.stat-carte:hover { border-color: var(--mesure); transform: translateY(-2px); }
.stat-valeur { font-size: 1.9rem; }
.badge.bg-green-lt { background: rgba(46,211,167,.16) !important; color: var(--mesure) !important; }
.badge.bg-blue-lt  { background: rgba(255,143,61,.16) !important; color: var(--effort) !important; }
.table-active { background: rgba(46,211,167,.09) !important; }
.alert { background: var(--surface-2); border: 1px solid var(--bordure); color: var(--texte); }
.alert-warning { border-left: 3px solid var(--effort); }
.alert-info { border-left: 3px solid var(--mesure); }
.progress { background: var(--surface-2); }
.empty { color: var(--texte-doux); }

@media (prefers-reduced-motion: reduce) {
  .balance-seg, .anneau-part, .stat-carte { animation: none; transition: none; }
}


/* =====================================================================
   Lisibilité des zones de saisie et de lecture.

   Le bandeau garde ses très grands chiffres : c'est un coup d'œil.
   Tout le reste — listes d'aliments, tables de référence, relevés de
   tension — se lit ligne à ligne, souvent sur un téléphone, parfois
   les bras encore chargés. Ça demande un corps de texte plus généreux
   que celui d'un tableau de bord.
   ===================================================================== */

.table { font-size: .95rem; }
.table td, .table th { padding: .5rem .6rem; }
.table thead th {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texte-doux);
}

/* Champs de saisie compacts.

   Tabler descend .form-control-sm à .75rem, illisible pour taper un poids.
   Mais il dimensionne AUSSI les enfants d'un .input-group-sm par une règle
   distincte et plus spécifique : sans la reprendre ici, un champ seul et un
   champ dans un groupe n'ont ni la même police ni la même hauteur, alors
   qu'ils se suivent sur la même ligne.

   Police, marges intérieures et interlignage identiques : c'est ce qui
   garantit une hauteur calculée identique, sans la figer en dur. */
.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
  font-size: .9rem;
  padding: .3rem .5rem;
  line-height: 1.45;
}
.form-control, .form-select { font-size: .95rem; }

/* les lignes de saisie s'alignent sur le bas des champs, pas sur la ligne
   de base du texte : sinon un libellé décale tout le groupe */
.row.g-1 > [class^="col"], .row.g-2 > [class^="col"] { align-self: end; }
.form-label { font-size: .85rem; color: var(--texte-doux); }
.input-group-text { font-size: .85rem; }

/* textes explicatifs : pieds de carte, rappels, conditions de mesure */
.card-footer, .card-footer .small, .small, small { font-size: .85rem; }
.card-footer { line-height: 1.5; }
.alert { font-size: .9rem; line-height: 1.5; }

/* intitulés de section : lisibles sans crier */
.subheader { font-size: .72rem; letter-spacing: .09em; }
.card-title { font-size: .9rem; }
.page-title { font-size: 1.8rem; }

/* le bandeau reste tel quel : ses chiffres sont déjà dimensionnés
   en clamp() et n'ont pas à suivre le corps de texte */


/* ------------------------------------------------------------- replis
   Documentation qu'on lit une fois : conditions de mesure, paliers de
   lecture. Repliée par défaut, elle ne dispute plus la place à ce qu'on
   vient faire tous les jours — saisir six nombres. */
.repli { border-top: 1px solid var(--bordure); }
.repli > summary {
  cursor: pointer; list-style: none; padding: .7rem 1.25rem;
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; font-size: .82rem;
  color: var(--texte-doux); display: flex; align-items: center;
}
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary::after {
  content: "+"; margin-left: auto; font-size: 1.1rem; line-height: 1;
  color: var(--mesure);
}
.repli[open] > summary::after { content: "−"; }
.repli > summary:hover { color: var(--texte); background: var(--surface-2); }
.repli-corps { padding: 0 1.25rem 1rem; font-size: .88rem; }
.liste-conditions { list-style: none; padding: 0; margin: 0 0 .8rem; }
.liste-conditions li { padding: .3rem 0; border-bottom: 1px dotted var(--bordure); }
.liste-conditions li:last-child { border-bottom: none; }


/* --------------------------------------------- champs dans les tableaux
   Les flèches du champ numérique occupent près d'un tiers de la largeur
   utile pour un contrôle dont personne ne se sert : on tape 350, on ne
   clique pas 350 fois. On les retire là où la place est comptée. */
.table input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.table input[type="number"]::-webkit-outer-spin-button,
.table input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* =====================================================================
   Lignes de saisie.

   Ces listes ne sont plus des <table> : appliquer `display: grid` à un
   <tr> se comporte différemment d'un navigateur à l'autre et produisait
   un empilement en pleine largeur au lieu d'une grille. Une liste de
   <div> donne exactement le même rendu partout.

   Chaque liste déclare ses colonnes de bureau dans --cols. En dessous de
   992 px, un modèle unique reprend la main :

       [        première cellule, pleine largeur        ] [ ]
       [ champ | champ | champ                          ] [✓]
                                                          [×]

   La cellule de tête — l'aliment, la machine, le nom — prend toute la
   largeur ; les suivantes se répartissent sur trois colonnes et débordent
   sur une ligne de plus si besoin ; les actions tiennent la hauteur à
   droite, quel que soit le nombre de lignes.
   ===================================================================== */

.lignes { display: flex; flex-direction: column; }
.ligne {
  display: grid;
  grid-template-columns: var(--cols, 1fr auto);
  gap: .4rem .6rem;
  align-items: center;
  padding: .3rem 0;
}
.ligne + .ligne { border-top: 1px solid var(--bordure); }
.ligne-entete {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texte-doux); padding-bottom: .2rem;
  border-bottom: 1px solid var(--bordure);
}
.ligne-entete + .ligne { border-top: none; }
.ligne-vide { color: var(--texte-doux); font-style: italic; padding: .4rem 0; }
.l-actions { display: flex; gap: .15rem; justify-content: flex-end; }
.l-etiq { display: none; }
.l-num { font-variant-numeric: tabular-nums; text-align: right; }

@media (max-width: 991.98px) {
  .ligne, .ligne-entete {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  }
  .ligne-entete { display: none; }
  .ligne { padding: .6rem 0; align-items: end; }
  .ligne > :first-child { grid-column: 1 / 4; }
  .ligne > .l-actions {
    grid-column: 4; grid-row: 1 / -1;
    flex-direction: column; justify-content: center; align-self: stretch;
  }
  /* variante sans cellule de tête : toutes les cellules ont le même poids */
  .ligne--plate > :first-child { grid-column: auto; }

  /* l'en-tête disparaissant, chaque valeur porte son étiquette */
  .l-etiq {
    display: block; font-family: "Barlow Condensed", sans-serif;
    font-size: .65rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--texte-doux); line-height: 1.15;
  }
  .l-num { text-align: left; }
}