/* ============================================================================= PharmaFlow — Jetons de couleur par catégorie Fichier : app/css/category-tokens.css Version : 1.0 INSTALLATION 1. Déposer ce fichier dans /pharmaflow/app/css/ 2. Le charger APRÈS css/style.css. Dans app/includes/header.php, juste après la ligne shared-components.css : Et dans includes/header.php (front public), après style.css. RÔLE Sortir les couleurs de catégorie des styles en ligne de catalogue.php pour en faire un système. Ajouter une catégorie devient une ligne SQL (catalogue_categories.color_token) au lieu d'une modification de code. COMPATIBILITÉ Ce fichier n'écrase aucune règle existante. Il n'introduit que des variables et des classes nouvelles, toutes préfixées `pf-cat-`. Le charger sans patcher catalogue.php ne change strictement rien à l'écran. CONTRASTE Chaque paire fond/texte a été choisie pour dépasser 4,5:1 (WCAG AA sur du texte normal). Ne pas modifier une seule des deux valeurs d'une paire sans revérifier le ratio. ============================================================================= */ :root { /* --------------------------------------------------------------------------- blue — DVCC & Robotisation (existant, valeurs reprises à l'identique depuis catalogue.php afin que le patch ne produise AUCUN changement visuel) --------------------------------------------------------------------------- */ --cat-blue-bg: #E6F1FB; --cat-blue-ink: #185FA5; --cat-blue-accent: #0063a1; --pf-cat-blue-glow: rgba(0, 99, 161, 0.16); /* --------------------------------------------------------------------------- emerald — Pilotage et conformité financière (PharmaConcili) Vert profond : lisible comme « financier » sans virer au vert dollar, et assez distant du `teal` (Formations) pour ne pas être confondu dans une grille. Reste dans la famille bleu-vert du domaine pharmaceutique. --------------------------------------------------------------------------- */ --cat-emerald-bg: #E3F4EA; --cat-emerald-ink: #0B6E3F; --cat-emerald-accent: #0A7D46; --pf-cat-emerald-glow: rgba(11, 110, 63, 0.16); /* --- Jetons existants, repris tels quels ---------------------------------- */ --cat-amber-bg: #FAEEDA; --cat-amber-ink: #854F0B; --cat-amber-accent: #B4740F; --pf-cat-amber-glow: rgba(133, 79, 11, 0.16); --cat-green-bg: #EAF3DE; --cat-green-ink: #3B6D11; --cat-green-accent: #4E8F17; --pf-cat-green-glow: rgba(59, 109, 17, 0.16); --cat-teal-bg: #E1F5EE; --cat-teal-ink: #0F6E56; --cat-teal-accent: #13876A; --pf-cat-teal-glow: rgba(15, 110, 86, 0.16); --cat-coral-bg: #FAECE7; --cat-coral-ink: #993C1D; --cat-coral-accent: #B84B26; --pf-cat-coral-glow: rgba(153, 60, 29, 0.16); /* --- Réservés pour les catégories à venir --------------------------------- */ --cat-violet-bg: #EFEAFA; --cat-violet-ink: #4C2E9E; --cat-violet-accent: #5B39BE; --pf-cat-violet-glow: rgba(76, 46, 158, 0.16); --cat-slate-bg: #EAEDF2; --cat-slate-ink: #3A4A63; --cat-slate-accent: #48597A; --pf-cat-slate-glow: rgba(58, 74, 99, 0.16); /* Repli si un slug arrive sans jeton connu : on retombe sur le bleu de marque, comportement identique à l'actuel `?? 'blue'` de catalogue.php. */ --cat-default-bg: var(--cat-blue-bg); --cat-default-ink: var(--cat-blue-ink); --cat-default-accent: var(--cat-blue-accent); --pf-cat-default-glow: var(--pf-cat-blue-glow); } /* ============================================================================= Résolution du jeton ----------------------------------------------------------------------------- Un élément porteur de [data-color="emerald"] expose --cat-bg / --cat-ink / --cat-accent / --cat-glow à lui-même et à toute sa descendance. Les composants ci-dessous n'ont donc jamais à connaître le nom du jeton. ============================================================================= */ [data-color] { --cat-bg: var(--cat-default-bg); --cat-ink: var(--cat-default-ink); --cat-accent: var(--cat-default-accent); --pf-cat-glow: var(--pf-cat-default-glow); } [data-color="blue"] { --cat-bg: var(--cat-blue-bg); --cat-ink: var(--cat-blue-ink); --cat-accent: var(--cat-blue-accent); --pf-cat-glow: var(--pf-cat-blue-glow); } [data-color="emerald"] { --cat-bg: var(--cat-emerald-bg); --cat-ink: var(--cat-emerald-ink); --cat-accent: var(--cat-emerald-accent); --pf-cat-glow: var(--pf-cat-emerald-glow); } [data-color="amber"] { --cat-bg: var(--cat-amber-bg); --cat-ink: var(--cat-amber-ink); --cat-accent: var(--cat-amber-accent); --pf-cat-glow: var(--pf-cat-amber-glow); } [data-color="green"] { --cat-bg: var(--cat-green-bg); --cat-ink: var(--cat-green-ink); --cat-accent: var(--cat-green-accent); --pf-cat-glow: var(--pf-cat-green-glow); } [data-color="teal"] { --cat-bg: var(--cat-teal-bg); --cat-ink: var(--cat-teal-ink); --cat-accent: var(--cat-teal-accent); --pf-cat-glow: var(--pf-cat-teal-glow); } [data-color="coral"] { --cat-bg: var(--cat-coral-bg); --cat-ink: var(--cat-coral-ink); --cat-accent: var(--cat-coral-accent); --pf-cat-glow: var(--pf-cat-coral-glow); } [data-color="violet"] { --cat-bg: var(--cat-violet-bg); --cat-ink: var(--cat-violet-ink); --cat-accent: var(--cat-violet-accent); --pf-cat-glow: var(--pf-cat-violet-glow); } [data-color="slate"] { --cat-bg: var(--cat-slate-bg); --cat-ink: var(--cat-slate-ink); --cat-accent: var(--cat-slate-accent); --pf-cat-glow: var(--pf-cat-slate-glow); } /* Surcharge ponctuelle par hexadécimal (catalogue_categories.color_hex). Le style en ligne --cat-ink posé sur l'élément prime sur les règles ci-dessus. À éviter : le jeton garantit le contraste, pas la saisie libre. */ /* ============================================================================= Composants ============================================================================= */ /* Pastille d'icône — remplace le bloc de styles en ligne de catalogue.php */ .pf-cat-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--cat-bg); color: var(--cat-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; flex-shrink: 0; } .pf-cat-icon i { color: var(--cat-ink); font-size: 1.6rem; line-height: 1; display: block; } /* Étiquette de catégorie — utilisable sur une fiche produit ou dans la sidebar */ .pf-cat-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--cat-bg); color: var(--cat-ink); font-size: .75rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; } /* Liseré supérieur : identifie la catégorie sans repeindre toute la carte */ .pf-cat-rule { border-top: 3px solid var(--cat-accent); } /* Halo au survol, cohérent avec .cat-glow-layer existant */ .pf-cat-glow { background: radial-gradient(circle at 50% 0%, var(--pf-cat-glow), transparent 70%); } /* Bouton d'action teinté */ .pf-cat-btn { background: var(--cat-accent); color: #fff; border: none; border-radius: 10px; padding: 10px 18px; font-weight: 600; cursor: pointer; transition: filter .15s ease; } .pf-cat-btn:hover { filter: brightness(.92); } /* ============================================================================= Mode sombre ----------------------------------------------------------------------------- Pharmaflow bascule via .dark-mode / [data-theme="dark"] selon les écrans. Les fonds clairs deviennent des voiles translucides de la teinte d'accent, et le texte reprend l'accent, plus lumineux que l'encre foncée sur fond sombre. ============================================================================= */ .dark-mode [data-color], [data-theme="dark"] [data-color] { --cat-bg: color-mix(in srgb, var(--cat-accent) 18%, transparent); --cat-ink: color-mix(in srgb, var(--cat-accent) 82%, white); } /* Repli pour les navigateurs sans color-mix() : on garde un fond neutre lisible plutôt qu'un fond clair qui éblouirait en mode sombre. */ @supports not (background: color-mix(in srgb, red 50%, blue)) { .dark-mode [data-color], [data-theme="dark"] [data-color] { --cat-bg: rgba(255, 255, 255, .08); --cat-ink: #E8EDF5; } } /* ============================================================================= Accessibilité ============================================================================= */ @media (prefers-contrast: more) { .pf-cat-icon, .pf-cat-badge { outline: 1px solid var(--cat-ink); } } @media (prefers-reduced-motion: reduce) { .pf-cat-btn { transition: none; } } /* ============================================================================= Halos de catégorie — complément à catalogue.php ----------------------------------------------------------------------------- catalogue.php définit déjà --cat-glow (un DÉGRADÉ radial) pour blue, green, amber, teal et coral. Les jetons ci-dessous sont ceux qu'il ne connaît pas. Même sélecteur, même spécificité, même forme : la tuile émeraude se comporte exactement comme la tuile DVCC. Ne PAS redéfinir ici blue/green/amber/teal/coral : leurs règles vivent dans catalogue.php et doivent y rester tant que ce fichier n'est pas nettoyé. ============================================================================= */ .catalogue-grid .cat-card[data-color="emerald"] { --cat-glow: radial-gradient(ellipse at 115% 115%, rgba(11, 110, 63, 0.26) 0%, rgba(11, 110, 63, 0.07) 40%, transparent 70%); } .catalogue-grid .cat-card[data-color="violet"] { --cat-glow: radial-gradient(ellipse at 115% 115%, rgba(76, 46, 158, 0.25) 0%, rgba(76, 46, 158, 0.07) 40%, transparent 70%); } .catalogue-grid .cat-card[data-color="slate"] { --cat-glow: radial-gradient(ellipse at 115% 115%, rgba(58, 74, 99, 0.25) 0%, rgba(58, 74, 99, 0.07) 40%, transparent 70%); } /* ============================================================================= Grille des catégories — mise en page adaptative et hauteurs régulières ----------------------------------------------------------------------------- PROBLÈME 1 — la grille ne passe pas à l'échelle. css/style.css définit une grille de 6 colonnes et attribue des largeurs par position : les tuiles 1 et 2 occupent 3 colonnes, les tuiles 3 à 5 en occupent 2. Cette répartition ne tombe juste que pour EXACTEMENT cinq catégories. À trois, la dernière fait un tiers de largeur à côté de deux moitiés ; à six, la sixième reste seule sur sa ligne en occupant un tiers. Or le nombre de catégories se pilote depuis le CMS. PROBLÈME 2 — un min-height dormant. css/style.css ligne 790 : .catalogue-grid { min-height: 600px; align-items: start; } Le `start` laissait les tuiles à leur hauteur naturelle, donc le min-height ne se voyait pas. Passer à `stretch` le réveille et étire les tuiles à 600 px. Il faut donc traiter les deux ensemble, jamais l'un sans l'autre. SOLUTION Colonnes fluides en auto-fit : la grille calcule elle-même combien de tuiles tiennent par ligne. Avec un conteneur d'environ 1200 px et un minimum de 320 px, on obtient naturellement 2 tuiles à deux catégories, 3 à trois, puis 3 par ligne au-delà — sans jamais descendre sous une largeur lisible. Les tuiles d'une même ligne s'égalisent par le comportement natif de la grille (align-items: stretch), pas par une hauteur forcée. Le pied de carte est repoussé en bas par margin-top:auto, ce qui aligne les boutons. Ce bloc annule volontairement les règles de span de css/style.css. Il est chargé après elle, et sa spécificité (0,3,0 sur :nth-child(n)) est supérieure. ============================================================================= */ .catalogue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; /* Remplace le min-height de 600px : assez pour éviter que le pied de page ne remonte brutalement pendant un filtrage, pas assez pour gonfler les tuiles quand il n'y a qu'une seule ligne. */ min-height: 340px; /* Égalise les tuiles d'une même ligne, sans leur imposer de hauteur. */ align-items: stretch; } /* Neutralise l'attribution de largeur par position. */ .catalogue-grid .cat-card:nth-child(n) { grid-column: auto; } .catalogue-grid .cat-card { /* .cat-card est déjà flex column dans style.css ; on ne le redéclare pas. Aucune hauteur n'est imposée : la ligne s'ajuste au contenu le plus haut. */ min-height: 280px; } /* Le pied de carte descend au bas de la tuile, quel que soit le contenu. C'est ce qui aligne les prix et les boutons d'une tuile à l'autre. */ .catalogue-grid .cat-card .cat-footer { margin-top: auto; } /* Le paragraphe porte déjà flex-grow:1 dans style.css : il absorbe l'espace restant. On borne sa croissance pour éviter un interligne étiré sur une tuile au texte court. */ .catalogue-grid .cat-card > p { flex-grow: 1; margin-bottom: 20px; } /* Écrans intermédiaires : deux tuiles par ligne au maximum. */ @media (max-width: 1100px) and (min-width: 721px) { .catalogue-grid { /* css/style.css repasse .catalogue-grid en flex column sous 992px (ligne 433). On conserve la grille jusqu'à 721px : deux tuiles côte à côte restent lisibles sur tablette et évitent une colonne interminable. */ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } } /* Mobile : une seule colonne. On conserve le passage en flex de css/style.css pour ne pas entrer en conflit avec sa règle @media (max-width: 992px). */ @media (max-width: 720px) { .catalogue-grid { grid-template-columns: 1fr; min-height: 0; } .catalogue-grid .cat-card { min-height: 0; } }