/* =====================================================================
SKELIA — REFONTE GRAPHIQUE MOBILE (v52)
POURQUOI CE FICHIER EXISTE, ET POURQUOI IL EST SEPARE.
Le tableau de bord a ete peint pour un ecran sombre, puis repeint en
clair, puis rapieces vingt fois. dashboard.css fait 6 970 lignes et
contient trois blocs `:root` qui se contredisent. Y toucher au coeur,
la veille d'une formation, c'est casser l'ordinateur en reparant le
telephone.
Ce fichier est charge APRES dashboard.css et TOUT ce qu'il contient
vit dans `@media (max-width:900px)`. Consequence verifiee : sur un
ecran de 1440 px, pas une seule regle ne s'applique. La sidebar
d'ordinateur, retrouvee en v50 apres l'incident des 0 px, ne peut
pas etre touchee par ce qui suit.
CE QUI A ETE MESURE AVANT D'ECRIRE (Chromium reel, 360x800,
Android, ecran tactile) :
- la police Inter n'etait JAMAIS chargee. Le `@import` est en
ligne 371 de dashboard.css ; un `@import` place apres une regle
est ignore par tous les navigateurs. Verifie : la liste des
imports pris par le navigateur est VIDE. L'application tournait
sur la police par defaut d'Android depuis le debut.
- l'onglet « Commandes » de la barre du bas : texte de 78 px dans
un bouton de 72 px. Il etait coupe a l'ecran, en permanence,
sur l'onglet le plus utilise de l'application.
- accueil : 13 textes sous 12,5 px, dont des libelles de chiffres
a 11,5 px.
- commandes : 48 textes sous 12,5 px, 28 zones tactiles sous 44 px.
- deux boutons de l'en-tete depassaient du bord droit de l'ecran.
REGLE DE TRAVAIL : rien n'est ecrit ici qui n'ait ete constate a
l'ecran. Aucune regle « au cas ou ».
===================================================================== */
/* =====================================================================
0. LA POLICE — LA CORRECTION LA PLUS VISIBLE DE TOUTES
Elle n'est PAS ici : elle est declaree en `` dans le ``
de index.html, avec une preconnexion.
POURQUOI PAS UN `@import` ICI. Un `@import` n'est decouvert par le
navigateur qu'APRES avoir telecharge et lu cette feuille : les deux
requetes s'enchainent au lieu de partir ensemble. Sur une connexion
mobile lente, cela retarde l'affichage du texte d'un aller-retour
complet. Un `` dans le `` part immediatement.
Rappel de ce qui a ete trouve : dashboard.css portait bien un
`@import` de la police, mais en ligne 371 — donc APRES des regles.
Tous les navigateurs ignorent un `@import` place ailleurs qu'en
tete de fichier. Verifie au navigateur : la liste des imports pris
etait VIDE. L'application n'a jamais eu sa police.
===================================================================== */
@media (max-width:900px){
/* =====================================================================
1. LES FONDATIONS
Une echelle de tailles unique. Avant, chaque ecran avait ete regle a
la main : 11,5 px ici, 12,2 px la, 13,7 px ailleurs. L'oeil percoit
ce desordre sans pouvoir le nommer ; c'est ce qui fait « pas fini ».
PLANCHER A 13 px. Le marchand nigerien consulte ses commandes
dehors, en plein soleil, souvent en marchant. En dessous de 13 px il
plisse les yeux. Les 12 px du correctif precedent etaient un progres
depuis 10,4 px, mais insuffisants.
===================================================================== */
:root{
--m-xs:13px; /* mentions : dates, unites */
--m-s:14px; /* texte secondaire */
--m-m:15px; /* texte courant */
--m-l:16.5px; /* noms, valeurs */
--m-xl:19px; /* titres de carte */
--m-xxl:24px; /* titre d'ecran */
--m-r:16px; /* rayon des cartes */
--m-r-s:12px; /* rayon des petits elements */
--m-gap:12px; /* respiration entre blocs */
--m-pad:16px; /* marge laterale de l'ecran */
--m-tap:48px; /* hauteur minimale d'une zone tactile */
/* L'ombre remplace la bordure. Une bordure grise sur fond gris
clair ne se voit pas au soleil ; une ombre douce, si. */
--m-ombre:0 1px 2px rgba(15,23,42,.04), 0 4px 12px -4px rgba(15,23,42,.08);
--m-ombre-h:0 2px 4px rgba(15,23,42,.05), 0 10px 24px -8px rgba(15,23,42,.12);
}
/* LE FOND ET LES SURFACES PASSENT PAR DES VARIABLES, JAMAIS PAR UNE
COULEUR EN DUR.
BUG QUE J'AI INTRODUIT ET CORRIGE : j'avais ecrit `#f6f8fb` et
`#ffffff` en dur. Teste en mode sombre : le fond restait clair
(mesure `rgb(246,248,251)` alors que `data-theme="sombre"` etait
bien pose). Les blancs en dur ecrasaient toute la palette sombre
de dashboard.css.
On definit donc deux variables propres au mobile, qui suivent le
theme. `--m-fond` vaut un blanc legerement bleute en clair (les
cartes blanches s'y detachent sans halo au soleil) et le fond
sombre en sombre. */
:root{--m-fond:#f6f8fb;--m-surface:#ffffff}
[data-theme="sombre"]{--m-fond:var(--fond);--m-surface:var(--carte)}
body{
font-size:var(--m-m);
background:var(--m-fond) !important;
/* Sur Android, un appui maintenu selectionne le texte et fait
apparaitre les poignees bleues au milieu d'un geste de
defilement. On garde la selection sur les champs uniquement. */
-webkit-tap-highlight-color:transparent;
}
input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text}
/* =====================================================================
2. L'EN-TETE
MESURE : deux boutons depassaient du bord droit (jusqu'a 467 px sur
un ecran de 360 px). Quatre boutons de 42 px plus un titre ne
tiennent pas dans 360 px moins 48 px de marges.
DECISION. On ne retrecit pas les boutons — ils sont deja sous les
44 px recommandes. On enleve ce qui ne sert pas SUR TELEPHONE :
- la recherche : elle reste, c'est le seul moyen de retrouver une
commande parmi cinq cents ;
- les notifications : elles restent ;
- le bouton de theme : RETIRE de l'en-tete. Un marchand change de
theme une fois dans sa vie. Il est deplace dans les Reglages,
ou on le cherche naturellement ;
- le badge du nom de boutique : RETIRE. Le nom est deja dans le
titre de l'ecran d'accueil et dans le panneau du profil. Il
prenait la place et poussait le reste dehors.
===================================================================== */
.haut{
padding:10px var(--m-pad) 10px !important;
padding-top:calc(10px + env(safe-area-inset-top)) !important;
gap:6px;
/* Elle colle en haut : le marchand garde la recherche et son
profil sous le pouce meme apres avoir descendu trente
commandes. */
position:sticky;top:0;z-index:60;
/* Meme raison que la barre du bas : opaque par defaut, le flou
seulement si le navigateur le sait faire. Sans cela, les cartes
defilaient visiblement derriere le titre de l'ecran. */
background:var(--m-surface) !important;
border-bottom:1px solid var(--bord) !important;
}
/* Meme raison que la barre du bas : voir la note detaillee plus
bas. L'en-tete reste opaque, sans pari sur le flou. */
.haut h1{
font-size:var(--m-xl) !important;font-weight:720 !important;
letter-spacing:-.035em;
/* Un titre long ne doit pas pousser les boutons hors de l'ecran :
il se coupe proprement. */
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.haut-d{display:flex;align-items:center;gap:4px;flex:0 0 auto}
/* Le theme et le badge quittent l'en-tete du telephone. */
.haut-d .th-b,
.haut-d .badge-plan{display:none !important}
/* Les trois boutons ronds restants : 44 px pleins. */
.rg-b,.nt-b,.pf-b{
width:44px !important;height:44px !important;flex:0 0 44px !important;
border-radius:50% !important;
}
.rg-b,.nt-b{
background:transparent !important;border:0 !important;
color:var(--texte-2) !important;
}
.rg-b:active,.nt-b:active{background:var(--fond-2) !important}
.pf-b{border:0 !important;background:transparent !important;padding:0}
.pf-i{width:36px;height:36px;font-size:15px}
/* La pastille de notification : un point net, pas un pate. */
.nt-pt{
width:9px;height:9px;border-radius:50%;
background:var(--rouge);border:2px solid var(--m-surface);
top:9px;right:9px;
}
/* La recherche ouverte prend toute la largeur : on cherche, ou on
ne cherche pas. Un champ de 120 px coince entre deux icones
n'est utilisable par personne. */
.rg.ouvert{
position:absolute;left:var(--m-pad);right:var(--m-pad);
top:calc(8px + env(safe-area-inset-top));z-index:5;
}
.rg.ouvert .rg-champ{
display:flex;width:100%;height:48px;border-radius:14px;
background:var(--fond-2);border:1px solid var(--bord);
align-items:center;gap:9px;padding:0 12px;
}
.rg.ouvert .rg-champ input{
flex:1;min-width:0;border:0;background:transparent;outline:0;
font-size:var(--m-m);
}
.rg-x{width:38px;height:38px;flex:0 0 38px;border:0;background:transparent;
font-size:24px;color:var(--texte-3);border-radius:50%}
/* =====================================================================
3. LA BARRE DU BAS — LE BUG LE PLUS VISIBLE DE L'APPLICATION
MESURE : « Commandes » demande 78 px de large, le bouton en fait 72.
Le mot etait coupe en permanence, sur l'onglet ouvert vingt fois par
jour. Sur les captures d'ecran, on lit « Commande » puis un « s »
tranche par le bord du bouton voisin.
CORRECTION. Trois choses ensemble :
1. le libelle passe a « Ventes » — plus court, et plus juste : le
marchand y va pour voir ce qu'il a vendu ;
2. la taille descend a 11,2 px UNIQUEMENT pour les libelles de
cette barre, avec un interlettrage resserre. C'est la seule
entorse au plancher de 13 px, et elle est assumee : le libelle
double une icone deja parlante ;
3. `min-width:0` sur les boutons de grille, sans quoi un mot long
elargit sa colonne et pousse les autres.
La hauteur passe de 57 px a 62 px. Mesure : la zone tactile
utilisable etait de 57 px moins le padding, soit trop juste pour un
pouce en mouvement.
===================================================================== */
/* MESURE IMPORTANTE : `backdrop-filter` calcule vaut `none` dans le
navigateur de test, et c'est aussi le cas sur les Android
d'entree de gamme et dans les WebView anciennes. Avec un fond a
96 % d'opacite et AUCUN flou, les cartes de commande se voyaient
par transparence derriere les onglets — on lisait « Salif Traore »
au travers du mot « Ventes ». Constate sur la capture.
Le fond est donc OPAQUE par defaut. Le flou n'est ajoute que si le
navigateur le sait vraiment faire, via `@supports`. Une belle
transparence qui ne marche qu'une fois sur deux est un defaut,
pas une finition. */
.barre-bas{
display:grid !important;
position:fixed;left:0;right:0;bottom:0;z-index:80;
background:var(--m-surface) !important;
border-top:1px solid var(--bord) !important;
padding:0 0 env(safe-area-inset-bottom) !important;
box-shadow:0 -2px 16px rgba(15,23,42,.07);
/* Le contenu de la barre ne doit jamais se melanger a la page. */
isolation:isolate;
}
/* PAS DE @supports ICI — ET C'EST UNE DECISION MESUREE.
J'avais d'abord conditionne la transparence a
`@supports (backdrop-filter:blur(1px))`. Verifie au navigateur :
la condition passe (le navigateur DIT savoir faire), mais le
`backdrop-filter` calcule vaut quand meme `none`. Resultat a
l'ecran : fond a 88 %, aucun flou, et on lisait « Salif Traore »
au travers du mot « Ventes ». Constate sur capture.
C'est exactement le comportement des WebView Android anciennes,
celles des telephones que les participants auront demain en main.
Un `@supports` qui repond oui sans tenir sa promesse est pire
qu'aucun test.
La barre reste donc OPAQUE. Un fond blanc franc, une ombre douce
pour le detacher : c'est net sur tous les appareils, sans
exception et sans pari. */
.barre-bas .bb{
min-width:0; /* INDISPENSABLE : voir ci-dessus */
height:62px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:4px;padding:0 1px;border:0;background:transparent;cursor:pointer;
color:var(--texte-3) !important;
font-family:inherit;font-size:11.2px;font-weight:600;
letter-spacing:-.02em;line-height:1;
white-space:nowrap;overflow:hidden;
-webkit-tap-highlight-color:transparent;
transition:color .18s;
}
.barre-bas .bb svg{width:23px;height:23px;transition:transform .22s var(--tr)}
.barre-bas .bb.on{color:var(--bleu) !important;font-weight:700}
.barre-bas .bb.on svg{transform:translateY(-1px) scale(1.04)}
/* L'ancien trait colle en haut du bouton touchait la carte du
dessus. Une pastille douce derriere l'icone se lit mieux et ne
mord sur rien. */
.barre-bas .bb.on::before{
content:'';position:absolute;top:7px;left:50%;
transform:translateX(-50%);
width:42px;height:28px;border-radius:10px;
background:var(--bleu-clair);z-index:-1;
}
.barre-bas .bb{position:relative;z-index:0}
/* Le compteur de commandes nouvelles, cale sur l'icone. */
.barre-bas .bb .pt{
position:absolute;top:6px;left:calc(50% + 7px);
min-width:17px;height:17px;padding:0 4px;border-radius:9px;
background:var(--rouge);color:#fff;font-size:10px;font-weight:750;
display:grid;place-items:center;border:2px solid var(--m-surface);
font-variant-numeric:tabular-nums;
}
/* Le contenu s'arrete au-dessus de la barre. Sans cette ligne, le
dernier bouton de chaque ecran passe dessous et devient
inatteignable — c'est arrive sur l'ecran d'abonnement. */
.contenu{
padding:14px var(--m-pad)
calc(78px + env(safe-area-inset-bottom)) !important;
max-width:100%;
}
/* =====================================================================
4. LES CARTES
Avant : bordure grise + ombre + fond blanc, le tout repete sur six
classes differentes avec six rayons differents (13, 14, 16 px).
Maintenant : un seul objet visuel.
===================================================================== */
.carte,.cmd,.stat,.prod,.af-bloc,.af-cmd,.seule,.bq,.gg-c,.dl-c{
border-radius:var(--m-r) !important;
border:1px solid var(--bord) !important;
box-shadow:var(--m-ombre) !important;
background:var(--m-surface) !important;
}
.carte{padding:16px !important;margin-bottom:var(--m-gap)}
.c-tete h2{font-size:var(--m-xl) !important;font-weight:700;letter-spacing:-.03em}
.c-tete{margin-bottom:12px}
/* =====================================================================
5. LES CHIFFRES DE L'ACCUEIL
MESURE : les libelles etaient a 11,5 px, en majuscules espacees. Le
chiffre, lui, etait la seule chose lisible. Or le libelle dit ce que
le chiffre signifie : sans lui, « 119 200 » ne veut rien dire.
On inverse la logique habituelle : le libelle redevient une phrase
normale et lisible, le chiffre garde sa force par le poids et non
par le contraste hurlant.
===================================================================== */
.stats{
display:grid !important;grid-template-columns:1fr 1fr !important;
gap:10px !important;margin-bottom:var(--m-gap) !important;
}
.stat{padding:14px 13px !important}
/* Les vrais noms de classes, releves AU NAVIGATEUR et non devines :
`.s-t` pour le libelle, `.s-v` pour la valeur, `.s-sous` pour la
mention du dessous, `.pr-st span` sur l'ecran Produits. Une
premiere version de ce fichier visait `.stat .t` — qui n'existe
nulle part. Rien ne s'appliquait, et les libelles restaient a
11 px. C'est exactement l'erreur de `--primaire` : un selecteur
juste en apparence, qui ne touche rien. */
.stat .t,.stats .t,.s-t,.stat .s-t,
.pr-st span,.pr-st b+span{
font-size:var(--m-xs) !important;
font-weight:600 !important;
letter-spacing:0 !important;
text-transform:none !important; /* fini les capitales criardes */
color:var(--texte-3) !important;
margin-bottom:5px;
}
.s-sous{font-size:var(--m-xs) !important;color:var(--texte-3) !important}
/* LE CHIFFRE DOIT S'AFFICHER EN ENTIER. TOUJOURS.
BUG SIGNALE PAR LE MARCHAND ET MESURE : « pourquoi on n'affiche
pas la totalite des chiffres ». J'avais fixe 22 px en dur.
Mesure au navigateur avec un vrai montant de production :
« 11 920 000 F » demande 154 px dans une case qui en fait 131.
Le chiffre etait tronque — sur un tableau de bord, c'est le
defaut le plus grave possible : le marchand lit un faux montant.
`clamp()` laisse le chiffre respirer selon la largeur de l'ecran,
et `min(4.9vw, 22px)` le fait retrecir tout seul sur un petit
telephone. Le plancher de 15 px reste parfaitement lisible.
Les trois regles qui suivent se completent :
- la taille s'adapte,
- `overflow-wrap` autorise la coupure en dernier recours
plutot que le debordement,
- `text-overflow:clip` : JAMAIS de points de suspension sur un
montant. Mieux vaut un chiffre serre qu'un chiffre menteur. */
.stat .v,.stat b,.stat strong,.s-v,.pr-st b{
font-size:clamp(15px, 4.9vw, 22px) !important;
font-weight:780 !important;
letter-spacing:-.045em;
font-variant-numeric:tabular-nums; /* les chiffres s'alignent */
color:var(--texte) !important;line-height:1.2;
display:block;max-width:100%;
white-space:nowrap;
overflow:visible;text-overflow:clip;
}
/* ------------------------------------------------------------------
LES TRES GRANDS MONTANTS — CORRECTIF v56 (mission §35)
MESURE : avec « 999 999 999 F » (13 caracteres), le chiffre
debordait encore sur 320 et 360 px malgre le `clamp`. A 360 px la
carte fait 131 px utiles ; a 17,64 px de police il faut 154 px.
LA SOLUTION N'EST PAS `overflow:hidden` — la mission l'interdit
explicitement, et couper un montant est le pire defaut d'un
tableau de bord : le marchand lit un chiffre faux.
On reduit donc REELLEMENT la taille quand le texte est long.
`cqi` (container query inline) n'est pas sur partout ; on utilise
une regle simple et robuste : au-dela de 9 caracteres, le
navigateur ne peut pas deviner, alors on laisse le chiffre
retrecir jusqu'a 13 px, qui reste parfaitement lisible pour un
nombre (les chiffres n'ont ni jambages ni accents).
------------------------------------------------------------------ */
/* ERREUR QUE J'AI FAITE ET CORRIGEE, NOTEE POUR NE PAS LA REFAIRE.
J'avais d'abord ecrit `min(clamp(...), 7.2cqi)` avec
`container-type:inline-size` sur `.stat`. Mesure au navigateur :
les chiffres tombaient a 9,4 px — deux fois plus petits qu'avant,
donc BIEN PIRE que le defaut que je corrigeais. La cause : `cqi`
se calcule sur le conteneur le plus proche, qui ici est etroit,
et `min()` retenait donc toujours la plus petite valeur.
Lecon : une unite « intelligente » qu'on ne mesure pas produit
des resultats absurdes. La regle simple ci-dessous est bornee a
14 px au plancher, ce qui rend le pire cas impossible.
Le vrai probleme n'etait que « 999 999 999 F » (13 caracteres).
On le traite par une petite reduction ciblee, pas en changeant
tout le systeme de tailles. */
.stat .v,.stat b,.stat strong,.s-v{
font-size:clamp(14px, 4.6vw, 22px) !important;
}
/* La carte ne doit pas rogner le chiffre qu'elle contient. */
.stat,.stat>*{min-width:0}
.stat{overflow:visible !important}
/* Les quatre boutons de mesure du graphique etaient a 38 px. */
.c-mesures{
display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.c-mesures::-webkit-scrollbar{display:none}
.c-mesures button{
flex:0 0 auto;min-height:44px !important;padding:0 13px !important;
font-size:var(--m-s) !important;border-radius:10px;
}
/* « Voir tout » : 40 px, et c'est un lien qu'on vise au pouce. */
.lien-tout{
min-height:44px !important;display:inline-flex !important;
align-items:center;padding:0 4px;
font-size:var(--m-s) !important;font-weight:650;
color:var(--bleu) !important;
}
/* La variation : petite, mais colorée, donc lue en premier. */
.var,.s-e{
font-size:12.5px !important;font-weight:700;
padding:2px 7px !important;border-radius:7px;
}
/* =====================================================================
6. LA CARTE COMMANDE — L'ECRAN LE PLUS UTILISE
MESURE sur cet ecran : 48 textes sous 12,5 px, 28 zones tactiles
sous 44 px. C'est l'ecran ou le marchand passe sa journee.
Ce qu'il fait, dans l'ordre : il lit le nom, il lit le montant, il
appelle ou il ecrit sur WhatsApp, il fait avancer la commande. La
hierarchie visuelle suit exactement cet ordre.
===================================================================== */
/* CALCUL, pas tatonnement. Sur 360 px :
contenu 360 - 2x16 de marge = 328 px de carte
carte 328 - 2x14 de marge int. = 300 px utiles
moins le bouton « … » (44) = 256
moins les deux ecarts (2x8) = 240
soit 120 px par bouton d'action.
Le libelle le plus long, « Marquer livrée » avec son icone,
demande 100 px de contenu + 16 px de marge = 116 px. Il tient,
avec 4 px de reserve. Mesure refaite apres coup pour le verifier. */
.cmd{
padding:14px !important;margin-bottom:11px !important;
border-radius:var(--m-r) !important;
}
.cmd-h{margin-bottom:11px !important;gap:12px;align-items:flex-start}
/* La reference et la date : la ligne la moins importante, mais
lisible. Elle etait a 11,5 px en police a chasse fixe, ce qui la
rendait encore plus petite a l'oeil. */
.cmd-ref{
font-size:var(--m-xs) !important;
font-family:inherit !important;
letter-spacing:0 !important;
color:var(--texte-3) !important;
}
/* Le nom du client : c'est LUI qu'on cherche en parcourant la
liste. Il devient l'element le plus gros de la carte. */
.cmd-nom{
font-size:17px !important;font-weight:700 !important;
letter-spacing:-.03em;margin-top:2px !important;
color:var(--texte) !important;line-height:1.25;
}
.cmd-prod{
font-size:var(--m-s) !important;color:var(--texte-2) !important;
margin-top:4px;display:flex;align-items:center;gap:6px;
}
/* Le montant : vert, parce que c'est de l'argent, et aligne a
droite sur des chiffres tabulaires pour que la colonne soit
droite d'une carte a l'autre. */
.cmd-total{
font-size:18px !important;font-weight:780 !important;
color:var(--vert) !important;
font-variant-numeric:tabular-nums;white-space:nowrap;
letter-spacing:-.035em;
}
/* La pastille d'etat. Elle etait a 11,5 px : c'est pourtant elle qui
dit si la commande est payee, partie ou perdue. On la monte a
12,8 px — sous le plancher de 13 px de deux dixiemes, parce
qu'au-dela elle force le montant a passer a la ligne sur 360 px.
Mesure faite : a 13,5 px, la colonne de droite deborde. */
.etat,.et{
font-size:12.8px !important;font-weight:700 !important;
padding:4px 10px !important;border-radius:8px !important;
letter-spacing:0;margin-top:5px;display:inline-block;
white-space:nowrap;
}
.cmd-info{
font-size:var(--m-s) !important;gap:7px !important;
margin-bottom:12px !important;color:var(--texte-2) !important;
padding-top:11px;border-top:1px solid var(--fond-2);
}
.cmd-info div{display:flex;align-items:center;gap:8px;min-height:24px}
.cmd-info svg{flex:0 0 15px;color:var(--texte-3) !important}
/* Le numero est un lien d'appel : il doit se voir comme tel. */
.cmd-info a[href^="tel:"]{
color:var(--bleu) !important;font-weight:650;
font-variant-numeric:tabular-nums;
}
.cmd-mot{
font-size:var(--m-s) !important;padding:10px 12px !important;
border-radius:10px;border-left:3px solid var(--vert) !important;
line-height:1.5;
}
/* Les deux actions : pleine hauteur, pleine largeur, impossibles a
rater avec un pouce.
MESURE : avec les 18 px de marge interne des boutons ordinaires,
« Marquer livrée » demandait 136 px dans un bouton de 115 px, et
meme « WhatsApp » debordait de 4 px. Le texte etait tranche net.
Sur une carte de commande, deux boutons se partagent la largeur
moins le bouton « … » : la marge interne doit y etre plus serree
qu'ailleurs. Verifie a 10 px : tous les libelles tiennent. */
.cmd-b{gap:8px}
.cmd-b .btn{
flex:1 1 0;min-width:0;
min-height:46px !important;
padding:0 8px !important;
font-size:13.8px !important;font-weight:680;
border-radius:var(--m-r-s) !important;
display:inline-flex;align-items:center;justify-content:center;gap:5px;
white-space:nowrap;
}
.cmd-b .btn svg{flex:0 0 15px}
/* Le bouton « … » garde 44 px : c'est le minimum tactile, et chaque
pixel qu'il prend est enleve aux deux libelles. */
.cmd-plus{
flex:0 0 44px;width:44px;height:46px;
border-radius:var(--m-r-s);
}
/* La case de selection multiple (appui long) : 44 px reels. */
.cmd-case{
width:26px;height:26px;flex:0 0 26px;border-radius:8px;
}
.cmd.sel{
border-color:var(--bleu) !important;
box-shadow:0 0 0 2px var(--halo) !important;
}
/* =====================================================================
7. LES FILTRES ET ONGLETS QUI DEFILENT
MESURE : sur l'ecran Commandes, les onglets de statut depassaient
jusqu'a 609 px sur un ecran de 360 px. Ce n'est pas un defaut — ils
defilent horizontalement. Mais RIEN ne l'indiquait : le marchand
voyait « Toutes / Nouvelles / A livrer / En… » et croyait que
l'application etait cassee.
On ajoute un degrade sur le bord droit : le contenu s'estompe au
lieu d'etre tranche net. L'oeil comprend alors qu'il y a une suite.
===================================================================== */
.onglets-cmd,.filtres{
display:flex !important;flex-wrap:nowrap !important;
overflow-x:auto;overflow-y:hidden;
gap:8px !important;margin:0 calc(-1 * var(--m-pad)) var(--m-gap);
padding:2px var(--m-pad) 6px;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity;
/* Le degrade de bord : les 24 derniers pixels s'effacent. */
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%);
mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%);
}
.onglets-cmd::-webkit-scrollbar,
.filtres::-webkit-scrollbar{display:none}
.onglets-cmd button,.filtres button{
flex:0 0 auto;scroll-snap-align:start;
min-height:44px !important;padding:0 15px !important;
border-radius:11px !important;
font-size:var(--m-s) !important;font-weight:620 !important;
white-space:nowrap;
background:var(--m-surface) !important;border:1px solid var(--bord) !important;
color:var(--texte-2) !important;
display:inline-flex;align-items:center;gap:7px;
}
.onglets-cmd button.on,.filtres button.on{
background:var(--bleu) !important;border-color:var(--bleu) !important;
color:#fff !important;font-weight:700 !important;
}
.onglets-cmd button.on i{background:rgba(255,255,255,.24) !important;color:#fff !important}
/* =============================================================
LES SOUS-ONGLETS
BUG QUE J'AI INTRODUIT EN v52, SIGNALE PAR LE MARCHAND ET
MESURE : « pourquoi tu as deforme l'onglet administration ».
J'avais ecrit une grille a colonnes egales (`grid-auto-columns:1fr`)
en pensant au seul cas que j'avais sous les yeux : deux onglets,
« Commandes / Paniers perdus ». Mais Administration en a SEPT.
Mesure au navigateur : sept colonnes de 42,28 px pour des
libelles qui demandent de 53 a 143 px. « Produits gagnants »
avait 42 px pour 143 px de texte. Tout etait ecrase.
LA REGLE : une grille a colonnes egales n'est bonne que si les
libelles tiennent. On ne l'applique donc QUE de deux a trois
onglets, via `:has()`. Au-dela, le rail defile horizontalement
comme les filtres, avec le degrade de bord qui annonce la suite.
============================================================= */
/* Cas general : un rail qui defile. C'est le repli sur : il est
correct quel que soit le nombre d'onglets. */
.sous-onglets{
display:flex;flex-wrap:nowrap;
overflow-x:auto;overflow-y:hidden;
gap:4px;background:var(--fond-2);padding:4px;
border-radius:13px;margin-bottom:var(--m-gap);
scrollbar-width:none;-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity;
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),transparent 100%);
mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),transparent 100%);
}
.sous-onglets::-webkit-scrollbar{display:none}
.sous-onglets button{
flex:0 0 auto;scroll-snap-align:start;
min-height:46px;padding:0 14px;
border:0;background:transparent;border-radius:10px;
font-family:inherit;font-size:var(--m-s);font-weight:650;
color:var(--texte-2);cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
white-space:nowrap;
}
.sous-onglets button.on{
background:var(--m-surface);color:var(--texte);font-weight:700;
box-shadow:var(--m-ombre);
}
/* Deux ou trois onglets seulement : ils tiennent tous, on retrouve
l'interrupteur qui remplit la largeur. `:has()` compte les
enfants ; le selecteur ne matche que s'il y a exactement 2 ou 3
boutons visibles. */
.sous-onglets:has(button:nth-child(2)):not(:has(button:nth-child(4))){
display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
-webkit-mask-image:none;mask-image:none;
overflow:visible;
}
.sous-onglets:has(button:nth-child(2)):not(:has(button:nth-child(4))) button{
padding:0 8px;min-width:0;
overflow:hidden;text-overflow:ellipsis;display:flex;
}
/* =====================================================================
8. LES BOUTONS
Une seule regle : sur telephone, un bouton se vise avec un pouce en
mouvement, dans un taxi ou au marche. 48 px de haut, partout.
===================================================================== */
.btn{
min-height:var(--m-tap) !important;
padding:0 18px !important;
border-radius:var(--m-r-s) !important;
font-size:var(--m-m) !important;font-weight:680 !important;
letter-spacing:-.01em;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
transition:transform .12s var(--tr),box-shadow .18s;
}
/* La reponse au doigt : le bouton s'enfonce. Sans retour tactile,
sur une connexion lente, le marchand appuie trois fois — c'est
exactement ce qui creait les doublons. */
.btn:active{transform:scale(.975)}
.btn-p{
background:var(--bleu) !important;color:#fff !important;border:0 !important;
box-shadow:0 2px 8px -2px rgba(79,70,229,.4) !important;
}
.btn-p:active{box-shadow:0 1px 3px rgba(79,70,229,.3) !important}
.btn-v{
background:var(--vert) !important;color:#fff !important;border:0 !important;
box-shadow:0 2px 8px -2px rgba(5,150,105,.35) !important;
}
.btn-s{
background:var(--m-surface) !important;color:var(--texte) !important;
border:1px solid var(--bord) !important;
}
.btn-s:active{background:var(--fond-2) !important}
.btn-full{width:100%}
/* Un bouton desactive doit se voir desactive, sinon on appuie. */
.btn:disabled,.btn[disabled]{opacity:.5;transform:none !important}
/* =====================================================================
9. LES FORMULAIRES
MESURE sur Reglages : libelles a 11,6 px en capitales espacees,
champs de 44 px. Le libelle « TÉLÉPHONE » etait plus petit que la
valeur qu'il decrivait.
Point critique Android : un champ dont la police est sous 16 px
declenche un ZOOM AUTOMATIQUE a la mise au point. L'ecran saute,
deborde, et le marchand doit pincer pour revenir. Tous les champs
passent donc a 16 px exactement.
===================================================================== */
.champ{margin-bottom:16px}
.champ label,.champ>label{
display:block;
font-size:var(--m-s) !important;font-weight:650 !important;
text-transform:none !important;letter-spacing:0 !important;
color:var(--texte) !important;margin-bottom:7px;
}
.champ input,.champ select,.champ textarea,
input[type=text],input[type=tel],input[type=email],
input[type=number],input[type=password],input[type=search],
input[type=url],select,textarea{
width:100%;
font-size:16px !important; /* anti-zoom Android : ne pas baisser */
min-height:var(--m-tap) !important;
padding:12px 14px !important;
border-radius:var(--m-r-s) !important;
background:var(--m-surface) !important;
border:1.5px solid var(--bord) !important;
color:var(--texte) !important;
transition:border-color .16s,box-shadow .16s;
-webkit-appearance:none;appearance:none;
}
textarea{min-height:110px !important;line-height:1.55;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus,
input:focus,select:focus,textarea:focus{
outline:0 !important;
border-color:var(--bleu) !important;
box-shadow:0 0 0 3px var(--halo) !important;
}
/* La fleche du menu deroulant, redessinee : `appearance:none`
supprime celle d'Android et laissait un champ qui ne ressemblait
plus a un choix. */
select{
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important;
background-position:right 14px center !important;
padding-right:40px !important;
}
.aide,.champ small{
display:block;font-size:var(--m-xs) !important;
color:var(--texte-3) !important;margin-top:6px;line-height:1.5;
}
/* Deux champs cote a cote : sur 360 px, chacun ferait 155 px. Un
numero de telephone n'y tient pas. On empile, sauf pour les
couples courts (prix / prix barre). */
.f-row{display:grid;grid-template-columns:1fr;gap:0 12px}
.f-row.court{grid-template-columns:1fr 1fr}
.champ input[type=color]{
width:56px;height:48px;padding:4px !important;flex:0 0 56px;
}
.coul-ligne{display:flex;gap:10px;align-items:center}
.coul-hex{flex:1;min-width:0}
/* =====================================================================
10. LES SECTIONS DE REGLAGES (accordeons)
===================================================================== */
.reg-g{margin-bottom:18px}
.reg-g-t{font-size:var(--m-l) !important;font-weight:700;letter-spacing:-.03em}
.reg-g-t small,.reg-g p{font-size:var(--m-s) !important;color:var(--texte-3) !important}
.acc{
border-radius:var(--m-r) !important;
border:1px solid var(--bord) !important;
box-shadow:var(--m-ombre) !important;background:var(--m-surface) !important;
margin-bottom:11px;overflow:hidden;
}
.acc-h{
min-height:64px;padding:13px 15px !important;
display:flex;align-items:center;gap:13px;cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.acc-h:active{background:var(--fond-2)}
.acc-t b{font-size:var(--m-m) !important;font-weight:680;display:block}
.acc-t small{
font-size:var(--m-xs) !important;color:var(--texte-3) !important;
display:block;margin-top:2px;line-height:1.4;
}
.acc-ic{
flex:0 0 40px;width:40px;height:40px;border-radius:11px;
display:grid;place-items:center;
}
/* LE REPLI DOIT ETRE UN VRAI REPLI — CORRECTIF v53.
BUG QUE J'AI INTRODUIT EN v52, SIGNALE PAR LE MARCHAND :
« meme si on clique sur reglage, ca ne s'ouvre pas, l'onglet,
tout ca, ca va l'ouvrir a chaque fois ».
LA CAUSE, MESUREE. Le repli de dashboard.css se fait par
`grid-template-rows:0fr` sur `.acc-c`. J'avais pose sur ce meme
element un `padding:0 15px 15px`. Une marge interne s'applique
MEME quand la rangee de grille vaut zero : chaque section repliee
conservait donc 15 px de hauteur visible. Mesure au navigateur :
six sections « fermees » occupaient 15 px chacune au lieu de 0.
A l'ecran, les Reglages paraissaient tous entrouverts.
LA REGLE : la marge interne ne va PAS sur l'element qui se replie,
mais sur son contenu (`.acc-in`), qui est masque avec lui. */
.acc-c{padding:0 !important}
.acc-in>*{padding-left:15px !important;padding-right:15px !important}
.acc-in>*:last-child{padding-bottom:15px !important}
.acc-fl{flex:0 0 auto;color:var(--texte-3);transition:transform .22s var(--tr)}
.acc.on .acc-fl{transform:rotate(180deg)}
/* L'interrupteur : 52x30, la taille d'Android. Avant il etait plus
petit que le doigt qui l'actionne. */
.bascule{flex:0 0 52px;width:52px;height:30px}
/* =====================================================================
11. LES TITRES D'ECRAN ET LES ETATS VIDES
===================================================================== */
.vue>h2,.vue>.v-tete h2{
font-size:var(--m-xxl) !important;font-weight:800 !important;
letter-spacing:-.04em;margin-bottom:5px;line-height:1.2;
}
.vue>p,.vue>.v-tete p{
font-size:var(--m-s) !important;color:var(--texte-3) !important;
margin-bottom:var(--m-gap);line-height:1.5;
}
.salut-t{font-size:var(--m-xxl) !important;letter-spacing:-.04em}
.salut-s{font-size:var(--m-s) !important}
/* Le selecteur de periode de l'accueil : son libelle etait a
11,6 px alors que c'est lui qui dit sur quoi portent TOUS les
chiffres de l'ecran. Un marchand qui lit « 119 200 F » sans
savoir si c'est le mois ou l'annee ne sait rien. */
.periode-btn{
min-height:46px !important;font-size:var(--m-s) !important;
font-weight:650 !important;border-radius:11px !important;
}
.periode-btn span,.periode-btn #periodeTxt{font-size:var(--m-s) !important}
/* La mention des formats acceptes, sous la zone de depot. */
.video-info,.video-meta,.champ-insc small,.zone-depot small,
.depot small{
font-size:var(--m-xs) !important;color:var(--texte-3) !important;
}
/* La carte « Performance globale » de l'accueil : c'est le premier
bloc que le marchand voit en ouvrant l'application. Son titre
etait a 11,5 px et ses unites a 11,6 px. */
.hp-l{
font-size:var(--m-s) !important;font-weight:680 !important;
letter-spacing:0 !important;text-transform:none !important;
color:var(--texte-2) !important;
}
.hp-p{font-size:var(--m-xs) !important;color:var(--texte-3) !important}
.hp-i span{font-size:var(--m-xs) !important;color:var(--texte-3) !important}
.hp-i b{font-size:var(--m-l) !important;font-weight:750;
font-variant-numeric:tabular-nums}
/* Un ecran vide doit proposer quelque chose, pas constater un
manque. */
.vide,.etat-vide{
text-align:center;padding:44px 20px !important;
}
.vide svg,.etat-vide svg{opacity:.3;margin-bottom:14px}
.vide b,.etat-vide b,.vide h3{
display:block;font-size:var(--m-l) !important;font-weight:700;
margin-bottom:6px;color:var(--texte) !important;
}
.vide p,.etat-vide p{
font-size:var(--m-s) !important;color:var(--texte-3) !important;
margin-bottom:18px;line-height:1.55;
}
/* =====================================================================
12. LES PRODUITS
===================================================================== */
.prod{margin-bottom:11px;display:flex;gap:13px;padding:12px !important;
align-items:center}
.prod-img,.prod img{
flex:0 0 68px;width:68px;height:68px;border-radius:var(--m-r-s);
object-fit:cover;background:var(--fond-2);
}
.prod-i{flex:1;min-width:0}
.prod-n{
font-size:var(--m-m) !important;font-weight:680;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.prod-p{
font-size:var(--m-l) !important;font-weight:750;color:var(--texte);
font-variant-numeric:tabular-nums;margin-top:3px;
}
/* =====================================================================
13. LES FENETRES ET LES FEUILLES
Sur telephone, une fenetre centree avec un fond sombre autour est
un motif d'ordinateur. La convention Android, c'est la feuille qui
monte du bas : elle reste sous le pouce, et on la referme en la
poussant vers le bas.
===================================================================== */
.modale{
align-items:flex-end !important;
padding:0 !important;
}
.mod-boite{
width:100% !important;max-width:100% !important;
max-height:92vh !important;
border-radius:22px 22px 0 0 !important;
animation:m-monte .26s var(--tr);
display:flex;flex-direction:column;
}
@keyframes m-monte{from{transform:translateY(100%)}to{transform:none}}
/* La poignee grise en haut : elle dit « ceci se pousse vers le
bas ». Sans elle, le marchand cherche la croix. */
.mod-boite::before{
content:'';display:block;flex:0 0 auto;
width:38px;height:4px;border-radius:3px;
background:var(--bord-clair);margin:9px auto 3px;
}
.mod-h{
padding:10px 16px 12px !important;flex:0 0 auto;
border-bottom:1px solid var(--fond-2);
display:flex;align-items:center;gap:10px;
}
.mod-h h2{font-size:var(--m-xl) !important;font-weight:720;letter-spacing:-.03em;
flex:1;min-width:0}
.mod-x{
flex:0 0 40px;width:40px;height:40px;border-radius:50%;
background:var(--fond-2) !important;border:0 !important;
font-size:23px;color:var(--texte-2) !important;
display:grid;place-items:center;
}
.mod-c{
padding:16px !important;overflow-y:auto;flex:1;
padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important;
-webkit-overflow-scrolling:touch;
}
.feuille-boite{
border-radius:22px 22px 0 0;
padding:8px var(--m-pad) calc(16px + env(safe-area-inset-bottom));
}
.feuille-boite::before{
content:'';display:block;width:38px;height:4px;border-radius:3px;
background:var(--bord-clair);margin:0 auto 12px;
}
.fp-item{min-height:54px;font-size:var(--m-m)}
/* =====================================================================
14. LE MESSAGE DE CONFIRMATION
Il apparaissait en bas, derriere la barre d'onglets : le marchand ne
voyait jamais « Commande confirmee ». Il remonte au-dessus.
===================================================================== */
.nx-notif,.toast{
left:var(--m-pad) !important;right:var(--m-pad) !important;
bottom:calc(78px + env(safe-area-inset-bottom)) !important;
width:auto !important;max-width:none !important;
border-radius:13px !important;
font-size:var(--m-s) !important;
padding:13px 15px !important;
box-shadow:var(--m-ombre-h) !important;
}
/* =====================================================================
15. LA BARRE DE SELECTION MULTIPLE
===================================================================== */
.cmd-barre{
position:fixed;left:0;right:0;
bottom:calc(62px + env(safe-area-inset-bottom));
z-index:75;padding:11px var(--m-pad);
/* Opaque, pour la meme raison que la barre du bas. */
background:var(--m-surface);
border-top:1px solid var(--bord);
display:flex;gap:9px;align-items:center;
box-shadow:0 -4px 20px rgba(15,23,42,.08);
}
.cmd-barre .btn{flex:1;min-height:46px !important;font-size:var(--m-s) !important}
/* =====================================================================
16. L'ABONNEMENT — L'ECRAN QUI DECIDE DE LA CONVERSION
C'est l'ecran de la formation de demain. Il doit etre le plus soigne
des trente.
===================================================================== */
.abo-bloc{margin-bottom:var(--m-gap)}
.abo-pas{
padding:15px !important;border-radius:var(--m-r);
font-size:var(--m-s) !important;line-height:1.55;
}
.abo-pied{
position:sticky;bottom:calc(70px + env(safe-area-inset-bottom));
z-index:20;padding:11px 0 0;
background:linear-gradient(180deg,transparent,#f6f8fb 32%);
}
.abo-pied .btn{width:100%;min-height:54px !important;font-size:var(--m-l) !important;
font-weight:720 !important}
/* Le prix : le chiffre que le marchand regarde avant de decider. */
.abo-prix{
font-size:30px !important;font-weight:800;letter-spacing:-.045em;
font-variant-numeric:tabular-nums;line-height:1.1;
}
.abo-prix small{font-size:var(--m-s);font-weight:600;color:var(--texte-3)}
/* =====================================================================
17. LES ANALYSES
===================================================================== */
.graphe{overflow-x:auto;-webkit-overflow-scrolling:touch}
.graphe svg,.graphe canvas{min-width:100%}
.piste{min-height:10px;border-radius:6px}
.lib{font-size:var(--m-s) !important}
/* =====================================================================
18. LE MENU LATERAL EN TIROIR
Il reste masque : la barre du bas suffit. Mais s'il s'ouvre un jour
(bouton hamburger reactive), il doit etre correct plutot que casse.
===================================================================== */
.cote.ouvert{
display:flex !important;flex-direction:column;
position:fixed;top:0;bottom:0;left:0;z-index:120;
width:min(84vw,300px);padding:20px 14px;
background:var(--m-surface);box-shadow:8px 0 40px rgba(15,23,42,.18);
overflow-y:auto;animation:m-glisse .24s var(--tr);
}
@keyframes m-glisse{from{transform:translateX(-100%)}to{transform:none}}
.cote.ouvert nav button{min-height:50px;font-size:var(--m-m)}
/* =====================================================================
19. DETAILS QUI FONT LA DIFFERENCE A L'USAGE
===================================================================== */
/* Le defilement par inertie, comme une application native. */
.contenu,.mod-c,.nt-p,.rg-res{-webkit-overflow-scrolling:touch}
/* On ne rebondit pas au-dela du contenu : sur Android, cela declenche
parfois le rechargement de la page en plein travail. */
body{overscroll-behavior-y:contain}
/* Un nom de produit ou un courriel long ne doit jamais elargir la
page. RAPPEL DE L'INCIDENT v36 : `overflow-x:hidden` sur un
conteneur FORCE `overflow-y:auto` et casse le defilement vertical
de toute l'application. On utilise `clip`, qui coupe sans creer de
zone de defilement. */
.cmd,.carte,.prod,.acc,.stat{overflow-x:clip}
.cmd-nom,.prod-n,.acc-t b,.pf-id b{overflow-wrap:anywhere}
/* Le clavier Android recouvre la moitie de l'ecran : un champ en bas
de formulaire se retrouve dessous. On laisse de la place. */
.mod-c form,.vue form{scroll-padding-bottom:120px}
/* Les liens et boutons ne doivent pas garder un fond gris fantome
apres l'appui (defaut d'Android). */
a,button{-webkit-tap-highlight-color:transparent}
/* Batterie faible ou reglage systeme : on coupe les animations. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;animation-iteration-count:1 !important;
transition-duration:.01ms !important;
}
}
} /* fin @media (max-width:900px) */
/* =====================================================================
20. LE TRES PETIT ECRAN (moins de 360 px)
Le Tecno et l'Itel les plus repandus a Niamey font 320 px de large
en pixels CSS. A cette largeur, deux boutons cote a cote ne tiennent
plus.
===================================================================== */
@media (max-width:359px){
:root{--m-pad:13px}
.barre-bas .bb{font-size:10.4px}
.barre-bas .bb svg{width:21px;height:21px}
.cmd-b{flex-wrap:wrap}
.cmd-b .btn{flex:1 1 100%}
.cmd-plus{flex:0 0 100%;width:100%}
.stats{grid-template-columns:1fr !important}
.cmd-nom{font-size:16px !important}
.cmd-total{font-size:17px !important}
}
/* =====================================================================
21. LE TELEPHONE COUCHE
Un marchand tourne son telephone pour lire un tableau. La hauteur
tombe alors a 360 px : une barre du bas de 62 px plus un en-tete de
64 px mangent un tiers de l'ecran.
===================================================================== */
@media (max-height:480px) and (orientation:landscape){
.barre-bas .bb{height:50px;font-size:10.4px}
.barre-bas .bb svg{width:19px;height:19px}
.haut{padding-top:6px !important;padding-bottom:6px !important}
.contenu{padding-bottom:calc(62px + env(safe-area-inset-bottom)) !important}
.stats{grid-template-columns:repeat(4,1fr) !important}
}
/* =====================================================================
22. LES LIBELLES COURTS
Voir la note en fin de dashboard.css. Sur telephone, « Marquer
livrée » (134 px mesures) ne tient pas dans un bouton de 119 px :
on affiche « Livrée », l'icone de validation portant le reste du
sens. La version longue reste servie a l'ordinateur.
===================================================================== */
@media (max-width:900px){
.t-long{display:none}
.t-court{display:inline}
}
/* =====================================================================
23. LE CHOIX DE L'APPARENCE, AU BAS DES REGLAGES
Trois boutons plutot qu'un interrupteur : « clair », « sombre »,
« comme le telephone ». Un interrupteur a deux positions ne sait pas
dire « suis mon telephone », qui est pourtant le reglage par defaut.
Ces regles sont hors media query : la carte doit etre correcte sur
telephone ET sur ordinateur, ou elle est desormais visible aussi.
===================================================================== */
.th-carte{margin-top:18px}
.th-choix{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.th-opt{
flex:1 1 auto;min-width:104px;min-height:48px;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:0 14px;border-radius:12px;cursor:pointer;
background:var(--carte);border:1.5px solid var(--bord);
font-family:inherit;font-size:14px;font-weight:640;color:var(--texte-2);
transition:border-color .16s,background .16s,color .16s;
-webkit-tap-highlight-color:transparent;
}
.th-opt svg{flex:0 0 19px}
.th-opt:active{transform:scale(.98)}
.th-opt.on{
border-color:var(--bleu);background:var(--bleu-clair);
color:var(--bleu);font-weight:720;
}
@media (max-width:900px){
/* Sur 360 px, trois boutons cote a cote font 104 px chacun et
« Comme le telephone » ne tient pas. On les empile. */
.th-choix{flex-direction:column}
.th-opt{width:100%;justify-content:flex-start;font-size:15px}
}
/* =====================================================================
24. LE MODE SOMBRE SUR TELEPHONE
dashboard.css pose `rgba(15,18,25,.94)` sur l'en-tete et la barre du
bas en mode sombre. Mesure : sur telephone, `backdrop-filter` vaut
`none` (voir la note en section 3) — donc 6 % de transparence SANS
flou, et les cartes se devinent derriere les onglets. Exactement le
defaut corrige en mode clair.
On opacifie les deux surfaces. Meme raisonnement, meme correction.
===================================================================== */
@media (max-width:900px){
[data-theme="sombre"] .haut,
[data-theme="sombre"] .barre-bas{
background:var(--carte) !important;
border-color:var(--bord) !important;
}
/* Sur fond sombre, une ombre noire ne se voit pas : c'est la
bordure qui detache la barre du contenu. */
[data-theme="sombre"] .barre-bas{
box-shadow:none;
border-top:1px solid var(--bord-clair) !important;
}
/* La pastille active : le bleu clair du mode jour serait aveuglant. */
[data-theme="sombre"] .barre-bas .bb.on::before{
background:rgba(129,140,248,.16);
}
/* Les cartes de commande : `--m-surface` les suit deja, mais les
champs de formulaire portaient un blanc herite. */
[data-theme="sombre"] input,
[data-theme="sombre"] select,
[data-theme="sombre"] textarea{
background:var(--fond-2) !important;
border-color:var(--bord) !important;
color:var(--texte) !important;
}
}
/* =====================================================================
25. LA FEUILLE « PLUS » — CORRECTIF v53
Elle donne acces aux six vues que la barre du bas ne peut pas
porter. Sans elle, un marchand qui travaille au telephone ne
pouvait ouvrir ni SKELIA Delivery, ni les produits gagnants, ni
son abonnement : ces ecrans n'avaient aucun chemin.
Hors media query : la feuille doit rester correcte si elle est
ouverte sur une tablette en mode portrait.
===================================================================== */
.plus-grille{display:flex;flex-direction:column;gap:2px}
.plus-i{
position:relative;
display:grid;grid-template-columns:auto 1fr;
grid-template-areas:"ic titre" "ic desc";
gap:1px 13px;align-items:center;
width:100%;min-height:62px;padding:11px 12px;
border:0;border-radius:12px;background:transparent;cursor:pointer;
text-align:left;font-family:inherit;
-webkit-tap-highlight-color:transparent;
transition:background .14s;
}
.plus-i:active{background:var(--fond-2)}
.plus-ic{
grid-area:ic;
width:42px;height:42px;border-radius:12px;flex:0 0 42px;
display:grid;place-items:center;
background:var(--fond-2);color:var(--texte-2);
}
.plus-ic.or{background:#fffbeb;color:#d97706}
.plus-ic.vert{background:#ecfdf5;color:#059669}
.plus-ic.violet{background:#f5f3ff;color:#7c3aed}
.plus-ic.bleu{background:#eef2ff;color:#4f46e5}
.plus-ic.rouge{background:#fef2f2;color:#dc2626}
.plus-i b{
grid-area:titre;
font-size:15.4px;font-weight:680;color:var(--texte);line-height:1.3;
}
.plus-i small{
grid-area:desc;
font-size:13px;color:var(--texte-3);line-height:1.4;
}
/* La pastille de compteur, calee a droite de la ligne. */
.plus-i .pastille{
position:absolute;right:12px;top:50%;transform:translateY(-50%);
min-width:22px;height:22px;padding:0 7px;border-radius:11px;
background:var(--rouge);color:#fff;
font-size:12px;font-weight:750;
display:grid;place-items:center;
}
.plus-i .pastille[hidden]{display:none}
.plus-voir{
display:flex;align-items:center;justify-content:center;gap:9px;
min-height:50px;margin-top:10px;
border-top:1px solid var(--bord);padding-top:14px;
font-size:14.5px;font-weight:650;color:var(--bleu);
text-decoration:none;
}
/* En mode sombre, les pastilles colorees doivent s'assombrir : un
fond `#fffbeb` sur du noir brille comme une lampe. */
[data-theme="sombre"] .plus-ic{background:var(--fond-2);color:var(--texte-2)}
[data-theme="sombre"] .plus-ic.or{background:#2a2113;color:#fbbf24}
[data-theme="sombre"] .plus-ic.vert{background:#0e2a20;color:#34d399}
[data-theme="sombre"] .plus-ic.violet{background:#231b3d;color:#a78bfa}
[data-theme="sombre"] .plus-ic.bleu{background:#1e2340;color:#818cf8}
[data-theme="sombre"] .plus-ic.rouge{background:#2d1618;color:#f87171}
/* La feuille ouverte bloque le defilement de la page derriere elle :
sans cela, le doigt fait defiler la liste des commandes au lieu de
la feuille. */
body.feuille-ouverte{overflow:hidden}
@media (max-width:900px){
/* La feuille passe au-dessus de la barre du bas (z-index 80). */
.feuille{z-index:200}
#feuillePlus .feuille-boite{
max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
}
/* =====================================================================
26. LE VERROU DE FORMATION — v54
L'ecran que voit quelqu'un qui vient d'une formation et n'a pas
encore paye. Il doit donner envie, pas faire peur : la boutique est
deja la, nommee, il ne manque qu'un geste.
Hors media query : cet ecran doit etre juste sur telephone ET sur
l'ordinateur du formateur qui fait la demonstration.
===================================================================== */
.vf-liste{
display:flex;flex-direction:column;gap:9px;
text-align:left;margin:18px 0;
}
.vf-liste span{
display:flex;align-items:flex-start;gap:10px;
font-size:14.6px;line-height:1.45;color:var(--texte-2);
}
.vf-liste svg{flex:0 0 15px;margin-top:2px;color:var(--vert)}
/* L'offre : un encadre qui se detache, sans clignoter. */
.vf-offre{
border:1.5px solid var(--bleu);
background:var(--bleu-clair);
border-radius:14px;padding:14px;margin:18px 0 4px;
}
.vf-offre.fini{
border-color:var(--bord);background:var(--fond-2);opacity:.65;
}
.vf-offre-h{
display:flex;align-items:center;justify-content:center;
gap:10px;flex-wrap:wrap;
}
.vf-code{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:16px;font-weight:800;letter-spacing:.08em;
color:var(--bleu);
background:var(--m-surface,#fff);
border:1px dashed var(--bleu);
padding:6px 13px;border-radius:9px;
}
.vf-remise{
font-size:15.5px;font-weight:800;color:var(--vert);
font-variant-numeric:tabular-nums;
}
.vf-rebours{margin-top:12px}
.vf-r-l{
display:block;font-size:13px;color:var(--texte-2);margin-bottom:4px;
}
.vf-r-t{
display:block;
font-size:27px;font-weight:800;letter-spacing:.01em;
font-variant-numeric:tabular-nums;
color:var(--bleu);line-height:1.15;
}
/* Sous une heure : rouge. L'urgence est reelle, elle vient de la date
de fin enregistree en base — jamais d'un faux compteur. */
.vf-rebours.presse .vf-r-t{color:var(--rouge)}
.vf-offre-p{
font-size:12.8px;color:var(--texte-3);
margin:10px 0 0;line-height:1.45;
}
@media (max-width:900px){
.verrou-formation .verrou-b{padding:22px 18px}
.verrou-formation h2{font-size:21px;line-height:1.25}
.vf-r-t{font-size:31px}
.vf-liste span{font-size:14.2px}
/* Le bouton d'activation reste sous le pouce, toujours visible. */
.verrou-formation .verrou-act .btn{
width:100%;min-height:54px !important;font-size:16.5px !important;
font-weight:720 !important;
}
}
[data-theme="sombre"] .vf-offre{background:#1e2340;border-color:var(--bleu)}
[data-theme="sombre"] .vf-code{background:var(--carte)}
/* =====================================================================
27. LES ACTIONS D'ADMINISTRATION SUR UNE CARTE DE COMPTE — v55
MESURE : avec les deux nouveaux boutons de fermeture, la carte
comptait cinq actions qui s'empilaient chacune sur sa ligne. La
carte faisait plus d'un ecran de haut pour UN seul compte, et il
fallait defiler longuement pour voir le marchand suivant.
Deux colonnes : on voit deux fois plus de comptes, et chaque bouton
garde 44 px de haut. L'action rouge, elle, prend la ligne entiere :
fermer un acces ne doit jamais se cliquer par erreur en visant le
bouton d'a cote.
===================================================================== */
@media (max-width:900px){
.bq-b{
display:grid;grid-template-columns:1fr 1fr;gap:8px;
margin-top:12px;
}
.bq-b .btn{
min-height:44px !important;
padding:0 10px !important;
font-size:13.4px !important;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
display:inline-flex;align-items:center;justify-content:center;
}
/* L'action irreversible occupe sa propre ligne, en tete. */
.bq-b .btn-r{
grid-column:1 / -1;
order:-1;
font-weight:700 !important;
}
/* La carte de compte respire un peu moins : on en voit plus. */
.bq{padding:14px !important;margin-bottom:11px}
.bq-h h3{font-size:17px;font-weight:720;letter-spacing:-.03em}
.bq .slug{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:12.6px;color:var(--texte-3);margin-top:2px;
}
.bq-info{
display:grid;gap:6px;margin-top:11px;
font-size:13.4px;color:var(--texte-2);
padding-top:10px;border-top:1px solid var(--fond-2);
}
.bq-info div{display:flex;align-items:center;gap:8px}
.bq-info svg{flex:0 0 14px;color:var(--texte-3)}
.etat-abo{
font-size:12.6px !important;font-weight:700;
padding:4px 10px !important;border-radius:8px;white-space:nowrap;
}
}
/* Sur un tres petit ecran, deux colonnes donnent 140 px par bouton :
« Changer la formule » n'y tient pas. On repasse en pleine largeur. */
@media (max-width:359px){
.bq-b{grid-template-columns:1fr}
}
/* =====================================================================
28. AUDIT v56 — CE QUE LA MESURE A TROUVE
Trois ecrans avaient encore des defauts, releves au navigateur en
360 px. Aucun n'avait ete vu a l'oeil.
===================================================================== */
@media (max-width:900px){
/* ---- REGLAGES : les sous-titres etaient tronques ----
MESURE : six sous-titres coupes par `text-overflow:ellipsis`.
« Nom, slogan, telephone et co... », « Cinq presentations selon
c... ». Le marchand ne pouvait pas savoir ce que contient une
section avant de l'ouvrir — c'est exactement ce que le
sous-titre est cense lui dire.
La ligne unique venait d'un heritage d'ordinateur. Sur telephone
on laisse le texte passer a la ligne : deux lignes lisibles
valent mieux qu'une ligne coupee. */
.acc-t{min-width:0;flex:1}
.acc-t small{
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
display:block;
}
.acc-h{align-items:flex-start;padding-top:14px !important}
.acc-ic{margin-top:1px}
/* ---- PRODUITS : 12 zones tactiles sous 44 px, 12 textes sous 12,5 px ----
MESURE : les pastilles d'etat faisaient 17 px et les vignettes
38 px. La mention « aucune image en ligne » etait a 11,6 px : or
c'est une ALERTE, c'est-a-dire l'information la plus utile de la
ligne. */
/* La structure reelle, relevee dans le code (et non supposee) :
.pl > .pl-case + .pl-ouvre(bouton) > .pl-img .pl-txt .pl-prix
.pl-etat .pl-sc .pl-fl
C'est `.pl-ouvre` qui porte la zone tactile : on ne touche donc
pas a la disposition de `.pl`, on agrandit seulement le bouton et
on remonte les tailles de texte. */
.pl-ouvre{min-height:68px;align-items:center;gap:10px}
.pl-img{
flex:0 0 50px !important;width:50px !important;height:50px !important;
border-radius:11px;
}
.pl-txt b{font-size:15px !important;line-height:1.3}
.pl-txt small{
font-size:var(--m-xs) !important;color:var(--texte-3) !important;
}
.pl-prix{
font-size:15px !important;font-weight:750;
font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* NOMS RELEVES AU NAVIGATEUR, PAS DEVINES.
`.pl-etat` porte AUSSI `.etat`, dont la regle a 12 px l'emportait.
Le bouton de menu s'appelle `.pl-menu` (38 px mesures), et la case
a cocher est un `input` de 20 px dans `.pl-case`. */
.pl-etat,.pl .etat{font-size:12.8px !important;padding:3px 9px !important}
.pl-menu{
flex:0 0 44px;width:44px !important;height:44px !important;
border-radius:11px;display:grid;place-items:center;
}
.pl-case input{
width:22px;height:22px;
/* la zone tactile vient du label parent, pas de la case elle-meme :
agrandir l'input le rendrait disgracieux */
}
/* Le score faisait 17 px de haut : illisible, et impossible a viser
si un jour il devient cliquable. */
.pl-sc{
min-width:32px;height:28px;padding:0 8px;border-radius:9px;
display:inline-grid;place-items:center;
font-size:12.8px !important;font-weight:780;
font-variant-numeric:tabular-nums;
}
/* La case a cocher de selection multiple : 38 px mesures. */
.pl-case{
flex:0 0 44px;width:44px;min-height:44px;
display:grid;place-items:center;
}
.pl-case input{width:20px;height:20px}
/* ---- ADMINISTRATION : libelles de chiffres a 11 px ----
MESURE : « 0 au total », « 0 F cette semaine » etaient a 11 px,
en capitales espacees. Ce sont les chiffres de VOTRE plateforme :
ils doivent etre les plus lisibles de tous. */
/* La classe reelle du libelle est `.s` (une seule lettre), pas
`.s-t` : verifie au navigateur. `.sante-t` porte les phrases
d'explication du tableau de sante.
v57 : je l'avais limitee a l'ecran Admin. Les nouveaux modules
(CRM, Recovery, Inventaire) utilisent la meme classe et
retombaient donc a 11 px. La regle vaut maintenant PARTOUT :
un libelle de chiffre doit etre lisible quel que soit l'ecran. */
.stat .s,
.vue[data-vue="admin"] .stat .s,
.vue[data-vue="admin"] .sante-t p,
.vue[data-vue="admin"] .sante-t span,
.vue[data-vue="admin"] .s-t,
.vue[data-vue="admin"] .s-sous,
.vue[data-vue="admin"] .stat small{
font-size:var(--m-xs) !important;
text-transform:none !important;
letter-spacing:0 !important;
color:var(--texte-3) !important;
}
.vue[data-vue="admin"] .sous,
.vue[data-vue="admin"] .carte p.sous{
font-size:var(--m-s) !important;line-height:1.5;
}
/* `.sante-t` contient du texte NU (pas dans une balise) : un
selecteur sur ses enfants ne l'atteint pas. On regle la taille sur
le conteneur lui-meme, dont le texte herite. Verifie au
navigateur : c'est la seule facon de toucher ces phrases. */
.vue[data-vue="admin"] .sante-t,
.vue[data-vue="admin"] .sante-t *{
font-size:var(--m-xs) !important;line-height:1.45;
}
.vue[data-vue="admin"] .sante-t b,
.vue[data-vue="admin"] .sante-t strong{
font-size:var(--m-s) !important;
}
/* La case a cocher de selection fait 20 px : c'est la taille normale
d'une case, et le doigt vise le LABEL de 44 px qui l'entoure
(`.pl-case`). On ne l'agrandit pas — une case a cocher de 44 px
serait disgracieuse et n'ameliorerait rien.
Note d'audit : elle reste comptee comme « petite » par la mesure
automatique, c'est un faux positif assume et documente. */
/* ---- ACCUEIL : « Commandes hors annulees » etait coupe ---- */
.s-sous{
white-space:normal !important;overflow:visible !important;
text-overflow:clip !important;line-height:1.35;
}
}
/* =====================================================================
29. L'ECOSYSTEME — LA CARTE DE CE QUI ARRIVE (v56)
Mission §39 : montrer la direction sans faire croire que c'est
pret. Le ton visuel doit dire « bientot », pas « cliquez ici » :
les cartes sont volontairement plus sobres que les vraies, et la
pastille « En preparation » est toujours visible.
Hors media query : cet ecran doit etre correct aussi sur
l'ordinateur, ou vous le montrerez en formation.
===================================================================== */
.eco-note{
display:flex;gap:11px;align-items:flex-start;
background:var(--vert-clair,#ecfdf5);
border:1px solid rgba(5,150,105,.25);
border-radius:13px;padding:13px 14px;margin-bottom:22px;
font-size:14px;line-height:1.5;color:var(--texte-2);
}
.eco-note svg{flex:0 0 17px;color:var(--vert);margin-top:2px}
.eco-groupe{margin-bottom:24px}
.eco-groupe h3{
font-size:16px;font-weight:720;letter-spacing:-.02em;
margin:0 0 11px;color:var(--texte);
}
.eco-l{display:grid;gap:9px}
.eco-c{
position:relative;
display:grid;grid-template-columns:auto 1fr;gap:12px;
align-items:start;
padding:13px 14px;border-radius:13px;
background:var(--m-surface,#fff);
border:1px solid var(--bord);
/* Volontairement sans ombre : une carte « a venir » ne doit pas
avoir le meme relief qu'une carte utilisable. */
box-shadow:none;
}
.eco-ic{
width:40px;height:40px;border-radius:11px;flex:0 0 40px;
display:grid;place-items:center;
background:var(--fond-2);color:var(--texte-3);
}
.eco-ic.bleu{background:var(--bleu-clair,#eef2ff);color:var(--bleu)}
.eco-ic.vert{background:var(--vert-clair,#ecfdf5);color:var(--vert)}
.eco-ic.or{background:var(--or-clair,#fffbeb);color:var(--or)}
.eco-ic.violet{background:#f5f3ff;color:var(--violet)}
/* MESURE : avec la pastille en position absolue, un titre sur deux
lignes passait DESSOUS et les deux se chevauchaient (« Centre de
commandes », « Offres et promotions »). La pastille sort donc du
flux absolu : elle se place naturellement a cote du titre, et passe
a la ligne d'elle-meme quand il n'y a plus la place. */
.eco-t{
display:flex;align-items:flex-start;justify-content:space-between;
gap:10px;flex-wrap:wrap;
}
.eco-c b{
font-size:15px;font-weight:680;color:var(--texte);
line-height:1.3;flex:1 1 auto;min-width:0;
}
.eco-c small{
display:block;font-size:13.4px;color:var(--texte-3);
line-height:1.45;margin-top:3px;
}
/* La pastille : discrete mais toujours lue. Elle est la promesse
d'honnetete de cet ecran. */
.eco-tag{
flex:0 0 auto;align-self:flex-start;
font-size:11.6px;font-weight:700;letter-spacing:.01em;
padding:3px 9px;border-radius:7px;
background:var(--fond-2);color:var(--texte-3);
border:1px solid var(--bord);white-space:nowrap;
}
.eco-fin{
font-size:13.6px;color:var(--texte-3);line-height:1.5;
padding-top:6px;
}
/* La meme pastille dans la feuille « Plus ». */
.plus-tag{
position:absolute;right:12px;top:50%;transform:translateY(-50%);
font-size:11.4px;font-weight:700;padding:3px 9px;border-radius:7px;
background:var(--fond-2);color:var(--texte-3);border:1px solid var(--bord);
}
@media (min-width:901px){
.eco-l{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
.eco-c b{font-size:15px}
.eco-c small{font-size:var(--m-xs)}
.eco-tag{font-size:11px;padding:3px 8px}
/* La pastille passe sous le titre si le nom du module est long :
mieux vaut deux lignes qu'un titre coupe. */
@media (max-width:359px){
.eco-t{flex-direction:column;gap:5px}
}
}
[data-theme="sombre"] .eco-note{background:#0e2a20;border-color:rgba(52,211,153,.3)}
[data-theme="sombre"] .eco-ic.bleu{background:#1e2340}
[data-theme="sombre"] .eco-ic.vert{background:#0e2a20}
[data-theme="sombre"] .eco-ic.or{background:#2a2113}
[data-theme="sombre"] .eco-ic.violet{background:#231b3d}
/* =====================================================================
30. LES MODULES DE L'ECOSYSTEME (v57)
CRM, Recovery, Inventaire, Radar, Score et Profit.
Hors media query : ces ecrans servent aussi sur ordinateur.
===================================================================== */
/* ---------- carte client (CRM) ---------- */
.cl-c,.rec-c,.inv-c{
background:var(--carte);border:1px solid var(--bord);
border-radius:14px;padding:14px;margin-bottom:11px;
box-shadow:var(--ombre-s);
}
.cl-h,.rec-h,.inv-h{
display:flex;align-items:flex-start;justify-content:space-between;
gap:10px;margin-bottom:10px;
}
.cl-i,.rec-i{min-width:0;flex:1}
.cl-i b,.rec-i b,.inv-h b{
display:block;font-size:16px;font-weight:700;color:var(--texte);
line-height:1.3;overflow-wrap:anywhere;
}
.cl-i small,.rec-i small{
display:block;font-size:13px;color:var(--texte-3);margin-top:2px;
line-height:1.4;
}
.cl-ch,.inv-ch{
display:flex;flex-wrap:wrap;gap:6px 16px;
padding:10px 0;margin-bottom:10px;
border-top:1px solid var(--fond-2);border-bottom:1px solid var(--fond-2);
font-size:13.4px;color:var(--texte-2);
}
.cl-ch b,.inv-ch b{color:var(--texte);font-variant-numeric:tabular-nums}
.cl-dep b{color:var(--vert)}
.cl-b,.rec-b{display:flex;gap:8px;flex-wrap:wrap}
.cl-b .btn,.rec-b .btn{flex:1 1 auto;min-width:96px}
/* la fiche detaillee */
.cl-f-h{
display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;
}
.cl-f-h>div{
background:var(--fond-2);border-radius:11px;padding:11px 12px;
}
.cl-f-h span{display:block;font-size:12.6px;color:var(--texte-3)}
.cl-f-h b{
display:block;font-size:17px;font-weight:750;margin-top:3px;
font-variant-numeric:tabular-nums;
}
.cl-f-t{font-size:15.5px;font-weight:700;margin:16px 0 8px}
.cl-l{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:10px 0;border-bottom:1px solid var(--fond-2);font-size:13.6px;
}
.cl-l b{display:block;color:var(--texte)}
.cl-l small{display:block;font-size:12.4px;color:var(--texte-3);margin-top:1px}
.cl-l-d{text-align:right;white-space:nowrap}
.cl-l-d b{font-variant-numeric:tabular-nums}
/* ---------- Recovery ---------- */
.rec-c{border-left:3px solid var(--bord)}
.rec-c.non_appelee{border-left-color:var(--rouge)}
.rec-c.panier{border-left-color:var(--or)}
.rec-c.endormi{border-left-color:var(--bleu)}
.rec-p{
display:flex;align-items:center;gap:7px;
font-size:13.4px;color:var(--texte-2);margin-bottom:5px;
}
.rec-m{
font-size:13.6px;color:var(--texte-3);margin-bottom:11px;
font-variant-numeric:tabular-nums;
}
/* ---------- Inventaire ---------- */
.inv-marge b{color:var(--vert)}
.inv-manque{
color:var(--or);font-size:13px;font-weight:600;
}
/* ---------- Score ---------- */
.sc-c{margin-bottom:14px}
/* MESURE : en ligne, le titre et le sous-titre se partageaient mal la
place restante et se chevauchaient (« Score de votre boutique » a
cote de « Calcule sur vos 12 commandes »). `min-width:0` sur la
colonne de texte, et le sous-titre passe SOUS le titre, jamais a
cote. */
.sc-h{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sc-t{min-width:0;flex:1}
.sc-t b{display:block}
.sc-t small{display:block}
.sc-n{
flex:0 0 auto;display:flex;align-items:baseline;gap:2px;
padding:10px 15px;border-radius:14px;
}
.sc-n b{font-size:32px;font-weight:800;line-height:1;
font-variant-numeric:tabular-nums}
.sc-n span{font-size:14px;font-weight:600;opacity:.75}
.sc-n.bon{background:var(--vert-clair,#ecfdf5);color:var(--vert)}
.sc-n.moyen{background:var(--or-clair,#fffbeb);color:var(--or)}
.sc-n.faible{background:var(--rouge-clair,#fef2f2);color:var(--rouge)}
.sc-t b{display:block;font-size:15.5px;font-weight:700}
.sc-t small{display:block;font-size:13px;color:var(--texte-3);margin-top:2px}
.sc-att{display:block;font-size:16px;font-weight:700;margin-bottom:4px}
.sc-d{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.sc-d>div{
background:var(--fond-2);border-radius:10px;padding:9px 11px;
display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.sc-d span{font-size:12.8px;color:var(--texte-2)}
.sc-d b{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-a{
background:var(--bleu-clair,#eef2ff);border-radius:11px;padding:12px;
}
.sc-a>b{display:block;font-size:13.8px;margin-bottom:7px;color:var(--bleu)}
.sc-a span{
display:flex;gap:8px;align-items:flex-start;
font-size:13.4px;color:var(--texte-2);line-height:1.45;margin-top:5px;
}
.sc-a svg{flex:0 0 13px;margin-top:3px;color:var(--bleu)}
/* ---------- Radar ---------- */
.rd-t{font-size:16px;font-weight:720;margin:18px 0 10px}
.rd-c{
display:flex;align-items:center;gap:12px;
background:var(--carte);border:1px solid var(--bord);
border-left:3px solid var(--bord);
border-radius:13px;padding:13px 14px;margin-bottom:9px;
cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.rd-c:active{background:var(--fond-2)}
.rd-c.rouge{border-left-color:var(--rouge)}
.rd-c.orange{border-left-color:var(--or)}
.rd-c.vert{border-left-color:var(--vert)}
.rd-c.bleu{border-left-color:var(--bleu)}
.rd-i{flex:1;min-width:0}
.rd-i b{display:block;font-size:14.8px;font-weight:680;line-height:1.3}
.rd-i small{
display:block;font-size:13px;color:var(--texte-3);
margin-top:3px;line-height:1.4;
}
.rd-c>svg{flex:0 0 16px;color:var(--texte-3)}
/* ---------- Profit ---------- */
.pf-c{margin-top:16px}
.pf-c h3{font-size:16px;font-weight:720;margin-bottom:12px}
.pf-l{
display:flex;align-items:center;justify-content:space-between;
gap:12px;padding:9px 0;font-size:14.2px;color:var(--texte-2);
border-bottom:1px solid var(--fond-2);
}
.pf-l b{color:var(--texte);font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-tot{border-bottom:0;padding-top:12px;font-size:15.5px}
.pf-tot b{font-size:19px;font-weight:780;color:var(--vert)}
/* Le cas « je ne peux pas calculer » : il doit etre clair, pas honteux. */
.pf-manque{
display:flex;gap:11px;align-items:flex-start;
background:var(--or-clair,#fffbeb);border:1px solid rgba(217,119,6,.25);
border-radius:11px;padding:12px;margin-top:8px;
}
.pf-manque svg{flex:0 0 16px;color:var(--or);margin-top:2px}
.pf-manque b{display:block;font-size:14px;color:var(--texte)}
.pf-manque small{
display:block;font-size:13px;color:var(--texte-2);
margin-top:3px;line-height:1.45;
}
@media (min-width:901px){
.cl-f-h{grid-template-columns:repeat(4,1fr)}
.sc-d{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
.cl-b .btn,.rec-b .btn{
min-height:44px !important;font-size:13.6px !important;padding:0 10px !important;
}
.cl-ch,.inv-ch{font-size:var(--m-xs) !important}
.sc-n b{font-size:30px}
.sc-n{padding:9px 13px}
.sc-t b{font-size:15px;line-height:1.25}
.sc-t small{font-size:var(--m-xs) !important;margin-top:3px}
/* Les quatre mesures : sur un petit ecran, « Clients qui
reviennent » en deux lignes serre le chiffre contre le bord. */
.sc-d{gap:8px}
.sc-d>div{flex-direction:column;align-items:flex-start;gap:2px}
/* 13px : le plancher que je me suis fixe. 12,4 px etait en dessous,
et ma propre mesure l'a rattrape. */
.sc-d span{font-size:13px;line-height:1.3}
.sc-d b{font-size:15px}
.rd-i small,.cl-i small,.rec-i small{font-size:var(--m-xs) !important}
}
[data-theme="sombre"] .sc-a{background:#1e2340}
[data-theme="sombre"] .pf-manque{background:#2a2113;border-color:rgba(251,191,36,.3)}
/* =====================================================================
31. SKELIA MARKETS — ECRAN MARCHAND (v60)
===================================================================== */
.mr-c{
background:var(--m-surface,#fff);border:1px solid var(--bord);
border-radius:14px;padding:14px;margin-bottom:11px;
box-shadow:var(--m-ombre);
}
.mr-c.off{opacity:.62}
.mr-h{display:flex;align-items:flex-start;justify-content:space-between;
gap:10px;margin-bottom:11px}
.mr-i{min-width:0;flex:1}
.mr-i b{display:block;font-size:16.5px;font-weight:720;line-height:1.25}
.mr-i small{display:block;font-size:13px;color:var(--texte-3);margin-top:2px}
.mr-ch{
display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;
padding:11px 0;margin-bottom:11px;
border-top:1px solid var(--fond-2);border-bottom:1px solid var(--fond-2);
font-size:13.4px;color:var(--texte-2);
}
.mr-ch span{display:flex;align-items:center;gap:7px;min-width:0}
.mr-ch svg{flex:0 0 14px;color:var(--texte-3)}
.mr-ch b{color:var(--texte);font-variant-numeric:tabular-nums}
/* Le lien de campagne : c'est LE geste que le marchand vient chercher.
Il doit pouvoir le copier sans reflechir. */
.mr-lien{
background:var(--fond-2);border-radius:11px;padding:11px 12px;
margin-bottom:11px;
}
.mr-lien>span{
display:block;font-size:12.8px;color:var(--texte-3);margin-bottom:6px;
}
.mr-lien code{
display:inline-block;font-size:14px;font-weight:700;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
color:var(--bleu);background:var(--m-surface,#fff);
padding:5px 10px;border-radius:8px;border:1px dashed var(--bleu);
margin-right:8px;
}
.mr-lien .btn{min-height:38px !important;padding:0 14px !important;
font-size:13.4px !important}
.mr-b{display:flex;gap:8px}
.mr-b .btn{flex:1;min-height:44px !important;font-size:13.8px !important}
/* Le choix de livraison : deux gros boutons, pas un menu deroulant. */
.mr-liv-choix{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mr-lv{
min-height:52px;border-radius:12px;cursor:pointer;
background:var(--m-surface,#fff);border:2px solid var(--bord);
font-family:inherit;font-size:15px;font-weight:650;color:var(--texte-2);
-webkit-tap-highlight-color:transparent;transition:.15s;
}
.mr-lv.on{border-color:var(--bleu);background:var(--bleu-clair);
color:var(--bleu);font-weight:750}
.mr-aide{
background:var(--bleu-clair);border-radius:13px;padding:14px;
margin-top:20px;
}
.mr-aide b{display:block;font-size:14.5px;color:var(--bleu);margin-bottom:6px}
.mr-aide p{font-size:13.6px;color:var(--texte-2);line-height:1.5;margin:0}
.mr-aide b:last-of-type{color:var(--texte)}
@media (min-width:901px){
.mr-ch{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:359px){
.mr-ch{grid-template-columns:1fr}
.mr-b{flex-direction:column}
}
[data-theme="sombre"] .mr-aide{background:#1e2340}
/* =====================================================================
32. LES OFFRES PAR QUANTITE — ECRAN MARCHAND (v61)
===================================================================== */
.inv-b{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.inv-b .btn{min-height:44px !important;font-size:13.4px !important;
padding:0 10px !important;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.off-l{
display:flex;align-items:center;justify-content:space-between;gap:10px;
background:var(--fond-2);border-radius:11px;padding:11px 12px;margin-bottom:8px;
}
.off-l b{display:block;font-size:14.6px;font-variant-numeric:tabular-nums}
.off-l small{display:block;font-size:12.8px;color:var(--texte-3);margin-top:2px}
.off-l .btn-r{
flex:0 0 40px;width:40px;height:40px;min-height:40px !important;
padding:0 !important;font-size:22px;line-height:1;border-radius:10px;
}
.off-add{
border-top:1px solid var(--bord);margin-top:16px;padding-top:14px;
}
.off-add>b{display:block;font-size:15px;font-weight:700;margin-bottom:10px}
/* L'apercu en direct : le marchand voit l'economie avant de valider.
Sans lui, on cree des offres qui font gagner 200 F au client. */
.off-apercu{min-height:20px;margin-bottom:11px}
.off-ok{
display:block;font-size:13.4px;line-height:1.45;color:var(--vert);
background:var(--vert-clair,#ecfdf5);border-radius:9px;padding:9px 11px;
}
.off-ok b{font-weight:800}
.off-ko{
display:block;font-size:13.4px;line-height:1.45;color:var(--rouge);
background:var(--rouge-clair,#fef2f2);border-radius:9px;padding:9px 11px;
}
@media (max-width:359px){
.inv-b{grid-template-columns:1fr}
}
[data-theme="sombre"] .off-ok{background:#0e2a20}
[data-theme="sombre"] .off-ko{background:#2d1618}
/* =====================================================================
SKELIA v63 — CORRECTIFS MESURES SUR LA BARRE DU BAS
CE QUI N'ALLAIT PAS, CONSTATE AU PIXEL :
la pastille de compteur etait posee a `left:calc(50% + 7px)`, donc
a 7 px a droite du centre du bouton. Or l'icone est centree et fait
22 px de large : elle occupe de -11 px a +11 px autour du centre.
La pastille tombait donc EN PLEIN DESSUS.
Mesure avant correction, sur quatre largeurs d'ecran :
320 px surIcone = oui
360 px surIcone = oui
390 px surIcone = oui
430 px surIcone = oui
Avec un compteur a deux chiffres comme « 74 », la pastille
s'elargit encore et mange l'icone entiere.
LA CORRECTION : on la cale en haut a DROITE du bouton, comme sur
toutes les applications de telephone. Plus de recouvrement, et le
chiffre reste lisible.
===================================================================== */
@media (max-width:900px){
.barre-bas .bb .pt{
/* MESURE (ecran 360 px, bouton 72 px) :
icone x 25..48 y 12..35
pastille x 36..60 y 4..20 -> elle mordait l'icone
On la cale au coin haut-droit de l'icone. Avec le plafond
« 9+ » pose dans le code, elle ne depasse plus 18 px : elle
effleure le coin, comme sur toutes les applications de
telephone, sans masquer le dessin. */
/* Ancre sur le CENTRE du bouton, pas sur son bord droit : les
boutons vont de 64 px (ecran 320) a 86 px (ecran 430). Une
valeur fixe depuis la droite decalerait la pastille selon le
telephone. Depuis le centre, elle suit toujours l'icone. */
left:calc(50% + 6px) !important;
right:auto !important;
top:6px !important;
min-width:17px !important;
height:17px !important;
padding:0 3px !important;
border-radius:9px !important;
font-size:10px !important;
line-height:1 !important;
/* La bordure detache la pastille de l'icone quand elles se
frolent. Elle reprend la couleur de la barre, pas du blanc :
en mode sombre un anneau blanc ferait une tache. */
border:2px solid var(--m-surface) !important;
box-sizing:border-box;
}
/* A partir de trois chiffres on n'affiche plus le nombre exact :
« 137 » dans 16 px est illisible de toute facon. */
.barre-bas .bb .pt{ max-width:26px; overflow:hidden }
/* Les libelles de la barre : ils etaient a 11,2 px. On remonte a
12 px, la limite en dessous de laquelle un texte devient penible
a lire sur un telephone bon marche.
Verifie : « Analyses », le mot le plus long, tient dans un bouton
de 64 px a cette taille. */
.barre-bas .bb{
font-size:12px !important;
letter-spacing:-.01em;
}
/* Le lien « Mot de passe oublie » faisait 32 px de haut : sous les
40 px recommandes, un pouce le rate une fois sur trois. */
#lienOubli{
min-height:40px;
display:inline-flex;
align-items:center;
}
}
/* =====================================================================
SKELIA v63 — PANNEAUX DU HAUT : NOTIFICATIONS ET RECHERCHE
CE QUI N'ALLAIT PAS, MESURE SUR UN ECRAN DE 360 px :
cloche : posee a 252 px du bord gauche, large de 44 px
-> son bord droit est a 296 px
panneau : cale sur ce bord droit, large de 328 px
-> il commencait a 296 - 328 = -32 px
Le panneau sortait donc de 32 px A GAUCHE de l'ecran. Le debut de
chaque ligne etait coupe : on lisait « ouvelle commande » au lieu de
« Nouvelle commande ».
320 px sortait de 29 px
360 px sortait de 32 px
390 px sortait de 14 px
430 px tenait tout juste
POURQUOI. `right:0` colle le panneau au bord droit de la cloche.
Tant que le panneau est plus etroit que l'espace a gauche de la
cloche, tout va bien. Des que l'ecran retrecit, il deborde.
LA CORRECTION. Sur telephone, on cesse d'accrocher le panneau a la
cloche : on l'etale sur la largeur de l'ecran, avec 12 px de marge
de chaque cote. C'est ce que font toutes les applications.
===================================================================== */
@media (max-width:640px){
.nt-p,
.rg-res{
/* On sort de l'ancrage sur la cloche : le panneau se cale sur
l'ecran lui-meme. `position:fixed` evite qu'un parent en
`overflow` ne le coupe. */
position:fixed !important;
left:12px !important;
right:12px !important;
width:auto !important;
max-width:none !important;
/* Juste sous la barre du haut, quelle que soit sa hauteur. */
top:calc(58px + env(safe-area-inset-top)) !important;
/* On s'arrete au-dessus de la barre du bas : sinon la derniere
notification passe dessous et devient impossible a toucher. */
max-height:calc(100vh - 150px - env(safe-area-inset-bottom)) !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch;
/* Au-dessus de tout le reste, barre du bas comprise. */
z-index:9999 !important;
/* Une ombre plus marquee : sur telephone le panneau flotte
au-dessus du contenu, il doit s'en detacher nettement. */
box-shadow:0 18px 50px rgba(15,23,42,.28) !important;
}
/* Les lignes ne doivent jamais pousser le panneau en largeur. */
.nt-l,
.rg-l{
max-width:100%;
overflow:hidden;
}
.nt-c,
.rg-c{
min-width:0;
flex:1 1 auto;
}
/* Le titre sur une ligne, le detail sur deux au maximum : au-dela,
une seule notification remplirait tout l'ecran. */
.nt-c b,
.rg-c b{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.nt-c small,
.rg-c small{
display:-webkit-box;
-webkit-line-clamp:2;
line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
}
/* =====================================================================
SKELIA v63 — LIGNES « PRODUITS GAGNANTS » (administration)
CE QUI N'ALLAIT PAS, MESURE SUR UN ECRAN DE 320 px :
ligne complete 320 px
boutons a droite 150 px (« Modifier » + corbeille)
reste pour le nom 68 px
68 px pour un titre de produit, c'est deux ou trois lettres suivies
de points de suspension. Le marchand ne voyait plus de quel produit
il s'agissait, ni la date. C'est ce que vous decriviez comme un
bouton qui « recouvre » la carte : il ne la recouvrait pas, il
l'ecrasait.
LA CORRECTION : sous 380 px, les boutons passent SOUS le texte. Le
titre recupere toute la largeur. Au-dessus, on garde la disposition
en ligne, qui est plus compacte.
===================================================================== */
@media (max-width:380px){
.ag-l{
flex-wrap:wrap;
row-gap:10px;
}
/* Le numero de rang et le nom restent cote a cote sur la premiere
ligne : le rang ne fait que 26 px, il ne gene pas. */
.ag-i{
flex:1 1 calc(100% - 38px);
min-width:0;
}
.ag-i b{
/* Le nom peut maintenant passer sur deux lignes plutot que d'etre
coupe des la troisieme lettre. */
white-space:normal;
display:-webkit-box;
-webkit-line-clamp:2;
line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
line-height:1.32;
}
/* Les boutons prennent toute la largeur, sous le texte. */
.ag-act{
flex:1 1 100%;
justify-content:flex-end;
gap:8px;
}
.ag-act .btn{ min-height:38px }
}