/* shop.css — thème de la boutique. Volontairement autonome : la boutique ne dépend d'aucune feuille de l'ERP, pour pouvoir évoluer sans risquer de casser le back-office. ⭐⭐⭐ RTL : LA RÈGLE DE CETTE FEUILLE. La boutique s'affiche en français (LTR) ou en arabe (RTL), et `dir="rtl"` est posé sur `` par le serveur (lib/i18n.js). Aucun côté n'est donc écrit en dur : - `text-align: start / end` remplace `left / right` ; - `margin-inline-start`, `padding-inline-start`, `border-inline-end`… remplacent `margin-left`, `padding-left`, `border-right`… ; - `inset-inline-start / end` remplacent `left / right` sur les éléments positionnés. La MÊME règle place alors correctement les deux langues, et un écran ajouté plus tard n'a rien à prévoir : ce qui est logique est déjà juste. ⚠ Exceptions assumées, marquées `NON LOGIQUE` : ce qui doit rester physiquement à gauche ou à droite quel que soit le sens de lecture (centrage du toast). */ /* ⓘ LA POLICE DU SITE N'EST PAS DÉCLARÉE ICI : elle vient du `` posé dans `views/layouts/main.hbs` (CDN Google Fonts, demandé par le NAVIGATEUR du visiteur — le serveur de la boutique n'a aucun accès internet sortant), et la famille est appliquée par la variable `--shop-font` ci-dessous. ⚠ AUCUNE RÈGLE DE CETTE FEUILLE NE FIXE DE `font-family` : ce qui doit changer de corps change de TAILLE ou de GRAISSE, et **hérite** de la police du site. Une règle qui reposerait une famille ferait diverger une brique de la page des autres, et la police demandée par le client ne s'appliquerait plus partout. */ :root { --shop-accent: #e8590c; /* orange : nom produit, boutons */ --shop-accent-dark: #c2410c; --shop-navy: #1e293b; --shop-border: #e2e8f0; --shop-muted: #64748b; --shop-bg: #f8fafc; /* ⭐⭐⭐ LES ARRONDIS, EN UN SEUL ENDROIT (demande du client : « unify edge roundness for all elements »). La feuille portait SEPT valeurs écrites à la main — 2, 4, 6, 8, 9, 10, 14 px — posées au fil des demandes : deux cartes voisines n'avaient donc pas le même coin, et un composant ajouté plus tard héritait de la valeur du jour. Trois jetons suffisent, et chacun dit À QUOI il sert : · `sm` — ce qui est IMBRIQUÉ dans autre chose (champ de saisie, miniature, petite pastille) ; · `base` — le défaut : cartes, boutons, encadrés, fenêtres ; · `pill` — ce qui doit être entièrement rond (badge de compteur, puce, barre de progression). ⚠ `--shop-radius` GARDE SON NOM ET SA VALEUR (6 px) : elle est utilisée 31 fois, et la renommer ferait un diff de 31 lignes pour aucun gain visuel. ⚠⚠ `soft` — LA SEULE EXCEPTION ASSUMÉE À L'UNIFICATION (9 px) : les PILULES de quantité et les deux boutons d'unité qui les remplacent. Le client les a demandées AVANT (« make the pill less round, soft corners, slim pills ») et « 9 px » est la valeur de la maquette : tout ramener à 6 px aurait donc défait une demande antérieure SANS LE DIRE. Deux contrôleurs mesurent cette valeur — `npm run check:shop` (la feuille) et `npm run check:qty` (le rayon CALCULÉ dans Chrome) — et c'est leur échec qui a fait ressortir la régression. Ce jeton garde la valeur demandée, et son nom dit pourquoi il existe. */ --shop-radius-sm: 4px; --shop-radius: 6px; --shop-radius-soft: 9px; --shop-radius-pill: 999px; /* ⭐ « NOTO KUFI ARABIC » PARTOUT (demande du client), POUR LES DEUX LANGUES. ⚠ POURQUOI PAR LE CDN DE GOOGLE ET NON PAR UN FICHIER MAISON. Le serveur de la boutique n'a pas d'accès internet sortant : télécharger les `.woff2` pour les héberger ici est impossible depuis cette machine (`https://fonts.googleapis.com` est injoignable). La feuille est donc demandée par le NAVIGATEUR du visiteur, qui, lui, a internet — c'est le seul chemin possible. Le `@font-face` reste déclaré par Google, et la famille est posée ici, en un seul endroit (`--shop-font`). ⚠ CE QUE CELA COÛTE, ET QUI DOIT ÊTRE DIT : une requête vers un domaine tiers (Google voit l'adresse IP du visiteur), et une police qui n'arrive pas si le visiteur est hors ligne — d'où la PILE DE REPLI, qui rend la page correctement dans tous les cas (aucun texte invisible : `font-display: swap` est demandé dans l'URL). */ --shop-font: 'Noto Kufi Arabic', Arial, Helvetica, sans-serif; } * { box-sizing: border-box; } body.shop { margin: 0; font: 14px/1.5 var(--shop-font); color: var(--shop-navy); background: #fff; } /* ⚠ L'ARABE GARDE LA MÊME POLICE (c'est justement celle qui lui convient), mais un peu plus d'air entre les lignes : les ascendantes et descendantes arabes se touchent à 1.5. */ html[dir="rtl"] body.shop { font-family: var(--shop-font); line-height: 1.7; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } /* ⭐ Montants, références, dates, téléphones : des ÎLOTS LATINS dans une page arabe. Les isoler en LTR (attribut posé par l'aide de mise en forme des montants et par les gabarits) évite que l'algorithme bidirectionnel ne sépare « 1 234,50 » de « DH ». ⓘ Les accolades sont évitées dans les commentaires de cette feuille : plusieurs contrôles du dépôt découpent les règles dessus, et une accolade citée dans une phrase les fait associer un faux sélecteur à un vrai corps de règle (voir aussi plus bas). */ .num { unicode-bidi: isolate; } /* ⭐ LES PICTOGRAMMES (partials/icon.hbs). En ligne, donc ils suivent `currentColor` : une icône s'allume et s'éteint avec le texte de son bouton, dans les deux sens de lecture et sans requête réseau. `display: block` : un `` inline est un élément en ligne, posé sur la ligne de base — sans ce réglage il « flotte » et décale le mot qu'il accompagne. */ .shop-icon { display: block; flex: 0 0 auto; } /* ---------------------------------------------------------------- en-tête */ .shop-header { border-bottom: 1px solid var(--shop-border); background: #fff; position: sticky; top: 0; z-index: 20; } .shop-header-inner { max-width: 1280px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* ⭐ LA MARQUE ET LA LANGUE, CÔTE À CÔTE DANS LE DOM (voir le gabarit) — mais pas forcément côte à côte À L'ÉCRAN : sur grand écran, cette boîte s'efface (`display: contents`) et ses deux enfants redeviennent des éléments de l'en-tête, dans l'ordre habituel marque · recherche · liens · langue. Sur téléphone, elle reprend son rôle de ligne (voir le bloc mobile) : c'est le seul moyen d'avoir la langue TOUJOURS VISIBLE quand l'en-tête s'empile, sans dupliquer le sélecteur ni changer la disposition du bureau. */ .shop-header-top { display: contents; } /* ⭐ MÊME PRINCIPE POUR LA LIGNE DE RECHERCHE : cette boîte n'existe QUE sur téléphone, où elle forme la LIGNE 2 de l'en-tête (recherche + langue de dictée). Sur grand écran elle s'efface, et `.shop-search-wrap` redevient l'enfant direct de l'en-tête — donc `flex: 1 1 260px`, la disposition d'origine, inchangée. Sans cette boîte, on ne pouvait pas dire « ces deux contrôles sont une ligne » sans déplacer le DOM ni dupliquer le partiel. */ .shop-header-search { display: contents; } /* ⭐⭐ LA MARQUE EST LE LOGO (demande du client) : plus aucun texte dans l'en-tête. ⚠ LA HAUTEUR EST IMPOSÉE ICI, LA LARGEUR SUIT (`width: auto`) : le logo fourni mesure 1000 × 807, donc presque carré — une largeur fixe l'écraserait ou le déformerait, alors que `height` + `width: auto` conserve le rapport d'aspect quel que soit le fichier fourni demain. ⚠ `height: 40px` SUR GRAND ÉCRAN, ET C'EST UNE TAILLE D'EN-TÊTE, PAS DE LOGO : au-delà, la ligne de 44 px des champs de recherche serait poussée vers le bas. Sur téléphone il descend à 30 px (voir le bloc mobile) : la place y est comptée, et le logo n'a pas à dominer un écran de 375 px. */ .shop-brand { display: inline-flex; align-items: center; } .shop-brand-logo { height: 40px; width: auto; display: block; } /* ---------------------------------------------------------------- recherche ⭐ L'EN-TÊTE PORTE LA RECHERCHE, DONC LE PANNEAU DE SUGGESTIONS AUSSI. `.shop-search-wrap` est le seul élément POSITIONNÉ de ce bloc : le panneau s'y accroche (`inset-inline: 0` + `top: 100%`), il prend donc exactement la largeur du champ, où que la barre se trouve — en-tête sur une ligne, ou pleine largeur sur un téléphone. */ .shop-search-wrap { position: relative; flex: 1 1 260px; min-width: 200px; } .shop-search { display: flex; gap: 0; } /* ⭐ 44 px DE HAUT : c'est la cible du doigt, et la barre de recherche est l'élément le plus touché d'une boutique sur téléphone. La largeur, elle, reste SOUPLE (`flex`, pas de largeur en dur) : la même règle sert un téléphone de 375 px et un écran de bureau. */ .shop-search-input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 7px 10px; border: 1px solid var(--shop-border); border-inline-end: 0; border-radius: var(--shop-radius); /* Le champ et ce qui le SUIT forment un seul bloc visuel : les coins du milieu restent droits, que le bouton micro soit affiché ou non. Les coins LOGIQUES suivent le sens de lecture (à droite en LTR, à gauche en RTL). */ border-start-end-radius: 0; border-end-end-radius: 0; font-size: 14px; } .shop-search-submit { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; min-height: 44px; border: 1px solid var(--shop-navy); background: var(--shop-navy); color: #fff; white-space: nowrap; border-radius: var(--shop-radius); border-start-start-radius: 0; border-end-start-radius: 0; cursor: pointer; } /* ⭐ UNE LOUPE SUR TÉLÉPHONE, LE MOT « RECHERCHER » SUR GRAND ÉCRAN. POURQUOI CE DÉDOUBLEMENT : sur 375 px, « champ + micro + Rechercher » fait 347 px à lui seul ; la langue de dictée demandée sur LA MÊME LIGNE (voir le bloc mobile) ne tenait donc pas. Le pictogramme rend la place du libellé, et le nom accessible reste entier : le partiel pose un `aria-label` sur le bouton — un lecteur d'écran annonce « Rechercher », jamais « image ». Sur grand écran, rien ne change : le mot est là, la loupe non. */ .shop-search-submit-icon { display: none; } /* ⭐ LE MICRO EST MASQUÉ TANT QUE LE NAVIGATEUR NE SAIT PAS RECONNAÎTRE LA PAROLE : le serveur le rend avec `hidden`, et shop.js le révèle seulement s'il trouve `SpeechRecognition`. Un bouton qui ne peut rien faire ne doit jamais apparaître. Il se place au BOUT du champ — à droite en français, à gauche en arabe : `border-inline` suit le sens de lecture, comme tout le reste de cette feuille. */ .shop-mic { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--shop-border); border-inline-start: 0; border-inline-end: 0; background: #fff; color: var(--shop-muted); cursor: pointer; } .shop-mic[hidden] { display: none; } .shop-mic svg { display: block; } .shop-mic:hover { color: var(--shop-accent); } .shop-mic:focus-visible { outline: 2px solid var(--shop-accent); outline-offset: -2px; } /* ⭐ « J'ÉCOUTE » SE VOIT : un micro actif qui ne change pas d'aspect laisse croire que l'appui n'a pas été pris en compte, et le client recommence — ou parle trop tard. */ .shop-mic.is-listening { background: var(--shop-accent); border-color: var(--shop-accent); color: #fff; } /* Langue de la dictée + état du micro : révélés en même temps que le bouton (donc jamais visibles sans API de reconnaissance). Sur grand écran, le sélecteur reste une ligne discrète sous le champ ; sur téléphone il monte À CÔTÉ du champ (voir le bloc mobile) — c'est la « ligne 2 » demandée : barre de recherche + `|FR|AR|`. */ .shop-voice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--shop-muted); } .shop-voice[hidden] { display: none; } /* ⭐⭐ `|FR|AR|` — UN SÉLECTEUR SEGMENTÉ, ET DE VRAIS BOUTONS. Deux cibles, une seule allumée (`aria-pressed="true"` → fond plein) : la langue de dictée se lit d'un coup d'œil, et il n'y a rien à dérouler — un geste au lieu de deux. Les deux segments partagent une même bordure (le séparateur du milieu n'est posé qu'une fois) pour se lire comme UN contrôle, et non comme deux boutons voisins. */ .shop-voice-lang { display: inline-flex; align-items: stretch; border: 1px solid var(--shop-border); border-radius: var(--shop-radius); overflow: hidden; background: #fff; } .shop-voice-lang-btn { min-width: 38px; min-height: 30px; padding: 0 8px; border: 0; background: #fff; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--shop-muted); /* ⚠ `unicode-bidi: isolate` : « FR » et « AR » sont des ÎLOTS LATINS dans une page arabe. Sans isolation, l'algorithme bidirectionnel peut les recoller dans le mauvais ordre. */ unicode-bidi: isolate; } .shop-voice-lang-btn + .shop-voice-lang-btn { border-inline-start: 1px solid var(--shop-border); } .shop-voice-lang-btn:hover { color: var(--shop-navy); } .shop-voice-lang-btn:focus-visible { outline: 2px solid var(--shop-accent); outline-offset: -2px; } .shop-voice-lang-btn[aria-pressed="true"] { background: var(--shop-navy); color: #fff; } .shop-voice-status { margin: 0; flex: 1 1 100%; } .shop-voice-status[hidden] { display: none; } .shop-voice-status[data-state="error"] { color: #b91c1c; } /* ---------------------------------------------------------------- suggestions ⭐ LE PANNEAU NE DOIT JAMAIS DÉPASSER L'ÉCRAN. En 375 × 667 (le plus petit téléphone courant), il occupe la largeur du champ et se limite à 60 % de la hauteur de fenêtre : au-delà, il défile. `inset-inline: 0` le place des deux côtés de la même façon en français et en arabe, sans jamais écrire `left` ni `right`. */ .shop-suggest { position: absolute; inset-inline: 0; top: 100%; z-index: 30; margin: 4px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--shop-border); border-radius: var(--shop-radius); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); max-height: min(60vh, 420px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .shop-suggest[hidden] { display: none; } /* ⭐ LA LIGNE EST UNE RANGÉE : le lien prend la place disponible, le bouton d'AJOUT RAPIDE garde sa largeur au bout. C'est ce qui permet d'ajouter un article au panier sans ouvrir sa fiche — le geste le plus fréquent d'une boutique, et celui qui coûtait le plus d'allers-retours. ⚠ `align-items: stretch` : le bouton fait la HAUTEUR de la ligne (44 px), pas 20 px. */ .shop-suggest-row { min-height: 44px; border-bottom: 1px solid var(--shop-border); display: flex; align-items: stretch; } .shop-suggest-row:last-child { border-bottom: 0; } .shop-suggest-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; /* ⚠ `overflow: hidden` ICI, ET `min-width: 0` SURTOUT ENFANT FLEXIBLE : sans eux, une longue désignation refuse de se réduire et pousse la ligne — puis la page — hors de l'écran. C'est LE défaut classique du débordement horizontal sur mobile. ⚠ `flex: 1 1 auto` EST LA CONTREPARTIE DU BOUTON À CÔTÉ : sans lui, le lien se réduirait au profit du bouton, et la désignation perdrait la place qu'elle occupe aujourd'hui. */ flex: 1 1 auto; min-width: 0; overflow: hidden; } .shop-suggest-link:hover, .shop-suggest-row.is-active .shop-suggest-link { background: var(--shop-bg); text-decoration: none; } /* La ligne surlignée au clavier (↑ ↓) doit se VOIR : le fond seul est trop discret. */ .shop-suggest-row.is-active .shop-suggest-link { outline: 2px solid var(--shop-accent); outline-offset: -2px; } /* ⚠ 44 px : c'est la CIBLE DU DOIGT, comme le champ de recherche et le bouton micro. Un « + » de 20 px de large se rate une fois sur deux, et l'ajout rapide devient plus lent que d'ouvrir la fiche — l'inverse du but. */ .shop-suggest-add { flex: 0 0 auto; width: 44px; min-height: 44px; border: 0; border-inline-start: 1px solid var(--shop-border); background: #fff; color: var(--shop-accent); font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; } .shop-suggest-add:hover { background: #fff7ed; } .shop-suggest-add:focus-visible { outline: 2px solid var(--shop-accent); outline-offset: -2px; } /* ⚠ L'ÉTAT « EN COURS » SE VOIT : un second clic pendant la requête ferait un second ajout. Le bouton est désactivé par le script, encore faut-il que ça se voie. */ .shop-suggest-add[disabled] { color: #cbd5e1; cursor: progress; } /* Vignette : 48 × 48 comme la vignette d'un résultat de recherche, et c'est la seule dimension fixe de ce bloc — la taille d'une image d'aperçu, pas une mise en page. */ .shop-suggest-thumb { flex: 0 0 auto; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--shop-bg); border: 1px solid var(--shop-border); border-radius: var(--shop-radius-sm); overflow: hidden; } .shop-suggest-thumb img { width: 48px; height: 48px; object-fit: contain; } /* Repli DISCRET quand l'article n'a pas de photo : l'initiale de la désignation. */ .shop-suggest-thumb.is-empty { color: #94a3b8; font-size: 18px; font-weight: 700; text-transform: uppercase; } .shop-suggest-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* `text-align: start` : le texte commence du bon côté dans les deux langues. Et le débordement se règle par des POINTS DE SUSPENSION, jamais par un décalage de la ligne. */ .shop-suggest-name { font-size: 13px; font-weight: 600; color: var(--shop-accent); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ⭐⭐ LES TITRES TROP LONGS DÉFILENT (demande du client). ⚠ LA FENÊTRE ET LE TEXTE SONT DEUX ÉLÉMENTS. `.shop-suggest-name` est la fenêtre : elle garde sa largeur, tronque, et ne bouge JAMAIS. `.shop-suggest-name-inner` porte le texte et c'est LUI qui glisse. Animer directement la fenêtre déplacerait la boîte (donc la ligne entière) au lieu de faire défiler le texte à l'intérieur — c'est la raison d'être de l'enveloppe. ⚠ LA DISTANCE ET LA DURÉE VIENNENT DU SCRIPT (`--suggest-glissement`, `--suggest-duree`), qui les a MESURÉES : la distance est exactement ce qui manque pour lire la fin, et la durée suit la distance pour que la vitesse reste la même quel que soit le titre. ⚠ `alternate` : le texte revient au début au lieu de sauter d'un coup — un saut donnerait l'impression que le titre a changé. Et l'animation se MET EN PAUSE au survol : on ne fait pas défiler un texte que le client est en train de lire. */ .shop-suggest-name.is-defilant { text-overflow: clip; } .shop-suggest-name-inner { display: inline-block; white-space: nowrap; } .shop-suggest-name.is-defilant .shop-suggest-name-inner { animation: shop-suggest-defile var(--suggest-duree, 6s) ease-in-out infinite alternate; } .shop-suggest-row:hover .shop-suggest-name.is-defilant .shop-suggest-name-inner { animation-play-state: paused; } @keyframes shop-suggest-defile { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--suggest-glissement, 0px))); } } /* ⚠ EN ARABE, LE TEXTE DÉBORDE DE L'AUTRE CÔTÉ : il faut donc glisser dans l'AUTRE SENS (+X), sans quoi l'animation emmènerait le titre plus loin au lieu de révéler sa fin. */ [dir="rtl"] .shop-suggest-name.is-defilant .shop-suggest-name-inner { animation-name: shop-suggest-defile-rtl; } @keyframes shop-suggest-defile-rtl { from { transform: translateX(0); } to { transform: translateX(var(--suggest-glissement, 0px)); } } /* ⚠ QUI A DEMANDÉ MOINS DE MOUVEMENT N'EN A PAS. Le script ne pose déjà pas la classe dans ce cas (voir `animerTitresTronques`) ; cette règle est la seconde barrière, pour que la feuille de style dise la même chose que le script — et pour couvrir le cas où le réglage change EN COURS de session, sans rechargement. Le titre reste lisible en entier par son infobulle. */ @media (prefers-reduced-motion: reduce) { .shop-suggest-name.is-defilant .shop-suggest-name-inner { animation: none; transform: none; } } .shop-suggest-meta { font-size: 11px; color: var(--shop-muted); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shop-suggest-code { letter-spacing: .3px; } .shop-suggest-sep { opacity: .6; } .shop-suggest-stock.is-in { color: #15803d; } .shop-suggest-stock.is-out { color: #b91c1c; } /* Le prix est un ÎLOT LATIN dans une page arabe : `[dir="ltr"]` est posé par le script, et `unicode-bidi: isolate` empêche l'algorithme bidirectionnel de le déplacer. */ .shop-suggest-price { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--shop-navy); unicode-bidi: isolate; } .shop-suggest-empty { padding: 10px; font-size: 13px; color: var(--shop-muted); text-align: center; } /* ⭐⭐ LA LIGNE « RÉSULTATS APPROCHÉS » (voir la passe partielle de search.js). Elle est plus discrète qu'un résultat — c'est une EXPLICATION, pas une proposition — mais elle reste lisible et alignée à gauche, dans le sens de lecture de la page (`text-align: start`, donc à droite en arabe). ⚠ Aucune largeur en dur : la ligne suit la largeur du panneau. */ .shop-suggest-hint { padding: 8px 10px; font-size: 12px; color: var(--shop-muted); text-align: start; border-bottom: 1px solid var(--shop-border); } .shop-suggest-all .shop-suggest-link { justify-content: center; font-size: 13px; font-weight: 600; color: var(--shop-navy); } /* Sur téléphone, la barre prend toute la largeur de l'en-tête : elle n'a plus à cohabiter avec les liens du menu, et le panneau a ainsi l'écran entier à sa disposition. */ @media (max-width: 600px) { .shop-search-wrap { flex: 1 1 100%; min-width: 0; } .shop-suggest { max-height: 60vh; } } /* ═══════════════════════════════════════════════════════════════════════════════════ LES STORIES DE L'ACCUEIL — la vitrine des articles « mis en avant » dans la gestion ═══════════════════════════════════════════════════════════════════════════════════ ⭐ DEUX ÉTAGES, ET ILS SONT INDÉPENDANTS DU SCRIPT : · `.stories-track` — LA BANDE, dans le flux de la page : UN CERCLE PAR CATÉGORIE, et chaque cercle est un LIEN vers les articles de cette catégorie (le catalogue filtré sur elle). Sans JavaScript, c'est tout ce qu'il y a, et c'est utile tel quel. · `.story-viewer` — LA VISIONNEUSE plein écran, `hidden` dans le gabarit. Elle n'existe à l'écran que si le script l'ouvre : aucun bouton mort, aucun contenu invisible. ⚠ `hidden` EST RESPECTÉ PAR LA FEUILLE : la règle qui affiche la visionneuse est portée par la CLASSE `is-open` (posée par le script), jamais par `display` sur l'élément lui-même. Écrire `display: flex` ici la montrerait en permanence — l'erreur classique, et elle rendrait la page inutilisable (un calque plein écran qui capte tous les clics). */ .stories { margin-bottom: 18px; } .stories-title { font-size: 16px; margin: 0 0 8px; } /* ⭐ LA DURÉE DE VIE, DITE AU VISITEUR (48 h par défaut, voir SHOP_STORY_HOURS). Une histoire qui disparaît sans explication ressemble à un bug ; une histoire annoncée « 48 h » se comprend. */ .stories-hint { margin: 0 0 10px; font-size: 12px; color: var(--shop-muted); } /* ⭐⭐⭐ LA BANDE EST UNE RANGÉE DE CERCLES DE CATÉGORIE (demande du client : « make each category a cercle with a title below, each article has an indicator around the circle »). Un cercle par CATÉGORIE, la photo d'un de ses articles dedans, LE NOM DE LA CATÉGORIE SOUS LE CERCLE, le nombre d'articles POSÉ SUR le cercle, et — ce qui est l'objet de la dernière demande du client — UN TIRET ORANGE PAR HISTOIRE AUTOUR du cercle (« each story is an orange dash, seen = dash disapear », voir `.story-chip-ring` et `.story-chip-dash` plus bas). ⚠ LA RANGÉE RESTE UNE LISTE (`role="list"` dans le gabarit) : un lecteur d'écran annonce « 3 sur 10 » — dix cercles se comptent, cent pastilles non, et c'est tout l'objet de la refonte. ⓘ `.stories-groups` n'est plus qu'un CONTENEUR (une seule rangée désormais) : il porte le point d'écoute du script ([data-stories-groups], voir public/shop/shop.js), donc il reste. */ .stories-groups { display: flex; flex-direction: column; gap: 12px; } .stories-track { display: flex; gap: 10px; margin: 0; padding: 2px 2px 6px; list-style: none; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .story-chip { flex: 0 0 auto; scroll-snap-align: start; } .story-chip-link { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; text-decoration: none; color: var(--shop-navy); font-size: 11px; text-align: center; } .story-chip-link:hover { text-decoration: none; } /* Le cercle : c'est le code visuel des histoires (un anneau autour d'une vignette ronde). ⚠ `position: relative` N'EST PAS DÉCORATIF, ET IL L'EST DÉSORMAIS DEUX FOIS : le nombre d'articles est posé SUR le cercle (voir `.story-chip-count`) et les TIRETS de l'anneau sont des calques absolus (voir `.story-chip-dash`), tous deux repérés par rapport à lui. ⭐⭐⭐ L'ANNEAU EST FAIT DE TIRETS, UN PAR HISTOIRE (demande du client : « each story is an orange dash, seen = dash disapear »). Le nombre de tirets EST le nombre d'articles de la catégorie, et chacun part quand SON histoire a été ouverte (voir public/shop/shop.js et routes/shop.js, qui calcule les angles). ⚠⚠ IL N'Y A DONC PLUS AUCUN MOTIF DE FOND ICI : l'ancien `repeating-conic-gradient` a disparu, et c'est tout l'objet de la demande — un fond est UN SEUL dessin, il ne sait pas perdre un de ses tirets. Un anneau peint ne pouvait pas non plus dire COMBIEN d'histoires il restait à voir. ⓘ `padding: 6px` rentre la photo dans le cercle et réserve la place de l'anneau. ⚠⚠ IL EST LE MÊME DANS TOUS LES ÉTATS : un cercle vu ne se rembourre plus (l'ancienne règle « vue » passait de 4 px à 3 px), sinon la photo d'un cercle vu n'aurait pas la même taille que celle de ses voisins, et la rangée tressauterait au moment où l'indicateur change — un défaut visuel pour rien, puisque c'est la DISPARITION des tirets, et non l'épaisseur du rembourrage, qui porte l'information. */ .story-chip-ring { position: relative; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; padding: 6px; } /* ⭐⭐ UN TIRET DE L'ANNEAU. C'est un CALQUE qui recouvre tout le cercle (`inset: 0`) et que l'on fait PIVOTER de `--a` degrés — l'angle que le SERVEUR a calculé pour cette histoire (`i * 360 / n`, voir `categoriesDeStories`). La barre elle-même est posée par `::before`, EN HAUT du calque : la rotation l'amène donc à sa place sur la circonférence, et elle y reste TANGENTE (perpendiculaire au rayon) quel que soit l'angle — c'est ce qui donne l'anneau régulier, et non des barres qui s'inclinent. ⚠⚠ AUCUNE PROPRIÉTÉ PHYSIQUE ICI (`left`, `margin-left`…), ET C'EST LA RÈGLE DE CETTE FEUILLE (voir l'en-tête) : la barre se centre avec `inset-inline-start: 50%` et une marge LOGIQUE négative. En arabe, le calque est retourné en miroir ; la rotation étant symétrique, l'anneau est identique et la barre reste centrée sur son angle — le tiret ne se décale donc pas de quelques pixels en RTL. ⓘ LA LARGEUR DE LA BARRE EST FIXE (9 px), ET C'EST ASSUMÉ : plus une catégorie a d'histoires, plus les tirets se resserrent. Au-delà d'une vingtaine ils se touchent presque et l'anneau paraît DENSE — ce qui reste vrai et lisible (« il y a beaucoup à voir »), et une vitrine de boutique se compte en unités par famille (le total de la page est borné par STORY_LIMIT, voir routes/shop.js). Rétrécir la barre pour en caser davantage la rendrait invisible à trois mètres, c'est-à-dire inutile. */ .story-chip-dash { position: absolute; inset: 0; transform: rotate(var(--a)); } .story-chip-dash::before { content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 50%; margin-inline-start: -4.5px; width: 9px; height: 4px; border-radius: var(--shop-radius-pill); background: var(--shop-accent); } /* ⛔ UN TIRET VU DISPARAÎT — c'est la demande mot pour mot : « seen = dash disapear ». ⚠⚠ SURTOUT PAS UN TIRET PÂLI : un tiret délavé se lit encore comme « il est là », or c'est justement son ABSENCE qui porte l'information (« cette histoire est vue », et, quand il n'en reste aucun, « il n'y a plus rien à voir ici »). `display: none` le retire aussi de la mise en page : un cercle dont TOUS les tirets sont partis ne porte donc plus aucun anneau — il ne reste que la photo et la pastille du nombre, INTACTES toutes les deux : le cercle garde exactement l'apparence d'un cercle neuf (voir l'explication « ne pas ternir » plus bas). */ .story-chip-dash.is-seen { display: none; } /* ⭐ LA PHOTO EST RONDE ET REMPLIT LE CERCLE : elle occupe tout l'intérieur du rembourrage, et c'est donc le tour du cercle — la bande où vivent les tirets — qui reste visible. C'est la seule façon de lire l'indicateur : un carré dans un cercle ne laisserait voir qu'un liseré aux quatre coins. ⓘ Les tirets restent DANS cette bande de rembourrage (une barre posée au bord d'un calque de 72 px occupe un rayon d'environ 32 à 36 px, là où la photo s'arrête à 30 px) : ils ne mordent donc jamais sur l'image, même quand ils se croisent. */ .story-chip-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Pas de photo dans TOUTE la catégorie : un cercle vide, propre — jamais une image cassée. */ .story-chip-img.is-empty { display: block; background: var(--shop-bg); } /* ⭐⭐ LE NOMBRE D'ARTICLES DE LA CATÉGORIE, POSÉ SUR LE CERCLE (demande du client : un indicateur visible). ⚠ Il chevauche le bord du cercle : c'est ce qui le fait lire comme un compteur de la catégorie, et non comme un nombre perdu dans la rangée. */ .story-chip-count { position: absolute; inset-block-end: -2px; inset-inline-end: -2px; min-width: 20px; padding: 0 5px; border-radius: var(--shop-radius-pill); background: var(--shop-accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; } /* ⭐⭐⭐ « NE PAS TERNIR UNE HISTOIRE DÉJÀ VUE » (demande du client : « dont grey out story after being seen »). Les QUATRE signaux de grisaille qui vivaient ici — désaturation de la photo, baisse de son opacité, nom dégrisé et allégé, pastille du nombre éteinte — sont SUPPRIMÉS : une catégorie vue garde exactement la même photo, le même nom et la même pastille qu'une catégorie à voir. ⚠⚠ CE QUI RESTE, ET C'EST VOULU : LA DISPARITION DES TIRETS (`display: none`, plus haut). Le client l'a demandée mot pour mot (« seen = dash disapear »), et c'est un COMPTE, pas une couleur : le nombre de tirets dit combien d'histoires restent à voir. Ternir en plus le cercle revenait à le dire deux fois — et à faire croire qu'une histoire vue ne valait plus la peine d'être regardée. ⓘ L'état du cercle (`is-seen`) n'est donc plus qu'une CONSÉQUENCE de la disparition du dernier tiret (voir `rafraichirCercle` dans public/shop/shop.js) : il ne colore plus rien lui-même. */ /* Le nom sous le cercle, sur DEUX lignes au maximum, puis des points de suspension : la rangée garde une hauteur régulière, sinon un long nom de catégorie décale tous les cercles voisins. ⓘ Il reste EN GRAS pour tout le monde : depuis que la grisaille a été retirée (voir plus haut), l'état « vu » ne se lit plus que sur les tirets du cercle. */ .story-chip-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.15; max-width: 84px; font-weight: 700; } /* ------- LE LIEN VERS L'ADRESSE DES HISTOIRES (sur l'accueil seulement) ------- Demande du client : « make stories apearin ther own url , /shop/stories ». Un lien discret, sous la bande : la vitrine reste ce qu'on regarde, le lien ne fait que dire qu'il y en a plus. */ .stories-more { margin: 12px 0 0; } /* ------- LA PAGE DES HISTOIRES (`/shop/stories`) ------- ⭐⭐ LES CARTES SONT CELLES DE LA LISTE, PAS CELLES DU CATALOGUE. La vignette du catalogue (`partials/productCard.hbs`) porte un cœur de devis et un bouton d'ajout : deux actions qui ont leur place dans une page où l'on CHERCHE un article. Ici on est venu REGARDER la vitrine — la carte mène donc à la fiche et propose « voir en grand », et rien d'autre. ⓘ Une seconde grille écrite à la main serait à maintenir ; un `productCard` détourné de son sens serait pire. */ .stories-intro { margin: 0 0 14px; font-size: 13px; color: var(--shop-muted); } .stories-back { margin: 18px 0 0; } /* Un groupe par catégorie, comme les cercles de la bande (même ordre, même nom). */ .stories-cat { margin: 0 0 18px; } .stories-cat-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; font-size: 16px; } .stories-cat-title a { color: inherit; text-decoration: none; } .stories-cat-title a:hover { color: var(--shop-accent); } /* Le compte, à CÔTÉ du nom et non dans le titre : il change de forme selon la langue (l'arabe a cinq pluriels), et il est donc rendu par la traduction, pas par une concaténation. */ .stories-cat-count { font-size: 12px; font-weight: 400; color: var(--shop-muted); } /* ⭐ LA GRILLE SE REPLIE TOUTE SEULE (`auto-fill`) : deux colonnes sur un téléphone, quatre ou cinq sur un écran large, sans point de rupture à tenir. ⓘ `minmax(150px, 1fr)` et non une largeur fixe : la carte s'étire au lieu de laisser un vide à droite. */ .stories-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .story-card { display: flex; flex-direction: column; border: 1px solid var(--shop-border); border-radius: var(--shop-radius); background: #fff; overflow: hidden; } /* ⛔⛔ `.story-card.is-seen` NE PEINT RIEN, ET C'EST VOLONTAIRE. Le client a demandé qu'une histoire vue ne soit PLUS ternie (« dont grey out story after being seen ») : la classe est posée par le script (voir `marquerElement` dans public/shop/shop.js) et sert à SAVOIR, pas à griser — exactement comme pour les vignettes de visuels. ⚠ Ne pas ajouter de règle ici sans relire cette demande : le retour de la grisaille serait un défaut signalé deux fois. */ .story-card-media { display: block; } .story-card-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .story-card-img.is-empty { display: flex; align-items: center; justify-content: center; background: var(--shop-bg); color: var(--shop-muted); font-size: 12px; } .story-card-body { display: flex; flex-direction: column; gap: 6px; padding: 10px; flex: 1 1 auto; } .story-card-name { margin: 0; font-size: 14px; line-height: 1.25; } .story-card-name a { color: var(--shop-navy); text-decoration: none; } .story-card-name a:hover { color: var(--shop-accent); text-decoration: underline; } .story-card-price { margin: 0; font-size: 15px; font-weight: 700; color: var(--shop-accent); } .story-card-out { margin: 0; font-size: 12px; color: var(--shop-muted); } /* ⚠ `margin-top: auto` COLLE LE BOUTON AU BAS DE LA CARTE : les noms de longueurs différentes laissent ainsi la même ligne d'action sur toute la rangée, au lieu de boutons en escalier. */ .story-card-open { margin-top: auto; align-self: flex-start; padding: 6px 10px; border: 1px solid var(--shop-border); border-radius: var(--shop-radius-pill); font-size: 12px; text-decoration: none; color: var(--shop-navy); } .story-card-open:hover { border-color: var(--shop-accent); color: var(--shop-accent); } .story-card-open:focus-visible { outline: 2px solid var(--shop-accent); outline-offset: 2px; } /* ------- la visionneuse plein écran ------- */ .story-viewer { position: fixed; inset: 0; z-index: 96; display: none; flex-direction: column; background: #0b1220; color: #fff; /* ⚠ `touch-action: pan-y` REND LE BALAYAGE POSSIBLE. Sans elle, le navigateur garde le geste horizontal pour lui (défilement latéral, geste « retour » du système) et le doigt ne produit jamais les événements pointeur attendus : le balayage d'une histoire à l'autre — le geste que tout le monde fait — ne partirait pas. On LAISSE donc le vertical (`pan-y`) à la VISIONNEUSE ELLE-MÊME, qui n'a rien à faire défiler : ce qui se trouve derrière reste accessible au clavier et au lecteur d'écran, et le bloc de texte garde son propre défilement (voir `.story-info`). ⭐⭐⭐ MAIS LES GESTES DE LECTURE VIVENT SUR LES ZONES DE FRAPPE, ET ELLES, ELLES REPRENNENT LES DEUX AXES (`touch-action: none`, voir `.story-tap`) : le balayage VERS LE HAUT qui ouvre le groupe suivant (demande du client : « when i swipe up in story open next group ») ne partirait jamais si le navigateur s'emparait du geste vertical pour faire défiler la page. */ touch-action: pan-y; } .story-viewer.is-open { display: flex; } /* La barre de progression : une barre par histoire, toutes dans une seule boîte (le script y met les segments qu'il faut, une fois qu'il connaît le nombre d'histoires). */ .story-progress { display: flex; gap: 4px; padding: 10px 12px 4px; } .story-progress-seg { flex: 1 1 0; height: 3px; border-radius: var(--shop-radius-pill); background: rgba(255, 255, 255, .3); overflow: hidden; } .story-progress-seg i { display: block; height: 100%; width: 0; background: #fff; } .story-progress-seg.is-done i { width: 100%; } /* ⚠ LA DURÉE EST UNE VARIABLE POSÉE PAR LE SCRIPT (`--story-duree`) : la barre et le minuteur avancent donc ENSEMBLE, et changer la durée ne demande pas de toucher à deux endroits. */ .story-progress-seg.is-live i { animation: story-avance var(--story-duree, 5s) linear forwards; } @keyframes story-avance { from { width: 0; } to { width: 100%; } } /* ⭐⭐⭐ LA BARRE SE FIGE PENDANT UN APPUI LONG (demande du client : « when i press long on story pause it »). ⚠ `animation-play-state: paused` ARRÊTE l'animation LÀ OÙ ELLE EN EST — elle ne la rembobine pas et ne la relance pas : au relâchement, la barre repart du même point, exactement comme le minuteur du script reprend avec le temps qui reste (voir public/shop/shop.js). C'est ce qui garantit que la barre et la lecture ne se désynchronisent jamais. ⓘ La classe est portée par la VISIONNEUSE, et non par le segment : c'est l'ÉTAT DE LA LECTURE, pas l'état d'une barre — et c'est aussi ce qui permettra de l'annoncer un jour aux lecteurs d'écran. */ .story-viewer.is-paused .story-progress-seg.is-live i { animation-play-state: paused; } .story-stage { position: relative; flex: 1 1 auto; min-height: 0; } .story-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; } /* ⚠⚠⚠ CETTE LIGNE N'EST PAS UNE REDONDANCE : SANS ELLE, TOUTES LES HISTOIRES S'AFFICHENT EN MÊME TEMPS, EMPILÉES. C'est le défaut signalé par le client — « images don't change in stories » : le script posait bien l'attribut `hidden` sur les diapositives inactives, mais `hidden` n'est qu'une règle de la feuille DU NAVIGATEUR, qui perd TOUJOURS contre une règle d'auteur. Le `display: flex` de la règle ci-dessus l'emportait donc, chaque diapositive restait affichée, et comme elles sont toutes en `position: absolute; inset: 0`, c'était la DERNIÈRE du DOM qu'on voyait — en permanence. L'histoire avançait, la barre de progression avançait, la photo et le titre non. ⓘ C'est le même piège que `.shop-top[hidden]`, `.shop-mic[hidden]` et `.shop-voice[hidden]` plus haut : dès qu'une règle d'auteur pose un `display` sur un élément que le gabarit masque avec `hidden`, il faut la règle `[hidden]` qui va avec. Vérifié au navigateur : `affichees` doit valoir 1 (voir scripts/browser-check-shop.js). */ .story-slide[hidden] { display: none; } .story-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .story-img { width: 100%; height: 100%; object-fit: contain; } /* ⚠ LES VISUELS D'UN MÊME ARTICLE SONT EMPILÉS AU MÊME ENDROIT : c'est cette CLASSE qui décide lequel se voit — jamais l'attribut `hidden`, que la règle ci-dessus battrait (elle appartient à l'auteur, `hidden` au navigateur — voir l'avertissement sur `.story-slide`). */ .story-img.is-hidden { display: none; } .story-img.is-empty { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .6); font-size: 14px; } /* ⭐⭐ LA VIDÉO D'UNE HISTOIRE (demande du client : « add possibility to add videos to product , (video also shows in stories ) »). Elle prend EXACTEMENT la place d'une photo — `object-fit: contain`, comme `.story-img` — et elle porte le même `data-story-image` : la rotation ne fait aucune différence entre une image et une vidéo, et c'est voulu. `contain` plutôt que `cover` : une vidéo verticale ou carrée ne doit pas être rognée, c'est le seul réglage qui montre tout. ⚠ AUCUNE BARRE DE CONTRÔLE ICI, ET CE N'EST PAS UN OUBLI : les zones de frappe de la visionneuse (`.story-tap`) couvrent la moitié de la largeur sur toute la hauteur, donc une barre de contrôle serait visible et INERTE. La vidéo est jouée en sourdine (voir partials/storyViewer.hbs), le son s'obtient par le bouton `.story-sound`, et le lecteur complet vit sur la fiche produit. */ .story-video { background: #000; } /* ⭐ LE REPÈRE DE LECTURE SUR LA VIGNETTE D'UNE VIDÉO : sans lui, la vignette d'un film est indiscernable de celle d'une photo — le client croit que sa vidéo ne s'est pas ajoutée. */ .story-thumb-video { position: relative; } .story-thumb-video::after { content: '▶'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); background: rgba(6, 12, 24, .35); } /* ⭐ LE BOUTON DE SON D'UNE VIDÉO (voir `data-story-sound`) : il CHANGE DE LIBELLÉ quand on l'actionne, donc ses deux phrases viennent de la langue de la page (voir services/i18n.js). ⚠ Il est dans `.story-info`, donc au-dessus des zones de frappe : l'appuyer rend le son, il ne fait pas avancer l'histoire. */ .story-sound { align-self: flex-start; padding: 6px 12px; cursor: pointer; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--shop-radius-pill); color: #fff; font: inherit; font-size: 13px; } .story-sound:hover { background: rgba(255, 255, 255, .26); } .story-sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ⚠⚠ LE BOUTON EST RENDU `hidden` PAR LE GABARIT (il n'apparaît que sur une diapositive vidéo) : LA RÈGLE `[hidden]` EST DONC OBLIGATOIRE, comme pour `.shop-top`, `.shop-mic` et `.story-slide`. Une règle d'AUTEUR l'emporte TOUJOURS sur la feuille du navigateur : sans celle-ci, le bouton resterait visible sur les photos, et il agirait sur une vidéo qui n'est pas à l'écran. */ .story-sound[hidden] { display: none; } /* ⭐⭐ LES VIGNETTES DES AUTRES VISUELS (les variantes de l'article, demande du client). Elles vivent DANS le bloc de texte et d'actions, donc au-dessus des zones de frappe : un doigt sur une vignette change l'image, il ne passe pas à l'histoire suivante. ⚠ 44 px de côté, encoche comprise : c'est une cible de doigt, pas une décoration. */ .story-thumbs { display: flex; gap: 6px; flex-wrap: wrap; } .story-thumb { width: 44px; height: 44px; padding: 0; cursor: pointer; border: 2px solid transparent; border-radius: var(--shop-radius); overflow: hidden; background: rgba(255, 255, 255, .12); } .story-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ⭐⭐ L'INDICATEUR FIN D'UNE HISTOIRE : la vignette du visuel AFFICHÉ est entourée d'un accent — et c'est désormais le SEUL état que porte la bande de vignettes. ⚠⚠ LE TERNISSEMENT DES VISUELS DÉJÀ VUS A ÉTÉ SUPPRIMÉ, comme celui des cercles (demande du client : « dont grey out story after being seen ») : une histoire vue se regarde aussi bien qu'une autre. ⚠ La couleur n'est jamais le seul signal : la vignette active porte aussi `aria-pressed`. */ .story-thumb.is-active { border-color: var(--shop-accent); } .story-thumb:hover { border-color: rgba(255, 255, 255, .6); } .story-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ⚠ LE TEXTE SE POSE SUR UN DÉGRADÉ SOMBRE : les photos de catalogue sont souvent claires, et un titre blanc sur fond blanc serait illisible. Le dégradé n'est PAS décoratif. */ .story-info { position: relative; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; background: linear-gradient(to top, rgba(6, 12, 24, .95) 0%, rgba(6, 12, 24, .75) 60%, rgba(6, 12, 24, 0) 100%); /* ⚠⚠ `z-index: 1` N'EST PAS DÉCORATIF : C'EST CE QUI REND LES BOUTONS DE LA STORY CLIQUABLES. Les zones de frappe (`story-tap`, plus bas) font 35 % de large sur TOUTE LA HAUTEUR de la visionneuse, et elles sont peintes APRÈS l'histoire dans le DOM — donc PAR-DESSUS le bloc de texte et d'actions. Résultat, constaté par le client : « Ajouter au panier » et « Voir la fiche » ne faisaient pas ce qu'ils annonçaient — le doigt tombait sur la zone de frappe, et la story AVANÇAIT. Le bloc de texte passe donc au-dessus (z-index 1) et reprend les clics sur la bande du bas ; les zones de frappe gardent tout l'espace au-dessus, là où il n'y a rien à viser. ⚠ À NE PAS « SIMPLIFIER » EN RÉDUISANT LA HAUTEUR DES ZONES DE FRAPPE À UNE VALEUR EN PIXELS : la hauteur du bloc de texte dépend du titre (une ou deux lignes), du prix et de l'état de stock — un nombre fixe serait faux dès qu'un titre passe sur deux lignes, et le défaut reviendrait seulement pour les articles à nom long. */ z-index: 1; /* ⭐⭐⭐ ET IL GARDE SON PROPRE DÉFILEMENT, MAINTENANT QUE LES ZONES DE FRAPPE ONT PRIS LES DEUX AXES (voir .story-tap : touch-action: none). Sans ces deux lignes, une histoire dont le titre tient sur deux lignes, dont les vignettes sont nombreuses et dont l'article est en rupture pousserait ses boutons HORS de l'écran — et plus rien ne permettrait d'aller les chercher, puisque le geste vertical n'appartient plus qu'au script. Le bloc se limite donc à la hauteur de la diapositive et défile pour lui-même ; `touch-action: pan-y` lui rend le geste vertical DANS SA SURFACE, où il n'y a rien à balayer. */ max-height: 100%; overflow-y: auto; touch-action: pan-y; } .story-name { margin: 0; font-size: 18px; line-height: 1.25; } .story-price { margin: 0; font-size: 17px; font-weight: 700; } .story-price-none { font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, .75); } .story-out { margin: 0; font-size: 13px; color: #fbbf24; } .story-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .story-actions .btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: #fff; } .story-actions .btn-primary { border-color: var(--shop-accent); } /* ⭐⭐⭐ LE BOUTON DE PARTAGE D'UNE HISTOIRE EST VERT WHATSAPP, ET IL FAUT L'ÉCRIRE ICI (demande du client : « add botton to share story in whatssap status … »). Le bouton porte .btn-wa (le vert de la maison, voir plus bas) ET .btn, or la règle ci-dessus — .story-actions .btn — est PLUS SPÉCIFIQUE que .btn-wa : sans cette ligne, le bouton de partage serait peint comme les autres (fond translucide blanc) et perdrait la seule chose qui dit « WhatsApp » avant même de lire le libellé. ⚠ IL EST PLEINEMENT CLIQUABLE, comme les autres : il vit dans .story-info, donc AU-DESSUS des zones de frappe (voir l'avertissement de .story-info) — un doigt sur « Partager » partage, il ne fait pas avancer l'histoire. */ .story-actions .btn-wa { background: #25d366; border-color: #1da851; color: #fff; } .story-actions .btn-wa:hover { background: #1da851; } /* ⭐⭐ IL EST EN ICÔNE SEULE, COMME CELUI DE LA FICHE PRODUIT (demande du client : « share button in stories just a whatsapp icon »). Le libellé « Partager » a donc disparu, et c'est la classe .btn-icon (plus bas dans cette feuille) qui fait la forme : un carré de la taille du dessin, centré. ⚠ Le mot ne disparaît pas de la page pour autant : il vit dans title ET aria-label, donc la souris affiche l'infobulle et un lecteur d'écran annonce « Partager cette histoire sur WhatsApp ». Un dessin seul, sans nom accessible, serait un bouton muet — c'est la règle de la maison, et elle est vérifiée. */ .story-share { flex: 0 0 auto; } /* Les zones de frappe : transparentes, mais de VRAIS boutons (tabulation, nom accessible). ⚠ `z-index: 0` LES MET SOUS LE BLOC DE TEXTE ET D'ACTIONS (voir `.story-info` ci-dessus) : elles couvrent la photo, pas les boutons. Sans cette précision, elles repasseraient au-dessus au gré de l'ordre du DOM — c'est exactement le défaut qui a été signalé. ⚠⚠ ET ELLES COUVRENT LA MOITIÉ DE LA LARGEUR CHACUNE, PAS 35 %. À 35 %, il restait une bande MORTE de 30 % au milieu de la photo : le client qui tapait le centre de l'image — le geste le plus naturel — ne déclenchait RIEN, et la story ne passait pas (constaté : « the story don't skip on tap »). Deux moitiés se partagent toute la photo, comme dans les visionneuses que le client utilise déjà : à droite on avance, à gauche on revient. */ /* ⭐⭐⭐ ET ELLES APPARTIENNENT AU SCRIPT SUR LES DEUX AXES (demande du client : « when i swipe up in story open next group »). C'est ICI que le doigt se pose pour lire une histoire — donc ici que se font TOUS les gestes, y compris le balayage vers le haut qui change de groupe. Or la visionneuse laisse VOLONTAIREMENT le geste vertical au navigateur (touch-action: pan-y, voir plus haut) : sur un téléphone, celui-ci commencerait à faire défiler la page derrière, nous enverrait un « geste annulé » et le balayage vers le haut ne partirait jamais. Les zones de frappe reprennent donc la main entièrement (touch-action: none) : le doigt qui touche la photo ne fait plus défiler quoi que ce soit, et le script décide — tap, balayage latéral, balayage vers le haut, appui long. ⚠ LE BLOC DE TEXTE, LUI, GARDE SON DÉFILEMENT (voir .story-info) : sur un écran serré, l'histoire dont le titre, le prix et les vignettes débordent doit rester lisible jusqu'aux boutons. */ .story-tap { position: absolute; top: 0; bottom: 0; width: 50%; background: none; border: 0; cursor: pointer; z-index: 0; touch-action: none; } .story-tap-prev { inset-inline-start: 0; } .story-tap-next { inset-inline-end: 0; } .story-tap:focus-visible { outline: 2px solid #fff; outline-offset: -4px; } .story-close { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; cursor: pointer; background: rgba(255, 255, 255, .14); border: 0; border-radius: 50%; color: #fff; } .story-close:hover { background: rgba(255, 255, 255, .26); } /* ⚠ QUI A DEMANDÉ MOINS DE MOUVEMENT N'A PAS DE BARRE QUI COURT : le script ne lance alors aucune avance automatique (voir public/shop/shop.js), et cette règle est la seconde barrière — elle fige l'animation même si le réglage change en cours de session. */ @media (prefers-reduced-motion: reduce) { .story-progress-seg.is-live i { animation: none; width: 0; } } /* Le titre de l'accueil et le lien « voir le catalogue » sous les nouveautés. */ .home-section { margin-top: 18px; } .home-section-title { font-size: 16px; margin: 0 0 10px; } .home-more { margin: 14px 0 0; text-align: center; } /* ⭐⭐⭐ LE BOUTON « VOIR LE CATALOGUE » ÉPINGLÉ EN BAS DE L'ACCUEIL (demande du client : « stiky or pin button voire catalouge in home page mobile /web »). ⚠⚠ COMMENT IL EST ÉPINGLÉ, ET POURQUOI AINSI. C'est un élément COLLANT (position: sticky), posé en DERNIER dans la page : il descend donc avec le contenu, mais s'arrête au bord bas de l'écran tant qu'il reste de la page à lire, et reprend sa place à la fin. C'est ce qui fait qu'il ne recouvre jamais le pied de page — un élément collant ne peut pas sortir de son conteneur, or son conteneur s'arrête avec le contenu. ⚠⚠ ET IL NE CAPTE PAS LES CLICS QU'IL NE DOIT PAS : le conteneur est en pointer-events: none, seul le bouton reprend les clics. Sans cela, la bande (large de tout le contenu) recouvrirait les vignettes qu'elle survole, et un doigt sur un article ouvrirait le catalogue — le défaut classique d'un calque qui n'a rien à faire là. ⚠⚠ IL EST CENTRÉ (demande du client : « centre button voir cataloge »). Il était aligné sur la marge du contenu, du côté où commence la lecture ; le client l'a vu à l'écran et a demandé qu'il soit au milieu — c'est un appel à l'action, et un appel se lit au centre. ⚠ LE CENTRAGE NE LE FAIT PAS EMPIÉTER SUR LES DEUX AUTRES BOUTONS : WhatsApp et « haut de page » occupent le coin de FIN de ligne (44 px de large, à 16 px du bord — voir .shop-wa), et la bande du bouton centré reste au milieu : sur un écran de 360 px, le bouton le plus long (« Voir le catalogue » et son pictogramme) s'arrête autour du tiers droit, et sur un écran de 320 px l'écart se réduit sans jamais se recouvrir. C'est mesuré, pas espéré : deux pastilles superposées au même endroit seraient exactement le défaut qu'on vient de corriger. ⚠ IL EST AU-DESSUS DE LA BARRE D'ONGLETS SUR TÉLÉPHONE (voir la requête média plus bas) : sous elle, il serait invisible et intouchable, comme tout ce que la barre fixe recouvre. */ .home-pin { position: sticky; z-index: 40; bottom: 16px; display: flex; justify-content: center; margin-top: 18px; pointer-events: none; } .home-pin-btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 8px 22px rgba(15, 23, 42, .22); } /* ⚠ `.sr-only` EXISTE POUR LE TITRE DE PAGE DE L'ACCUEIL : la page s'annonce (« Accueil ») aux lecteurs d'écran sans qu'un gros titre répète ce que les stories disent déjà. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .shop-nav { display: flex; align-items: center; gap: 12px; font-size: 13px; } .shop-nav-link { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } /* ⭐⭐ LES ENTRÉES DE COMPTE SONT DES PICTOGRAMMES (demande du client) : l'en-tête du bureau tient sur une seule ligne, et les mêmes dessins servent la barre d'onglets du téléphone. ⚠ LE LIBELLÉ EST MASQUÉ, PAS SUPPRIMÉ : il reste dans le document (traduit, à sa place), et `aria-label` porte le nom accessible — sans lui, « display: none » retirerait le texte de l'arbre d'accessibilité et il ne resterait qu'un dessin muet. Voir layouts/main.hbs. ⓘ La bande entière est masquée sous 700 px (voir le bloc mobile) : cette règle ne concerne donc QUE le bureau, où les mots sont remplacés par les icônes. */ .shop-nav-label { display: none; } /* ⚠ 40 px DE CÔTÉ POUR UNE ICÔNE SEULE : c'est la cible de la souris, et l'écart entre deux icônes reste celui de la bande (12 px). Sans cela, trois dessins de 20 px collés l'un à l'autre seraient difficiles à viser. */ .shop-nav-link { min-height: 40px; min-width: 34px; justify-content: center; } .shop-link-btn.shop-nav-link { min-width: 40px; } /* Le libellé masqué laisse la place au dessin : l'infobulle (`title`) dit le mot, dans la langue de la page, et le nom accessible reste entier. */ .shop-nav-link .shop-icon { opacity: .85; } .shop-nav-link:hover .shop-icon { opacity: 1; } .shop-nav-cta { border: 1px solid var(--shop-accent); color: var(--shop-accent); padding: 4px 10px; border-radius: var(--shop-radius); } .shop-badge { background: var(--shop-accent); color: #fff; border-radius: var(--shop-radius-pill); padding: 0 6px; font-size: 11px; font-weight: 700; } /* ⚠ UN BADGE À ZÉRO SE TAIT. « Panier 0 » à côté d'un mot attire l'œil pour ne rien dire, et dans une barre d'onglets il encombre quatre cibles de 56 px. La classe est posée au premier rendu par le gabarit, puis tenue à jour par `setBadge` (public/shop/shop.js) — vider son panier à la dernière ligne doit faire disparaître le badge, pas afficher « 0 ». */ .shop-badge.is-empty { display: none; } .shop-inline-form { display: inline; } .shop-link-btn { background: none; border: 0; color: var(--shop-muted); cursor: pointer; font-size: 13px; padding: 0; } /* ⭐ LA DÉCONNEXION DE L'EN-TÊTE — TÉLÉPHONE UNIQUEMENT (voir layouts/main.hbs). ⚠ MASQUÉE SUR GRAND ÉCRAN (`display: none`) ET PAS SEULEMENT « déplacée » : la bande de liens du haut porte déjà la déconnexion, et l'en-tête du bureau doit rester exactement `marque · recherche · liens · langues`. Un second bouton dans cette ligne changerait la disposition demandée (et ferait doublon). Elle est révélée sous 700 px, où la bande de liens est masquée : c'est là qu'elle devient la SEULE déconnexion accessible. */ .shop-header-logout { display: none; } /* ⚠ `font: inherit` EST VOLONTAIRE, ET C'EST LE SEUL ENDROIT DE CETTE FEUILLE OÙ IL EST ÉCRIT POUR MOI : un `

`, DONC ELLE PORTAIT LES MARGES PAR DÉFAUT D'UN PARAGRAPHE (1em en haut et en bas, soit ~32 px) À L'INTÉRIEUR D'UN CHAMP DÉJÀ ESPACÉ : le bloc mesurait 112 px dans une colonne de téléphone pour deux lignes de texte, et ces 32 px étaient pris sur la hauteur utile du formulaire — donc sur le défilement que le client doit faire pour valider. On remet la marge à zéro et l'on met le nom et le téléphone CÔTE À CÔTE (ils tiennent sur une ligne dès 320 px) : le bloc passe sous les 60 px. ⓘ C'est la même correction que le reste de cette page : compacter sans rien retirer — les deux informations, leur libellé et leur explication restent tous affichés. */ .checkout-recipient { gap: 2px; } .checkout-recipient-value { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; } .checkout-recipient .field-hint { font-size: 12px; } /* ⚠⚠ `width: 100%` ET `min-width: 0` SUR TOUS LES CHAMPS DE FORMULAIRE, ET CE N'EST PAS COSMÉTIQUE. Un `` sans largeur explicite prend sa largeur INTRINSÈQUE, celle de son attribut `size` (20 caractères par défaut) — et avec la police du site à 16 px sur téléphone, cela fait ~351 px, soit PLUS que la colonne qui l'accueille. Or un élément de grille ou de flex a `min-width: auto` : il REFUSE de devenir plus étroit que son contenu, donc un champ trop large ÉLARGIT sa grille et fait déborder la PAGE ENTIÈRE — le client peut alors la faire glisser latéralement, et en arabe le décalage se voit au premier coup d'œil. ⓘ Constaté et mesuré sur la page de demande de devis : 5 px de débordement, champ à 351 px dans une colonne de 317 (chaîne des parents relevée dans le navigateur). Le défaut existait sur TOUS les formulaires (inscription, commande, coordonnées) : c'est la même règle qui les corrige. */ .field input, .field textarea { width: 100%; min-width: 0; } .field select { border: 1px solid var(--shop-border); border-radius: var(--shop-radius-sm); padding: 7px 9px; font: inherit; background: #fff; color: inherit; width: 100%; min-width: 0; } .sent-summary { margin: 16px 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .sent-summary > div { display: flex; gap: 10px; justify-content: space-between; border-bottom: 1px dashed var(--shop-border); padding-bottom: 4px; } .sent-summary span { color: var(--shop-muted); } /* ---------------------------------------------------------------- compte client */ .auth-card { max-width: 560px; } .auth-note { background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; border-radius: var(--shop-radius); padding: 10px 12px; font-size: 13px; margin-bottom: 14px; } .form-single { grid-template-columns: 1fr; } /* ⭐⭐ « MOT DE PASSE OUBLIÉ » (views/shop/forgot.hbs). La page de confirmation décrit une DÉMARCHE en trois temps : une liste numérotée se lit dans l'ordre, là où trois phrases à la suite se sautent. ⚠ Aucune largeur en dur, et le retrait de la liste suit le sens de lecture (`padding-inline-start`), donc la page arabe n'a pas de règle supplémentaire. */ .forgot-steps { margin: 12px 0; padding-inline-start: 22px; font-size: 13px; display: flex; flex-direction: column; gap: 8px; color: var(--shop-navy); } /* Les deux issues de la confirmation (WhatsApp, téléphone) sur une ligne quand il y a la place, l'une sous l'autre sur un téléphone : ce sont des boutons, donc des cibles de pouce. */ .forgot-actions { flex-wrap: wrap; gap: 8px; } /* Le lien « Mot de passe oublié ? » sous le formulaire de connexion : un recours, pas l'action attendue — il reste discret, mais il est une VRAIE cible tactile (44 px de haut). */ .form-hint { margin: 2px 0 0; font-size: 13px; } .form-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--shop-accent-dark); text-decoration: underline; } .account-status { border-radius: var(--shop-radius); padding: 10px 12px; font-size: 13px; margin-bottom: 16px; } .account-status.is-pending { background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; } .account-status.is-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; } .account-block { border-top: 1px solid var(--shop-border); padding-top: 14px; margin-bottom: 22px; } .account-block h2 { font-size: 16px; margin: 0 0 10px; } .account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 18px; font-size: 13px; } .account-grid > div { display: flex; flex-direction: column; } .account-grid span { color: var(--shop-muted); font-size: 12px; } .account-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .account-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--shop-border); border-radius: var(--shop-radius); padding: 8px 10px; font-size: 13px; } .account-tag { background: #dcfce7; color: #166534; border-radius: var(--shop-radius); font-size: 10.5px; font-weight: 700; padding: 0 6px; margin-inline-start: 6px; } .account-ok { color: #15803d; font-weight: 600; } /* État « transmission en attente » : ce n'est ni une réussite ni une faute du client — un opérateur est prévenu (voir services/outbox.js, qui lève une alerte). */ .account-warn { color: #b45309; font-weight: 600; } /* ⭐ L'INDICATEUR « LIVRAISON VALIDÉE », SOUS L'ÉTAT DE LA COMMANDE (voir views/partials/deliveryState.hbs). Il vient de l'ERP (`delivery_validated`, `delivery_date`) et répond à LA question du client : ma marchandise est-elle partie ? ⚠ IL REPREND LE VOCABULAIRE VISUEL DÉJÀ LÀ — le vert des états favorables (`.account-ok`), le gris des mentions neutres — plutôt que d'inventer une pastille de plus. `display: block` parce qu'il se pose SOUS la pastille d'état, dans la même case. */ .delivery-state { display: block; margin-top: 2px; font-size: 12px; color: var(--shop-muted); } .delivery-state.is-ok { color: #15803d; font-weight: 600; } /* ⭐⭐ L'ÉTAT DE PRÉPARATION PUBLIÉ PAR L'ERP (`prep_status`, migration 016), affiché SOUS l'état de la commande, dans la même case. Il reprend le vocabulaire visuel de l'indicateur de livraison juste au-dessus — c'est la même sorte d'information, et le client les lit ensemble. ⚠ CLASSE DISTINCTE (`.prep-state`, et non `.delivery-state`) : les deux notions sont VOISINES MAIS DIFFÉRENTES — l'une vient du bon de livraison (`delivery_validated`), l'autre de l'ERP sur la commande elle-même — et un contrôle qui veut parler de l'une ne doit pas lire l'autre. Cela permet aussi de vérifier, dans les tests, qu'un état absent ne produit AUCUNE ligne (le partiel de livraison, lui, écrit « En préparation » quand il ne sait rien : c'est un autre cas, et il est testé séparément). */ .prep-state { display: block; margin-top: 2px; font-size: 12px; color: var(--shop-muted); } .prep-state.is-ok { color: #15803d; font-weight: 600; } /* Un titre de sous-section de l'espace client (liste d'envies : articles retirés). Plus discret qu'un `

` de section : c'est une précision, pas une section de plus. */ .account-subtitle { font-size: 14px; margin: 18px 0 8px; } /* ---------------------------------------------------------------- onglets de l'espace client ⚠⚠ LE MASQUAGE DES PANNEAUX DÉPEND DE `.is-enhanced`, ET RIEN D'AUTRE. Cette classe est posée par le JavaScript (public/shop/shop.js), jamais par le gabarit : sans script, les quatre sections restent VISIBLES l'une sous l'autre. Une page client plus longue est acceptable ; une page client vide parce qu'un script a échoué ne l'est pas. */ .account-tabs.is-enhanced > .account-panel { display: none; } .account-tabs.is-enhanced > .account-panel.is-active { display: block; } .account-panel { margin-bottom: 8px; } .account-tablist { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--shop-border); margin-bottom: 16px; } .account-tab { border: 1px solid transparent; border-bottom: 0; background: none; padding: 8px 14px; font: inherit; font-size: 13px; color: var(--shop-muted); cursor: pointer; margin-bottom: -1px; /* Coins arrondis du HAUT seulement : la barre d'onglets est sous eux. Ce sont les coins LOGIQUES de début, pour que l'onglet se dessine pareil en arabe. */ border-start-start-radius: var(--shop-radius); border-start-end-radius: var(--shop-radius); } .account-tab:hover { color: var(--shop-navy); } .account-tab:focus-visible { outline: 2px solid var(--shop-accent); outline-offset: -2px; } /* ⭐ L'ONGLET ACTIF DOIT SE VOIR SANS ÊTRE SURVOLÉ : c'est ce qui dit au client où il est. La classe est doublée par `aria-selected` (voir shop.js), pour les lecteurs d'écran. */ .account-tab.is-active { color: var(--shop-navy); font-weight: 700; background: #fff; border-color: var(--shop-border); border-bottom: 2px solid var(--shop-accent); } /* ---- historique & relevé Les deux tableaux reprennent la base des tableaux de la boutique (`.qsel-table`) : c'est la même grille, les mêmes filets, et donc la même lecture. Ce qui suit ne règle que ce qui leur est propre : la largeur des colonnes et l'alignement des montants. ⚠ LES COLONNES SONT CELLES DES ÉCRANS DE L'ERP, MOINS CELLES QUE LE CLIENT A DEMANDÉ DE RETIRER — et elles ne se comptent plus de la même façon, justement parce qu'une colonne est partie (voir `ledger-col-act`, dernière colonne d'action) : · Historique : REF BL · Date mvt · Type · Etat · Montant Net TTC · Regl (+ action) — ⚠ la colonne « Échéance » de l'ERP est RETIRÉE : jamais renseignée sur ces pièces, une date vide n'apprend rien au client et lui coûte une colonne de plus à traverser ; · Bons de livraison du mois : REF BL · Date mvt · Etat · Montant Net TTC · Regl (+ action) — mêmes colonnes, sans « Type » : toutes les lignes sont des B.L. ; · Relevé : ID · Date · Libellé · Débit · Crédit · Réf mvt · Type (inchangé). ⓘ « Réf mvt » est devenu « REF BL » dans les deux tableaux de pièces (demande du client) : le mot « mvt » (mouvement) est le vocabulaire du back-office, et c'est « BL » que le client prononce au téléphone. Le RELEVÉ garde « Réf mvt » : là, la colonne n'est renseignée que sur un RÈGLEMENT et désigne la pièce que ce règlement solde — « REF BL » y serait faux. */ /* ⚠ Sept colonnes sur un téléphone ne tiennent pas : on préfère un DÉFILEMENT horizontal du tableau à un tableau écrasé dont les montants se coupent. */ .ledger-scroll { overflow-x: auto; } /* ⭐⭐ LA LIGNE D'ACTIONS D'UN TABLEAU DE L'ESPACE CLIENT (l'aperçu PDF du relevé) : elle se place AU-DESSUS du tableau, alignée sur son bord d'attache — et jamais au milieu, contrairement à la barre d'actions de la PAGE d'un document (voir `.doc-actions`), qui est le document lui-même. */ .ledger-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; } .ledger-table { min-width: 720px; } .ledger-col-id { width: 84px; } .ledger-col-date { width: 92px; } .ledger-col-ref { width: 104px; } /* « Retour/Avoir » est le plus long type de l'ERP : la colonne doit le tenir d'un seul tenant, sinon elle se coupe en deux et le tableau devient illisible. */ .ledger-col-type { width: 124px; } .ledger-col-state { width: 108px; } .ledger-col-regl { width: 116px; } .ledger-col-type-letter { width: 52px; } /* Colonne d'ACTION (« Aperçu PDF ») des tableaux de pièces : l'en-tête reste VIDE (voir le gabarit) — c'est la convention déjà utilisée par le panier, et une colonne d'action n'a rien à annoncer. ⚠ La largeur est fixée pour que le bouton ne se coupe pas, et le contenu s'aligne sur le bord de FIN de ligne comme les autres colonnes d'action. */ .ledger-table th.ledger-col-act, .ledger-table td.ledger-col-act { width: 116px; text-align: end; white-space: nowrap; } /* La colonne du libellé prend ce qui reste : c'est la plus longue, et c'est celle qu'on lit. */ .ledger-col-label { width: auto; } /* ⚠ SÉLECTEUR DOUBLÉ (`th.` ET `td.`) À DESSEIN : `.qsel-table th`/`.qsel-table td` pose `text-align: start` avec une spécificité PLUS FORTE qu'une simple classe, et une règle `.ledger-col-amount` posant un autre alignement n'aurait donc aucun effet. ⭐⭐ LES MONTANTS SONT AU CENTRE (demande du client : « prices and dates in the middle »). ⚠⚠ ILS ÉTAIENT POSÉS SUR `end` — « le bord de fin de ligne, là où on lit un nombre ». En FRANÇAIS c'est à droite, donc tout allait bien ; en ARABE, `end` vaut GAUCHE, et les montants partaient seuls à l'autre bout de la ligne, détachés de leur colonne. Un montant centré se lit en colonne — c'est ainsi qu'on compare un relevé, d'une ligne à l'autre — et il ne danse plus d'une ligne à l'autre selon le nombre de chiffres. `center` se lit pareil dans les deux sens. */ .ledger-table th.ledger-col-amount, .ledger-table td.ledger-col-amount { width: 112px; text-align: center; white-space: nowrap; } /* ⭐⭐⭐ LES TABLEAUX DE L'ESPACE CLIENT : BORDÉS, ALIGNÉS SUR LE BORD D'ATTACHE — SAUF LES MONTANTS ET LES DATES, AU CENTRE (demande du client, dans les trois onglets « طلباتي · السجل · الكشف » : « make table with border — align element to the right in arabic in each column — prices and dates in the middle »). ⚠⚠ CE QUI N'ALLAIT PAS, ET QUI NE SE VOYAIT QU'EN ARABE. `.qsel-table th/td` pose `text-align: start` — donc à DROITE en arabe, à gauche en français —, mais les MONTANTS étaient posés sur `end` par une règle plus spécifique (`td.ledger-col-amount`, justement écrite pour les coller au bord de fin de ligne) : en arabe, ce bord est à GAUCHE, et les chiffres partaient donc seuls à l'autre bout de la ligne, détachés de leur colonne. Toute règle de côté PHYSIQUE se paie dans la seconde langue ; `start` et `center` se lisent dans les deux. ⭐ LE CONTENU S'ALIGNE DONC SUR LE BORD D'ATTACHE (à droite en arabe, à gauche en français) — les références, les types, les états, les modes de règlement — SAUF : · LES MONTANTS (`ledger-col-amount`, `qsel-col-total`, `qsel-col-price`) et · LES DATES (`cell-center`), qui sont AU CENTRE. Ce sont les deux colonnes qu'on lit EN COLONNE d'une ligne à l'autre : un montant collé à un bord danse d'une ligne à l'autre selon le nombre de chiffres, alors qu'un montant centré se compare d'un coup d'œil — c'est exactement ce qu'on fait sur un relevé. ⚠⚠ LES BORDURES SONT POSÉES ICI, ET PAS SUR `.qsel-table` TOUT ENTIER : la même classe sert au PANIER et à la demande de devis, où les cellules sont des blocs de saisie (vignette, compteur, corbeille) — un cadre autour de chacun alourdirait des écrans qu'on manipule. La grille complète est ce qu'on veut d'un TABLEAU DE CONSULTATION : trois onglets de l'espace client, plus le relevé imprimé (`.doc-table`, le même tableau sur le papier). ⚠ ET LA BORDURE EXISTANTE (`border-bottom`, sur toutes les cellules) N'EST PAS RETIRÉE : elle est simplement complétée — `border-collapse: collapse` fait que les quatre côtés ne se doublent pas. */ .account-panel .qsel-table th, .account-panel .qsel-table td, .doc-table th, .doc-table td { border: 1px solid var(--shop-border); } /* ⭐ `cell-center` EST POSÉE PAR LES GABARITS, COLONNE PAR COLONNE (les dates) : une classe sur la cellule, jamais sur un rang — un tableau dont l'ordre des colonnes change ne doit pas déplacer les alignements par accident. */ .qsel-table th.cell-center, .qsel-table td.cell-center { text-align: center; } /* ⚠ LES SÉLECTEURS SONT DOUBLÉS (`th.` ET `td.`) ET PRÉFIXÉS, À DESSEIN : `.qsel-table th/td` pose `start` avec une spécificité plus forte qu'une simple classe, et une classe seule ne suffirait pas à la corriger (même piège que celui documenté plus haut pour les montants). */ .account-panel .qsel-table th.qsel-col-total, .account-panel .qsel-table td.qsel-col-total, .account-panel .qsel-table th.qsel-col-price, .account-panel .qsel-table td.qsel-col-price, .doc-table th.qsel-col-price, .doc-table td.qsel-col-price { text-align: center; } /* ⚠ LA COLONNE D'ACTION AUSSI, ET C'EST UNE CORRECTION D'ARABE : en écriture de droite à gauche elle est la DERNIÈRE COLONNE, donc à gauche du tableau — `end` (son bord gauche) y collait le bouton au bord de la page, à l'écart de la ligne qu'il concerne. `start` le ramène du côté du contenu, dans les deux sens de lecture. */ .account-panel .qsel-table th.ledger-col-act, .account-panel .qsel-table td.ledger-col-act, .account-panel .qsel-table td.qsel-col-act { text-align: start; } /* ⭐⭐ LE SOLDE DU COMPTE, SOUS LE TABLEAU — comme le récapitulatif de l'ERP, et non comme une colonne : c'est la question que le client vient poser (« combien je dois ? »), et l'ERP ne l'affiche pas ligne à ligne. ⭐ IL EST SUR FOND VERDÂTRE (demande du client). Le vert est déjà, dans toute la boutique, la couleur des états favorables (`.account-status.is-ok`, `.account-ok`, `.delivery-state.is-ok`) : le solde — le chiffre qu'on vient chercher — se lit donc comme une information, et non comme un tableau de plus. Le couple vert foncé sur vert très clair est le même que celui des encadrés voisins, dont le contraste est largement suffisant (≈ 12:1). ⚠ LA TEINTE N'EST PAS LE SEUL SIGNAL : voir `is-credit` ci-dessous. */ .ledger-balance { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; padding: 8px 12px; font-size: 14px; border: 1px solid #bbf7d0; border-radius: var(--shop-radius); background: #f0fdf4; color: #166534; } .ledger-balance > span { color: #166534; font-size: 12px; } .ledger-balance-tag { border: 1px solid #bbf7d0; background: #fff; border-radius: var(--shop-radius-pill); font-size: 12px; font-weight: 700; padding: 0 8px; white-space: nowrap; } /* ⚠⚠ UN SOLDE NÉGATIF EST UN CRÉDIT EN FAVEUR DU CLIENT — ET CELA SE DIT, PAS SEULEMENT SE COLORER. Le montant porte déjà son signe (c'est l'aide de mise en forme des montants qui l'ajoute), la phrase « en votre faveur » est écrite dans le gabarit, et cette classe change la TEINTE : un jaune ambré (la couleur des mentions à lire, déjà utilisée par `.ledger-unpaid`) plutôt que le vert, pour qu'un solde créditeur ne se confonde pas avec un solde nul ou dû au premier coup d'œil. Une couleur seule ne dit rien à un lecteur d'écran, ni à un daltonien : c'est pourquoi elle vient EN PLUS des mots, jamais à leur place. ⓘ Les accolades sont évitées dans les commentaires de cette feuille : plusieurs contrôles du dépôt découpent les règles dessus, et une moustache citée en exemple les ferait déraper. */ .ledger-balance.is-credit { background: #fffbeb; border-color: #fde68a; color: #92400e; } .ledger-balance.is-credit > span { color: #92400e; } .ledger-balance.is-credit .ledger-balance-tag { border-color: #fde68a; } /* ⚠ « IMPAYÉ » EST UNE MENTION, PAS UN MONTANT. L'ERP renvoie ces règlements à 0 des deux côtés (voir server/services/clientLedger.js) : sans ce badge, la ligne se lirait comme un règlement ordinaire de zéro — un chiffre muet. */ .ledger-unpaid { background: #fef3c7; color: #92400e; border-radius: var(--shop-radius); font-size: 10.5px; font-weight: 700; padding: 0 6px; white-space: nowrap; } /* La ligne entière est teintée : le regard doit s'y arrêter, c'est souvent la raison de l'appel. */ .ledger-table tbody tr.is-unpaid { background: #fffbeb; } /* Les pièces réglées, dans le libellé composé d'une page arabe (voir ledgerType.hbs). */ .ledger-refs { color: var(--shop-muted); font-size: 12px; } /* ⭐⭐ L'ÉTAT DE RÈGLEMENT D'UNE PIÈCE (demande du client : « réglé / partiel / non réglé » dans l'historique). Trois teintes, LES MÊMES que partout ailleurs dans la boutique : le vert des états favorables (`#15803d` sur `#f0fdf4`), l'ambre des mentions à lire (`#92400e` sur `#fef3c7`) et le gris des informations neutres. Aucune couleur n'est inventée ici. ⚠⚠ LA COULEUR N'EST JAMAIS LE SEUL SIGNAL : les trois mots (« Réglé », « Partiellement réglé », « Non réglé ») sont écrits dans la cellule, en toutes lettres et dans la langue de la page. Un daltonien, un lecteur d'écran ou une impression en noir et blanc lisent donc la même chose. ⚠ Et l'état reste DISCRET : c'est une colonne d'information, pas une alerte. Seul l'ambre de « non réglé » attire l'œil — c'est la ligne qui fait téléphoner. */ .ledger-settled { border-radius: var(--shop-radius); font-size: 10.5px; font-weight: 700; padding: 0 6px; white-space: nowrap; } .ledger-settled.is-ok { background: #f0fdf4; color: #15803d; } .ledger-settled.is-part { background: #fef3c7; color: #92400e; } .ledger-settled.is-due { background: #fff7ed; color: #7c2d12; } /* ⚠ LE MESSAGE D'INDISPONIBILITÉ N'EST PAS UNE LISTE VIDE. Il dit qu'on ne SAIT PAS — panne de l'ERP, client inconnu, compte non rattaché — au lieu d'affirmer « aucun document ». Voir views/partials/ledgerNotice.hbs. */ .ledger-notice { margin: 0; padding: 10px 12px; font-size: 13px; border: 1px solid #fed7aa; background: #fff7ed; color: #7c2d12; border-radius: var(--shop-radius); } /* Colonne laissée vide (un débit nul n'est pas « 0,00 », il n'existe pas) : le tiret doit se lire comme une absence, donc en gris. */ .muted { color: var(--shop-muted); } /* ═══════════════════════════════════════════════════════════════════════════════════ ⭐⭐ GRAND ÉCRAN (au-dessus de 700 px) : L'EN-TÊTE SUR UNE SEULE LIGNE ═══════════════════════════════════════════════════════════════════════════════════ ⚠⚠ CE BLOC EST LE COMPLÉMENT EXACT DU BLOC MOBILE QUI SUIT (`max-width: 700px`) : les deux bornes se partagent l'écran, et rien n'est décrit deux fois. Il vit ICI, à la fin de la feuille, pour une raison précise : il doit pouvoir ÉCRASER les règles générales posées plus haut (`.shop-voice`, `.shop-search-wrap`, `order`), qui décrivent la mise en page de repli. ⭐ CE QUE LA DEMANDE CHANGE, ET POURQUOI CHAQUE RÈGLE EST LÀ : 1. « aligner les éléments de l'en-tête sur UNE RANGÉE » : plus de retour à la ligne (`flex-wrap: nowrap`) et un ORDRE explicite — logo · recherche · icônes · langues —, parce que l'ordre du DOM, lui, commence par la marque puis les langues (la boîte `.shop-header-top` s'efface en `display: contents`) ; 2. « des icônes au lieu du texte » : les libellés de `.shop-nav` sont masqués (règle générale, plus haut) — les entrées sont donc des dessins de 20 px avec une cible de 34-40 px, et l'infobulle porte le mot ; 3. « la langue de dictée À CÔTÉ de la barre de recherche » : le sélecteur `|FR|AR|` était SOUS le champ sur grand écran (`margin-top: 4px`). `.shop-voice` passe en `display: contents` — comme sur téléphone — et ses enfants deviennent des éléments de la ligne de recherche : le champ prend la place qui reste, le sélecteur garde la sienne, et le message d'état (« J'écoute… ») s'étale dessous (`flex: 1 1 100%`) sans pousser la ligne. ⚠ AUCUN NŒUD N'EST DÉPLACÉ POUR AUTANT : le même partiel sert les deux dispositions. ⚠ `min-width: 0` SUR LA RECHERCHE, SINON LA LIGNE DÉBORDE. Un élément flex refuse de devenir plus étroit que son contenu (`min-width: auto`) : sans cette borne, le champ — qui porte un texte de désignation parfois long — élargirait l'en-tête au lieu de se comprimer, et la page entière défilerait latéralement (c'est exactement le défaut de 68 px corrigé sur téléphone). */ @media (min-width: 701px) { .shop-header-inner { flex-wrap: nowrap; } .shop-brand { order: 1; } .shop-header-search { display: block; order: 2; flex: 1 1 auto; min-width: 0; } .shop-header-search .shop-search-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; width: 100%; } .shop-search { flex: 1 1 240px; min-width: 0; } .shop-voice { display: contents; } .shop-voice-lang { order: 1; flex: 0 0 auto; } .shop-voice-status { order: 2; margin-top: 0; } .shop-nav { order: 3; flex: 0 0 auto; } .shop-lang { order: 4; flex: 0 0 auto; } } /* ═══════════════════════════════════════════════════════════════════════════════════ MOBILE — MESURÉ SUR UN ÉCRAN DE 375 px, PAS DEVINÉ. ═══════════════════════════════════════════════════════════════════════════════════ ⚠⚠ CE QUI A ÉTÉ TROUVÉ, ET QUI A DICTÉ TOUT CE BLOC. L'audit en 375×667 (Chrome, émulation tactile) donnait, sur CHAQUE page : `nav.shop-nav` mesurait 427 px dans une fenêtre de 375 → 68 px de débordement, donc la page ENTIÈRE se déplaçait latéralement (titre coupé, contenu qui glisse sous le doigt, et en arabe la page se décalait de 43 px). Le reste du CSS était sain : aucune image sans dimensions, aucun tableau débordant hors de sa boîte. ⓘ La mesure utilise `document.documentElement.clientWidth`, PAS `window.innerWidth` : en émulation mobile, `innerWidth` s'ÉLARGIT avec le contenu débordant (443 pour un écran de 375) et fait donc disparaître le défaut qu'on cherche — c'est ce qui a masqué le problème au premier passage. Voir le script d'audit dans le rapport. Ce bloc ne « réduit » rien : il laisse la page tenir dans la largeur de l'écran, et rend les cibles assez grandes pour un doigt (44 px, recommandation Apple/Google). */ @media (max-width: 700px) { /* ═══════════════════════════════════════════════════════════════════════════════ L'EN-TÊTE DU TÉLÉPHONE TIENT EN DEUX LIGNES, ET RIEN DE PLUS. LIGNE 1 : la marque, puis les langues du site en pastilles-icônes (`FR` / `AR`). LIGNE 2 : la barre de recherche, et la langue de DICTÉE juste à côté (`|FR|AR|`). Les quatre destinations du quotidien (compte, commandes, panier, envies) sont descendues dans la BARRE D'ONGLETS, en bas de l'écran — c'est là que le pouce les atteint. ⚠ POURQUOI DEUX LIGNES ET NON TROIS, COMME AVANT. La troisième ligne était une bande de liens qui DÉFILAIT horizontalement : il fallait la faire glisser pour découvrir « Créer un compte », et le sélecteur de langue s'y perdait hors écran. Une barre d'onglets fixe montre tout, tout le temps, et ne pousse jamais le contenu. ⚠ `min-width: 0` SUR CHAQUE LIGNE N'EST PAS COSMÉTIQUE. Un élément flex a `min-width: auto` : il REFUSE de devenir plus étroit que son contenu. Sans ces bornes, une ligne dont le contenu ne tient pas ÉLARGIT l'en-tête au lieu de le comprimer, et la PAGE déborde horizontalement (mesuré : 39 px de débordement sur un iPhone SE lors d'un essai précédent). */ .shop-header-inner { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 12px; /* Encoche et coins arrondis : le contenu ne doit pas passer dessous. */ padding-inline: calc(12px + env(safe-area-inset-left)) calc(12px + env(safe-area-inset-right)); min-width: 0; } .shop-brand { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; } /* ⭐ LE LOGO RÉTRÉCIT SUR TÉLÉPHONE (demande du client) : 30 px de haut au lieu de 40. La place est comptée sur la ligne 1 (marque · langues · déconnexion), et un logo de 40 px y prenait la hauteur d'une cible tactile pour un élément qui, lui, n'a pas besoin d'être gros. */ .shop-brand-logo { height: 30px; } /* ⭐ LIGNE 1 : « MARQUE + LANGUES ». `display: contents` est ANNULÉ ici — la boîte redevient une vraie ligne, la marque à un bout et les langues à l'autre. */ .shop-header-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } /* ⭐⭐ LA DÉCONNEXION EST ICI, SUR LA PREMIÈRE LIGNE, ET ELLE EST VISIBLE SANS DÉFILER (demande du client) : la bande de liens du haut est masquée sous 700 px, et elle portait la seule déconnexion de la page. ⚠ `order: 5` : elle passe APRÈS les pastilles de langue (qui portent `order: 4`), donc en fin de ligne — la place habituelle d'une action de compte, et la même en arabe (c'est l'ordre du DOM dans une ligne `flex` qui suit le sens de lecture). */ .shop-header-logout { display: block; order: 5; flex: 0 0 auto; } /* ⚠ 44 px DE CÔTÉ COMME DE HAUT : c'est la cible du doigt, au même titre qu'un onglet. */ .shop-logout-btn { min-width: 44px; min-height: 44px; } .shop-lang { margin-inline-start: 0; padding: 2px; } /* 44 px : la langue est une cible comme les autres, au même titre qu'un onglet. */ .shop-lang-link { min-height: 44px; min-width: 44px; justify-content: center; padding-inline: 8px; } /* ⭐ LIGNE 2 : LA RECHERCHE, ET LA LANGUE DE DICTÉE À CÔTÉ. ⚠ C'EST UNE GRILLE, PAS UN FLEX, ET C'EST CE QUI FAIT TENIR LA LIGNE. Le sélecteur `|FR|AR|` doit occuper une COLONNE À LUI (`auto` = sa largeur naturelle ≈ 86 px), et le champ se partager le reste — un flex laisserait le champ se comprimer jusqu'à devenir inutilisable, ou pousserait le sélecteur hors écran. La colonne `1fr` du champ a `min-width: 0`, donc elle RÉTRÉCIT au lieu de déborder. ⓘ `.shop-voice` passe en `display: contents` : ses enfants (le sélecteur et le message d'état) deviennent des cases de CETTE grille. C'est ce qui permet au `|FR|AR|` de monter à côté du champ sans déplacer un seul nœud du DOM, et au message d'état de s'étaler dessous quand la dictée a quelque chose à dire. ⓘ QUAND LA DICTÉE N'EST PAS DISPONIBLE, `.shop-voice` est `hidden` : la règle qui vise cet attribut (elle pose `display: none`) est PLUS SPÉCIFIQUE que `display: contents`, donc elle gagne — la ligne 2 redevient simplement la barre de recherche. */ .shop-header-search { display: block; width: 100%; min-width: 0; } .shop-search-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px; row-gap: 4px; min-width: 0; width: 100%; } .shop-search { grid-column: 1; min-width: 0; } .shop-voice { display: contents; } .shop-voice-lang { grid-column: 2; } /* ⚠ 44 px PAR SEGMENT, ET IL FAUT L'ÉCRIRE ICI. La règle générique des boutons de ce bloc (44 px de côté) ne suffit PAS : `.shop-voice-lang-btn`, à 30 px, est plus SPÉCIFIQUE qu'un sélecteur de balise, et gagnait donc — les deux segments restaient des cibles de 30 px de haut, sous la recommandation tactile. On repose la taille ici, où elle vaut pour le doigt. */ .shop-voice-lang-btn { min-width: 44px; min-height: 44px; } .shop-voice-status { grid-column: 1 / -1; } .shop-suggest { grid-column: 1 / -1; } /* Le bouton d'envoi devient une LOUPE (voir la règle générale) : le libellé libère la place qu'occupe maintenant la langue de dictée. */ .shop-search-submit-icon { display: block; } .shop-search-submit-text { display: none; } .shop-search-submit { padding-inline: 12px; } /* ---- LA BANDE DE LIENS DE L'EN-TÊTE DISPARAÎT SUR TÉLÉPHONE -------------------- ⚠ ELLE N'EST PAS SUPPRIMÉE DU DOM, ELLE EST MASQUÉE. C'est ce qui garde, sous 700 px, un repli complet pour qui n'a pas de JavaScript (la barre d'onglets, elle, n'a pas besoin de script : elle est rendue par le serveur — mais elle ne porte ni « Créer un compte » pour un visiteur qui a déjà un compte en attente, ni la déconnexion, ni le compteur de sélection). ⚠ `display: none` EMPÊCHE AUSSI LE DÉBORDEMENT : c'était cette bande (496 px de contenu) qui élargissait l'en-tête quand elle défilait horizontalement. Sans elle, plus rien à contenir — et les règles de défilement `overflow-x` qui vivaient ici ont disparu avec elle. */ .shop-nav { display: none; } /* ---- LA BARRE D'ONGLETS, EN BAS, SOUS LE POUCE --------------------------------- ⚠ `position: fixed` + `inset-block-end: 0` : elle ne défile pas avec la page. C'est tout son intérêt — un raccourci qui s'éloigne quand on descend ne sert à rien. Le `padding-bottom: env(safe-area-inset-bottom)` réserve la place de la barre d'accueil du système sur les écrans à encoche, sans quoi les libellés passent dessous. */ .shop-tabbar { display: flex; align-items: stretch; position: fixed; inset-inline: 0; bottom: 0; z-index: 45; background: #fff; border-top: 1px solid var(--shop-border); padding-bottom: env(safe-area-inset-bottom); } /* ⚠⚠ LA PAGE RÉSERVE LA HAUTEUR DE LA BARRE, SINON ELLE LA RECOUVRE. Le pied de page (adresse, téléphone, WhatsApp) et le bouton « afficher la suite » du catalogue se retrouveraient dessous, invisibles et intouchables. La réserve est sur le `body` : elle s'applique à toutes les pages, y compris celles qui n'ont pas de pied de page. */ body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); } /* ⚠ LE TOAST SE POSE AU-DESSUS DE LA BARRE, PAS DESSUS. À `bottom: 20px`, il recouvrait les quatre onglets pendant ses 3,5 secondes de vie. `pointer-events: none` (règle générale) le rend inoffensif de toute façon, mais un message qui masque la navigation reste illisible et désagréable : on le lève donc au-dessus de la barre. */ .shop-toast { bottom: calc(58px + env(safe-area-inset-bottom) + 12px); } /* ⭐⭐⭐ LES TROIS BOUTONS FLOTTANTS SE PARTAGENT LE BAS DE L'ÉCRAN, SANS SE MARCHER DESSUS. Le calcul est le même pour tous : 58 px de barre d'onglets + la réserve d'encoche + 12 px d'air. · WhatsApp → coin de fin de ligne (voir .shop-wa) ; · « haut de page » → au-dessus de lui, quand il existe (voir .shop-has-wa) ; · « voir le catalogue » (accueil) → côté début de ligne, à la même hauteur. ⚠ SANS CETTE REQUÊTE MÉDIA, LES TROIS SERAIENT SOUS LA BARRE D'ONGLETS : invisibles et intouchables — exactement le défaut que la barre fixe a déjà causé au pied de page (voir plus haut). */ .shop-wa { bottom: calc(58px + env(safe-area-inset-bottom) + 12px); } /* ⚠ 56 px ET NON 68 : le bouton WhatsApp ne fait plus 56 px de côté mais 44 (la taille de « haut de page », voir .shop-wa), donc l'empilement se resserre d'autant — 12 px d'air + 44 px de bouton. */ .shop-has-wa .shop-top { bottom: calc(58px + env(safe-area-inset-bottom) + 12px + 56px); } .home-pin { bottom: calc(58px + env(safe-area-inset-bottom) + 12px); } /* 56 px de haut + la réserve : c'est la cible du pouce, et les quatre onglets se partagent la largeur (`flex: 1 1 0`) — donc quatre cibles égales, à la même distance. */ .shop-tab { min-height: 56px; font-size: 12px; } /* ⚠ CINQ ENTRÉES AU LIEU DE QUATRE : chaque cible perd de la largeur (375 / 5 = 75 px), donc on récupère la place sur le REMBOURRAGE LATÉRAL. ⓘ La HAUTEUR (56 px) et la taille du texte (12 px) ne bougent pas : ce sont elles qui rendent la cible attrapable au doigt et le libellé lisible — les réduire aurait échangé un défaut d'espace contre un défaut d'usage. Un libellé trop long pour sa colonne finit en points de suspension (`.shop-tab-label`), jamais en débordement. */ .shop-tab { padding-inline: 1px; } .shop-tab:active { background: var(--shop-bg); } /* Le badge des onglets est plus petit que celui de la bande du haut : la barre fait 56 px, et un badge de 18 px y mangerait le pictogramme. */ .shop-tab-badge { font-size: 10px; padding: 1px 5px; } /* Les badges de la bande du haut restent à 12 px (lisibilité sur téléphone, voir l'audit). */ .shop-badge { font-size: 12px; padding: 1px 7px; } /* ---- Cibles tactiles ---------------------------------------------------------- */ .btn, .btn-primary, .btn-quote, button, input[type=submit] { min-height: 44px; min-width: 44px; } .btn-mini { min-height: 40px; } /* action secondaire, dans un tableau dense */ .qty-btn { width: 44px; height: 44px; } /* ⭐ LES PILULES AUSSI SE PRENNENT AU POUCE : 44 px de haut, comme tout le reste sur téléphone. ⚠ `min-width: 44px` de la règle générique ci-dessus ne les gêne pas : elles sont plus larges que ça (`.qty-pill` impose 104 px), et le mot reste sur une ligne (`white-space: nowrap`). */ .qty-pill { min-height: 44px; } .qty-input { min-height: 44px; } .btn-heart { width: 44px; min-height: 44px; } .card-cta, .product-actions .btn { width: 100%; } /* Le bouton « afficher la suite » occupe toute la largeur : c'est la cible la plus évidente du bas de page, et elle doit se prendre au pouce sans viser. */ .catalog-more .btn { width: 100%; } /* Le titre du produit EST la cible principale d'une vignette : 44 px de haut, comme un bouton (la vignette elle-même reste cliquable). ⚠ `justify-content: center` EST OBLIGATOIRE ICI, ET PAS SEULEMENT `text-align: center` : une fois la cible passée en `display: flex`, c'est le flex qui place le texte, et `text-align` ne le recentre plus. Sans cette ligne, le nom repasserait à gauche sur téléphone — l'exact contraire de la demande du client. */ .card-name { min-height: 44px; display: flex; align-items: center; justify-content: center; } /* La marque est un lien vers le catalogue, la pagination et le fil d'Ariane aussi : ce sont des cibles, pas des mots dans une phrase. */ .shop-brand, .pager-link, .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; } /* Les liens isolés (bandeau, pied de page, encart « pas de prix ») sont aussi des cibles : un lien de 14 px de haut se rate au doigt. Les liens DANS UNE PHRASE restent des liens. */ .shop-notice a, .shop-footer a, .product-no-price a { display: inline-flex; align-items: center; min-height: 44px; } /* Le délai de 300 ms du double-tap (zoom) disparaît : le tap répond tout de suite. */ a, button, input, select, textarea, label { touch-action: manipulation; } /* ---- Champs : 16 px MINIMUM ----------------------------------------------- ⚠ EN DESSOUS DE 16 px, iOS ZOOME LA PAGE dès qu'un champ reçoit le focus : le client se retrouve avec une page agrandie et décalée, et doit dézoomer à la main. La taille du texte est donc une contrainte de MISE EN PAGE, pas une question de goût. ⚠⚠ IL FAUT NOMMER LES CLASSES : une requête média N'AJOUTE AUCUNE SPÉCIFICITÉ, donc la règle générique des champs (16 px) perdait contre `.qty-input` (13 px) — les quantités du panier restaient à 13 px et iOS zoomait toujours. On reprend les sélecteurs d'origine, plus bas dans la feuille : à spécificité égale, c'est le dernier qui gagne. */ input, select, textarea, .shop-search-input, .qty-input, .catalog-sort select, .sidebar-price input, .field input, .field textarea { font-size: 16px; } /* ⚠ LE SÉLECTEUR DE DICTÉE N'EST PAS DANS CETTE LISTE, ET C'EST VOLONTAIRE : la règle des 16 px existe pour les CHAMPS DE SAISIE (iOS agrandit la page dès qu'un `` ou un `