/* =====================================================================
app.css — § 7 Accessibilité : contraintes NON NÉGOCIABLES.
=====================================================================
Les valeurs planchers du § 7 sont exprimées en rem pour respecter
l'agrandissement de police du système Android (§ 7 : « unités
relatives, pas de px figés sur les conteneurs »). Correspondance à la
taille de police par défaut du navigateur (16 px) :
22 px -> 1.375rem corps de texte (plancher)
26 px -> 1.625rem libellés de boutons (plancher, gras)
44 px -> 2.75rem moment de l'injection (plancher)
90 px -> 5.625rem dose affichée (plancher)
72 px -> 4.5rem hauteur de bouton (plancher)
20 px -> 1.25rem espacement entre boutons (plancher)
40 px -> 2.5rem espace au-dessus du bouton Toujeo (plancher)
Aucune règle de ce fichier ne doit réduire ces valeurs. Les clamp()
ne servent qu'à AGRANDIR sur les grands écrans : la borne basse de
chaque clamp est le plancher du § 7.
Contrastes : toutes les paires couleur/fond utilisées ici ont été
vérifiées à 7:1 minimum (§ 7), au-delà de WCAG AA.
===================================================================== */
:root {
/* Palette. Chaque couleur de fond « pleine » est associée à du blanc,
et vérifiée >= 7:1 :
rouge #A5121A / blanc = 7.77:1
rouge foncé #7A0C12 / blanc = 11.12:1
vert #145A32 / blanc = 8.27:1
orange #8A3D06 / blanc = 7.63:1
bleu Toujeo #12386E / blanc = 11.56:1
ardoise #263140 / blanc = 13.16:1
encre #14161A / blanc = 18.11:1 */
--encre: #14161A;
--fond: #FFFFFF;
--fond-doux: #F1F3F6;
--trait: #3A4553;
--trait-clair: #C4CBD4;
--rouge: #A5121A;
--rouge-fonce: #7A0C12;
--vert: #145A32;
--orange: #8A3D06;
--bleu-toujeo: #12386E;
--ardoise: #263140;
--rouge-fond-clair: #FFF1F0;
--rouge-texte: #8C0F16;
--vert-fond-clair: #EFFAF2;
--vert-texte: #0F4A2A;
--orange-fond-clair: #FFF6EC;
--orange-texte: #7A3505;
--bleu-fond-clair: #EDF3FB;
--bleu-texte: #0E2F5C;
/* Planchers du § 7 */
--t-corps: 1.375rem;
--t-bouton: 1.625rem;
--t-moment: clamp(2.75rem, 9vw, 3.4rem);
--t-dose: clamp(5.625rem, 21vw, 8rem);
--h-bouton: 4.5rem;
--espace-boutons: 1.25rem;
--espace-toujeo: 2.5rem;
--rayon: 14px;
--bordure: 3px;
/* Chrome Android peut forcer un thème sombre et dégrader les contrastes
vérifiés ci-dessus : on refuse explicitement l'inversion automatique. */
color-scheme: light only;
}
* { box-sizing: border-box; }
html {
/* Pas de font-size figée ici : la taille de police du système Android
doit continuer de s'appliquer (§ 7). */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--fond);
color: var(--encre);
/* Police sans-serif, sans fantaisie (§ 7). */
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-size: var(--t-corps);
line-height: 1.35;
/* Android : pas de rebond élastique, pas de surlignage bleu au toucher,
pas de zoom au double-tap (le retour visuel est géré par :active). */
overscroll-behavior: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* Pas de texte sélectionnable dans les commandes : un appui maintenu par
tremblement ne doit pas ouvrir la poignée de sélection Android. */
button, .bouton, .entete { -webkit-user-select: none; user-select: none; }
/* ---------------------------------------------------------------------
Ossature d'écran
--------------------------------------------------------------------- */
/* Hauteur EXACTE de la fenêtre, et non min-height : c'est ce qui garantit
que le bandeau supérieur — donc le bouton Retour — reste visible en
permanence (§ 7), y compris sur un écran court où le contenu doit
défiler. Avec min-height, la page entière défilait et l'en-tête
disparaissait vers le haut. Le défilement, lorsqu'il est nécessaire,
a lieu à l'intérieur de .ecran. */
#app {
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh; /* évite le saut lié à la barre d'URL */
overflow: hidden;
padding: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* Bandeau supérieur : le bouton Retour est TOUJOURS au même endroit,
en haut à gauche, sur tous les écrans (§ 7). Sur l'accueil il est
masqué mais conserve sa place, pour que rien ne se déplace. */
.entete {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
border-bottom: 2px solid var(--trait-clair);
min-height: 3.75rem;
flex: 0 0 auto;
}
.entete-titre {
font-size: 1.25rem;
font-weight: 700;
color: var(--trait);
flex: 1;
text-align: center;
padding-right: 3.5rem; /* compense la largeur du bouton Retour */
}
.bouton-retour {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 3rem;
padding: 0.4rem 0.8rem;
font: inherit;
font-size: 1.25rem;
font-weight: 700;
color: var(--encre);
background: var(--fond-doux);
border: 2px solid var(--trait);
border-radius: 10px;
}
.bouton-retour:active { background: var(--trait); color: #fff; }
.bouton-retour[hidden] { visibility: hidden; display: inline-flex; }
.ecran {
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding: 0.75rem 1rem 1.25rem;
/* 20 px : plancher d'espacement du § 7. Sur l'écran de saisie, le dernier
élément du corps (pavé numérique) et le premier du pied (VALIDER) sont
deux boutons adjacents ; l'écart doit donc tenir le plancher. */
gap: var(--espace-boutons);
/* Le parcours principal est conçu pour tenir sans défilement (§ 7).
`auto` est une soupape : si la patiente a réglé une très grande
police système, il vaut mieux pouvoir faire défiler que de tronquer
une dose. */
overflow-y: auto;
}
/* justify-content: flex-start, et surtout PAS center.
Un conteneur centré qui déborde répartit le débordement en haut ET en
bas, et le haut devient alors inatteignable au défilement : la dose et
le bandeau de zone pourraient être rognés sans que la patiente puisse
les faire réapparaître. Avec flex-start, le contenu commence toujours
en haut ; ce sont les éléments du bas qui passent sous la ligne de
flottaison, jamais la dose (NEVER-DO 4).
Effet secondaire utile : les éléments occupent la même position d'un
écran à l'autre, ce qui aide à la mémorisation des gestes. */
/* 14 px entre les blocs du corps : ce sont des blocs de contenu, pas des
boutons. Le plancher de 20 px du § 7 vise l'espacement entre deux zones
tactiles, et il est tenu partout où deux boutons se suivent. */
.ecran-corps { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.875rem; }
.ecran-pied { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--espace-boutons); }
/* Le plancher de 20 px vaut pour toute pile de boutons, y compris côté
aidant : rien ne garantit que l'aidant n'a pas lui aussi la main qui
tremble. Ces écrans peuvent défiler, la place n'y est pas contrainte. */
.pile { display: flex; flex-direction: column; gap: var(--espace-boutons); }
.pile-serree { display: flex; flex-direction: column; gap: var(--espace-boutons); }
/* ---------------------------------------------------------------------
Boutons — plancher 72 px de haut, 26 px de libellé, 20 px d'écart
--------------------------------------------------------------------- */
.bouton {
display: flex;
align-items: center;
justify-content: center;
gap: 0.9rem;
width: 100%;
min-height: var(--h-bouton);
padding: 0.9rem 1rem;
font: inherit;
font-size: var(--t-bouton);
font-weight: 700;
text-align: center;
text-decoration: none;
border: var(--bordure) solid var(--trait);
border-radius: var(--rayon);
background: var(--fond);
color: var(--encre);
cursor: pointer;
}
/* Retour visuel immédiat à l'appui (§ 7). Pas de transition d'opacité
ni d'animation : un changement de couleur franc. */
.bouton:active { background: var(--trait); color: #fff; border-color: var(--trait); }
.bouton:active .ic { color: #fff; }
.bouton-principal { background: var(--vert); border-color: var(--vert); color: #fff; }
.bouton-principal:active { background: #0C3D21; border-color: #0C3D21; }
.bouton-principal .ic { color: #fff; }
.bouton-danger { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.bouton-danger:active { background: var(--rouge-fonce); border-color: var(--rouge-fonce); }
.bouton-danger .ic { color: #fff; }
.bouton-secondaire { background: var(--fond-doux); border-color: var(--trait); color: var(--encre); }
/* Le bouton Toujeo : couleur ET pictogramme différents des boutons de
repas (§ 5, NEVER-DO 9). */
.bouton-toujeo { background: var(--bleu-toujeo); border-color: var(--bleu-toujeo); color: #fff; }
.bouton-toujeo:active { background: #0A2247; border-color: #0A2247; }
.bouton-toujeo .ic { color: #fff; }
.bouton-appel { background: var(--ardoise); border-color: var(--ardoise); color: #fff; }
.bouton-appel:active { background: #121A24; border-color: #121A24; }
.bouton-appel .ic { color: #fff; }
/* .bouton-urgence retiré le 07/08/2026 avec le bouton d'appel du 15. */
.bouton-large { flex-direction: column; gap: 0.25rem; }
.bouton-sous-libelle { font-size: var(--t-corps); font-weight: 600; opacity: 1; }
/* Boutons de repas de l'accueil : gros, empilés, occupant l'essentiel
de l'écran. Pictogramme soleil, couleur neutre — volontairement
éloignée du bleu du Toujeo. */
.bouton-repas {
flex: 1 1 0;
flex-direction: row;
gap: 1rem;
justify-content: flex-start;
padding-left: 1.25rem;
border-width: 4px;
border-color: var(--ardoise);
background: var(--fond);
text-align: left;
min-height: 5.25rem;
}
.bouton-repas .ic { color: var(--ardoise); flex: 0 0 auto; }
.bouton-repas-textes { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.bouton-repas .titre { font-size: var(--t-bouton); font-weight: 800; letter-spacing: 0.02em; }
.bouton-repas .sous { font-size: var(--t-corps); font-weight: 600; color: var(--trait); }
.bouton-repas:active .sous { color: #fff; }
/* Présélection visuelle du repas correspondant à l'heure : contour épais.
Doublée d'un texte « maintenant », car la seule épaisseur de trait ne
doit pas porter l'information (§ 7). */
.bouton-repas.preselectionne { border-width: 8px; }
.etiquette-maintenant {
align-self: flex-start;
margin-top: 0.2rem;
font-size: var(--t-corps);
font-weight: 800;
letter-spacing: 0;
background: var(--ardoise);
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 8px;
flex: 0 0 auto;
}
.bouton-repas:active .etiquette-maintenant { background: #fff; color: var(--ardoise); }
/* ---------------------------------------------------------------------
Séparation de l'accès Toujeo (§ 5) — contrainte de sécurité
Séparateur franc + au moins 40 px au-dessus du bouton, et jamais
adjacent au bouton SOIR : un bloc « Insuline lente » distinct s'insère
entre les deux.
--------------------------------------------------------------------- */
.zone-lente {
flex: 0 0 auto;
margin-top: var(--espace-toujeo);
padding-top: 1rem;
border-top: 5px solid var(--trait);
}
/* Casse mixte et pas d'interlettrage : en capitales espacées, cet intitulé
passait sur deux lignes et faisait déborder l'accueil de 21 px. La casse
mixte est aussi plus lisible, les mots y gardent leur silhouette. */
.zone-lente-intitule {
font-size: var(--t-corps);
font-weight: 800;
color: var(--bleu-texte);
margin: 0 0 0.6rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* ---------------------------------------------------------------------
Pictogrammes
--------------------------------------------------------------------- */
.ic { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; color: inherit; }
.ic-grand { width: 4.5rem; height: 4.5rem; }
.ic-xl { width: 6rem; height: 6rem; }
.ic-petit { width: 1.5rem; height: 1.5rem; }
/* ---------------------------------------------------------------------
Bandeaux de zone glycémique — couleur + pictogramme + texte (§ 7)
--------------------------------------------------------------------- */
.bandeau {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1rem;
border-radius: var(--rayon);
border: var(--bordure) solid;
font-size: var(--t-corps);
font-weight: 800;
}
.bandeau .ic { width: 2.25rem; height: 2.25rem; }
.bandeau-vert { background: var(--vert); border-color: var(--vert); color: #fff; }
.bandeau-rouge { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.bandeau-rouge-fonce { background: var(--rouge-fonce); border-color: var(--rouge-fonce); color: #fff; }
.bandeau-orange { background: var(--orange); border-color: var(--orange); color: #fff; }
.bandeau-bleu { background: var(--bleu-toujeo); border-color: var(--bleu-toujeo); color: #fff; }
.bandeau-alerte {
background: var(--rouge-fond-clair);
border-color: var(--rouge);
color: var(--rouge-texte);
font-size: var(--t-corps);
}
.bandeau-info {
background: var(--fond-doux);
border-color: var(--trait);
color: var(--encre);
font-size: var(--t-corps);
font-weight: 700;
}
.bandeau-attention {
background: var(--orange-fond-clair);
border-color: var(--orange);
color: var(--orange-texte);
font-size: var(--t-corps);
font-weight: 700;
display: block;
}
/* ---------------------------------------------------------------------
Écran de résultat — la dose et le moment d'injection ont le même poids
visuel. Le moment n'est JAMAIS en petit, en note de bas d'écran ou en
couleur pâle (§ 5, NEVER-DO 4).
--------------------------------------------------------------------- */
/* « 12 unités » sur UNE seule ligne, comme l'écrit le § 5. Le nombre garde
son plancher de 90 px ; l'unité l'accompagne sur la même ligne de base.
Deux lignes séparées consommaient une hauteur d'écran qui manquait
ensuite aux boutons d'appel des écrans d'alerte. */
.bloc-dose {
text-align: center;
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.4rem;
flex-wrap: wrap;
}
.dose-nombre {
font-size: var(--t-dose);
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
}
.dose-unite { font-size: clamp(2rem, 7vw, 2.75rem); font-weight: 800; }
/* Marge latérale minimale et crénage légèrement resserré : à 44 px,
« AVANT le repas » passait à la ligne pour quelques pixels et le cadre
gagnait 49 px de hauteur. La taille du texte, elle, reste au plancher
de 44 px du § 7 — c'est la largeur qu'on récupère, pas la lisibilité. */
.cadre-moment {
border: 5px solid var(--encre);
border-radius: var(--rayon);
padding: 0.45rem 0.2rem;
text-align: center;
background: var(--fond);
}
.cadre-moment .moment-texte {
font-size: var(--t-moment);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.015em;
white-space: nowrap;
display: block;
/* Pas de text-transform : le cahier des charges écrit « AVANT le repas »
et « APRÈS le repas ». La casse mixte est aussi plus lisible que les
capitales intégrales, qui suppriment la silhouette des mots. */
}
/* Les pictogrammes de la rangée du dessous renforcent le texte, ils ne le
remplacent pas : le plancher de 44 px du § 7 porte sur le TEXTE du moment
d'injection, qui n'est pas réduit. Les ramener à 2 rem libère 64 px de
hauteur, qui manquaient aux boutons du bas. */
.cadre-moment .moment-icones {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 0.1rem;
}
.cadre-moment .moment-icones .ic { width: 2rem; height: 2rem; }
.cadre-moment .fleche { font-size: 1.625rem; font-weight: 800; }
.rappel-saisie {
text-align: center;
font-size: var(--t-corps);
font-weight: 600;
color: var(--trait);
}
/* Bloc de rappels de l'écran de dose : valeur saisie, règle de
l'ordonnance, alerte éventuelle. Un seul encadré pour les trois, avec
des séparateurs internes : trois encadrés séparés coûtaient une
centaine de pixels de hauteur, au prix de repousser « C'EST FAIT »
hors de l'écran.
Toutes les lignes sont à la taille du corps de texte (22 px, plancher
du § 7) : aucune n'est reléguée en petits caractères. */
.bloc-rappels {
border: 2px solid var(--trait-clair);
border-radius: 10px;
background: var(--fond-doux);
/* Marge latérale réduite au strict nécessaire : à 0.7 rem, la ligne
« Préviens X ou ton médecin. » passait à la ligne pour trois pixels,
ce qui coûtait 30 px de hauteur. */
padding: 0.4rem 0.45rem;
}
.bloc-rappels > * + * {
margin-top: 0.25rem;
padding-top: 0.25rem;
border-top: 1px solid var(--trait-clair);
}
.rappel-regle, .rappel-alerte {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin: 0;
font-size: var(--t-corps);
font-weight: 700;
line-height: 1.25;
text-align: left;
}
.rappel-regle { color: var(--encre); }
.rappel-regle .ic { color: var(--rouge-texte); margin-top: 0.15rem; }
/* Alerte du § 5-ter : rouge, pictogramme et texte — jamais la couleur seule. */
.rappel-alerte { color: var(--rouge-texte); }
.rappel-alerte .ic { color: var(--rouge-texte); margin-top: 0.15rem; }
/* ---------------------------------------------------------------------
Titres et questions — une seule question par écran
--------------------------------------------------------------------- */
/* Borne basse à 1.5rem = 24 px : au-dessus du plancher de 22 px du corps de
texte (§ 7), et suffisamment compact pour que l'écran de saisie tienne
sans défilement sur un téléphone court. */
.question {
font-size: clamp(1.5rem, 6.5vw, 2.25rem);
font-weight: 800;
margin: 0;
text-align: center;
line-height: 1.2;
}
.titre-arret {
font-size: clamp(2rem, 7.5vw, 2.75rem);
font-weight: 800;
text-align: center;
margin: 0;
text-transform: uppercase;
line-height: 1.1;
}
.texte { font-size: var(--t-corps); margin: 0; }
.texte-centre { text-align: center; }
.texte-fort { font-weight: 700; }
/* ---------------------------------------------------------------------
Zone haute de l'accueil : date et heure
--------------------------------------------------------------------- */
.entete-date {
text-align: center;
font-size: var(--t-corps);
font-weight: 700;
color: var(--trait);
flex: 0 0 auto;
}
.entete-date .heure { font-size: 1.75rem; color: var(--encre); }
/* ---------------------------------------------------------------------
Pavé numérique — grosses touches, indépendant du clavier système
--------------------------------------------------------------------- */
.affichage-saisie {
border: 4px solid var(--encre);
border-radius: var(--rayon);
padding: 0.4rem 1rem;
text-align: center;
background: var(--fond);
min-height: 4rem; /* la valeur affichée fait déjà 48 px et plus */
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.affichage-valeur { font-size: clamp(3rem, 13vw, 4.5rem); font-weight: 800; line-height: 1; }
.affichage-valeur.vide { color: var(--trait-clair); }
.affichage-unite { font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 700; color: var(--trait); }
/* Il n'y a plus de sélecteur d'unité : le lecteur de la patiente affiche
des mg/dL, c'est la seule unité qu'elle lit, et elle est lue dans
config/protocole.json. Un choix qui n'a qu'une réponse possible est un
appui de plus à rater, pas une liberté. */
/* 20 px entre deux touches, dans les deux directions : le § 7 impose cet
écart précisément pour éviter les appuis accidentels par tremblement,
et un pavé numérique est l'endroit où ce risque est le plus concret. */
.pave {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--espace-boutons);
}
.touche {
min-height: 4.5rem;
font: inherit;
font-size: 2.25rem;
font-weight: 800;
background: var(--fond-doux);
color: var(--encre);
border: var(--bordure) solid var(--trait);
border-radius: var(--rayon);
padding-inline: 0.25rem; /* laisse « Effacer » tenir à 26 px */
}
.touche:active { background: var(--ardoise); color: #fff; }
.touche[disabled] { opacity: 1; color: var(--trait-clair); border-color: var(--trait-clair); background: var(--fond); }
/* Plancher du § 7 : 26 px gras, comme tout libellé de bouton. */
.touche-effacer { font-size: var(--t-bouton); font-weight: 800; }
/* Le zéro occupe deux colonnes en l'absence de touche virgule : place
libérée mise au service de la touche, pas laissée vide. */
.touche-large { grid-column: span 2; }
/* ---------------------------------------------------------------------
Écran Toujeo patiente — un seul nombre
--------------------------------------------------------------------- */
.toujeo-entete {
display: flex; align-items: center; justify-content: center; gap: 0.75rem;
font-size: clamp(2rem, 8vw, 2.75rem); font-weight: 800;
color: var(--bleu-texte); text-transform: uppercase; letter-spacing: 0.04em;
}
.toujeo-quand { text-align: center; font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 700; }
.bandeau-changement {
border: 4px solid var(--orange);
background: var(--orange-fond-clair);
color: var(--orange-texte);
border-radius: var(--rayon);
padding: 0.85rem 1rem;
text-align: center;
}
.bandeau-changement .titre { font-size: 1.5rem; font-weight: 800; display: block; }
.bandeau-changement .avant { font-size: 1.25rem; font-weight: 600; display: block; margin-top: 0.35rem; }
.bandeau-changement .maintenant { font-size: 1.625rem; font-weight: 800; display: block; }
.bandeau-changement .consigne { font-size: 1.25rem; font-weight: 700; display: block; margin-top: 0.35rem; }
.deja-fait {
border: 5px solid var(--vert);
background: var(--vert-fond-clair);
color: var(--vert-texte);
border-radius: var(--rayon);
padding: 1.25rem 1rem;
text-align: center;
}
.deja-fait .titre { font-size: clamp(1.75rem, 7vw, 2.25rem); font-weight: 800; display: block; }
.deja-fait .detail { font-size: 1.375rem; font-weight: 600; display: block; margin-top: 0.5rem; }
.deja-fait .consigne { font-size: 1.625rem; font-weight: 800; display: block; margin-top: 0.75rem; }
/* ---------------------------------------------------------------------
Écrans aidant — le défilement y est autorisé (hors parcours patiente)
--------------------------------------------------------------------- */
.ecran-aidant { display: block; }
.ecran-aidant h2 {
font-size: 1.5rem;
margin: 1.5rem 0 0.6rem;
padding-bottom: 0.3rem;
border-bottom: 2px solid var(--trait-clair);
}
.ecran-aidant h2:first-child { margin-top: 0; }
.carte {
border: 2px solid var(--trait-clair);
border-radius: var(--rayon);
padding: 0.85rem;
margin-bottom: 0.85rem;
background: var(--fond);
}
.carte-titre { font-size: 1.25rem; font-weight: 800; margin: 0 0 0.4rem; }
.carte-hypo { border-left: 10px solid var(--rouge); background: var(--rouge-fond-clair); }
.carte-signalement { border: 3px solid var(--orange); background: var(--orange-fond-clair); color: var(--orange-texte); }
.ligne-champ { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.ligne-champ label { font-size: 1.25rem; font-weight: 700; }
.ligne-champ .aide { font-size: 1.0625rem; font-weight: 400; color: var(--trait); }
.ligne-champ input, .ligne-champ select, .ligne-champ textarea {
font: inherit;
font-size: var(--t-corps);
min-height: 3.5rem;
padding: 0.5rem 0.75rem;
border: var(--bordure) solid var(--trait);
border-radius: 10px;
background: var(--fond);
color: var(--encre);
width: 100%;
}
.ligne-champ textarea { min-height: 6rem; }
.ligne-champ .erreur-champ { color: var(--rouge-texte); font-weight: 700; font-size: 1.125rem; }
.ligne-champ input[aria-invalid="true"] { border-color: var(--rouge); background: var(--rouge-fond-clair); }
.tableau-donnees { width: 100%; border-collapse: collapse; font-size: 1.125rem; }
.tableau-donnees th, .tableau-donnees td {
border: 1px solid var(--trait-clair);
padding: 0.4rem 0.5rem;
text-align: left;
}
.tableau-donnees th { background: var(--fond-doux); font-weight: 800; }
.tableau-donnees .nombre { text-align: right; font-variant-numeric: tabular-nums; }
.bloc-code {
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-size: 1rem;
white-space: pre-wrap;
word-break: break-word;
background: var(--fond-doux);
border: 2px solid var(--trait-clair);
border-radius: 10px;
padding: 0.75rem;
max-height: 22rem;
overflow: auto;
}
.recap-confirmation {
border: 4px solid var(--encre);
border-radius: var(--rayon);
padding: 1rem;
background: var(--fond-doux);
font-size: 1.375rem;
font-weight: 700;
}
.recap-confirmation .valeur { font-size: 2rem; font-weight: 800; }
.lien-discret {
display: inline-flex;
align-items: center;
gap: 0.4rem;
align-self: center;
min-height: 3rem;
padding: 0.5rem 1rem;
font: inherit;
font-size: 1.125rem;
font-weight: 700;
color: var(--trait);
background: none;
border: 2px solid var(--trait-clair);
border-radius: 10px;
text-decoration: none;
}
.lien-discret:active { background: var(--fond-doux); }
.etat-vide { font-size: var(--t-corps); color: var(--trait); font-style: normal; }
/* Le bandeau « protocole non validé » a été retiré le 06/08/2026 :
l'ordonnance est prescrite par le médecin, l'application ne fait que la
lire, il n'y a donc aucune validation en attente à signaler. */
/* ---------------------------------------------------------------------
Écran d'indisponibilité (§ 8.4) — aucun mode dégradé
--------------------------------------------------------------------- */
.ecran-indispo { justify-content: center; text-align: center; gap: 1.5rem; }
.ecran-indispo .ic-xl { color: var(--rouge); margin: 0 auto; }
/* ---------------------------------------------------------------------
Export / impression
--------------------------------------------------------------------- */
.export-doc { font-size: 1.0625rem; line-height: 1.4; }
.export-doc h1 { font-size: 1.5rem; margin: 0 0 0.5rem; }
.export-doc h2 { font-size: 1.25rem; margin: 1.25rem 0 0.5rem; border-bottom: 2px solid var(--trait); padding-bottom: 0.2rem; }
.export-doc h3 { font-size: 1.125rem; margin: 0.75rem 0 0.35rem; }
.export-doc table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin-bottom: 0.5rem; }
.export-doc th, .export-doc td { border: 1px solid #6B7280; padding: 0.25rem 0.4rem; text-align: left; }
.export-doc th { background: var(--fond-doux); }
.export-doc .nombre { text-align: right; font-variant-numeric: tabular-nums; }
.export-doc .export-hypo { background: var(--rouge-fond-clair); font-weight: 700; }
.export-doc .export-total { font-weight: 800; background: var(--fond-doux); }
.export-doc .export-meta, .export-doc .export-note { font-size: 0.9375rem; color: #1F2937; }
.export-doc .export-petit { font-size: 0.875rem; color: #374151; }
.export-doc .export-alerte { border: 2px solid var(--rouge); background: var(--rouge-fond-clair); padding: 0.5rem; }
.export-doc .export-pied { margin-top: 1rem; border-top: 1px solid #6B7280; padding-top: 0.5rem; }
.export-cote-a-cote { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
/* Cadre porteur des marges d'impression. À l'écran il est transparent :
largeur pleine, aucun retrait, bandes haute et basse masquées. */
.export-cadre { width: 100%; border-collapse: collapse; }
.export-cadre > thead > tr > td,
.export-cadre > tbody > tr > td,
.export-cadre > tfoot > tr > td { padding: 0; border: 0; }
.export-bande-haut, .export-bande-bas { display: none; }
@media (min-width: 700px) {
/* § 9.3 : doses de lente et hypoglycémies côte à côte sur la même page. */
.export-cote-a-cote { grid-template-columns: 1fr 1fr; }
}
/* ---------------------------------------------------------------------
IMPRESSION — récapitulatif pour le médecin (§ 9.3)
---------------------------------------------------------------------
Deux pièges corrigés le 07/08/2026 :
1. Aucune marge de page n'était définie. Selon le réglage du dialogue
d'impression, le texte pouvait toucher le bord de la feuille.
2. Plus grave : `#app` conserve à l'écran `height: 100dvh` et
`overflow: hidden`, ce qui est indispensable pour que le bouton
Retour reste visible. À l'impression, ces deux propriétés
TRONQUAIENT le récapitulatif à la hauteur d'un écran, soit une
seule page — le reste du relevé était perdu sans que rien ne le
signale. La mise en page d'écran est donc entièrement neutralisée
ici : plus de hauteur fixe, plus de flexbox, plus de débordement
masqué.
--------------------------------------------------------------------- */
/* Marge de page à ZÉRO, volontairement.
Les marges réelles sont produites par le cadre `.export-cadre` : un
tableau dont le `` et le `` sont répétés par le navigateur
en haut et en bas de CHAQUE page imprimée, et dont la cellule porte le
retrait latéral.
Pourquoi ne pas simplement écrire `@page { margin: 14mm }` : parce que
le dialogue d'impression neutralise cette règle dès que « Marges » est
sur « Aucune », et que ce réglage est mémorisé d'une impression à
l'autre. Le document sortait alors collé au bord de la feuille, sans
qu'aucune modification du code n'y change quoi que ce soit.
Avec margin: 0 ici, la marge visible vient entièrement du document
lui-même. Elle est donc la même quel que soit le réglage choisi. */
@page {
size: A4 portrait;
margin: 0;
}
@media print {
/* --- commandes et repères d'écran : hors du document imprimé --- */
.entete, .ecran-pied, .bouton, .lien-discret,
#export-info, .pile-serree, #zone-alerte { display: none !important; }
/* --- neutralisation complète de la mise en page d'écran --- */
html, body { height: auto !important; overflow: visible !important; background: #fff; }
#app {
display: block !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
padding: 0 !important;
}
.ecran, .ecran-corps, .ecran-aidant {
display: block !important;
height: auto !important;
overflow: visible !important;
padding: 0 !important;
gap: 0 !important;
animation: none !important;
}
body { font-size: 10pt; line-height: 1.3; color: #000; }
.export-doc { font-size: 10pt; }
.export-doc h1 { font-size: 15pt; }
.export-doc h2 { font-size: 12pt; }
.export-doc h3 { font-size: 10.5pt; }
.export-doc table { font-size: 8.5pt; }
.export-cote-a-cote { grid-template-columns: 1fr 1fr; gap: 6mm; }
/* --- cadre porteur des marges, répété à chaque page --- */
.export-cadre { width: 100%; }
.export-cadre > thead { display: table-header-group; }
.export-cadre > tfoot { display: table-footer-group; }
/* Le retrait latéral de la cellule s'applique sur toute la hauteur du
flux : il donne donc les marges gauche et droite de TOUTES les pages. */
.export-cadre > thead > tr > td,
.export-cadre > tbody > tr > td,
.export-cadre > tfoot > tr > td { padding: 0 12mm; border: 0; }
/* Ces deux rangées ne doivent surtout pas être « gardées d'un seul
tenant » : elles contiennent tout le document. */
.export-cadre > tbody > tr,
.export-cadre > tbody > tr > td { break-inside: auto; page-break-inside: auto; }
.export-bande-haut, .export-bande-bas {
display: block;
font-size: 8pt;
color: #333;
}
.export-bande-haut { height: 10mm; padding-top: 8mm; }
.export-bande-bas { height: 9mm; padding-bottom: 7mm; text-align: right; }
/* --- coupures de page lisibles --- */
.export-doc h1, .export-doc h2, .export-doc h3 { break-after: avoid; page-break-after: avoid; }
.export-doc tr, .export-doc .export-alerte { break-inside: avoid; page-break-inside: avoid; }
.export-doc thead { display: table-header-group; } /* en-têtes répétés à chaque page */
.export-doc table { break-inside: auto; }
/* --- le surlignage des hypoglycémies doit survivre à l'impression --- */
.export-doc .export-hypo {
background: #E8E8E8 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.export-doc th { background: #F0F0F0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* ---------------------------------------------------------------------
Écrans courts — compactage de ce qui n'est PAS plancher du § 7
---------------------------------------------------------------------
Les planchers du § 7 (dose 90 px, moment d'injection 44 px, boutons
72 px de haut et 26 px de libellé, corps 22 px, écarts 20 px) sont
intouchables. En dessous d'environ 760 px de hauteur d'écran, ils
deviennent arithmétiquement incompatibles avec « aucun défilement » :
on ne peut pas afficher un nombre de 90 px, un cadre de 44 px, un
bandeau, un rappel et deux boutons de 72 px dans moins de 580 px.
Ce bloc réduit donc uniquement les marges, les pictogrammes décoratifs
et les tailles qui ne sont pas des planchers. Si un défilement reste
nécessaire, l'ordre de la page garantit que la dose ET le moment de
l'injection sont visibles ENSEMBLE en haut de l'écran (NEVER-DO 4) ;
ce sont le rappel de saisie et les boutons qui passent sous la ligne
de flottaison, jamais l'inverse.
La hauteur d'écran minimale recommandée est indiquée dans le README et
figure dans la recette manuelle à faire sur le téléphone réel.
--------------------------------------------------------------------- */
@media (max-height: 760px) {
.bandeau { padding: 0.55rem 0.75rem; }
.bandeau .ic { width: 2.1rem; height: 2.1rem; }
.cadre-moment { padding: 0.5rem 0.4rem; }
.cadre-moment .moment-icones { margin-top: 0.15rem; }
.cadre-moment .moment-icones .ic { width: 2rem; height: 2rem; }
.cadre-moment .fleche { font-size: 1.5rem; }
.dose-unite { font-size: 2rem; }
.bloc-dose { line-height: 1; }
.ic-xl { width: 4.5rem; height: 4.5rem; }
.ic-grand { width: 3.25rem; height: 3.25rem; }
.entete { min-height: 3.25rem; padding-block: 0.3rem; }
.entete-date .heure { font-size: 1.5rem; }
}
/* ---------------------------------------------------------------------
Focus visible au clavier (l'aidant peut brancher un clavier ; la
patiente n'utilise que le tactile).
--------------------------------------------------------------------- */
:focus-visible { outline: 4px solid var(--bleu-toujeo); outline-offset: 2px; }
/* Aucune animation autre qu'une transition d'écran simple (§ 7).
La transition est volontairement très courte et supprimée si la
personne a demandé moins d'animations au niveau du système. */
.ecran { animation: apparition 120ms ease-out; }
@keyframes apparition { from { opacity: 0.6; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.ecran { animation: none; }
}
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}