/* =====================================================================
Suivi santé — Charte graphique v2 (mobile-first)
À poser à la racine du projet et charger EN PREMIER, avant tout autre CSS.
Police : Inter (Google Fonts). Ajoute dans le :
Principe : les blocs = .card, les choix (Oui/Non, 1-5) = .segmented > .seg,
l'option choisie reçoit .is-active (fond teal). Aucune couleur en dur ailleurs.
===================================================================== */
:root {
/* --- Couleurs de marque --- */
--primary: #0F6E56; /* teal profond — en-têtes, actions, sélection */
--primary-hover: #0B5544; /* survol / pressé */
--progress: #1D9E75; /* progression, tendance positive */
--accent: #BA7517; /* ambre — objectif, mises en avant positives */
--alert: #D85A30; /* corail — réservé aux vraies alertes */
/* --- Surfaces & fond --- */
--bg: #F5F3EE; /* fond de page, chaud et clair */
--surface: #FFFFFF; /* cartes */
--tint-teal: #E1F5EE; /* fond de pastille / badge positif */
--tint-accent: #FAEEDA; /* fond de pastille ambre */
--track: #ECEAE3; /* fond de barre de progression, grille des graphes */
/* --- Texte --- */
--text: #1E2A2E; /* texte principal */
--text-muted: #6B7A7C; /* texte secondaire, libellés */
--text-faint: #A0ABAC; /* mentions discrètes, options inactives */
--on-primary: #FFFFFF; /* texte sur fond teal */
--on-header: #9FE1CB; /* texte discret sur l'en-tête teal */
/* --- Bordures --- */
--border: #E4E1D8;
/* --- Typographie --- */
--font: 'Inter', system-ui, -apple-system, sans-serif;
--fs-h1: 20px;
--fs-h2: 16px;
--fs-body: 16px;
--fs-sm: 13px;
--fs-xs: 11px;
--fs-metric: 40px; /* grand chiffre (poids, KPI héros) */
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 600;
/* --- Formes & espacements --- */
--radius-card: 16px;
--radius: 12px; /* boutons, champs, options segmentées */
--radius-pill: 20px;
--gap-sm: 8px;
--gap-md: 14px;
--gap-lg: 18px;
--pad-card: 16px;
/* --- Élévation (discrète, pour le relief mobile) --- */
--shadow-card: 0 1px 3px rgba(30, 42, 46, .06);
}
/* =====================================================================
Base
===================================================================== */
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: var(--fs-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* Conteneur central : colonne mobile, centrée sur grand écran */
.app {
max-width: 480px;
margin: 0 auto;
min-height: 100vh;
background: var(--bg);
}
.app__body {
padding: 16px;
display: flex;
flex-direction: column;
gap: var(--gap-md);
}
h1, h2, h3 { font-weight: var(--fw-medium); color: var(--text); margin: 0 0 .5rem; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); font-size: var(--fs-xs); }
/* =====================================================================
En-tête d'application (carte teal détachée)
===================================================================== */
.app-header {
background: var(--primary);
padding: var(--pad-card);
margin: var(--pad-card) var(--pad-card) 0;
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
display: flex;
align-items: center;
justify-content: space-between;
}
.app-header__day { color: var(--on-header); font-size: var(--fs-sm); }
.app-header__title { color: var(--on-primary); font-size: var(--fs-h1); font-weight: var(--fw-medium); margin-top: 2px; }
/* Bloc titre centré quand l'en-tête a 3 zones (retour / titre / action) */
.app-header__center { flex: 1; text-align: center; min-width: 0; }
/* Bouton rond dans l'en-tête (déconnexion, retour, etc.) */
.app-header__action {
width: 34px; height: 34px; border-radius: 50%;
background: var(--primary-hover);
color: var(--on-header);
display: flex; align-items: center; justify-content: center;
border: 0; cursor: pointer;
text-decoration: none; /* pour les */
flex-shrink: 0;
}
/* =====================================================================
Carte
===================================================================== */
.card {
background: var(--surface);
border-radius: var(--radius-card);
padding: var(--pad-card);
box-shadow: var(--shadow-card);
}
/* En-tête interne de carte : libellé à gauche, info/badge à droite */
.card__head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
}
/* Libellé de champ */
.field-label {
display: block;
font-size: var(--fs-sm);
color: var(--text-muted);
margin-bottom: 8px;
}
/* =====================================================================
Carte « héros » : le poids du jour mis en avant
===================================================================== */
.hero-value {
display: flex; align-items: baseline; gap: 8px;
}
.metric {
font-size: var(--fs-metric); font-weight: var(--fw-medium);
letter-spacing: -1px; color: var(--primary);
font-variant-numeric: tabular-nums lining-nums;
}
.metric-unit { font-size: 15px; color: var(--text-muted); }
/* Variation du jour (Δ) alignée à droite */
.delta { margin-left: auto; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.delta-down { color: var(--progress); } /* poids en baisse = positif */
.delta-up { color: var(--alert); }
/* =====================================================================
Contrôle segmenté (Oui/Non, échelles 1-5)
→ conteneur .segmented, options .seg, choix courant .seg.is-active
===================================================================== */
.segmented {
display: grid;
gap: 6px;
}
.segmented--2 { grid-template-columns: 1fr 1fr; }
.segmented--5 { grid-template-columns: repeat(5, 1fr); }
.seg {
text-align: center;
padding: 11px 0;
border-radius: var(--radius);
border: 0.5px solid var(--border);
background: transparent;
color: var(--text-faint);
font-family: inherit; font-size: 15px; font-weight: var(--fw-regular);
cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.seg:hover { background: var(--tint-teal); }
.seg.is-active {
background: var(--primary);
border-color: var(--primary);
color: var(--on-primary);
font-weight: var(--fw-medium);
}
/* =====================================================================
KPI compacts (cigarettes, pastilles…)
===================================================================== */
.kpi__label { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 6px; }
.kpi__value { font-size: 26px; font-weight: var(--fw-medium); color: var(--text); }
/* Grille 2 colonnes générique */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* =====================================================================
Badges / pastilles
===================================================================== */
.badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: var(--fs-xs); padding: 3px 9px; border-radius: var(--radius-pill);
}
.badge-positive { background: var(--tint-teal); color: var(--primary); }
.badge-accent { background: var(--tint-accent); color: var(--accent); }
/* =====================================================================
Boutons
===================================================================== */
.btn {
font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium);
padding: 10px 16px; border-radius: var(--radius); border: 0;
background: var(--primary); color: var(--on-primary); cursor: pointer;
transition: background .15s ease;
}
.btn:hover { background: var(--primary-hover); }
.btn:active { transform: scale(.98); }
.btn-ghost {
background: transparent; color: var(--primary);
border: 0.5px solid var(--border);
}
.btn-ghost:hover { background: var(--tint-teal); }
/* Action principale pleine largeur (Enregistrer la journée) */
.btn-block {
width: 100%;
padding: 14px 0;
font-size: var(--fs-body);
border-radius: 14px;
text-align: center;
}
/* =====================================================================
Champs de saisie
===================================================================== */
input, select, textarea {
font-family: inherit; font-size: var(--fs-body); color: var(--text);
background: var(--surface);
border: 0.5px solid var(--border); border-radius: var(--radius);
padding: 11px 12px; width: 100%;
}
input::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--primary);
box-shadow: 0 0 0 3px var(--tint-teal);
}
/* =====================================================================
Barre de progression (vers l'objectif 100 kg)
===================================================================== */
.progress { height: 8px; background: var(--track); border-radius: var(--radius-pill); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--progress); border-radius: var(--radius-pill); }
/* =====================================================================
Page centrée (login)
===================================================================== */
.page-center {
display: flex; align-items: center; justify-content: center;
min-height: 100vh; min-height: 100dvh;
padding: var(--gap-lg);
}
.login-card { width: 100%; max-width: 360px; }
.login-card h1 { text-align: center; margin-bottom: var(--gap-lg); }
/* =====================================================================
Champ avec espacement vertical (formulaires)
===================================================================== */
.field { margin-bottom: var(--gap-md); }
.field:last-child { margin-bottom: 0; }
/* =====================================================================
Toasts de feedback (erreur / succès)
===================================================================== */
.toast {
font-size: var(--fs-sm);
padding: 10px 12px;
border-radius: var(--radius-card);
text-align: center;
box-shadow: var(--shadow-card);
}
.toast-error { background: color-mix(in srgb, var(--alert) 10%, var(--surface)); color: var(--alert); }
.toast-success { background: var(--tint-teal); color: var(--primary); }
/* =====================================================================
Élément visuellement caché mais accessible au DOM / formulaire
===================================================================== */
.visually-hidden {
position: absolute; opacity: 0; pointer-events: none;
width: 0; height: 0; overflow: hidden;
}
/* =====================================================================
KPI dashboard (grille de cartes métriques)
===================================================================== */
.kpi-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--gap-md);
}
.kpi { text-align: center; padding: var(--gap-md); }
.kpi-sub { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 2px; }
.kpi-positive { color: var(--progress); }
.kpi-negative { color: var(--alert); }
.kpi-neutral { color: var(--text); }
/* =====================================================================
Barre de progression avec en-tête (départ → objectif)
===================================================================== */
.progress-header {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: var(--gap-sm);
}
.progress-header span { font-size: var(--fs-sm); color: var(--text-muted); }
.progress-pct { font-weight: var(--fw-medium); color: var(--primary); }
/* =====================================================================
Conteneur de graphique (aspect-ratio responsive)
===================================================================== */
.chart-wrap {
position: relative; width: 100%;
aspect-ratio: 16 / 10;
}
.chart-wrap canvas {
position: absolute; inset: 0;
width: 100% !important; height: 100% !important;
}
/* =====================================================================
Carte de projection (date objectif)
===================================================================== */
.projection-date {
font-size: var(--fs-h1); font-weight: var(--fw-medium);
color: var(--accent); margin: var(--gap-sm) 0;
}
.projection-rythme { font-size: var(--fs-sm); color: var(--text-muted); }
/* =====================================================================
Liste de tags / badges en flex-wrap
===================================================================== */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
/* =====================================================================
États : chargement, contenu vide
===================================================================== */
.loading { text-align: center; padding: 60px 0; color: var(--text-muted); }
.empty { text-align: center; padding: 40px var(--gap-lg); color: var(--text-muted); }
.empty .btn { margin-top: var(--gap-md); }
/* =====================================================================
Utilitaires d'espacement et texte
===================================================================== */
.mt-sm { margin-top: var(--gap-sm); }
.mt-md { margin-top: var(--gap-md); }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }