/* La feuille commune de Robotique — violet électrique, choisi par elle le 2026-08-16.
 *
 * POURQUOI ELLE EXISTE. Huit pages s'étaient accumulées en deux jours, chacune avec sa
 * copie du même CSS, et la dérive avait commencé : rayons entre 9 et 14 px, gris
 * différents d'une page à l'autre. Le même défaut que deux scripts recopiés — ça diverge
 * en silence.
 *
 * COMMENT ELLE S'APPLIQUE SANS RÉÉCRIRE LES PAGES. Toutes les pages nomment leurs couleurs
 * par les mêmes variables (--fond, --carte, --trait, --texte, --doux, --vif…). Cette
 * feuille est injectée par le serveur APRÈS le style propre de chaque page : à spécificité
 * égale, la dernière déclaration gagne, donc redéfinir :root ici re-thème tout d'un coup.
 * Les pages migreront vers les classes communes au fil de l'eau ; la palette, elle, est
 * déjà une.
 *
 * LA SIGNATURE : la couleur comme langage d'état. Chaque outil porte sa teinte, les
 * segments de progression (les huit traits de l'eau) sont le motif récurrent. */

/* Les deux voix typographiques, servies depuis chez nous (polices variables, une graisse
 * n'est qu'un axe). Space Grotesk parle pour les titres — géométrique, un peu machine sans
 * cosplay. JetBrains Mono parle pour LES DONNÉES : chiffres, étiquettes, horodatages. La
 * règle est simple et c'est elle qui fait le thème : ce que la machine mesure s'affiche en
 * mono, ce qui s'adresse à elle s'affiche en Grotesk, le corps reste système. */
@font-face{font-family:"Grotesk";src:url("/polices/space-grotesk.woff2") format("woff2");
  font-weight:300 700;font-display:swap}
@font-face{font-family:"MonoR";src:url("/polices/jetbrains-mono.woff2") format("woff2");
  font-weight:100 800;font-display:swap}

:root{
  --police-titre:"Grotesk",system-ui,sans-serif;
  --police-donnee:"MonoR",ui-monospace,monospace;
  --fond:#0b0a12;
  --carte:#141221;
  --carte2:#1a1730;
  --trait:#282148;
  --texte:#eae6f7;
  --doux:#9b92bd;
  --sourd:#5d5580;
  --vif:#a78bfa;
  --vif2:#c4b0ff;
  --lueur:rgba(167,139,250,.22);
  --ok:#7ee0a3;
  --mal:#f7768e;
  --tiede:#e5b56e;
  --rayon:14px;
  --nav-h:56px;
}

/* Le clair existe, mais il reste violet : l'identité ne s'inverse pas, elle s'éclaircit. */
@media(prefers-color-scheme:light){
  :root{
    --fond:#f4f2fb;
    --carte:#ffffff;
    --carte2:#f7f4ff;
    --trait:#e2dbf5;
    --texte:#221c33;
    --doux:#6d6390;
    --sourd:#a49ac4;
    --vif:#7c5cf0;
    --vif2:#5d3fd3;
    --lueur:rgba(124,92,240,.15);
  }
}

body{background:var(--fond);color:var(--texte);font-size:17px}

/* ------------------------------------------------------------------- la typographie */

h1,h2,h3{font-family:var(--police-titre);letter-spacing:.015em}
h1{font-size:1.55rem}
h2{font-size:1.15rem}

/* La voix des données : tout ce qui est mesuré, compté ou horodaté. */
.date,.section,.ti-nom,.ti-val,.l-q,.s-quand,.etiq,.depuis,.sous,
.jauge .val,.item .kcal,.chiffre .n,#total,#eauN,.fil,.groupe{
  font-family:var(--police-donnee);
}
.ti-val{font-size:1.3rem}
.navbas a{font-family:var(--police-donnee);letter-spacing:.03em}
.jauge .nom,.item .nom,.carte .t,.page .t,.o-t{font-family:var(--police-titre);font-weight:500}
button,input,select,textarea{font-family:inherit}

/* De la place pour la barre du bas, sur toutes les pages. `safe-area` : sur un téléphone
 * sans bouton, le bas de l'écran appartient au geste système. */
body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + .5rem)}

/* ------------------------------------------------------------ la barre de navigation */

.navbas{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;justify-content:space-around;align-items:stretch;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--trait);
}
.navbas a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;text-decoration:none;color:var(--sourd);font-size:.68rem;letter-spacing:.02em;
}
.navbas .nb-i{font-size:1.05rem;line-height:1}
.navbas a.nb-actif{color:var(--vif)}
.navbas a.nb-actif .nb-i{text-shadow:0 0 12px var(--lueur)}

/* Les barres d'écriture collantes (la conversation des repas) se posent AU-DESSUS de la
 * navigation, pas dessous. */
.barre{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)) !important}

/* ------------------------------------------------------------------ composants communs */

.tuile{
  background:var(--carte);border:1px solid var(--trait);border-radius:16px;
  padding:.7rem .8rem;
}
.tuile .ti-nom{font-size:.7rem;color:var(--doux)}
.tuile .ti-val{font-size:1.15rem;font-weight:600;margin:.1rem 0}
.tuile .ti-sous{font-size:.7rem;color:var(--doux)}

/* Le motif signature : une jauge en segments. */
.segments{display:flex;gap:3px}
.segments span{flex:1;height:4px;border-radius:2px;background:var(--trait)}
.segments span.plein{background:var(--vif);box-shadow:0 0 8px var(--lueur)}

.carte-vive{
  background:linear-gradient(135deg, color-mix(in srgb, var(--vif) 14%, var(--carte)), var(--carte));
  border:1px solid color-mix(in srgb, var(--vif) 35%, var(--trait));
  border-radius:16px;padding:.85rem .95rem;
}

.pastille{
  width:30px;height:30px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:15px;flex:none;
}