/* ================================================================= app.css — MaSanté, design system de l'application (piste B "Ardoise & sauge") Extrait du prototype web/masante-bootstrap-prototype.html (26/09/2026). Toute évolution du design se fait ici ; le prototype sert de maquette. ================================================================= */ /* ================================================================= DESIGN SYSTEM — piste B "Ardoise & sauge" Toutes les couleurs passent par ces variables. Trois thèmes au choix de l'utilisateur (Profil > Apparence), portés par l'attribut data-theme de : ardoise (défaut), clair, colore. ================================================================= */ :root, [data-theme="ardoise"] { --app-bg: #edf2f1; --app-surface: #ffffff; --app-ink: #1f3a3d; /* texte principal */ --app-muted: #536b69; /* texte secondaire (contraste >= 4.5:1) */ --app-accent: #2f6f6a; /* boutons, liens, courbes */ --app-accent-hover: #245a56; --app-accent-soft: #dcebe8; --app-accent-rgb: 47, 111, 106; --app-border: #d8e2e0; --app-line: #e6eceb; --app-ok: #2f6f6a; --app-warn: #9a4f12; --app-warn-soft: #fbf0e6; --app-danger: #b3261e; --app-danger-soft: #fdecea; --app-hero-bg: #1f3a3d; /* en-tête et bandeau d'accueil */ --app-hero-text: #ffffff; --app-hero-muted: #b9cbc8; --app-hero-tile: rgba(255, 255, 255, .08); --app-avatar-bg: #3c5a5d; --app-chart-2: #7fa9a4; /* 2e courbe (diastolique) */ --app-radius: 16px; --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --font-title: "Space Grotesk", Inter, system-ui, sans-serif; } /* Thème clair : pas de bandeau sombre, tons sauge pâles */ [data-theme="clair"] { --app-bg: #f5f8f7; --app-ink: #1f3a3d; --app-muted: #536b69; --app-accent: #2f6f6a; --app-accent-hover: #245a56; --app-accent-soft: #e1eeeb; --app-accent-rgb: 47, 111, 106; --app-border: #dfe7e5; --app-line: #ebf0ef; --app-hero-bg: #dcebe8; --app-hero-text: #1f3a3d; --app-hero-muted: #4e6664; --app-hero-tile: rgba(255, 255, 255, .65); --app-avatar-bg: #2f6f6a; --app-chart-2: #8db5b0; } /* Thème coloré : bleu canard plus saturé, fonds teintés */ [data-theme="colore"] { --app-bg: #e4f1f2; --app-ink: #123c44; --app-muted: #4a6a70; --app-accent: #0b7285; --app-accent-hover: #095c6b; --app-accent-soft: #cfeaee; --app-accent-rgb: 11, 114, 133; --app-border: #c9e0e3; --app-line: #dcecee; --app-warn: #a34a0c; --app-hero-bg: #0b5c6b; --app-hero-text: #ffffff; --app-hero-muted: #bfe3e8; --app-hero-tile: rgba(255, 255, 255, .12); --app-avatar-bg: #e8a33d; --app-chart-2: #e8a33d; } /* ---------- Raccord Bootstrap -> variables du thème ---------- */ :root, [data-theme] { --bs-body-font-family: var(--font-body); --bs-body-color: var(--app-ink); --bs-body-bg: var(--app-bg); --bs-primary: var(--app-accent); --bs-primary-rgb: var(--app-accent-rgb); --bs-link-color: var(--app-accent); --bs-link-color-rgb: var(--app-accent-rgb); --bs-link-hover-color: var(--app-accent-hover); --bs-secondary-color: var(--app-muted); --bs-border-color: var(--app-border); --bs-primary-bg-subtle: var(--app-accent-soft); --bs-focus-ring-color: rgba(var(--app-accent-rgb), .25); } .btn-primary { --bs-btn-bg: var(--app-accent); --bs-btn-border-color: var(--app-accent); --bs-btn-hover-bg: var(--app-accent-hover); --bs-btn-hover-border-color: var(--app-accent-hover); --bs-btn-active-bg: var(--app-accent-hover); --bs-btn-active-border-color: var(--app-accent-hover); --bs-btn-disabled-bg: var(--app-accent); --bs-btn-disabled-border-color: var(--app-accent); --bs-btn-focus-shadow-rgb: var(--app-accent-rgb); } .btn-outline-primary { --bs-btn-color: var(--app-accent); --bs-btn-border-color: var(--app-accent); --bs-btn-hover-bg: var(--app-accent); --bs-btn-hover-border-color: var(--app-accent); --bs-btn-active-bg: var(--app-accent); --bs-btn-active-border-color: var(--app-accent); --bs-btn-focus-shadow-rgb: var(--app-accent-rgb); } .btn-outline-secondary { --bs-btn-color: var(--app-ink); --bs-btn-border-color: var(--app-border); --bs-btn-hover-bg: var(--app-accent-soft); --bs-btn-hover-color: var(--app-ink); --bs-btn-hover-border-color: var(--app-border); } .btn { border-radius: 12px; font-weight: 600; } .btn-sm { border-radius: 10px; } .nav-pills { --bs-nav-pills-link-active-bg: var(--app-accent); --bs-nav-link-color: var(--app-muted); --bs-nav-link-hover-color: var(--app-ink); --bs-nav-pills-border-radius: 10px; } .nav-pills .nav-link { font-weight: 600; font-size: .9rem; } .progress { --bs-progress-bg: var(--app-accent-soft); --bs-progress-bar-bg: var(--app-accent); --bs-progress-border-radius: 99px; } .form-control, .form-select { border-color: var(--app-border); border-radius: 10px; } .form-control:focus, .form-select:focus { border-color: var(--app-accent); box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb), .2); } .form-check-input:checked { background-color: var(--app-accent); border-color: var(--app-accent); } .form-check-input:focus { border-color: var(--app-accent); box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb), .2); } .accordion { --bs-accordion-border-color: var(--app-border); --bs-accordion-active-bg: var(--app-accent-soft); --bs-accordion-active-color: var(--app-ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb), .2); --bs-accordion-border-radius: var(--app-radius); --bs-accordion-inner-border-radius: calc(var(--app-radius) - 1px); } .accordion-button { font-weight: 600; } .list-group { --bs-list-group-border-color: var(--app-line); --bs-list-group-action-hover-bg: var(--app-accent-soft); --bs-list-group-border-radius: var(--app-radius); } .alert-warning { --bs-alert-bg: var(--app-warn-soft); --bs-alert-color: var(--app-warn); --bs-alert-border-color: transparent; border-radius: 12px; } .modal-content { border: 0; border-radius: 20px; } .modal-title { font-family: var(--font-title); font-weight: 700; } .text-primary { color: var(--app-accent) !important; } .bg-light { background-color: var(--app-bg) !important; } .border-bottom { border-color: var(--app-line) !important; } /* ---------- Base ---------- */ html, body { min-height: 100%; } body { background: var(--app-bg); color: var(--app-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } h1, .h1, .h4, .h5, .h3 { font-family: var(--font-title); font-weight: 700; letter-spacing: -.01em; } .app-shell { min-height: 100vh; } .app-content { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } /* iPhone à l'horizontale : rien sous l'encoche */ body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } .screen { display: none; } .screen.active { display: block; } .screen h1:focus { outline: none; } .app-card { border: 1px solid var(--app-border); border-radius: var(--app-radius); background: var(--app-surface); } button.app-card { color: inherit; } button.app-card:hover { border-color: var(--app-accent); } /* Intertitre en petites capitales (hors ou dans une carte) */ .section-title { font-family: var(--font-body); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--app-muted); } .section-title i { display: none; } .sec-head { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 2px 8px; } .sec-head .btn-link { font-size: .85rem; padding: 0; font-weight: 600; text-decoration: none; } .small-muted { font-size: .82rem; color: var(--app-muted); } /* ---------- En-tête ---------- */ .app-header { background: var(--app-hero-bg); color: var(--app-hero-text); position: sticky; top: 0; z-index: 1000; } .app-header .small-muted { color: var(--app-hero-muted); } .brand-name { font-family: var(--font-title); font-weight: 700; font-size: 1.05rem; } .brand-mark { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--app-accent-soft); color: var(--app-accent); font-size: 1.1rem; flex: 0 0 auto; } .app-header .brand-mark { background: var(--app-hero-tile); color: var(--app-hero-text); } .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--app-avatar-bg); color: #fff; font-weight: 700; font-size: .85rem; border: 0; } /* ---------- Bandeau d'accueil (prolonge l'en-tête) ---------- */ .hero { background: var(--app-hero-bg); color: var(--app-hero-text); margin: -1rem calc(-.5 * var(--bs-gutter-x)) 4px; /* pleine largeur : annule les marges du container */ padding: 4px calc(.5 * var(--bs-gutter-x)) 24px; border-radius: 0 0 28px 28px; } .hero h1 { font-size: 1.6rem; margin: 0 0 14px; } .hero-stats { display: flex; gap: 10px; } .hero-stat { flex: 1; background: var(--app-hero-tile); border: 0; color: inherit; text-align: left; border-radius: 14px; padding: 10px 12px; } .hero-stat b { font-family: var(--font-title); font-size: 1.35rem; display: block; line-height: 1.15; font-variant-numeric: tabular-nums; } .hero-stat span { font-size: .72rem; color: var(--app-hero-muted); white-space: nowrap; } /* ---------- Chiffres ---------- */ .metric-value { font-family: var(--font-title); font-size: 1.8rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; } .metric-unit { font-family: var(--font-body); font-size: .8rem; color: var(--app-muted); font-weight: 400; } .metric-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--app-muted); } .metric-label i { display: none; } /* Chiffres en Space Grotesk ; jamais sur une icône (sinon la police Font Awesome est remplacée) */ .num, :is(.fs-2, .fs-3, .fs-4, .fs-5):not(i) { font-family: var(--font-title); font-variant-numeric: tabular-nums; } /* ---------- Médicaments ---------- */ .med-row { border-bottom: 1px solid var(--app-line); padding: .8rem 0; } .med-row:last-child { border-bottom: 0; } .med-time { font-family: var(--font-title); font-weight: 600; width: 3.2rem; } .med-name-btn { border: 0; background: none; padding: 0; text-align: left; color: inherit; } .med-name-btn:hover strong { text-decoration: underline; } .min-w-0 { min-width: 0; } .med-state { font-size: .82rem; font-weight: 600; white-space: nowrap; } .med-state.is-taken { color: var(--app-ok); } .med-state.is-late { color: var(--app-warn); } .med-state.is-missed { color: var(--app-danger); } .med-state.is-todo { color: var(--app-muted); } /* Cercle à cocher d'une prise : zone tactile 44px, cercle 34px dessiné sur l'icône */ .med-check { flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; border-radius: 50%; } .med-check i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; border: 2px solid var(--app-border); background: var(--app-surface); color: transparent; transition: background-color .15s, border-color .15s, color .15s, transform .1s; } .med-check:hover i { border-color: var(--app-accent); color: rgba(var(--app-accent-rgb), .35); } .med-check:active i { transform: scale(.9); } .med-check:focus-visible { outline: 3px solid rgba(var(--app-accent-rgb), .4); outline-offset: 0; } .med-check:disabled { cursor: progress; opacity: .6; } .med-check.is-retard i { border-color: var(--app-warn); background: var(--app-warn-soft); } .med-check.is-oublie i { border-color: var(--app-danger); background: var(--app-danger-soft); } .med-check.is-taken i { border-color: var(--app-ok); background: var(--app-ok); color: #fff; } .med-check.is-taken:hover i { color: #fff; } .stock-low { color: var(--app-warn); } /* Bloc « Hier, non validé » (accueil et Médicaments) */ .med-hier { border-bottom: 1px solid var(--app-line); margin-bottom: .25rem; } .med-hier-titre { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--app-danger); padding-top: .6rem; } .med-hier .med-row:last-child { border-bottom: 0; } /* Calendrier des prises sur 30 jours (fiche médicament) : une case par jour, lundi -> dimanche */ .cal-prises { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 360px; } .cal-entete { text-align: center; font-size: .72rem; font-weight: 700; color: var(--app-muted); } .cal-jour { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--app-line); color: var(--app-muted); } .cal-jour.is-hors { background: none; } .cal-jour.is-ok { background: var(--app-ok); color: #fff; } .cal-jour.is-partiel { background: var(--app-warn-soft); color: var(--app-warn); box-shadow: inset 0 0 0 2px var(--app-warn); } .cal-jour.is-oubli { background: var(--app-danger-soft); color: var(--app-danger); box-shadow: inset 0 0 0 2px var(--app-danger); } .cal-jour.is-attente { background: var(--app-surface); box-shadow: inset 0 0 0 2px var(--app-border); } .cal-jour.is-aujourdhui { outline: 2px solid var(--app-ink); outline-offset: 2px; } .cal-legende { display: flex; flex-wrap: wrap; gap: .4rem 1rem; } .cal-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; background: var(--app-line); } .cal-legende i.is-ok { background: var(--app-ok); } .cal-legende i.is-partiel { background: var(--app-warn-soft); box-shadow: inset 0 0 0 2px var(--app-warn); } .cal-legende i.is-oubli { background: var(--app-danger-soft); box-shadow: inset 0 0 0 2px var(--app-danger); } /* ---------- Activité ---------- */ .activity-choice { border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-ink); border-radius: var(--app-radius); min-height: 124px; transition: border-color .15s ease, background-color .15s ease; } .activity-choice:hover, .activity-choice:focus-visible { border-color: var(--app-accent); background: var(--app-accent-soft); } .activity-choice i { font-size: 1.9rem; color: var(--app-accent); } /* Semaine d'activité (accueil) : barres des minutes par jour, pointillés = objectif du jour */ .semaine-barres { position: relative; height: 64px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; border-bottom: 1px solid var(--app-border); } .semaine-col { height: 100%; display: flex; align-items: flex-end; } .semaine-barre { width: 100%; border-radius: 4px 4px 0 0; background: rgba(var(--app-accent-rgb), .45); min-height: 3px; } .semaine-barre.is-atteint { background: var(--app-accent); } .semaine-barre.is-vide { background: var(--app-line); } .semaine-objectif { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--app-warn); opacity: .7; pointer-events: none; } .semaine-jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-size: .72rem; color: var(--app-muted); margin-top: 3px; } .semaine-jours .is-aujourdhui { color: var(--app-ink); font-weight: 700; } .ring { transform: rotate(-90deg); } .ring-bg { stroke: var(--app-accent-soft); } .ring-fg { stroke: var(--app-accent); } /* ---------- Navigation ---------- */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050; background: var(--app-surface); border-top: 1px solid var(--app-border); /* iPhone : on remonte les libellés au-dessus du trait d'accueil d'iOS (env() vaut 0 ailleurs ; nécessite viewport-fit=cover, cf. app_head.asp) */ padding: .45rem .25rem max(.35rem, calc(env(safe-area-inset-bottom, 0px) - 12px)); } .bottom-nav button, .bottom-nav a { position: relative; border: 0; background: transparent; color: var(--app-muted); font-size: .74rem; padding: .3rem .2rem; min-width: 60px; min-height: 48px; } .bottom-nav button i, .bottom-nav a i { display: block; font-size: 1.1rem; margin-bottom: .2rem; } .bottom-nav button.active, .bottom-nav a.active { color: var(--app-ink); font-weight: 700; } .bottom-nav button.active i, .bottom-nav a.active i { color: var(--app-accent); } .bottom-nav button.active::before, .bottom-nav a.active::before { content: ""; position: absolute; top: -8px; left: 50%; width: 28px; height: 3px; margin-left: -14px; border-radius: 3px; background: var(--app-accent); } .progress-thin { height: 7px; } /* ---------- Graphiques ---------- */ .chart-wrap { position: relative; padding-left: 38px; } .chart-box { height: 180px; position: relative; border-left: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border); } .chart-svg { width: 100%; height: 100%; display: block; } .chart-grid { stroke: var(--app-line); } .chart-y { position: absolute; left: 0; width: 34px; text-align: right; font-size: .72rem; color: var(--app-muted); transform: translateY(-50%); } .chart-x { font-size: .75rem; color: var(--app-muted); } .legend-swatch { display: inline-block; width: 18px; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: .3rem; } .legend-swatch.dashed { border-top-style: dashed; } /* ---------- Carte / GPS (fond simulé) ---------- */ .gps-map { height: 340px; position: relative; overflow: hidden; border-radius: var(--app-radius); background: linear-gradient(28deg, transparent 46%, rgba(255,255,255,.9) 47%, rgba(255,255,255,.9) 50%, transparent 51%), linear-gradient(-18deg, transparent 45%, rgba(255,255,255,.9) 46%, rgba(255,255,255,.9) 49%, transparent 50%), linear-gradient(90deg, transparent 24%, #d8e5d7 25%, #d8e5d7 26%, transparent 27%), linear-gradient(15deg, #dbe9d8, #edf2df 55%, #d8e6dc); } .gps-map::before { content: ""; position: absolute; inset: -20%; background: repeating-linear-gradient(72deg, transparent 0 42px, rgba(255,255,255,.9) 43px 45px, transparent 46px 90px), repeating-linear-gradient(-8deg, transparent 0 68px, rgba(255,255,255,.85) 69px 72px, transparent 73px 130px); transform: rotate(-4deg); opacity: .9; } .route { position: absolute; inset: 0; width: 100%; height: 100%; } .route-line { stroke: var(--app-accent); } .route-start { fill: #fff; stroke: var(--app-accent); } .route-pos { fill: var(--app-ink); stroke: #fff; } .gps-status-bar { position: absolute; top: .75rem; left: .75rem; right: .75rem; z-index: 2; display: flex; justify-content: space-between; gap: .5rem; } .gps-status-bar .badge { font-size: .8rem; font-weight: 600; padding: .45rem .6rem; } .gps-stats { margin-top: -36px; position: relative; z-index: 2; } .big-timer { font-family: var(--font-title); font-size: 3.2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .gps-value { font-variant-numeric: tabular-nums; } .btn-gps { min-height: 56px; font-size: 1.1rem; } /* ---------- Cartes Leaflet (activité) ---------- */ .carte { height: 240px; position: relative; isolation: isolate; /* garde les calques Leaflet sous la navigation */ border-radius: var(--app-radius); overflow: hidden; border: 1px solid var(--app-border); background: var(--app-accent-soft); } .carte-live { height: 42vh; min-height: 220px; max-height: 420px; } .carte .leaflet-control-attribution { font-size: .65rem; } .gps-etat { font-size: .8rem; font-weight: 600; } .gps-etat.is-ok { color: var(--app-ok); } .gps-etat.is-ko { color: var(--app-warn); } .badge-autopause { background: var(--app-warn-soft); color: var(--app-warn); font-weight: 600; } /* Pendant une activité : pas de navigation (évite de quitter la page par erreur) */ body.seance-active .bottom-nav { display: none; } body.seance-active .app-content { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); } /* ---------- Connexion ---------- */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--app-hero-bg); } .login-card { max-width: 440px; width: 100%; } .logo-heart { width: 70px; height: 70px; border-radius: 20px; background: var(--app-accent-soft); color: var(--app-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 1.9rem; } /* ---------- Choix du thème (profil) ---------- */ .theme-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .theme-choice label { border: 2px solid var(--app-border); border-radius: 14px; padding: 8px; cursor: pointer; text-align: center; font-size: .85rem; font-weight: 600; } .theme-choice input:checked + label { border-color: var(--app-accent); background: var(--app-accent-soft); } .theme-choice input:focus-visible + label { outline: 3px solid rgba(var(--app-accent-rgb), .4); outline-offset: 2px; } .theme-swatch { display: flex; height: 34px; border-radius: 8px; overflow: hidden; margin-bottom: 6px; } .theme-swatch span { flex: 1; } .toast-container { z-index: 2000; } .list-group-item-action { min-height: 48px; } /* ---------- Écran large : navigation en haut ---------- */ @media (min-width: 768px) { .app-content { padding-bottom: 32px; } .app-header { position: static; } .bottom-nav { position: sticky; top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--app-border); display: flex; justify-content: center; } .bottom-nav .nav-inner { max-width: 760px; width: 100%; } .bottom-nav button, .bottom-nav a { font-size: .85rem; } .bottom-nav button.active::before, .bottom-nav a.active::before { top: auto; bottom: -7px; } .app-content .container { max-width: 860px; } .hero { margin: 0 0 8px; padding: 20px 22px 22px; border-radius: var(--app-radius); } } /* ---------- Ajouts propres à l'application ASP ---------- */ .bottom-nav a { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; } a.avatar { color: #fff; } .app-header a:hover .brand-name { text-decoration: underline; } /* Pages sans navigation (connexion, invitation, mot de passe) */ .auth-texte { font-size: .9rem; color: var(--app-muted); } .auth-card .form-control-lg { font-size: 1rem; }