| `. */
.table-wrap:not(.defile) { border: 0; border-radius: 0; background: none; }
.grid.cartes { border: 0; background: transparent; }
.grid.cartes thead { display: none; }
.grid.cartes, .grid.cartes tbody, .grid.cartes tr, .grid.cartes td { display: block; }
.grid.cartes tr {
display: flex; flex-direction: column;
margin: 0 0 10px; padding: 10px 12px;
background: #fff; border: 1px solid #e7e0d8; border-radius: 10px;
}
.grid.cartes tr.suite { background: #fbf8f4; }
.grid.cartes td { border: 0; padding: 2px 0; }
.grid.cartes td[data-label] { display: flex; gap: 10px; align-items: baseline; }
.grid.cartes td[data-label]::before {
content: attr(data-label);
flex: 0 0 6.8em;
font-size: .72rem; text-transform: uppercase; letter-spacing: .4px;
color: #8a8078; line-height: 1.6;
}
/* La cellule de titre remonte en tête de carte quelle que soit sa place
dans la ligne : sur l'écran Tâches le client est en 3e colonne, et
c'est pourtant lui qu'on cherche en premier. */
.grid.cartes td.titre { order: -1; padding-bottom: 6px; font-size: 1.02rem; font-weight: 600; }
.grid.cartes td.titre::before { content: none; }
/* `style.css` remet `.num` en `table-cell` aligné à droite : dans une
carte, la valeur suit son libellé comme les autres. */
.grid.cartes td.num { text-align: left; white-space: nowrap; }
/* Les actions occupent la largeur de la carte, sous une ligne de séparation. */
.grid.cartes td.actions { margin-top: 8px; padding-top: 8px; border-top: 1px solid #efe9e1; }
.grid.cartes td.actions::before { content: none; }
.grid.cartes .row-actions, .grid.cartes .inline-form { display: flex; flex-wrap: wrap; gap: 8px; }
.grid.cartes .row-actions form, .grid.cartes .inline-form { width: 100%; }
.grid.cartes .row-actions button, .grid.cartes .inline-form button { width: 100%; }
.grid.cartes .inline-form input { flex: 1 1 100%; }
/* ── Traitement C : les tableaux qui doivent rester des tableaux ───── */
/* La synthèse 360 est une addition, avec une ligne de somme et une ligne
d'avoirs en négatif. En cartes, la lecture verticale qui en fait tout
l'intérêt disparaîtrait. */
.grid.totaux { font-size: .9rem; }
.grid.totaux th, .grid.totaux td { padding: 3px 0 3px 10px; }
.grid.totaux .num { font-variant-numeric: tabular-nums; }
/* Même raison pour la grille 5 × 5 du profil d'achat : c'est une matrice,
chaque case ne se lit qu'en croisant sa ligne et sa colonne. */
.grille-tab { font-size: .78rem; }
.grille-tab th, .grille-tab td { padding: 4px 5px; }
}
/* ─── Sous 600 px : les formulaires (chantier 3) ──────────────────────── */
@media (max-width: 599px) {
/* ── Le zoom automatique de Safari iOS ──────────────────────────────
Sous 16 px, iOS agrandit la page à la mise au point d'un champ — et
n'annule jamais ce zoom : la vue reste agrandie et décalée, la barre
de navigation sort de l'écran, et l'utilisateur doit pincer pour
revenir. Mesuré sur les 8 écrans à champs : la plus petite police
était de 13,33 px partout, y compris là où aucune taille n'est
déclarée — les contrôles de formulaire n'héritent PAS de la taille du
document, ils tombent sur le défaut du navigateur.
16 px est un seuil du moteur, pas une préférence : 15,9 px zoome.
Les boutons sont volontairement laissés de côté — on ne saisit rien
dedans, ils ne déclenchent aucun zoom, et les agrandir déplacerait
des mises en page qui tiennent déjà. */
input, select, textarea { font-size: 16px; }
/* Le sélecteur d'élément ci-dessus (0,0,1) ne suffit pas : trois règles
de `style.css` posent une police sur un contrôle en visant une classe
(0,1,1) et l'emportent — et une requête `@media` n'ajoute AUCUNE
spécificité, c'est le piège décrit en tête de ce fichier. La preuve a
été faite à la mesure : après la règle générale, `comptes` et la fiche
client restaient à 13,6 px pendant que les six autres écrans passaient
à 16.
Elles sont donc reprises nommément, à spécificité égale — et
comme `mobile.css` est chargée en dernier, l'égalité suffit à gagner.
L'ensemble est fermé, et `test_formulaires_mobile` le vérifie : toute
nouvelle règle de police sur un contrôle devra être répercutée ici. */
.inline-form select, .inline-form input,
.close-form-lg select, .close-form-lg textarea,
.head-form select, .head-form input, .head-form textarea { font-size: 16px; }
/* Un champ ne peut plus dépasser son conteneur : plusieurs largeurs sont
fixées en dur dans `style.css` (140 px, 90 px, 10 rem) pour un écran de
bureau, et il ne reste que 292 px utiles à 320 px. */
input, select, textarea { max-width: 100%; }
/* ── Panneau de filtres clients ─────────────────────────────────────
Mesuré : `.filtres-ligne` faisait 375 px de large pour 305 disponibles.
La ligne enveloppante sait pourtant se replier — c'est le `.champ` qui
ne le savait pas : `inline-flex` sans repli, il additionnait son
libellé, ses deux champs et le séparateur sur une seule ligne
incompressible. Chaque critère occupe désormais sa propre ligne, et
ses champs se partagent la largeur. */
.filtres-ligne { flex-direction: column; align-items: stretch; }
.filtres .champ { display: flex; flex-wrap: wrap; align-items: center; }
/* Le libellé prend toute la ligne, les deux champs se partagent la
suivante en encadrant leur séparateur. Sans cela — vu à l'écran — le
« – » et le « au » restaient orphelins en bout de première ligne
pendant que le second champ tombait seul en dessous. Le libellé est un
`` dans le gabarit précisément pour être atteignable
ici : un nœud de texte nu devient un élément flex anonyme, que rien ne
peut viser. */
.filtres .champ .quoi { flex: 1 1 100%; }
.filtres .champ input[type=number],
.filtres .champ input[type=date] { flex: 1 1 7rem; width: auto; min-width: 0; }
/* 240 px de largeur minimale sur la recherche : au-dessus de ce que
laissent les petits téléphones une fois les marges retirées. */
.search input[type=search] { min-width: 0; }
.search button { width: 100%; }
/* ── Création de compte ─────────────────────────────────────────────
`repeat(2, minmax(200px, 1fr))` réclame 412 px avec sa gouttière, et un
`minmax` ne se laisse pas comprimer : le débordement était garanti sur
tout téléphone (mesuré : +144 px à 320 px). Une seule colonne. */
.form-grid { grid-template-columns: 1fr; }
.form-grid button { width: 100%; }
/* Même précaution sur les paramètres de règles, dont la colonne
minimale (280 px) frôle la largeur utile d'un petit téléphone. */
.params-form { grid-template-columns: 1fr; }
/* ── Saisie en tête de fiche client ─────────────────────────────────
Le panneau flottant (`absolute`, ancré à droite, 320 px) est conçu pour
ne pas déplacer la mise en page du bureau. Sur un téléphone il n'a
plus rien à préserver, et un panneau ancré à droite dans un en-tête
qui se replie est fragile : il coule dans la page, en pleine largeur.
L'ombre portée est retirée avec le flottement — sans élévation à
suggérer, elle salissait le bord.
Toute la chaîne compte, et deux pièges s'y cachent. `.head-actions` est
une rangée flex dont chaque ` ` est dimensionné par son bouton :
poser `width: 100%` sur le seul panneau ne sert à rien, il sortait à
203 px pour 292 disponibles. C'est la rangée qui doit passer en colonne
étirée. Et son `flex-wrap: wrap`, hérité de `style.css`, doit tomber avec
— en colonne, un conteneur qui s'autorise à replier range ses éléments en
PLUSIEURS colonnes, et les étire à la largeur de leur colonne, pas à
celle du conteneur. Les deux ont été vus à l'écran, aucun ne se devine. */
.head-actions {
flex: 1 1 100%; flex-direction: column;
flex-wrap: nowrap; align-items: stretch;
}
.head-details { position: static; }
/* `inline-block` laissait trois pastilles de largeurs différentes alignées
à gauche ; en bloc elles s'accordent aux autres actions pleine largeur
du téléphone (« Rechercher », « Créer »). */
.head-details .add-btn { display: block; text-align: center; }
.head-form {
position: static; width: 100%; max-width: none;
margin-top: 8px; box-shadow: none;
}
.head-actions, .head-details, .client-head { min-width: 0; }
.head-form button[type=submit] { width: 100%; padding: 10px 14px; }
/* ── Liens-boutons ──────────────────────────────────────────────────
`.btn` interdit la césure pour que « Télécharger le CSV… » ne se coupe
pas en deux sur un tableau de bord large. Sur un téléphone, la même
règle faisait dépasser l'écran de 18 px (mesuré sur l'écran Grappe) :
le texte se replie. */
.btn { white-space: normal; }
}
/* ─── Sous 600 px : la fiche client (chantier 4) ──────────────────────── */
@media (max-width: 599px) {
/* ── Les listes « libellé / valeur » ────────────────────────────────
`grid-template-columns: max-content 1fr` fige la première colonne sur
le libellé le plus long du bloc, et `max-content` ne se replie jamais :
la valeur part hors de l'écran, quelle que soit sa propre longueur.
Mesuré sur une fiche, à 320 px : quatre blocs rendus, deux malades.
La synthèse des achats prend 215 px de colonne à cause de « Bouteille
la moins / plus chère » et sort ses 6 valeurs ; le bloc Probance prend
185 px avec « Dernier signalement spam » et sort ses 12. Identité
(130 px) et Coordonnées (73 px) tenaient, mais suivent la même règle :
deux blocs voisins présentés différemment se liraient comme une erreur.
La colonne des libellés est donc FIXÉE, à la même largeur que les
cartes du chantier 2 — de petites capitales sur ~78 px : c'est la
présentation validée à l'œil, et la fiche ne doit pas faire cohabiter
deux grammaires. Un libellé trop long s'y replie sur deux lignes,
exactement comme dans une carte.
⚠️ La largeur est écrite en `rem`, pas en `em` : dans une carte, les
6,8 em se résolvent contre la police du libellé (.72 rem → ~78 px),
alors qu'ici l'unité s'appliquerait à la police de la liste (16 px →
109 px). 4,9 rem redonne les mêmes 78 px.
⛔ Le libellé EMPILÉ au-dessus de sa valeur a été essayé et écarté à
l'écran : lisible, mais il doublait la hauteur de chaque bloc — 24
lignes pour le bloc Probance — alors que les valeurs de l'identité
tiennent en deux caractères (« M. », « fr », « HL »). */
.kv { grid-template-columns: 4.9rem 1fr; gap: 6px 10px; }
.kv dt {
font-size: .72rem; text-transform: uppercase; letter-spacing: .4px;
line-height: 1.6;
}
.kv dd { overflow-wrap: anywhere; }
/* ── Les étiquettes de vins et d'appellations ───────────────────────
`.tag` interdit la césure — légitime pour « acheteur » ou « Cercle »,
ruineux pour un nom de vin complet : « BILLECART SALMON LE RESERVE
(Champagne) (Champagne) » mesure 351 px sur un écran de 320, et la
grosse fiche en porte 203. Décision de l'utilisateur du 23/08 :
le nom se replie plutôt que d'être tronqué — il reste lisible en
entier, au prix d'un bloc plus haut. */
.tag { white-space: normal; }
/* ── Le radar régional ──────────────────────────────────────────────
La SVG se met bien à l'échelle, mais ses libellés d'axes sont dessinés
en unités du `viewBox` : 11 px déclarés dans un viewBox de 400 rendu à
246 px donnent **6,76 px réels** à l'écran. Mesuré, pas estimé — le
plan tablait sur « moins de 9 px », c'est bien pire, et « Vins du
monde » en devient illisible.
La police est donc portée à une valeur qui rende ~11 px effectifs.
⚠️ Aucune solution par JavaScript ici : `test_preferences_web.py`
interdit tout ` |
|---|