/* =====================================================================
karlia-icons-compat.css — shim de compatibilité icônes
Karlia — 2026-08-06, cibles révisées le 2026-08-06 (révision 2)
RÔLE
Redirige les 109 classes héritées (ion- / pli- / psi-) vers les glyphes
Font Awesome équivalents. Permet de supprimer les 3 librairies
d'icônes (~889 Ko/page) SANS modifier une seule ligne de PHP ni toucher
aux 116 143 valeurs stockées en base.
PRÉREQUIS
Les fichiers Font Awesome doivent être chargés AVANT celui-ci.
ORDRE DE DÉPLOIEMENT — impératif
1. Ajouter ce dans header.php + admin-assets.php
2. SEULEMENT ENSUITE retirer les 3 ionicons / premium-line / premium-solid
Retour arrière : remettre les 3 . Aucune donnée n'est touchée.
MISE À JOUR 2026-08-07 — passage à Font Awesome Free 7.3.1
Les 109 correspondances ci-dessous n'ont PAS bougé : elles s'appuient sur la
famille "FontAwesome" et sur des codepoints v4, que `v4-font-face.min.css`
redéclare sur les webfonts v7 (solid / regular / brands / v4compatibility,
sélectionnés par plage Unicode). Retirer ce fichier-là ferait disparaître
d'un coup toutes les icônes ion-/pli-/psi-, ainsi que les codepoints v4
écrits en dur dans karlia.css (\f078 \f1fc \f295 \f00e \f010) et
nifty.min.css (\f096).
Seul le bloc « révision 2 bis » en fin de fichier a été réécrit : en v7 le
glyphe ne se pose plus via `content:` mais via la variable `--fa`, et les
règles du shim officiel `v4-shims.min.css` ciblent `.fa.fa-xxx` — il faut
donc la même spécificité pour les surcharger.
RÉVISION 2 — 14 cibles corrigées d'après le comparatif visuel fourni
(audit/icones-revision-2-delta.csv). Le document retient les variantes
cerclées ou pleines là où la révision 1 prenait les versions nues :
ion-arrow-up/right/down/left-c angle-* -> arrow-circle-*
(le suffixe -c d'Ionicons signifie « circled » : la révision 1
perdait le cercle, c'était une erreur de fidélité)
ion-document file-o -> file ion-play play -> play-circle
ion-pause pause -> pause-circle ion-stop stop -> stop-circle
ion-email envelope-o -> envelope-square ion-edit pencil -> pencil-square
ion-loop repeat -> refresh ion-trash-a trash-o -> trash
ion-chatbox-working comment-o -> comments-o ion-bluetooth bluetooth -> bluetooth-b
RÉVISION 2 bis — 3 changements Font Awesome -> Font Awesome, appliqués
plus bas. Ils sont VOLONTAIREMENT GLOBAUX : redéfinir `.fa-phone:before`
change tous les fa-phone de l'application, pas seulement les icônes
choisies par les utilisateurs. C'est le comportement voulu — le jeu
d'icônes doit être cohérent partout — mais il faut en avoir conscience.
Le détail des usages impactés est documenté sur chaque règle.
Un 4e changement demandé, fa-group -> fa-users, n'est PAS repris :
les deux classes pointent déjà sur le même glyphe f0c0 (fa-group est un
alias de fa-users en FA 4.7). Une règle serait sans effet.
EXCEPTION CONNUE
La valeur `pdf` (264 lignes dans conversations_emails_drafts_or_programmed_files)
n'est PAS traitée ici : `.pdf` est déjà une classe applicative réelle
(template/karlia/css/karlia-pdf-documents-shared.css) et une règle
`.pdf:before` injecterait une icône dans le corps de chaque document PDF.
CE FICHIER EST TEMPORAIRE. À supprimer une fois le code et la base
migrés vers Font Awesome (lots L1/L2 puis L4).
===================================================================== */
/* Socle : bascule les classes héritées sur la police Font Awesome.
Reprend les propriétés de rendu du .fa de font-awesome.min.css.
Aucune classe applicative ne commence par ion-/pli-/psi- : vérifié. */
[class^="ion-"], [class*=" ion-"],
[class^="pli-"], [class*=" pli-"],
[class^="psi-"], [class*=" psi-"]{
display:inline-block;
font:normal normal normal 14px/1 FontAwesome;
font-size:inherit;
text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* Correspondances — 109 classes. Codepoints extraits du font-awesome.min.css
4.7 réellement embarqué, pas d'une documentation externe. */
.ion-alert-circled:before{content:"\f06a"}
.ion-arrow-down-a:before{content:"\f063"}
.ion-arrow-down-c:before{content:"\f0ab"}
.ion-arrow-left-c:before{content:"\f0a8"}
.ion-arrow-right-c:before{content:"\f0a9"}
.ion-arrow-swap:before{content:"\f0ec"}
.ion-arrow-up-a:before{content:"\f062"}
.ion-arrow-up-c:before{content:"\f0aa"}
/* 2026-08-07 — FA 7 a déplacé fa-at de U+F1FA vers le caractère « @ » (U+0040),
et U+F1FA n'est couvert par aucune plage de v4-font-face. Famille explicite :
« @ » existe aussi dans les fontes de texte, on ne veut pas d'ambiguïté. */
.ion-at:before{content:"@";font-family:"Font Awesome 7 Free";font-weight:900}
.ion-bluetooth:before{content:"\f294"}
.ion-briefcase:before{content:"\f0b1"}
.ion-calculator:before{content:"\f1ec"}
.ion-camera:before{content:"\f030"}
.ion-card:before{content:"\f09d"}
.ion-chatbox-working:before{content:"\f0e6"}
.ion-checkmark-circled:before{content:"\f058"}
.ion-checkmark:before{content:"\f00c"}
.ion-chevron-left:before{content:"\f053"}
.ion-chevron-right:before{content:"\f054"}
.ion-clipboard:before{content:"\f0ea"}
.ion-clock:before{content:"\f017"}
.ion-close-circled:before{content:"\f057"}
.ion-close:before{content:"\f00d"}
.ion-cloud:before{content:"\f0c2"}
.ion-coffee:before{content:"\f0f4"}
.ion-compose:before{content:"\f044"}
.ion-document:before{content:"\f15b"}
.ion-edit:before{content:"\f14b"}
.ion-email:before{content:"\f199"}
.ion-flag:before{content:"\f024"}
.ion-folder:before{content:"\f07b"}
/* 2026-08-07 — fa-cutlery (U+F0F5) est devenu fa-utensils (U+F2E7) en FA 7.
L'ancien codepoint n'existe plus dans aucune fonte. Idem .ion-pizza plus bas. */
.ion-fork:before{content:"\f2e7"}
.ion-funnel:before{content:"\f0b0"}
.ion-heart:before{content:"\f004"}
.ion-help-circled:before{content:"\f059"}
.ion-home:before{content:"\f015"}
.ion-image:before{content:"\f03e"}
.ion-information-circled:before{content:"\f05a"}
.ion-laptop:before{content:"\f109"}
.ion-location:before{content:"\f041"}
.ion-locked:before{content:"\f023"}
.ion-loop:before{content:"\f021"}
.ion-mic-a:before{content:"\f130"}
.ion-minus-circled:before{content:"\f056"}
.ion-model-s:before{content:"\f1b9"}
.ion-music-note:before{content:"\f001"}
.ion-paper-airplane:before{content:"\f1d8"}
.ion-paperclip:before{content:"\f0c6"}
.ion-pause:before{content:"\f28b"}
.ion-person-stalker:before{content:"\f0c0"}
.ion-person:before{content:"\f007"}
.ion-pie-graph:before{content:"\f200"}
/* 2026-08-11 — .ion-pizza pointait sur fa-utensils, exactement comme .ion-fork : deux entrées
du sélecteur affichaient les mêmes couverts. La révision 1 avait rabattu les deux sur le
même repli faute de fa-cutlery, et la collision est passée inaperçue. On rend la
distinction d'Ionicons : les couverts pour le repas, la part de pizza pour la restauration
rapide. Alternatives équivalentes si le dessin ne convient pas : fa-burger (\f805) ou
fa-bowl-food (\e4c6), toutes deux présentes dans fa-solid-900 complète. */
.ion-pizza:before{content:"\f818"}
.ion-plane:before{content:"\f072"}
.ion-play:before{content:"\f144"}
.ion-plus-circled:before{content:"\f055"}
/* 2026-08-07 — fa-hashtag est passé de U+F292 au caractère « # » (U+0023) en FA 7. */
.ion-pound:before{content:"#";font-family:"Font Awesome 7 Free";font-weight:900}
.ion-pricetags:before{content:"\f02c"}
.ion-printer:before{content:"\f02f"}
.ion-scissors:before{content:"\f0c4"}
.ion-search:before{content:"\f002"}
.ion-settings:before{content:"\f013"}
.ion-shuffle:before{content:"\f074"}
.ion-speedometer:before{content:"\f0e4"}
.ion-star:before{content:"\f005"}
.ion-stats-bars:before{content:"\f080"}
.ion-stop:before{content:"\f28d"}
.ion-trash-a:before{content:"\f1f8"}
.ion-videocamera:before{content:"\f03d"}
.ion-volume-medium:before{content:"\f028"}
.ion-wifi:before{content:"\f1eb"}
.ion-wineglass:before{content:"\f000"}
.pli-arrow-right-2:before{content:"\f061"}
.pli-arrow-right:before{content:"\f061"}
.pli-at-sign:before{content:"@";font-family:"Font Awesome 7 Free";font-weight:900} /* voir .ion-at */
.pli-board:before{content:"\f009"}
.pli-box-with-folders:before{content:"\f187"}
.pli-clock:before{content:"\f017"}
.pli-coins:before{content:"\f0d6"}
.pli-euro-sign-2:before{content:"\f153"}
.pli-file-csv:before{content:"\f1c3"}
.pli-file-excel:before{content:"\f1c3"}
.pli-file-html:before{content:"\f1c9"}
.pli-file-music:before{content:"\f1c7"}
.pli-file-network:before{content:"\f016"}
.pli-file-pictures:before{content:"\f1c5"}
.pli-file-search:before{content:"\f016"}
.pli-file-txt:before{content:"\f0f6"}
.pli-file-video:before{content:"\f1c8"}
.pli-file-word:before{content:"\f1c2"}
.pli-file-zip:before{content:"\f1c6"}
.pli-file:before{content:"\f016"}
.pli-handshake:before{content:"\f2b5"}
.pli-hour:before{content:"\f017"}
.pli-idea-3:before{content:"\f0eb"}
.pli-information:before{content:"\f05a"}
.pli-internet:before{content:"\f0ac"}
.pli-mail:before{content:"\f003"}
.pli-mens:before{content:"\f183"}
.pli-old-telephone:before{content:"\f098"}
.pli-overtime-2:before{content:"\f017"}
.pli-paper-plane:before{content:"\f1d8"}
.pli-power-2:before{content:"\f011"}
.pli-printer:before{content:"\f02f"}
.pli-shopping-cart:before{content:"\f07a"}
.pli-speech-bubble-7:before{content:"\f0e5"}
.psi-arrow-left:before{content:"\f060"}
.psi-arrow-right:before{content:"\f061"}
.psi-mail-block:before{content:"\f0e0"}
/* ---------------------------------------------------------------------
Largeur des icônes — écart de comportement FA 4.7 -> FA 7.
FA 7 pose `width: var(--fa-width, 1.25em)` et `text-align: center` sur
`.fa`, ce que FA 4.7 ne faisait pas : chaque icône occupait la largeur
naturelle de son glyphe. Laisser le comportement v7 par défaut décale
l'alignement de TOUTES les icônes de l'application, en particulier sur
les écrans denses (menu, listes de fichiers, tableaux).
On repasse donc en largeur naturelle, pour que la bascule reste
iso-visuelle et pour rester cohérent avec les classes ion-/pli-/psi-
ci-dessus, qui n'ont pas de largeur fixe.
`.fa-fw` continue de fonctionner : il pose `--fa-width` directement sur
l'élément, ce qui l'emporte sur la valeur héritée de :root.
POUR ADOPTER LE RENDU NATIF FA 7 : supprimer la règle qui suit.
--------------------------------------------------------------------- */
:root{--fa-width:auto}
/* ---------------------------------------------------------------------
Révision 2 bis — remplacements Font Awesome -> Font Awesome.
Portée GLOBALE, assumée : ces classes gardent leur nom, seul le glyphe
change. Rien à modifier dans le code ni en base.
Réécrit le 2026-08-07 pour Font Awesome 7 :
- le glyphe se pose par `--fa`, plus par `content:` ;
- le sélecteur doit être `.fa.fa-xxx` (spécificité 0,2,0) pour l'emporter
sur les règles de même forme de `v4-shims.min.css`, chargé juste avant ;
- la famille et la graisse (regular, brands) restent celles posées par le
shim officiel : on ne surcharge que le glyphe.
Codepoints relevés dans le font-awesome.css 7.3.1 embarqué.
--------------------------------------------------------------------- */
/* Téléphone : fa-phone (f095) -> le combiné encadré, fa-square-phone (f098), solid.
Impacte aussi $iconList['phone'], $iconList['event_type']
et 4 usages dans template/karlia/functions/calls.php. */
.fa.fa-phone{--fa:"\f098"}
/* Case cochée : le shim officiel envoie fa-check-square-o sur fa-square-check
regular (f14a). On garde le choix historique de Karlia : la coche cerclée,
fa-circle-check regular (f058). La graisse 400 vient du shim.
Impacte aussi $iconList['check'], $iconList['status'], le cron
daily-7h-email.php, business-expense.php, conversations.php, project.php. */
.fa.fa-check-square-o{--fa:"\f058"}
/* Facebook : le shim officiel envoie fa-facebook-official sur le logo nu
fa-facebook (f09a). On garde la version encadrée, fa-square-facebook (f082).
La famille Brands vient du shim. Aucun usage dans le code applicatif,
uniquement le catalogue list_icons : sans effet de bord. */
.fa.fa-facebook-official{--fa:"\f082"}
/* =====================================================================
GLYPHICONS — 2026-08-11
Bootstrap 3 embarque sa propre fonte d'icônes. Il suffit qu'un seul élément .glyphicon
soit rendu pour que le navigateur télécharge glyphicons-halflings-regular.woff2 : c'est
pour cela que la fonte réapparaissait « par endroits » alors que plus rien ne semblait
l'utiliser.
Les huit classes atteignables dans Karlia viennent toutes de plugins tiers — x-editable
(boutons valider/annuler), bootstrap-validator (icônes de feedback), fullcalendar
(navigation) et jstree — donc de code qu'on ne peut pas nettoyer sans le patcher, et que
la prochaine mise à jour réécrirait. On applique le traitement déjà retenu pour
ion-/pli-/psi- : la classe reste en place, le glyphe vient de Font Awesome, et la fonte
Bootstrap n'est plus jamais demandée.
Ce fichier est chargé après bootstrap.min.css : la surcharge de font-family l'emporte.
===================================================================== */
.glyphicon{
display:inline-block;
font:normal normal normal 14px/1 FontAwesome;
font-size:inherit;
text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
top:0;
}
.glyphicon-backward:before{content:"\f04a"}
.glyphicon-chevron-left:before{content:"\f053"}
.glyphicon-chevron-right:before{content:"\f054"}
.glyphicon-forward:before{content:"\f04e"}
.glyphicon-leaf:before{content:"\f06c"}
.glyphicon-ok:before{content:"\f00c"}
.glyphicon-refresh:before{content:"\f021"}
.glyphicon-remove:before{content:"\f00d"}
/* DataTables — 2026-08-11.
Les flèches de tri des en-têtes de colonne sont posées en Glyphicons par
dataTables.bootstrap.css, sur .sorting:after / .sorting_asc:after / .sorting_desc:after.
C'est le vrai coupable du téléchargement « par endroits » de la fonte Bootstrap : il suffit
d'un tableau trié à l'écran, donc de la quasi-totalité des listes de l'application.
Ce fichier est chargé AVANT dataTables.bootstrap.css (header.php : ligne 49 contre 60) :
une règle de même spécificité perdrait. D'où le préfixe `html`, qui ajoute un élément et
fait passer la spécificité de (0,2,3) à (0,2,4) — l'emporte quel que soit l'ordre. */
html table.dataTable thead .sorting:after,
html table.dataTable thead .sorting_asc:after,
html table.dataTable thead .sorting_desc:after,
html table.dataTable thead .sorting_asc_disabled:after,
html table.dataTable thead .sorting_desc_disabled:after{font-family:FontAwesome}
html table.dataTable thead .sorting:after{content:"\f0dc"}
html table.dataTable thead .sorting_asc:after{content:"\f0de"}
html table.dataTable thead .sorting_desc:after{content:"\f0dd"}
html table.dataTable thead .sorting_asc_disabled:after,
html table.dataTable thead .sorting_desc_disabled:after{content:"\f0dc"}