/* 3-produit.css — un produit à l'écran : son accueil, ses chantiers, et la navigation du bas.
 *
 * ── L'ORDRE COMPTE ─────────────────────────────────────────────────────────────────
 * Ce fichier est une TRANCHE de l'ancien app.css, découpé en neuf morceaux contigus. Le
 * chiffre en tête du nom est son rang de cascade, et ce n'est pas de la décoration : lus
 * dans l'ordre, les neuf fichiers valent exactement l'ancien, à l'octet près. Les intervertir
 * change ce qui l'emporte — et une cascade inversée ne se voit pas, elle se constate trois
 * jours plus tard sur un écran précis.
 *
 * Deux raisons de ne PAS regrouper par thème en réordonnant : les paires
 * `@media`/`@container` se redoublent (chacune doit rester APRÈS la @media qu'elle double),
 * et `container-type` définit l'unité de mesure de tout ce qu'il contient. Le découpage
 * contigu rend ces deux pièges impossibles au lieu de demander qu'on y pense.
 *
 * `tests/test_feuilles_css.py` vérifie que les quatre points de chargement listent bien ces
 * neuf fichiers, dans ce rang.
 */

/* — accueil d'un produit : la prochaine action, pas un second menu — */

.next { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }

.next a {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  min-height: var(--tap);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--lv, var(--line));
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}

.next div { flex: 1; min-width: 0; }
.next b { display: block; font: var(--w-fort) var(--t5)/var(--lh-ui) var(--font-body); }
.next small { color: var(--mist); font-size: var(--t2); text-transform: uppercase; letter-spacing: .06em; }
.next .chev { color: var(--mist); font-size: var(--t7); }

lane-pillar h3 {
  font-size: var(--t3);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mist);
  margin: var(--s5) 0 var(--s3);
}

/* Un titre de section qui porte une action : le titre à gauche, le bouton à droite, sur la
 * même ligne de base. Le bouton ne descend pas au niveau du contenu — une relecture porte sur
 * TOUTE la section, et un bouton posé dans le contenu ferait croire qu'il ne vise qu'une
 * ligne. */
.tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
}

/* Ce que le bouton de relecture porte : un nombre quand des propositions attendent, un rond
 * qui tourne pendant qu'un agent lit. Une classe à part et non `.spin`, qui impose 20 px et
 * ferait éclater un bouton de onze. L'animation, elle, est la même — une seconde définition
 * finirait par tourner à une autre vitesse. */
.compteur {
  margin-left: var(--s1);
  padding: 0 var(--s1);
  border-radius: var(--radius-sm);
  background: var(--accent-bg);
  color: var(--accent-ink);
  font-size: var(--t1);
  font-weight: var(--w-gras);
}

.compteur.tourne {
  display: inline-block;
  padding: 0;
  background: none;
  color: var(--warn);
  animation: spin 1.4s linear infinite;
}

/* Discret, et volontairement : c'est une proposition qu'on demande, pas une décision qu'on
 * prend. Un bouton plein à côté de chaque titre ferait de l'écran une salle de commande. */
