/* ===========================================================================
   Les Anges en Forme — direction « Le marché ».

   Cette feuille se charge APRÈS `outil.css` et ne fait presque que redéfinir
   ses jetons. C'est délibéré : `outil.css` est partagé avec le sondage, qui
   tourne en production, et on n'y met pas la main. Tout ce qui est ici ne
   s'applique qu'aux pages des Anges en Forme, puisqu'elles seules la chargent.

   Le principe de la direction tient en une ligne : **un seul aplat de couleur
   par écran**. La décision du jour occupe un pavé aubergine, tout le reste est
   blanc, gris, ou une pastille de huit pixels. Les couleurs viennent de l'étal
   — aubergine, abricot, courgette, tomate — et non d'une charte.
   =========================================================================== */

:root {
  --papier: #faf8f4;
  --surface: #ffffff;
  --creux: #f2ede5;
  --encre: #221d1c;
  --encre-2: #4f4644;
  --encre-3: #7d726d;
  --trait: #e5ddd2;
  --trait-2: #efe9e1;

  --accent: #4d3152;
  --accent-2: #f4edf3;
  --sur-accent: #ffe6cd;

  --ok: #5f8244;
  --ok-fond: #eaf1e2;
  --alerte: #a9701f;
  --alerte-fond: #f8eddc;
  --critique: #b23f39;
  --critique-fond: #f9e5e2;

  /* Le pavé de la décision. Le seul endroit où la couleur est pleine. */
  --decision-fond: #4d3152;
  --decision-encre: #e2cfe0;
  --decision-vif: #ffb977;

  /* Les moments du jour, aux couleurs de ce qu'on y mange. Ils ne servent
     qu'à border les cartes de repas : le fil se lit alors en diagonale, sans
     avoir à relire les libellés. */
  --repas-matin: #d98b39;
  --repas-midi: #6f9350;
  --repas-gouter: #5f8ba3;
  --repas-soir: #7a4f82;

  /* L'eau a sa couleur à elle : les verres bus sont pleins, pas cernés. */
  --eau: #6193ad;

  --r: 14px;
  --r-rond: 999px;
  --ombre: 0 1px 2px rgba(34, 29, 28, 0.04), 0 12px 24px -18px rgba(34, 29, 28, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #16120f;
    --surface: #201b17;
    --creux: #1b1613;
    --encre: #f1ebe3;
    --encre-2: #c2b7ac;
    --encre-3: #8c817a;
    --trait: #332b25;
    --trait-2: #2a231e;

    --accent: #cba3d1;
    --accent-2: #2c2131;
    --sur-accent: #1d1220;

    --ok: #93b877;
    --ok-fond: #22301b;
    --alerte: #dda75e;
    --alerte-fond: #322611;
    --critique: #e08078;
    --critique-fond: #331b18;

    --decision-fond: #3d2743;
    --decision-encre: #cdb2cb;
    --decision-vif: #ffb977;

    --repas-matin: #e0a05a;
    --repas-midi: #93b877;
    --repas-gouter: #7fa8bf;
    --repas-soir: #b98cc0;

    --eau: #5b8299;

    --ombre: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 24px -18px rgba(0, 0, 0, 0.9);
  }
}

/* --- les formes -----------------------------------------------------------
   Les angles s'arrondissent franchement, les traits s'effacent : trois pixels
   de rayon et une bordure partout, c'était le dessin d'un formulaire. */

.carte {
  border-color: var(--trait-2);
  box-shadow: none;
  padding: 16px;
}

.bouton,
.champ,
select.champ,
.pastille,
.onglet {
  border-radius: var(--r-rond);
}

textarea.champ {
  border-radius: var(--r);
}

.encart {
  border-radius: var(--r);
}

/* --- niveau 1 : la décision -----------------------------------------------
   Le seul pavé de couleur. Il gagne par sa surface, pas par la taille de son
   texte — c'est ce qui permet à tout le reste de rester petit et calme. */

.decision {
  background: var(--decision-fond);
  color: var(--decision-encre);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 12px;

  /* Les cases de points sont dessinées avec les jetons ordinaires ; les
     redéfinir ici suffit à les repeindre pour ce bloc seul, sans une ligne de
     JavaScript en plus. */
  --creux: rgba(255, 230, 205, 0.24);
  --trait-2: transparent;
  --ok: var(--decision-vif);
  --accent: var(--decision-vif);
  --critique: #ff9c8e;
  --encre-3: var(--decision-encre);
  --encre-2: var(--decision-encre);
}

.decision .chiffre {
  font-size: 56px;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--decision-vif);
}

.decision .surtitre {
  color: var(--decision-encre);
}

.decision .aide {
  color: var(--decision-encre);
  opacity: 0.92;
}

/* --- niveau 2 : l'élan ----------------------------------------------------
   Ce qui entretient l'envie — la semaine, la série, le défi, l'eau. Une seule
   carte blanche, compacte, qui se scanne sans se lire. */

