on doit donc faire un gros hack CSS
* 1. On cible le parent TD pour créer un contexte de positionnement */
td.messageAccueil:has(> img) {
position: relative;
}
/* 2. On rend l'image transparente mais on la garde cliquable */
td.messageAccueil img {
opacity: 0; /* L'image est invisible, mais toujours là ! */
display: block;
width: 20px;
height: 20px;
margin: auto;
cursor: pointer;
position: relative;
z-index: 10;
}
/* 3. Enfin, on met génère l'icône Font Awesome DERRIÈRE l'image transparente */
td.messageAccueil:has(> img)::after {
content: "\f00e";
font-family: "FontAwesome";
font-size: 18px;
color: var(--btn-primary-color-02);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Centrage */
}
/**** Administration > Archiver des messages : on ne peut pas appliquer le principe du after ici
* car on a le texte JJ/MM/YYYY qui est dnas le même élément
* on va modifier le background via un SVG directement
*****/
img#dateMinMessageCal, img#dateMaxMessageCal {
/* On définit la taille de la nouvelle icône */
box-sizing: border-box !important;
width: 16px !important;
height: 16px !important;
padding-left: 16px !important; /* on ajoute un padding égal à la largeur pour pousser le JPG d'origine hors de la vue */
/* On place notre icône FontAwesome en fond */
background: url('data:image/svg+xml;utf8,') no-repeat center !important;
background-size: contain !important;
cursor: pointer;
vertical-align: middle;
margin-left: 5px;
margin-right: 5px;
}
/* Page d'accueil */
/* On cible le conteneur principal */
td:has(> #message) {
display: flex;
flex-direction: column;
gap: 20px; /* Espace généreux entre les blocs */
padding: 15px !important;
}
/* On remonte le titre Bienvenue tout en haut */
td:has(> #message) > h1:last-of-type {
order: -2;
margin: 0;
font-size: 1.2rem;
font-weight: 600;
color: #333;
border: none !important; /* On supprime l'ancienne ligne rose si elle vient d'ici */
padding: 10px 20px;
background-color: #f8f9fa;
}
#message h1.ui-accordion-header {
display: none !important;
}
/* On remonte le texte de bienvenue juste en dessous du titre */
.message_accueil {
order: -1;
}
.message_accueil {
background-color: #f8f9fa; /* Gris très doux */
/* border-left: 5px solid #d81b60; Accent rose de votre charte */
/* border-radius: 4px; */
padding: 0 15px 15px 15px;
/* box-shadow: 0 2px 8px rgba(0,0,0,0.05); */
/* font-size: 1.05rem; */
/* line-height: 1.6; */
color: #495057;
margin-top: -20px;
}
.message_accueil p {
margin: 2px;
}
.message_accueil p:last-child {
margin-bottom: 0;
}
/* Nettoyage du conteneur parent jQuery UI */
.message_content {
background: transparent !important;
border: none !important;
padding: 10px 0 !important;
display: flex !important;
flex-direction: column;
gap: 20px; /* Espace entre chaque carte de message */
}
/* Design de la carte message */
.message_content > div {
background: #ffffff;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
position: relative; /* Pour pouvoir positionner la date en haut à droite */
}
/* -> en JS on ajoute la notion de message récent par rapport à la date du message et si moins de X jours on le mets en avant par l'ajout d'une classe */
.message_content > div.message-recent {
background-color: #f8f9fa;
border-left: 5px solid #d81b60; /* Accent rose de la charte */
border-radius: 4px;
padding: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
/* font-size: 1.05rem; */
color: #495057;
}
/* On cache les vieux séparateurs */
.message_content .ligne {
display: none !important;
}
/* --- Typographie interne de la carte --- */
/* L'objet (le Titre) */
.objet_message {
font-weight: 700;
font-size: 1.15rem;
color: #009688; /* Le vert canard vu sur les boutons précédents */
margin: 5px 0 15px 0;
}
/* L'auteur */
.signature_message {
font-size: 0.85rem;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
}
/* La date (Flottante en haut à droite) */
.date_message {
position: absolute;
top: 20px;
right: 20px;
font-size: 0.85rem;
color: var(--btn-primary-color-02);
font-style: italic;
margin: 0;
}
/* Le Sauvetage de la balise */
.message_content pre {
font-family: inherit !important; /* On annule la police "machine à écrire" */
font-size: .9rem !important;
color: #212529 !important;
/*white-space: pre-wrap !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;*/
/* line-height: 1em; */
}
/* override du select2.min.css */
body .select2-container--default .select2-results > .select2-results__options {
max-height: 400px;
}
#content { /* pour que le footer soit bien calé en bas de page, notamment sur la page connexion */
min-height: calc(100vh - 123px);
}
/* tableau flottant - suivi des factures */
/* Le macaron de fermeture */
.btn-fermer-popup {
/* Positionnement fixé, calqué sur le tableau */
position: fixed !important;
top: 148px !important; /* Légèrement plus haut que les 160px du tableau */
right: 28px !important; /* Légèrement plus à droite que les 40px du tableau */
z-index: 1000 !important; /* Doit être au-dessus du tableau (qui est à 999) */
/* Apparence (Rond magenta avec texte blanc) */
width: 24px;
height: 24px;
background-color: #d81b60; /* Votre couleur magenta */
color: #ffffff;
border-radius: 50%;
/* Centrage parfait de la croix ✖ */
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-family: Arial, sans-serif;
/* Ombres et interactions */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: transform 0.2s, background-color 0.2s;
}
/* Petit retour visuel au survol (UX) */
.btn-fermer-popup:hover {
background-color: #b0154e; /* Assombrit légèrement la couleur */
transform: scale(1.15); /* Grossit très légèrement au passage de la souris */
}
/*#contenu_content > div > table {
box-shadow: 0 50px 26px rgba(0, 0, 0, 0.10);
}
#contenu_content > div > table tr:has(.EnteteTdNomPage){
box-shadow: 0 3px 26px rgba(0, 0, 0, 0.10);
}*/
/* 2eme édition - 20261019 */
/* Marges sur les paragraphes de la page 2FA */
form[name="verificationCodeForm"],
td:has(form[name="verificationCodeForm"]) > p,
td:has(form[name="verificationCodeForm"]) img[alt="QR Code OTP"] {
margin: 12px 20px !important;
line-height: 1.5;
}
form[name="verificationCodeForm"] input[type="submit"] {
background: var(--btn-primary-color-02) !important;
color: white !important;
border: 1px solid var(--btn-primary-color-02) !important;
}
form[name="verificationCodeForm"] input[type="submit"]:hover {
background: white !important;
color: var(--btn-primary-color-02) !important;
}
/* correction régression sur le picto des messages standards */
div.message {
align-items: center;
}
div.message::before {
width: 22px;
height: 22px;
}
div.message::after {
left: 28px;
top: 21px;
}
/* historique des factures - modale - picto loupe - hack css comme on n'a pas de */
/* 1. On cible le parent TD qui contient cette image spécifique */
td:has(> img[onclick*="prestataire.print.facture.individuelle.pdf.do"]) {
position: relative;
}
/* 2. On rend l'image transparente, mais on la garde au premier plan pour le clic */
img[onclick*="prestataire.print.facture.individuelle.pdf.do"] {
opacity: 0;
display: inline-block;
width: 20px;
height: 20px;
position: relative;
z-index: 10;
cursor: pointer;
}
/* 3. On injecte l'icône FontAwesome en arrière-plan (sur le TD parent) */
td:has(> img[onclick*="prestataire.print.facture.individuelle.pdf.do"])::after {
content: "\f00e";
font-family: "FontAwesome";
font-size: 18px;
color: var(--btn-primary-color-02);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-font-smoothing: antialiased;
}
/* historique des factures - modale : pagination */
.pagebanner, .pagelinks {
font-size: 13px;
}
.pagelinks a {
color: var(--color-primary-03);
text-decoration: none;
}
.pagelinks a:hover {
text-decoration: underline;
}
/* historique des factures : bouton en bas de modale */
input[value="Imprimer"].bouton {
background: var(--btn-primary-color-02) !important;
color: white !important;
border: 1px solid var(--btn-primary-color-02) !important;
}
input[value="Quitter"].bouton {
background: white !important;
color: var(--btn-secondary-color-blue) !important;
border: 1px solid var(--btn-secondary-color-blue) !important;
}
input[value="Imprimer"].bouton:hover {
background: white !important;
color: var(--btn-primary-color-02) !important;
}
input[value="Quitter"].bouton:hover {
background: var(--btn-secondary-color-blue) !important;
color: var(--btn-primary-color-white) !important;
}
/**/
/* Le macaron de fermeture */
#dialog-close {
right: 0 !important;
width: 24px;
height: 24px;
background-color: #d81b60;
color: #ffffff !important;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-family: Arial, sans-serif;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
transition: transform 0.2s, background-color 0.2s;
}
/* Petit retour visuel au survol (UX) */
#dialog-close:hover {
background-color: #b0154e;
}
/* jma - END */
.ligne-dgfip{
background-color: #C5E2F9;
}