.btn.ai {
  min-height: var(--tap-min);
  padding: 0 var(--s2);
  font-size: var(--t1);
  letter-spacing: .06em;
  /* `.btn` est un `inline-grid` : deux enfants y font DEUX LIGNES, et le compteur passait
   * sous le sigle — un bouton deux fois plus haut que le titre qu'il accompagne. En flex,
   * ils restent côte à côte. */
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* — chantiers — */

.work { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }

.work li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.work div { flex: 1; min-width: 0; }
.work b { display: block; font-family: var(--font-head); }
.work small { color: var(--mist); font-size: var(--t3); }

.work button { padding-inline: var(--s4); }
.empty, .muted {
  color: var(--mist);
  background: var(--panel2);
  padding: var(--s4);
  border-radius: var(--radius);
  margin: 0;
}

.err {
  padding: var(--s4);
  border-radius: var(--radius);
  background: var(--error-bg);
  color: var(--error);
}

.err button {
  margin-top: var(--s3);
  padding-inline: var(--s4);
  background: var(--error);
  color: var(--panel);
}

/* — navigation, en bas, à portée de pouce — */

/* — barre d'onglets —
 *
 * Une vraie barre d'onglets mobile : une icône dessinée, un libellé dessous, et l'onglet
 * actif qui se voit sans qu'on le cherche. Les deux tentatives précédentes échouaient pour
 * la même raison — trop d'entrées serrées dans trop peu de place. Réglages est donc parti
 * dans l'en-tête : à sept entrées, une barre d'onglets devient une grille de mots coupés,
 * et le premier à sacrifier est celui qu'on ouvre le moins souvent.
 *
 * L'icône n'est pas décorative ici : à cette taille elle se reconnaît plus vite que le mot,
 * et elle rend la barre lisible même quand le libellé doit rétrécir. */

nav {
  order: 1;
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  /* Les cinq onglets se partagent la largeur à parts égales (`flex: 1` plus bas) : une barre
   * calée à gauche avec du vide à droite se lit comme une liste inachevée, pas comme une
   * navigation. Le défilement reste, en filet : si un jour un sixième onglet revenait, la
   * barre déborderait au lieu de rendre les libellés illisibles — et l'onglet actif est
   * ramené dans le champ de vision après chaque rendu. */
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding: var(--s2) var(--s1) calc(var(--s2) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  /* Translucide : le contenu qui passe dessous rappelle qu'il continue, au lieu de donner
   * l'impression que la page s'arrête là. */
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
}

nav::-webkit-scrollbar { display: none; }

nav a {
  /* Parts égales, et le droit de rétrécir : `min-width` empêcherait la distribution sur un
   * écran étroit et ferait réapparaître le défilement — donc l'espace vide à droite. Les
   * libellés tiennent (« Diffusion » est le plus long) et se coupent proprement sinon. */
  flex: 1 1 0;
  min-width: 0;
  scroll-snap-align: center;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--s0);
  padding: var(--s2) var(--s0);
  border-radius: var(--radius);
  color: var(--mist);
  text-decoration: none;
  transition: color .18s ease, background .18s ease;
}

nav a svg { width: 23px; height: 23px; }

nav a span {
  font: var(--w-moyen) var(--t1)/var(--lh-titre) var(--font-body);
  letter-spacing: -.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* L'onglet actif : couleur d'accent ET fond teinté. La couleur seule ne suffit pas en
 * plein soleil ou sur un écran de biais ; le fond porte l'information même quand la
 * nuance se perd. */
nav a.on {
  color: var(--accent-ink);
  background: var(--accent-bg);
}

nav a.on span { font-weight: var(--w-gras); }
nav a.on svg { stroke-width: 2.1; }

/* L'en-tête accueille désormais Réglages, en icône. */
header .icon {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  color: var(--mist);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

header .icon svg { width: 21px; height: 21px; }
header .icon.on { color: var(--accent-ink); background: var(--accent-bg); }

/* — le compte, tout à droite —
 * Des initiales dans un rond, et pas la photo Google. `/auth/me` la renvoie, et c'est le
 * réflexe — mais la politique de sécurité n'autorise les images que depuis lane
 * (`img-src 'self' data:`) : une photo hébergée chez Google donnerait une vignette cassée,
 * et le symptôme ne ressemblerait pas à sa cause.
 *
 * Rond, là où Réglages et le thème sont des carrés adoucis. C'est la seule commande de la
 * barre qui désigne une PERSONNE et non une fonction ; lui donner la même forme qu'aux
 * autres en ferait un troisième réglage, et se déconnecter se chercherait. */
.avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: calc(var(--s1) * -1);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  font: var(--w-gras) var(--t2)/var(--lh-plat) var(--font-body);
  letter-spacing: .02em;
}

/* Le même rond, en grand, en tête de la feuille : c'est ce qui relie le bouton qu'on vient
 * de toucher à l'écran qui s'ouvre. Sans lui, la feuille pourrait venir de n'importe où. */
.avatar.grand {
  width: 44px;
  height: 44px;
  margin: 0;
  font-size: var(--t5);
}

.compte-tete {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s4) 0 var(--s5);
}

.compte-tete b { display: block; font: var(--w-fort) var(--t5)/var(--lh-ui) var(--font-head); }
.compte-tete small { display: block; color: var(--mist); font-size: var(--t3); }