.elan {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* --- niveau 3 : le fil ----------------------------------------------------
   Les repas portent la couleur de leur moment. */

.repas-matin { border-left: 3px solid var(--repas-matin); }
.repas-midi { border-left: 3px solid var(--repas-midi); }
.repas-gouter { border-left: 3px solid var(--repas-gouter); }
.repas-soir { border-left: 3px solid var(--repas-soir); }

/* --- niveau 4 : l'archive -------------------------------------------------
   Repliée, et qui en a l'air : creusée dans la page plutôt que posée dessus. */

details.carte {
  background: var(--creux);
  border-color: transparent;
}

details.carte[open] {
  background: var(--surface);
  border-color: var(--trait-2);
}

details.carte > summary {
  color: var(--encre-2);
  font-size: 14.5px;
}

/* --- la barre d'onglets, en bas -------------------------------------------
   Un téléphone se tient d'une main, et le haut de l'écran est hors d'atteinte
   du pouce. La navigation descend donc là où sont les doigts.

   Elle n'est pas en position fixe : l'écran devient une coque à deux étages —
   une zone qui défile, et la barre en dessous, qui n'en fait pas partie. Une
   barre fixe reste accrochée au document, et iOS la repositionne avec un temps
   de retard pendant l'inertie du défilement : elle flotte, puis se recale.
   Sortie de ce qui défile, elle ne peut plus bouger du tout. */

body.app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.app main.page {
  flex: 1;
  /* Les deux `min-*` sont indispensables, et pour des raisons opposées. Sans
     `min-height`, l'élément refuse de rétrécir sous la hauteur de son contenu
     et rien ne défile. Sans `min-width`, il refuse de rétrécir sous la largeur
     de son contenu — un tableau large pousse alors tout l'écran de côté, et la
     page se traîne horizontalement. `.defilant` reprend son rôle : c'est le
     tableau qui défile, pas la page. */
  min-height: 0;
  min-width: 0;
  /* `.page` porte `margin: 0 auto`, et une marge automatique sur l'axe
     transversal annule l'étirement d'un élément flex : la page se dimensionnait
     alors sur son contenu le plus large — le tableau des cibles — et tout
     l'écran partait de côté. Une largeur explicite lui rend sa contrainte. */
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: 14px;
}

.onglets.nav-principale {
  flex: none;
  margin: 0;
  display: flex;
  gap: 0;
  overflow: visible;
  background: var(--surface);
  border-top: 1px solid var(--trait-2);
  border-bottom: none;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 22px -20px rgba(34, 29, 28, 0.6);
}

.onglets.nav-principale .onglet {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  margin: 0;
  border: none;
  border-radius: var(--r-rond);
  font-size: 12.5px;
  color: var(--encre-3);
}

.onglets.nav-principale .onglet[aria-selected="true"] {
  background: var(--accent);
  color: var(--sur-accent);
  font-weight: 650;
}

/* --- le composeur ---------------------------------------------------------
   Plusieurs lignes, et ses boutons en dessous : on y dicte un repas entier.
   Il n'est plus collé au bas — l'écran tient sans le fil, et le détail ferme
   la marche derrière lui. */

.composeur {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.composeur textarea.champ {
  min-height: 76px;
  resize: vertical;
  line-height: 1.45;
}

.composeur .outils {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* « Envoyer » à droite, les outils à gauche. */
.composeur .outils .bouton[type="submit"] {
  margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Le total à côté du reste : « 25,7 sur 31,4 ». Le grand chiffre seul ne dit
   pas ce qui a déjà été mangé. */
.decision .surTotal {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* --- les quatre moments ----------------------------------------------------
   L'acte central de l'application, enfin de la taille de son importance : une
   grille de quatre pavés qui sert autant de bouton que de résumé. Un pavé en
   pointillés est un repas qui reste à noter — on le voit sans lire. */

.paves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.pave {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 12px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--trait-2);
  border-left-width: 3px;
  border-left-style: solid;
}

/* Un repas encore vide se dessine en creux : le trait de couleur reste plein,
   c'est lui qui identifie le moment. */
.pave.vide {
  background: transparent;
  border-style: dashed;
  border-left-style: solid;
}

.pave .nom {
  font-size: 13.5px;
  font-weight: 650;
}

.pave .etat {
  font-size: 11.5px;
  color: var(--encre-3);
  font-variant-numeric: tabular-nums;
}

.pave.vide .etat {
  color: var(--encre-2);
  font-weight: 600;
}

/* Le repas visé : le composeur écrit dedans tant qu'il est enfoncé. */
.pave[aria-pressed="true"] {
  background: var(--accent);
  border-color: transparent;
  border-left-color: var(--accent);
}

.pave[aria-pressed="true"] .nom,
.pave[aria-pressed="true"] .etat {
  color: var(--sur-accent);
}

.repas-autre {
  border-left: 3px solid var(--encre-3);
}

/* La couleur du moment doit gagner sur la bordure grise du pavé : `.pave` est
   déclaré plus bas et son raccourci `border` reposait la couleur neutre. */
.pave.repas-matin { border-left-color: var(--repas-matin); }
.pave.repas-midi { border-left-color: var(--repas-midi); }
.pave.repas-gouter { border-left-color: var(--repas-gouter); }
.pave.repas-soir { border-left-color: var(--repas-soir); }
.pave.repas-autre { border-left-color: var(--encre-3); }

.pave[aria-pressed="true"] { border-left-color: var(--accent); }

/* --- le pavé déplié --------------------------------------------------------
   Corriger se fait ici, une ligne par aliment, avec de l'air : le repas
   réécrit d'un bloc dans une phrase était illisible dès trois ingrédients. */

.paves.unDeplie {
  grid-template-columns: 1fr;
}

.pave.ouvert {
  grid-column: 1 / -1;
}

.pave .tete {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pave .contenu {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--trait-2);
}

.ligne-aliment {
  /* Deux rangs : le nom et ses chiffres au-dessus, ses réglages en dessous.
     Sur 390 px, un nom, une quantité, un moment, des calories et des points
     sur une seule ligne ne laissent la place à aucun des cinq. */
  display: grid;
  grid-template-columns: 1fr auto 28px;
  align-items: center;
  gap: 5px 8px;
  padding: 9px 0;
}

.ligne-aliment .retirer {
  grid-row: 1 / span 2;
  grid-column: 3;
}

.ligne-aliment .chiffres {
  grid-column: 2;
  grid-row: 1;
  font-size: 11.5px;
  color: var(--encre-3);
  white-space: nowrap;
}

.ligne-aliment .reglages {
  grid-column: 1 / span 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ligne-aliment .champ.moment {
  flex: 1;
  min-width: 0;
  padding: 7px 8px;
  font-size: 12.5px;
}

.ligne-aliment + .ligne-aliment {
  border-top: 1px solid var(--trait-2);
}

.ligne-aliment .intitule {
  font-size: 14px;
  min-width: 0;
}

.ligne-aliment .champ.quantite {
  width: 76px;
  flex: none;
  padding: 7px 10px;
  font-size: 13px;
  text-align: center;
}

.ligne-aliment .retirer {
  font: inherit;
  font-size: 17px;
  line-height: 1;
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  border-radius: var(--r-rond);
  border: 1px solid var(--trait);
  background: transparent;
  color: var(--encre-3);
}

/* --- la parole du coach ----------------------------------------------------
   Sa dernière réponse, et rien de plus ancien. */

.reponse {
  background: var(--surface);
  border: 1px solid var(--trait-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 14.5px;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* --- l'équilibre : ce qui est contenu dans quoi ----------------------------
   Les saturés sont des lipides, les sucres des glucides. Alignés en colonne
   avec les macronutriments, ils se lisaient comme trois catégories de plus —
   d'où le retrait et la casse basse : « Lipides 21 g / dont saturés 4 g ». */

tr.sous > td {
  font-size: 12.5px;
  color: var(--encre-2);
  padding-top: 4px;
  padding-bottom: 9px;
}

tr.sous > td:first-child {
  padding-left: 30px;
}

/* Le trait qui séparait le parent de son enfant en faisait deux lignes
   indépendantes ; sans lui, la seconde appartient visiblement à la première. */
tr:has(+ tr.sous) > td {
  border-bottom: none;
  padding-bottom: 3px;
}

/* --- le détail : une seule boîte, pas six -----------------------------------
   Le bloc replié contenait quatre cartes, dont une contenant un tableau dans
   un cadre à défilement — des marges dans des marges, et plus rien pour
   respirer sur 390 px. À l'intérieur, les cartes redeviennent de simples
   sections séparées d'un filet. */

.detail-jour .carte {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.detail-jour > div > .carte + .carte {
  border-top: 1px solid var(--trait-2);
  padding-top: 18px;
  margin-top: 18px;
}

/* Le tableau tient dans l'écran : plus de largeur minimale, donc plus de
   défilement latéral, donc plus de cadre autour pour le contenir. */
.detail-jour .defilant {
  border: none;
  border-radius: 0;
  overflow-x: visible;
}

.detail-jour table {
  min-width: 0;
  font-size: 13px;
}

.detail-jour th,
.detail-jour td {
  padding: 8px 4px;
}

.detail-jour th:first-child,
.detail-jour td:first-child {
  padding-left: 0;
}

.detail-jour th.c,
.detail-jour td.c {
  text-align: right;
  white-space: nowrap;
}

.detail-jour thead th {
  background: transparent;
  padding-bottom: 6px;
}

/* La part d'énergie passe sous la quantité plutôt qu'en colonne : deux
   colonnes de pourcentages, c'était 130 px pour deux nombres à deux chiffres. */
.detail-jour td .part {
  font-size: 11px;
  color: var(--encre-3);
  font-family: var(--mono);
}

/* --- ce qui dure -----------------------------------------------------------
   Le mot d'alerte n'apparaît qu'au troisième jour d'affilée. Il porte la
   couleur du dépassement sur son flanc, et reste une carte ordinaire : ce
   n'est pas une panne, c'est une habitude à corriger. */

.ecarts {
  border-left: 3px solid var(--critique);
  margin-bottom: 12px;
}

.ecarts .ecart + .ecart {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--trait-2);
}

.ecarts .ecart .titre {
  font-size: 13.5px;
  font-weight: 650;
}