* {
margin: 0;
padding: 0;
}
/* Chemins relatifs a CETTE feuille, et non absolus depuis la racine du site.
Les polices etaient appelees en "/Intranet/styles/fonts/...", ce qui supposait une
racine web placee sur public/. Elle est sur public/Intranet/ : le navigateur demandait
donc Intranet/Intranet/styles/..., qui n'existe pas. La regle de reecriture d'IIS
envoyait alors la requete a index.php, qui rendait la page 404 - laquelle, pour un
utilisateur connecte, charge l'en-tete complet et enregistrait l'URL de la police dans
l'historique de navigation. Un chemin relatif reste juste quelle que soit la racine. */
@font-face {
font-family: "Inter Regular";
src: url("fonts/Inter-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Inter Bold";
src: url("fonts/Inter-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Inter SemiBold";
src: url("fonts/Inter-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
}
:root {
--couleur-bordure_tableau: #d9d9d9;
}
html {
overflow: hidden;
}
html,
body {
height: 100%;
}
body {
margin: 0;
width: 100%;
background-color: white;
font-family: "Inter Regular", Inter, Arial, sans-serif;
font-size: 13px;
line-height: 1;
}
h1.h2 {
font-size: 1.25em;
}
hr {
border: 1px dotted silver;
border-width: 1px 0 0;
margin: 5px 0;
}
.px0 {
padding-right: 0px !important;
padding-left: 0px !important;
}
.clear {
clear: both;
}
.center {
text-align: center !important;
}
.right {
text-align: right !important;
}
.left {
text-align: left !important;
}
.cursor,
.hand,
tr.hand td {
cursor: pointer;
}
.w75 {
width: 75% !important;
}
.fw-bold {
font-weight: bold;
}
.lien {
text-decoration: underline;
cursor: pointer;
color: rgb(9, 158, 202) !important;
}
.underline {
text-decoration: underline;
}
#div_corps {
position: absolute;
top: 10px;
bottom: 10px;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
#footer_fiche_detail,
.footer_fiche_detail {
position: absolute;
bottom: 2px;
text-align: center;
height: 38px;
vertical-align: top;
left: 0.5%;
right: 0.5%;
z-index: 10; /* supérieur au z-index:9 de .content_onglets — fix footer invisible sur Chrome for Testing */
}
#footer_fiche_detail > *,
.footer_fiche_detail > * {
z-index: 100;
}
/************************
* THEME GENERAL, COULEUR MENU & ENTETES */
.tr_header > td,
.tr_header > thead > td,
.tr_header > th,
.tr_header > thead > th,
#contenu_menu_bot,
.filtres_header,
.filtres_header_non_float,
.div_contenu #content_detail .conteneur_tableau_donnees,
.div_contenu #onglet_fiche_detail .conteneur_tableau_donnees,
.div_contenu #onglet_fiche_detail .conteneur_tableau_donnees tr td,
.div_contenu #onglet_fiche_detail .conteneur_tableau_donnees tr th,
.tr_header td,
.tr_header th,
.tr_header_sub td,
.tr_header_sub th,
.tr_footer td,
.tr_footer th,
.popin.support .title_support,
.libelle_filtre_bk,
.conteneur_tableau_donnees.entete,
.conteneur_tableau_donnees.entete tr td,
.conteneur_tableau_donnees.entete tr th,
.div_contenu .tr_header th,
.div_contenu .tr_header td,
body .bloc_champ.bt_filtre_on_off,
.paging.selected,
input:checked + .slider {
background-color: #005477;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tr_niveau1 .td_total,
.tr_niveau2 .td_total,
.tr_niveau1 .td_libelle,
.tr_niveau2 .td_libelle,
.tr_niveau1_total td,
.tr_niveau2_total td {
background-color: lightgrey;
}
/************************/
/* TABLEAUX */
.tabcontent_global {
position: absolute;
top: 64px;
bottom: 54px;
}
.tab_global {
position: relative;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
border: 0;
font-family: "Inter Regular", Inter, Arial, sans-serif;
}
.tab_global caption {
color: #005477;
font-weight: bold;
font-style: italic;
margin-top: 10px;
padding: 4px 2px;
}
.tab_global td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tabcontent_global .tab_global,
.tabcontent_global > div {
width: 99%;
left: 0.5%;
right: 0.5%;
border-collapse: separate;
}
.tabcontent_global .iframe_liste .tab_global {
width: 100%;
left: 0;
right: 0;
}
/* Compensation scrollbar de l'en-tête de filtre. La table de données (dans
l'iframe) est amputée de ~17px par sa scrollbar ; l'en-tête (hors iframe) ne
l'est pas → décalage de 17px. Les pages posent `style="margin-right:17px"` sur
la table d'en-tête, mais width:99% + table-layout:fixed rendent la marge SANS
effet. On la convertit ici en réduction réelle de la grille (border-box +
padding-right), ce qui aligne les colonnes avec les données. Cible uniquement
les tables marquées (attribut style inline) → aucun autre tableau impacté. */
.tab_global[style*="margin-right:17px"],
.tab_global[style*="margin-right: 17px"],
.tab_global[style*="padding-right:17px"],
.tab_global[style*="padding-right: 17px"] {
box-sizing: border-box;
padding-right: 17px !important;
margin-right: 0 !important;
}
.tr_pagination {
height: 40px;
vertical-align: bottom;
}
.tr_header,
.tr_header_sub,
.tr_footer {
color: white;
height: 18px;
}
.tr_header_sub td,
.tr_header_sub th,
.tr_footer td,
.tr_footer th {
padding: 5px 4px;
/* background-color: rgb(9, 158, 226);*/
}
.tr_header > td,
.tr_header > thead > td,
.tr_header > th,
.tr_header > thead > th {
padding: 5px 3px;
/* background-color: rgb(9, 158, 226);*/
border-top: 1px solid grey;
border-bottom: 1px solid grey;
}
.tr_header > td:first-child,
.tr_header > thead > td:first-child,
.tr_footer > td:first-child,
.tr_footer > thead > td:first-child {
border-left: 1px solid grey;
}
.tr_header > td:last-child,
.tr_header > thead > td:last-child,
.tr_footer > td:last-child,
.tr_footer > thead > td:last-child {
border-right: 1px solid grey;
}
.tr_filtre {
background-color: white;
}
.tr_filtre td {
padding: 1px 2px;
}
.tr_filtre td .select {
margin-top: 4px;
width: 93%;
}
.tr_filtre td .input_text {
height: 20px;
}
/* FORMULAIRES */
a,
a:hover,
a:visited,
a:focus {
color: rgb(9, 158, 202);
}
a.bt {
color: black;
text-decoration: none;
}
a.bt.button_valid {
color: white;
}
textarea {
font-size: inherit;
font-family: inherit;
}
.fa.clicicone {
cursor: pointer;
font-size: 1.7em;
padding-left: 3px;
vertical-align: -15%;
}
i.fa-lg {
line-height: inherit;
}
.oblig:after {
content: ' *';
color: red;
vertical-align: super;
font-size: smaller;
position: absolute;
margin-left: 3px;
}
legend {
font-size: 12px;
font-family: "Inter Regular", Inter, Arial, sans-serif;
font-weight: bold;
}
/* SELECT */
.select {
height: 22px !important;
border: 0 !important;
overflow: hidden;
margin: 2px 0;
margin-bottom: 4px;
position: relative;
display: block;
z-index: 31;
width: 98%;
}
.select img {
display: none;
}
.select select {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
border: 1px solid #d5dbe1;
background-color: #fff;
height: 22px;
position: relative;
z-index: 5;
width: 100%;
padding-top: 2px;
padding-right: 25px;
text-indent: 2px;
}
.select:before {
width: 25px;
right: 0;
top: 0;
bottom: 0;
content: '';
position: absolute;
pointer-events: none;
border: 0;
z-index: 10;
background-color: transparent;
}
.select:after {
content: '\25BC';
font-size: 11px;
line-height: 1;
right: 6px;
top: 50%;
margin-top: -5.5px;
position: absolute;
pointer-events: none;
color: #64748b;
z-index: 10;
}
.select select::-ms-expand {
display: none;
}
.select_disabled select {
background-color: transparent !important;
padding-right: 0px;
color: white !important;
border: none;
}
.select_disabled select[disabled] {
color: white !important;
opacity: 1;
}
.select_disabled:before {
content: '';
display: none;
}
.select_disabled:after {
content: '';
display: none;
}
/* INPUT */
input[readonly],
input[disabled],
button[disabled],
textarea[readonly],
textarea[disabled],
.select select[readonly],
.select select[disabled] {
background: #e5e5e5 !important;
color: #64748b;
}
.input_text {
margin: 2px 0;
border: 1px solid #d5dbe1;
height: 18px;
border-radius: 3px;
width: 95%;
padding-left: 5px;
}
input[type="checkbox"] {
accent-color: #005477;
}
input.error_input {
border: 1px solid #a53535;
color: #a53535;
}
/* style de gestion d'erreur, censé être aussi "puissant" que le javascript, ce qui justifie le important */
a.erreur_js {
color: #ffb2b2 !important;
}
.erreur_js,
.div_contenu input[disabled].erreur_js,
.div_contenu input[readonly].erreur_js,
.bloc_champ input[disabled].erreur_js,
.bloc_champ input[readonly].erreur_js,
.bloc_champ select[disabled].erreur_js,
.bloc_champ select[readonly].erreur_js {
background-color: #ffb2b2 !important;
}
/* ONGLETS */
#onglet_fiche_detail {
/*
min-height: 230px;
*/
max-height: 100%;
position: absolute;
right: 0.5%;
left: 0.5%;
bottom: 45px;
}
.td_position {
position: relative;
}
.td_content_frame {
margin: 0;
border: 1.2px solid silver;
width: 100%;
border-top: 0;
background-color: white;
height: 100%;
vertical-align: top;
padding: 1px;
padding-top: 0;
overflow: hidden;
text-align: center;
}
.td_content_frame > iframe,
.td_content_frame > div,
.td_content_frame > textarea {
width: 99.8%;
margin: 0;
padding: 0;
border: 0 solid silver;
}
.td_content_frame > iframe,
.td_content_frame > textarea {
height: 100%;
}
.td_content_frame > div {
overflow-x: hidden;
position: absolute;
top: 0;
bottom: 37px;
left: 1px;
right: 1px;
}
#content_onglet {
padding-left: 1.5%;
overflow-x: auto;
width: 98.5%;
white-space: nowrap;
overflow-y: auto;
z-index: 10;
position: relative;
}
.onglet {
margin: 0 2px;
display: inline-block;
padding: 3px 10px;
text-align: center;
font-size: 12px;
color: gray;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: #fafafa;
border: 1px solid silver;
cursor: pointer;
font-family: "Inter Regular", Inter, Arial, sans-serif;
}
.onglet_selected {
margin: 0 2px;
display: inline-block;
padding: 3px 10px;
padding-top: 5px;
text-align: center;
font-size: 12px;
color: white;
font-weight: bold;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 1px solid #09394d;
cursor: pointer;
background: #005477;
}
/* BOUTONS */
.bt {
margin: 2px 5px 0 0;
border: 1px solid grey;
text-transform: inherit;
background-color: #ffffff;
padding: 4px 10px;
font-size: 12px;
cursor: pointer;
font-weight: bold;
transition:
background-color 0.6s,
color 0.6s;
white-space: nowrap;
border-radius: 0;
box-shadow: none;
text-shadow: none;
}
.bt:hover {
background-color: hsl(206, 81%, 90%);
transition:
background-color 0.6s,
color 0.6s;
}
.bt:after {
display: inline-block;
font-size: 1.2em;
transition:
transform 0.6s,
color 0.6s;
font-family: 'Font Awesome 6 Free'; /* l'app charge FA6 : le nom FA5 donnait des carres "tofu" */
font-weight: 900; /* requis pour les icones solides en FA6 */
position: relative;
top: 1px;
color: #42a2eb;
margin: -4px 0 -1px 5px;
}
.bt:hover:after {
transition:
transform 0.6s,
color 0.6s;
}
.bt img {
display: none;
height: 14px;
margin-left: 5px;
position: relative;
top: 3px;
}
.bt.add:after {
content: '\f0fe';
}
.bt.dev:after {
content: '\f121';
}
.bt.off:after {
content: '\f146';
}
.bt.ban:after {
content: '\f05e';
}
.bt.trash:after {
content: '\f014';
}
.bt.check:after {
content: '\f00c';
}
.bt.link:after {
content: '\f0c1';
}
.bt.search:after {
content: '\f002';
}
.bt.email:after {
content: '\f0e0';
}
.bt.refresh:after {
content: '\f021';
}
.bt.back:after {
content: '\f00d';
}
.bt.lock:after {
content: '\f023';
}
.bt.unlock:after {
content: '\f09c';
}
.bt.fan:after {
content: '\f863';
}
.bt.arrow-right:after {
content: '\f061';
}
.bt.arrow-left:after {
content: '\f060';
}
.bt.paperclip:after {
content: '\f0c6';
}
.bt.gear:after {
content: '\f013';
}
.bt.edit:after {
content: '\f044';
}
.bt.sort:after {
content: '\f0dc';
}
.bt.download:after {
content: '\f019';
}
.bt.envelope:after {
content: '\f0e0';
}
.bt.calendar:after {
content: '\f073';
}
.bt.xls:after {
content: '\f1c3';
}
.bt.pdf:after {
content: '\f1c1';
}
.bt.word:after {
content: '\f1c2';
}
.bt.file:after {
content: '\f1c5';
}
.bt:after {
color: #42a2eb;
}
.bt.red:after {
color: #e73131;
}
.bt.orange:after {
color: orange;
}
.bt.green:after {
color: green;
}
.bt.blue:after {
color: #0d6485;
}
.bt {
border-color: #42a2eb;
}
.bt.bd_red {
border-color: red;
}
.bt.bd_green {
border-color: green;
}
.bt:hover:after {
transform: rotate(90deg);
}
.bt.lock:hover:after,
.bt.unlock:hover:after,
.bt.trash:hover:after,
.bt.pdf:hover:after,
.bt.xls:hover:after,
.bt.download:hover:after,
.bt.sort:hover:after,
.bt.envelope:hover:after,
.calendar:hover:after {
transform: scaleX(-1);
}
.bt.arrow-right:hover:after,
.bt.refresh:hover:after {
transform: rotate(360deg);
}
.button_valid,
.button_cancel,
.button_standard,
.button_disabled {
text-transform: inherit;
border: 1px solid #245580;
color: #fff;
padding: 4px 10px;
line-height: 1.4;
font-size: 13px;
}
.bt[disabled] {
cursor: inherit;
color: silver;
}
/*.bt.add:hover:after ,
.bt.add:link:after ,
.bt.off:hover:after {
transform:rotate(90deg);
background-color: hsl(0, 70%, 92%);
}
.bt.add:hover {
color: black;
background-color: hsl(206, 81%, 90%);
}
.bt.pdf:hover {
color: black;
background-color: hsl(0, 0%, 92%);
}*/
table.InputTextButton button.button_valid,
.button_valid {
background: none;
background-color: #428eeb;
color: #ffffff;
border: none;
font-weight: bold;
}
.button_cancel {
background-color: #ffffff;
color: #3c3c3c;
border: 1px solid #e04c4c;
font-weight: bold;
}
.button_standard {
background-color: #ffffff;
color: #222222;
border: 1px solid grey;
font-weight: bold;
}
.button_valid:hover {
background-color: hsl(206, 81%, 45%);
}
.button_cancel:hover {
color: black;
background-color: hsl(0, 70%, 92%);
}
.button_standard:hover {
color: black;
background-color: hsl(0, 0%, 92%);
}
.button_valid[disabled],
.button_cancel[disabled],
.button_standard[disabled],
.button_valid:hover[disabled],
.button_cancel:hover[disabled],
.button_standard:hover[disabled] {
color: black;
background-color: silver;
}
/* BOUTONS NAV */
.navbouton ul li {
padding: 3px 12px;
text-align: left;
}
.navbouton ul li:hover,
.navbouton li:hover a {
opacity: 0.8;
background-color: hsl(206, 81%, 50%);
color: #fff;
}
.navbouton ul a {
color: #fff;
text-decoration: none;
}
.navbouton ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: 26px;
left: 0;
z-index: 100;
background-color: #42a2eb;
border: 1px solid #fff;
box-shadow: 0 2px 10px 0 #666;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
line-height: 1.42857;
cursor: pointer;
list-style: none;
border-radius: 4px;
font-weight: normal;
font-size: 12px;
min-width: 120px;
transition:
visibility 0s,
opacity 0.3s linear;
color: #fff;
}
.navbouton:hover ul,
.navbouton *:hover {
visibility: visible;
opacity: 1;
}
.navbouton span {
text-align: right;
padding-left: 10px;
}
/* Font Awesome 6 : la migration FA5 -> FA6 n'avait pas ete repercutee ici, le
chevron sortait donc en carre "tofu". Le poids 900 est indispensable, \f0da
n'existe que dans la variante solid. */
.navbouton span:after {
content: '\f0da';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
display: inline-block;
}
.navbouton:hover span:after {
transition: transform 0.2s;
transform: rotate(90deg);
}
.navbouton {
text-align: center;
white-space: nowrap;
position: relative;
overflow: visible;
background-color: #42a2eb;
border-color: #245580;
color: #fff;
padding: 5px 18px;
line-height: 1.4;
cursor: pointer;
border-radius: 4px;
font-weight: bold;
font-size: 14px;
display: inline-block;
}
.upnavbouton ul {
top: inherit;
left: inherit;
bottom: 26px;
right: 0;
margin: 0px;
padding-left: 0px;
}
.upnavbouton:hover span:after {
transition: transform 0.2s;
transform: rotate(270deg);
}
/* POPINS */
.div_flou {
display: none;
position: fixed;
width: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #000000;
z-index: 120;
filter: alpha(opacity =60);
-moz-opacity: 0.6;
opacity: 0.6;
}
.popin-content {
z-index: 121;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.popin {
display: none;
position: fixed;
overflow: hidden;
z-index: 122;
}
.popin.support {
box-shadow: 0 0 10px 0 #303030;
border-radius: 5px;
background-color: white;
}
.popin.support .title_support {
/* background-color: rgb(9, 158, 226);*/
width: 100%;
border-bottom: 1px solid silver;
height: 25px;
padding-top: 10px;
color: white;
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: "Inter Regular", Inter, Arial, sans-serif;
box-sizing: content-box;
}
.popin.support .title_support img {
float: right;
position: relative;
right: 2%;
cursor: pointer;
}
.popin.support .content_support {
padding: 0 2px;
padding-top: 1%;
overflow-y: auto;
position: absolute;
top: 35px;
bottom: 37px;
overflow-x: hidden;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.popin.support .footer_support {
clear: both;
width: 100%;
text-align: center;
height: 37px;
position: absolute;
bottom: 0;
padding-bottom: 5px;
}
/* LOADER */
.msgBox.loading {
background-color: #fafafa;
border: 1px solid silver;
color: #303030;
opacity: 0;
transition:
visibility 0.2s linear,
opacity 0.2s linear;
}
.loading_flou {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(100, 100, 100, 0.2);
display: none;
z-index: 2000;
}
.msgBox {
color: white;
background: rgba(30, 30, 30, 0.8);
font-size: 1.3rem;
}
#msgBox {
display: none;
}
.msgBox {
z-index: 10000;
width: 40%;
position: absolute;
top: 30%;
left: 27.5%;
padding: 25px 2.5%;
text-align: center;
box-shadow: 0 0 10px 00px #303030;
border-radius: 5px;
transition:
visibility 0.3s linear,
opacity 0.3s linear;
}
.msgBox img {
float: left;
position: relative;
left: 20px;
height: 25px;
}
.msgBox i {
margin-right: 10px;
}
.msgBox ul {
text-align: left;
font-size: 1.1rem;
}
.msgBox ul li {
padding-top: 5px;
margin-left: 5px;
}
.msgBox.ok {
background-color: rgba(30, 150, 30, 0.8);
}
.msgBox.notice {
background-color: rgba(200, 128, 00, 0.8);
}
.msgBox.ko {
background-color: rgba(150, 30, 30, 0.8);
}
.msgBox.ok .icon {
color: green;
}
.msgBox.ko .icon {
color: red;
}
/* TITRES */
.entete_liste,
.entete_liste.entete_liste_old {
display: inline-block;
color: dimgray;
font-family: "Inter Regular", Inter, Arial, sans-serif;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: none;
margin: 3px 2% 0;
font-size: 22px;
padding: 10px 0 0;
background-color: transparent;
}
.entete_liste i.fa-angle-right {
padding: 0 4px;
color: black;
color: dimgray;
}
.entete_liste i.fa-list {
padding-right: 8px;
color: #005477;
vertical-align: bottom;
}
#title_current_page a {
color: inherit;
text-decoration: inherit;
}
.div_contenu .entete_liste {
border: none;
/* margin: 3px 2% 0;*/ /*c'est les memes valeurs qu'au dessus, donc ne sert a rien ici, mais casse le css du new design dans layout2024*/
font-size: 22px;
/* padding: 10px 0 0;*/ /*c'est les memes valeurs qu'au dessus, donc ne sert a rien ici, mais casse le css du new design dans layout2024*/
background-color: transparent;
}
.fil_ariane,
.fil_ariane.fil_ariane_old {
margin: 5px 2% 0;
padding: 0 0 10px 0;
font-size: 0.8em;
font-family: "Inter Regular", Inter, Arial, sans-serif;
}
.fil_ariane.fil_ariane_old {
display: block !important;
}
.fil_ariane a {
color: #005477;
}
.titre_page_en_cours {
color: #005477;
}
/* LISTES A FILTRE */
.titre_frame {
margin: 8px 1% 5px;
text-transform: lowercase;
font: bold 14px Arial;
color: rgb(9, 158, 202);
}
.content_liste {
position: relative;
display: block;
text-align: center;
}
.content_bouton {
display: block;
margin: 15px auto;
clear: both;
text-align: center;
width: 95%;
position: relative;
top: 22px;
}
.content_bouton table {
margin: 0 auto;
}
.img_titre {
display: inline-block;
}
/****** affichage du total en bas, dans les listes *****/
div.affichage_total {
margin-top: 4px;
width: 180px;
text-align: center;
border: 1px solid #42a2eb;
border-radius: 2px;
padding: 5px;
color: #005477;
float: right;
}
.filtres_header {
border: 1px solid silver;
border-radius: 5px;
display: inline-block;
float: right;
height: 38px;
margin: 10px 2% 0 0;
padding: 7px 10px;
position: relative;
vertical-align: top;
box-sizing: border-box;
overflow: visible;
}
.filtres_header span:first-child {
color: white;
display: inline-block;
font-size: 14px;
margin-top: 2px;
margin-right: 10px;
padding-top: 0px;
vertical-align: top;
height: 20px;
overflow: hidden;
}
.filtres_header .select {
display: inline-block;
float: right;
margin: 0 !important;
width: 180px;
}
div.div_contenu .filtres_header .select {
display: inline-block;
float: right;
margin: 0 !important;
width: 180px;
}
.filtres_header .multiselect-wrapper {
display: flex;
align-items: center;
float: right;
margin: 0 !important;
width: 180px;
position: relative;
overflow: visible;
height: 100%;
z-index: 999;
}
div.div_contenu .filtres_header .select::before,
.bloc_champ .select::before {
width: 21px;
bottom: 4.5px;
top: -0.5px;
}
div.div_contenu .filtres_header .select::after,
.bloc_champ .select::after {
right: 4px;
top: 47%;
}
/* TOOLTIPS */
.tip-wrap {
color: #fff;
min-width: 200px;
max-width: 350px;
z-index: 13000;
}
.tip-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #9fd4ff;
padding: 8px 8px 4px;
background: url(/../images/tooltips/bubble.png) top left;
}
.tip-text {
font-size: 11px;
padding: 4px 8px 8px;
background: url(/../images/tooltips/bubble.png) bottom right;
}
td.tooltip.noTooltipBootstrap {
display: table-cell !important;
}
.tooltip.noTooltipBootstrap {
opacity: 1 !important;
font-size: revert;
z-index: auto;
}
*:not(i).tooltip.noTooltipBootstrap {
font-family: revert;
}
td.tooltip,
tr.tooltip td,
div.tooltip,
label.tooltip,
.help,
i.fa-info-circle {
cursor: help;
}
/* PAGES DE LISTE-FILTRE */
div.iframe_liste {
position: absolute;
top: 60px;
bottom: 0;
}
div.iframe_liste iframe {
height: 100%;
width: 100%;
border: none;
}
tr.ligne_vide > td {
border: 0;
padding: 2px 3px;
font-size: 13px;
background-color: #fff;
color: #333;
font-style: italic;
}
tr.ligne_donnee td ,
tr.ligne_donnee_light td {
padding: 2px 3px;
font-size: 13px;
vertical-align: middle;
}
/*
INFO :
tr.ligne_donnee --> avec gestion des laternance de couleur sur les lignes
tr.ligne_donnee --> sans alternance de couleur, plus ligth, avec une bordure fine séparative
*/
tr.ligne_donnee td {
border: 0;
}
tr.ligne_donnee_light td {
border-bottom: 1px solid #f1eeee;
}
tr.ligne_donnee:nth-child(odd) {
background-color: #f3f3f3;
color: #333;
}
tr.ligne_donnee:nth-child(even) {
background-color: #fff;
color: #333;
}
tr.ligne_donnee td a,
tr.ligne_donnee td a:visited,
tr.ligne_donnee td a:hover,
tr.ligne_donnee td a:focus,
tr.ligne_donnee_light td a,
tr.ligne_donnee_light td a:visited,
tr.ligne_donnee_light td a:hover,
tr.ligne_donnee_light td a:focus {
color: inherit;
display: inline-block;
overflow: hidden;
text-decoration: inherit;
text-overflow: ellipsis;
height: 100%;
width: 100%;
vertical-align: middle;
}
.hover:hover,
.hover:hover td,
.hover:hover td > i,
.hover:hover td > span,
tr.forcehover > td {
/*
background-color: hsl(206, 81%, 66%) !important;
color: #ffffff !important;
*/
background-color: #e1ecf2 !important;
color: black;
}
.lighthover:hover,
.lighthover:hover td,
.lighthover:hover td > i,
.lighthover:hover td > span {
background-color: #eee;
}
.div_onglet_haut .conteneur_tableau_donnees {
left: 0;
right: 0;
}
.conteneur_tableau_donnees {
position: absolute;
left: 0.5%;
right: 0.5%;
padding-right: 17px !important;
}
.conteneur_tableau_donnees.central {
overflow-y: scroll !important;
padding-right: 0 !important;
}
.tableau_donnees td,
.tableau_donnees th {
font-size: 13px;
}
.tableau_donnees {
/*
border: 1px solid var(--couleur-bordure_tableau);
*/
border-collapse: collapse;
width: 99%;
margin: 0 auto;
}
.conteneur_tableau_donnees .tableau_donnees {
width: 100%;
}
.tableau_donnees a {
color: inherit;
}
tr.ligne_vide,
tr.ligne_donnee,
tr.ligne_donnee_light,
tr.tr_total,
tr.tr_niveau1,
tr.tr_niveau2,
tr.tr_niveau3,
tr.tr_niveau1_total,
tr.tr_niveau2_total,
tr.tr_niveau3_total {
height: 25px;
}
tr.ligne_donnee td,
tr.tr_total td,
tr.tr_niveau1 td,
tr.tr_niveau2 td,
tr.tr_niveau3 td {
padding: 2px 3px;
}
.tableau_donnees .tr_total td {
color: white;
}
tr.separateur_top td {
border-top: 1px black solid !important;
}
.tr_total td {
font-weight: bold;
background-color: #595959;
}
.tableau_donnees .libelle_filtre_bk {
font-size: 12px;
padding: 1px 5px;
border: 0;
border-color: white;
}
.tableau_donnees .select {
margin: 0;
}
.tr_niveau1_total {
background-color: white;
}
.tr_niveau2,
.tr_niveau2_total {
background-color: #42a2eb11;
}
.tr_niveau1,
.tr_niveau2 {
/*
background-color: lightgrey;
*/
background-color: #e8f1f7;
}
.tr_niveau3,
.tr_niveau3_total {
background-color: #d3d3d355 /*#42a2eb11*/;
font-weight: bold;
}
.tr_niveau2,
.tr_niveau3,
.tr_niveau2_total td,
.tr_niveau3_total td,
.tr_niveau3_total th {
/*color: white;*/
}
.tr_niveau3 td,
.tr_niveau3_total td {
font-weight: bold;
padding: 2px 3px;
}
.tr_niveau1,
.tr_niveau2,
.tr_niveau3,
.tr_niveau1_total,
.tr_niveau2_total {
border-top: 1px solid var(--couleur-bordure_tableau);
border-bottom: 1px solid var(--couleur-bordure_tableau);
}
.tableau_donnees tr td.td_libelle {
text-align: left;
border-right: 1px solid var(--couleur-bordure_tableau);
}
.tableau_donnees tr td.td_total {
border-left: 1px solid var(--couleur-bordure_tableau);
}
.tableau_donnees tr.ligne_donnee td.td_total ,
.tableau_donnees tr.ligne_donnee_light td.td_total {
/*
background-color: #bbbbbb60;
*/
background-color: #eef2f6;
border-top: 1px solid var(--couleur-bordure_tableau);
}
.tableau_donnees tr td.td_texte {
text-align: left;
}
.tableau_donnees tr td.td_date {
text-align: center;
}
.tableau_donnees tr td.td_fin_colonne,
.tableau_donnees tr th.td_fin_colonne {
border-right: 1px solid var(--couleur-bordure_tableau) !important;
}
.tr_niveau1 .td_total,
.tr_niveau2 .td_total,
.tr_niveau1 .td_libelle,
.tr_niveau2 .td_libelle,
.tr_niveau1_total td,
.tr_niveau2_total td {
font-weight: bold;
padding: 1px 5px;
}
tr.tr_niveau4 td {
font-weight: bold;
}
.tableau_donnees tr td {
text-align: right;
}
.ligne_desactivee,
tr.ligne_desactivee td {
font-style: italic;
color: rgb(9, 158, 202) !important;
}
/* Ligne selectionnee (popins de choix multiple, listes) : le fond est pose sur les
et l'emporte sur le survol (.hover:hover td et la variante .liste_resultats), sinon
la ligne qu'on vient de cliquer garde la couleur de survol tant que la souris n'a pas
bouge et on ne voit pas que le clic a ete pris. Un filet a gauche et une coche
completent le fond pour lever tout doute. */
tr.ligne_donnee.ligne_selectionnee,
tr.ligne_donnee_light.ligne_selectionnee,
tr.ligne_donnee.ligne_selectionnee td,
tr.ligne_donnee_light.ligne_selectionnee td,
tr.ligne_donnee.ligne_selectionnee.hover:hover td,
tr.ligne_donnee_light.ligne_selectionnee.hover:hover td,
body .liste_resultats tr.ligne_donnee.ligne_selectionnee td,
body .liste_resultats tr.ligne_donnee.ligne_selectionnee.hover:hover td {
background-color: rgb(137, 201, 255) !important;
}
tr.ligne_selectionnee td:first-child {
box-shadow: inset 4px 0 0 #005477;
}
tr.ligne_selectionnee td:first-child::before {
content: "\f00c";
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
font-weight: 900;
font-size: 11px;
color: #005477;
margin-right: 6px;
}
/* PAGINATION TABLEAUX */
.pagination_fiche {
width: 140px;
position: relative;
text-align: center;
margin: 12px 2% 0 0;
float: right;
}
.pagination_fiche span {
position: relative;
top: 7px;
}
.pagination_fiche i {
color: #005477;
cursor: pointer;
position: absolute;
}
.pagination_fiche .fa-arrow-circle-left {
left: 0;
}
.pagination_fiche .fa-arrow-circle-right {
right: 0;
}
i.page_precedente {
position: absolute;
top: 8px;
left: 15px;
cursor: pointer;
color: #09aee3;
}
i.page_precedente:hover {
transition: color 0.6s;
color: #005477;
}
/* MENU_CONTEXTUEL */
.clicmenu,
.clicmenurev {
cursor: pointer;
}
/* Menu contextuel flottant (menu_contextuel.js, icones .clicmenu/.clicmenurev).
Composant GLOBAL, mis a la charte : carte blanche, ombre douce, items arrondis,
survol teal — a la place du gris degrade a filets pointilles et du survol
bleu vif texte blanc. */
#menu_contextuel {
position: fixed;
background: #ffffff;
width: 200px;
z-index: 1000;
border: 1px solid #e3e8ee;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(16, 24, 40, .14);
padding: 4px;
font-size: 13px;
color: #334155;
}
#menu_contextuel ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/* Le padding est porte par le lui-meme, que l'entree soit un texte texte annule ce padding par une marge negative
et le reprend pour garder toute la ligne cliquable. Avant, le padding tombait
sur l'icone (li > :not(a)) et decalait le texte des entrees sans lien. */
#menu_contextuel ul li {
border: none;
padding: 7px 10px;
cursor: pointer;
border-radius: 6px;
white-space: nowrap;
transition: background-color .12s ease;
}
#menu_contextuel ul li:hover {
background-color: #eef5f8;
color: #005477;
}
#menu_contextuel ul li i {
display: inline-block;
width: 18px;
text-align: center;
margin-right: 8px;
vertical-align: -1px;
}
#menu_contextuel ul li > a {
text-decoration: none;
color: inherit;
display: block;
margin: -7px -10px;
padding: 7px 10px;
border-radius: 6px;
}
.zone-boutons {
float: right;
margin-right: 1%;
margin-top: 8px;
}
/* GRILLE PAGE EDITION */
div.row div.card {
/* margin: 4px 2px;*/
/* border: 1px solid #EDEDED;*/
/* border-radius: 18px !important;*/
}
.div_contenu {
min-height: 530px;
height: 100%;
position: relative;
overflow-x: hidden;
overflow-y: auto;
}
.grille_espace {
width: 100%;
float: left;
height: 20px;
}
.grille_separateur {
width: 96%;
float: left;
border-top: 1px dotted silver;
margin: 4px 2%;
}
.grille_large_separateur {
width: 96%;
float: left;
border-top: 1px dotted silver;
padding-bottom: 3px;
margin: 20px 2%;
}
.grille_edition_1,
.grille_edition_2,
.grille_edition_3,
.grille_edition_4,
.grille_edition_5,
.grille_edition_5 {
padding: 3px 0 6px;
float: left;
width: 100%;
box-sizing: border-box;
}
/* Conteneurs de grilles CSS Grid */
.grille_edition_grid_1,
.grille_edition_grid_2,
.grille_edition_grid_3,
.grille_edition_grid_4,
.grille_edition_grid_5,
.grille_edition_grid_6 {
padding: 3px 0 6px;
display: grid;
width: 100%;
box-sizing: border-box;
gap: 0 10px;
}
.grille_edition_1 h3,
.grille_edition_2 h3,
.grille_edition_3 h3,
.grille_edition_4 h3,
.grille_edition_5 h3,
.grille_edition_6 h3 {
text-align: center;
font-size: 13px;
padding: 0 0 2px 0;
margin: 0;
float: left;
width: 100%;
}
.grille_edition_grid_1 h3,
.grille_edition_grid_2 h3,
.grille_edition_grid_3 h3,
.grille_edition_grid_4 h3,
.grille_edition_grid_5 h3,
.grille_edition_grid_6 h3 {
text-align: center;
padding: 0 0 10px 0;
width: 100%;
grid-column: 1 / -1; /* grid-column: start / end : 1 = commence à la ligne de grille 1 (première colonne) et -1 = se termine à la ligne de grille -1 (dernière colonne). Cela permet de mettre le titre sur toute la largeur des colonnes. */
}
.grille_edition_1 .bloc_champ {
width: 100%;
}
.grille_edition_2 .bloc_champ {
width: 50%;
}
.grille_edition_3 .bloc_champ {
width: 33.3%;
}
.grille_edition_4 .bloc_champ {
width: 25%;
}
.grille_edition_5 .bloc_champ {
width: 20%;
}
.grille_edition_6 .bloc_champ {
width: 16.6%;
}
/* Grilles d'édition CSS Grid */
.grille_edition_grid_1 {
grid-template-columns: 1fr;
}
.grille_edition_grid_2 {
grid-template-columns: 1fr 1fr;
}
.grille_edition_grid_3 {
grid-template-columns: 1fr 1fr 1fr;
}
.grille_edition_grid_4 {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grille_edition_grid_5 {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.grille_edition_grid_6 {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
/* Fiche detail evenement (base_contacts) : champs Planifie/Realise (date+heure) plus larges.
Les deux dernieres colonnes sont en `auto` et non en `1fr` : elles ne portent qu'une paire
d'icones et une case a cocher, et un `1fr` leur donnait une largeur proportionnelle, soit
107px sur une carte de 920px - moins que la gouttiere de 135px reservee au libelle par
`.bloc_champ > div`. Le champ se retrouvait alors avec un bord gauche a droite de son bord
droit, donc une largeur nulle : la coche "Email de rappel" n'etait pas rendue du tout en
dessous d'environ 1400px de large.
Les deux premieres sont en largeur fixe et non en fraction : une date tient en 104px et une
heure en 74px (cf. evenements.css), un partage en fractions les etirait sur toute la carte
et repoussait d'autant les raccourcis et la coche. 340px = les 135px du libelle plus les
deux champs, avec de la marge. */
.grille_edition_grid_4.grille_evenement_dates {
grid-template-columns: 340px 340px auto auto;
justify-content: start;
column-gap: 20px;
}
/* Le wrapper interne (date+heure) est positionne en absolute par la regle generale
.bloc_champ > div:not(.marge_prev) { left:135px; right:10px } : sans limite de largeur
explicite, son contenu flex (avec min-width) peut deborder dans la colonne suivante
(chevauchement observe avec le libelle "Realise"). On force ici une largeur bornee
au conteneur reel de la colonne, avec un overflow protecteur. */
.grille_evenement_dates .bloc_champ > div:not(.marge_prev) {
max-width: calc(100% - 145px);
overflow: hidden;
}
/* Variante "libelle au-dessus" : le champ reprend le flux au lieu d'etre pose a 135px du
bord. Pour une case a cocher, cette gouttiere n'apporte rien et interdit toute cellule
etroite. */
.grille_evenement_dates .bloc_champ.libelle_dessus {
position: static;
display: flex;
flex-direction: column;
gap: 3px;
}
.grille_evenement_dates .bloc_champ.libelle_dessus > label {
position: static;
float: none;
width: auto;
line-height: 18px;
}
.grille_evenement_dates .bloc_champ.libelle_dessus > div:not(.marge_prev) {
position: static;
left: auto;
right: auto;
max-width: none;
line-height: normal;
}
/* Sous 1100px, les quatre colonnes ne tiennent plus : les dates gardent une ligne a elles,
les icones et la coche passent en dessous. Le seul garde-fou existant etait a 640px,
bien trop tard - la mise en page cassait des 1400px. */
@media screen and (max-width: 1100px) {
.grille_edition_grid_4.grille_evenement_dates {
grid-template-columns: 1fr 1fr;
row-gap: 10px;
}
}
@media screen and (max-width: 640px) {
.grille_edition_2 .bloc_champ,
.grille_edition_3 .bloc_champ,
.grille_edition_4 .bloc_champ,
.grille_edition_5 .bloc_champ,
.grille_edition_6 .bloc_champ {
width: 100%;
}
.grille_edition_grid_2,
.grille_edition_grid_3,
.grille_edition_grid_4,
.grille_edition_grid_5,
.grille_edition_grid_6,
.grille_edition_grid_4.grille_evenement_dates {
grid-template-columns: 1fr;
}
.cache_petit {
display: none;
}
}
/*@media screen and (max-width: 1025px)
{
body{
zoom:0.70 !important;
}
}
@media screen and (max-width: 1366px)
{
body{
zoom:0.75;
}
}*/
/* BLOC EDITION */
.bloc_champ {
position: relative;
float: left;
min-height: 29px;
}
/* Wrapper flex pour aligner deux bloc_champ côte à côte (ex: ref_client + modele_facture) */
.bloc_champ_flex_row {
align-items: flex-start;
}
.bloc_champ_flex_row > .bloc_champ {
flex: 1;
float: none !important;
min-width: 0;
position: relative !important;
display: flex;
flex-direction: column;
min-height: 50px;
}
.bloc_champ_flex_row > .bloc_champ > label {
width: 100% !important;
max-width: 100% !important;
float: none !important;
text-align: left !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 18px !important;
font-size: 11px;
display: block;
}
.bloc_champ_flex_row > .bloc_champ > div {
position: static !important;
left: auto !important;
right: auto !important;
width: 100% !important;
}
/* Version flexbox de .bloc_champ */
.bloc_champ_flex {
display: flex;
align-items: center;
min-height: 29px;
position: relative;
}
/* Styles pour les éléments enfants de .bloc_champ_flex */
.bloc_champ_flex > label {
width: 105px;
text-align: right;
white-space: nowrap;
flex-shrink: 0;
margin-right: 15px;
}
.bloc_champ_flex > div {
flex: 1;
line-height: 28px;
z-index: auto;
}
.bloc_champ_flex > div > div {
position: relative;
}
.bloc_champ label,
.bloc_champ_flex label,
.chronos-label,
label.form-label {
color: #6b7785;
font-weight: 500;
line-height: 28px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
letter-spacing: .3px;
}
.bloc_champ > label:first-letter,
.bloc_champ label:first-letter,
.bloc_champ_flex > label:first-letter,
.bloc_champ_flex label:first-letter,
.chronos-label:first-letter,
label.form-label:first-letter {
text-transform: uppercase;
}
.bloc_champ > label {
width: 120px;
text-align: left;
float: left;
white-space: nowrap;
}
.bloc_champ .cutlabel {
text-align: center;
white-space: nowrap;
box-sizing: border-box;
}
.bloc_champ > div > label {
text-align: center;
white-space: nowrap;
float: left;
position: relative;
}
.bloc_champ > div:not(.marge_prev) {
position: absolute;
left: 135px;
right: 10px;
line-height: 28px;
z-index: auto;
}
.bloc_champ > div > div {
float: left;
position: relative;
}
.div_contenu input,
.div_contenu textarea,
.bloc_champ input,
.bloc_champ textarea,
.bloc_champ_flex input,
.bloc_champ_flex textarea {
width: 100%;
height: 22px;
text-indent: 1px;
padding-left: 0;
box-sizing: border-box;
background-color: #ffffff;
border-radius: 6px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.div_contenu textarea,
.bloc_champ textarea,
.bloc_champ_flex textarea {
height: 52px;
resize: none;
}
.div_contenu input.right,
.bloc_champ input.right,
.bloc_champ_flex input.right {
padding-right: 5px;
}
.div_contenu input.bouton_droit,
.bloc_champ input.bouton_droit,
.bloc_champ_flex input.bouton_droit,
div.content_support .tableau_donnees input.bouton_droit {
padding-right: 36px;
}
.bloc_champ .select_bouton,
.bloc_champ_flex .select_bouton {
padding-right: 22px !important;
}
.bloc_champ .select_bouton button,
.bloc_champ_flex .select_bouton button {
position: absolute;
height: 22px;
top: 4px;
}
.div_contenu input[disabled].lien,
.div_contenu input[readonly].lien,
.bloc_champ input[disabled].lien,
.bloc_champ input[readonly].lien,
.bloc_champ_flex input[disabled].lien,
.bloc_champ_flex input[readonly].lien {
color: rgb(9, 158, 202);
}
.div_contenu input[type='checkbox'],
.div_contenu input[type='radio'],
.bloc_champ input[type='checkbox'],
.bloc_champ input[type='radio'],
.bloc_champ_flex input[type='checkbox'],
.bloc_champ_flex input[type='radio'] {
position: relative;
top: 2px;
height: inherit;
}
.div_contenu .select,
.bloc_champ .select,
.bloc_champ_flex .select {
width: 100%;
padding: 0;
height: 26px !important;
}
.bloc_champ .selectbouton button,
.bloc_champ_flex .selectbouton button {
height: 22px;
margin-top: -1px;
}
.bloc_champ .selectbouton div,
.bloc_champ_flex .selectbouton div {
right: 22px;
left: 0;
position: absolute;
}
input:focus,
textarea:focus,
.select select:focus {
border-color: #005477;
box-shadow: 0 0 0 2px rgba(0, 84, 119, .12);
outline: none;
}
.div_contenu .select select,
.bloc_champ .select select,
.bloc_champ_flex .select select {
background-color: #ffffff;
padding-right: 22px;
z-index: 5;
}
.div_contenu .select:before,
.bloc_champ .select:before,
.bloc_champ_flex .select:before {
width: 29px;
bottom: 2px;
top: 2px;
}
.div_contenu .select:after,
.bloc_champ .select:after,
.bloc_champ_flex .select:after {
right: 9px;
top: 52%;
}
.bloc_champ button,
.bloc_champ_flex button,
button.bouton_droit {
position: absolute;
color: #64748b;
border: 1px solid #d5dbe1;
background-color: white;
width: 32px;
right: 0;
bottom: 2.5px;
top: 3px;
cursor: pointer;
border-radius: 4px;
line-height: 100% !important;
transition: background-color .15s ease, border-color .15s ease;
}
.bloc_champ button:hover {
background-color: #f1f5f8;
border-color: #b9c4cf;
}
.bloc_champ.bloc_desactive {
display: none;
visibility: hidden;
}
.div_contenu .oblig:after {
top: -2px;
}
.large_label .bloc_champ > label {
width: 190px;
}
.large_label .bloc_champ > div {
left: 205px;
}
.large_label .bloc_champ_flex > label {
width: 190px;
margin-right: 15px;
}
.content_detail {
margin: 0 0.5%;
background-color: white;
border: 1px solid silver;
border-radius: 0;
/*
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
*/
padding: 5px 0.5%;
}
.div_contenu .content_detail {
border: none;
}
/* ONGLETS */
.content_detail.content_onglets {
border-top: 1px solid silver;
padding: 0 !important;
bottom: 45px;
top: 31px;
left: 0;
right: 0;
position: absolute;
overflow-y: auto;
z-index: 9;
}
.content_onglets iframe {
width: 100%;
height: 99%;
border: none;
}
.content_onglets .grille_edition_1,
.content_onglets .grille_edition_2,
.content_onglets .grille_edition_3,
.content_onglets .grille_edition_4,
.content_onglets .grille_edition_5,
.content_onglets .grille_edition_6 {
margin-top: 6px;
}
.onglet,
.onglet_selected {
padding: 8px 5px;
border-radius: 0 4px 0 0;
border-color: silver;
font-size: inherit;
}
.onglet {
margin: 0;
border-width: 1px 1px 0 0;
background-color: white;
}
.onglet:hover {
background-color: hsl(0, 0%, 95%);
}
.onglet_selected,
.onglet_selected:hover {
color: #005477;
border-width: 1px 1px 0 0;
background-color: #e5e5e5;
}
#content_onglet {
border-left: 1px solid silver;
border-width: 0 0 0 1px;
margin: 0 0.5%;
padding: 0;
width: 99%;
background-color: #fff;
z-index: 10;
}
.bloc_boutons_onglet {
bottom: 1px;
height: 36px;
left: 0;
right: 0;
position: absolute;
margin: 2px 0.5%;
}
#footer_fiche_detail {
height: 36px;
padding-top: 3px;
}
.div_contenu .fleches_onglet {
display: none;
position: absolute;
z-index: 50;
border: 1px solid silver;
float: left;
cursor: pointer;
padding: 6px 0;
background-color: white;
}
#content_onglet {
overflow: hidden;
}
/* TABLEAU DANS ONGLET */
.div_contenu #onglet_fiche_detail .conteneur_tableau_donnees {
left: 0;
right: 0;
}
.div_contenu #content_detail .conteneur_tableau_donnees,
.div_contenu #onglet_fiche_detail .conteneur_tableau_donnees,
.div_contenu #onglet_fiche_detail .conteneur_tableau_donnees tr td,
.div_contenu #onglet_fiche_detail .conteneur_tableau_donnees tr th {
border: 0;
/* background-color: #42a2eb;*/
font-weight: bold;
color: white;
}
.div_contenu #onglet_fiche_detail .conteneur_tableau_donnees.central,
.div_contenu #onglet_fiche_detail .conteneur_tableau_donnees.central tr td,
.div_contenu #onglet_fiche_detail .conteneur_tableau_donnees.central tr th {
border: inherit;
border-width: inherit;
background-color: inherit;
color: inherit;
font-weight: inherit;
}
.div_contenu #onglet_fiche_detail .conteneur_tableau_donnees table {
border: none;
}
.div_contenu .tr_header th,
.div_contenu .tr_header td {
/* background-color: #42a2eb;*/
font-weight: bold;
color: white;
}
/*.div_contenu tr.ligne_donnee td {
font-size: 13px;
}*/
.conteneur_tableau_donnees.entete,
.conteneur_tableau_donnees.entete tr td,
.conteneur_tableau_donnees.entete tr th {
/* background-color: #42a2eb;*/
color: #fff;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* BARRE DE PROGRESSION */
.progress-bar {
width: 82px;
height: 3px;
margin-top: 1px;
border-radius: 16px;
box-shadow:
inset 0 1px 2px #000,
0 1px 0 #2b2b2b;
float: right;
padding: 1px 0 4px 1px;
overflow: hidden;
}
.contenu-bar {
height: 7px;
border-radius: 12px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 3px rgba(0, 0, 0, 0.4),
0 1px 1px #000;
background: url(../../images/degrade_progressbar.png) repeat-y;
background-size: 100%;
}
/* AUTOCOMPLETION */
.conteneur_autocompletion {
position: relative;
overflow: visible !important;
z-index: 35;
}
div.autocompletion {
background-color: white;
z-index: 1000 !important;
position: absolute;
float: none !important;
width: 100%;
/* border-bottom-right-radius:5px;*/
/* border-bottom-left-radius:5px;*/
top: -3px;
/* box-shadow: 1px 1px 1px grey;*/
display: none;
border: 0px;
max-height: 155px;
overflow-y: scroll;
}
.autocompletion_div {
text-align: left;
cursor: pointer;
line-height: 25px;
border: 1px solid silver;
border-width: 1px 1px 0;
padding-left: 4px;
float: none !important;
background-color: white;
}
.autocompletion_div:last-child {
border-width: 1px;
}
.autocompletion_div:hover,
.autocompletion_selected {
background-color: #099eca;
color: #ffffff;
}
.autocompletion_no_results {
font-style: italic;
line-height: 25px;
padding-left: 4px;
}
.bloc_champ > div > div > div.autocompletion {
float: left;
position: relative;
}
/* Pieces jointes */
.div_attachement {
position: absolute;
overflow: hidden;
width: 100px;
height: 52px;
text-align: center;
}
.div_attachement .fa-times {
position: absolute;
top: 0;
right: 12px;
cursor: pointer;
color: red;
}
.div_attachement.selectionnee {
border: 1px dotted black;
}
/*STYLE CSS POUR CREER DES LEGENDES*/
.my-legend .legend-title {
text-align: left;
margin-bottom: 8px;
font-weight: bold;
font-size: 90%;
}
.my-legend .legend-scale ul {
margin: 0;
padding: 0;
float: left;
list-style: none;
}
.my-legend .legend-scale ul li {
display: block;
float: left;
width: 50px;
margin-bottom: 6px;
text-align: center;
font-size: 80%;
list-style: none;
}
.my-legend ul.legend-labels li span {
display: block;
float: left;
height: 15px;
width: 50px;
}
.my-legend .legend-source {
font-size: 70%;
color: #999;
clear: both;
}
.my-legend a {
color: #777;
}
/* specifique footer */
#div_footer_astreinte {
position: absolute;
margin: auto;
bottom: 30px;
border: 2px solid #ff0000;
right: 20%;
left: 20%;
background-color: #ffffff;
color: #ff0000;
font-size: 16px;
text-align: center;
padding: 15px;
}
#div_footer_astreinte div {
background-color: #ffff00;
padding: 5px;
border: 1px solid #ffd800;
}
/* Pour la suite harmoniser si possible */
.filtre_div_input {
background-color: white;
padding: 1px 2px;
}
.filtre_div_input .select {
margin-top: 4px;
width: 93%;
}
.filtre_div_input .input_text {
height: 20px;
}
#footer_fiche_detail.flow {
overflow: visible;
}
.content_detail.container {
margin-top: 10px;
margin-bottom: 10px;
}
/*doit avoir le meme width que .input_text*/
.InputTextButton {
margin: 2px 0;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
table.InputTextButton tr td {
margin: 0;
padding: 0;
overflow: visible;
background-color: white;
}
.InputTextButton input[type='text'] {
margin: 0;
border: 1px solid silver;
height: 20px;
width: 100%;
padding: 0;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.InputTextButton input[type='button'],
.InputTextButton button,
.minibouton {
position: static;
font-weight: bold;
margin: 0;
padding: 0 3px;
height: 22px;
cursor: pointer;
background: transparent;
border: 1px solid silver;
border-left: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
width: 100%;
box-sizing: border-box;
}
.td_label {
font-weight: bold;
text-align: right;
padding-right: 5px;
color: #6b7785;
/*
text-transform: lowercase;
*/
}
.ligne_on td {
background-color: RGB(9, 158, 202) !important;
color: #ffffff !important;
padding: 2px 3px;
}
.ligne_off {
background-color: #ffffff;
color: #000000;
}
.ligne_off_2 {
background-color: #f3f3f3;
color: #000000;
}
.scrollTop {
cursor: pointer;
margin-top: 2px;
opacity: 0.8;
display: inline-block;
margin-right: 3px;
transform: rotate(-90deg);
}
.scrollTop:hover {
opacity: 1;
}
.scrollTop:after {
font-family: 'Font Awesome 5 Free';
content: '\0027A0';
color: #ffffff;
background-color: #099eca;
border-radius: 5px;
font-size: 2em;
padding: 2px;
transition:
background 0.6s,
color 0.6s,
opacity 0.6s;
}
.scrollTop:hover:after {
color: #ffffff;
background-color: #005477;
transition:
background 0.6s,
color 0.6s,
opacity 0.6s;
}
.libelle_filtre_bk {
/* background-color: rgb(9, 158, 226);*/
color: white;
padding: 5px 15px;
height: 18px;
border-top: 1px solid silver;
border-bottom: 1px solid silver;
font-size: 14px;
}
.left_corner {
border-left: 1px solid silver;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
}
.right_corner {
border-right: 1px solid silver;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
}
.container {
margin-top: 10px;
margin-bottom: 10px;
}
div.tiret_nul {
margin: 3px auto;
width: 15px;
height: 5px;
background-color: #f22e2e;
border-radius: 2px;
}
.invisible {
display: none;
}
.survol_nouvelle_categorie:hover {
color: #099eca;
cursor: pointer;
}
.entete_annee {
width: 75%;
margin: 0 auto;
border-collapse: separate;
}
.entete_annee .td_left {
border-left: 1px solid silver;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.entete_annee .td_right {
border-right: 1px solid silver;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.entete_annee .libelle_filtre_bk a {
color: silver;
}
.entete_annee .libelle_filtre_bk a:hover {
color: white;
}
.error_info {
color: red;
}
.msg_info {
color: green;
}
input.error {
border-color: red;
background-color: #f78181;
}
div.error {
border-color: red;
background-color: #f78181;
color: white;
border-radius: 5px;
}
#footer_fiche_detail .bt_add {
margin-top: 0;
}
#div_societe {
position: relative;
float: right;
width: 320px;
height: 20px;
padding-top: 8px;
border-radius: 5px;
right: 7%;
margin: 15px 0;
vertical-align: top;
}
#div_societe .select {
position: absolute !important;
right: 18px;
width: 250px !important;
display: inline-block !important;
top: 2.5px !important;
}
.marge_prev {
margin: 20px auto;
}
.participant {
margin: 1px auto;
padding-left: 5px;
}
.employe_primexis .bloc_champ {
margin: 4px 0;
}
.img-zoom-container {
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
width: 50px;
height: 50px;
}
.zoomer {
border: 2px solid silver;
border-radius: 3px;
width: 400px;
height: 400px;
position: absolute !important;
top: -5000px;
left: -5000px;
box-shadow: 10px 4px 8px gray;
z-index: 32;
}
.bloc_champ.attribut.text_area,
.bloc_champ_flex.attribut.text_area {
min-height: 60px;
}
.bloc_champ.attribut label {
width: 220px;
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
}
.bloc_champ.attribut > div {
left: 225px;
}
.bloc_champ_flex.attribut > label {
width: 190px;
margin-right: 15px;
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
}
.balance > td,
.balance > thead > td,
.balance > th,
.balance > thead > th {
padding-right: 0px;
}
.bloc_alerte_modif_histo {
margin-top: 13px;
margin-right: 26%;
font-weight: bold;
padding: 5px 0.5%;
float: right;
text-align: center;
width: 280px;
border-left: 3px solid transparent;
}
.span-select-multiple-spannable {
display: inline-block;
width: 100%;
line-height: 20px;
border: 1px solid silver !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
z-index: 99;
cursor: pointer;
}
.select-multiple-spannable {
z-index: 100 !important;
}
.col-quantite {
color: rgb(9, 158, 202) !important;
}
.content-multiple-select-spannable {
overflow: visible !important;
}
.content-multiple-select-spannable div.select:first-child {
z-index: 100 !important;
}
/* switch button */
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 23px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 2px;
left: 0;
right: 0;
/* bottom: 0;*/
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
width: 100%;
height: 20px;
}
.slider:before {
position: absolute;
content: '';
height: 16px;
width: 16px;
left: 4px;
bottom: 2px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:focus + .slider {
box-shadow: 0 0 1px #42a2eb;
}
input:checked + .slider:before {
-webkit-transform: translateX(17px);
-ms-transform: translateX(17px);
transform: translateX(17px);
}
.slider.round {
border-radius: 26px;
}
.slider.round:before {
border-radius: 50%;
}
.bloc_champ .switch,
.bloc_champ_flex .switch {
top: 2px;
/*
left: calc(50% - 25px);
*/
}
.filtre_complementaire span {
float: left;
font-weight: bold;
margin: 6px 15px;
}
#iframe_annuaire {
top: 130px;
width: 100%;
}
#iframe_annuaire .title_support img {
display: none;
}
#iframe_annuaire .title_support {
width: 100%;
text-align: center;
font-weight: bold;
}
.vertical {
writing-mode: vertical-lr;
}
div.bloc_help_cloture {
position: absolute;
right: 324px;
top: 7px;
text-align: center;
height: 23px;
width: 150px;
margin: 0 0.5%;
color: white;
background-color: hsl(206, 81%, 66%); /*white;*/
border: 3px solid silver;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 5px 0.5%;
}
.badge.rounded-pill {
color: white;
border-radius: 5px;
font-size: 12px;
padding: 3px 6px;
display: inline-block;
font-weight: 500;
}
/* Nuage de mots */
body .bloc_champ.bt_filtre_on_off,
body .bloc_champ_flex.bt_filtre_on_off {
text-align: left;
font-weight: normal;
font-size: 16px;
min-height: auto;
width: auto;
margin: 4px;
padding: 4px 10px;
border: 0px;
border-radius: 7px;
/* background-color: rgb(9, 158, 226);*/
color: white;
}
body .bloc_champ.bt_filtre_on_off.bt_on,
body .bloc_champ_flex.bt_filtre_on_off.bt_on {
background-color: DarkGreen;
font-weight: bold;
}
.paging_content {
display: flex;
align-items: center;
justify-content: center;
}
.nopaging,
.paging {
float: left;
padding: 7px 12px;
margin: 7px;
}
.paging {
cursor: pointer;
border-radius: 8px;
border: 1px solid transparent;
transition:
color 0.3s,
border 0.3s;
}
.paging.selected {
color: #000055;
/* background-color: rgb(9, 158, 226);*/
color: white;
border: 1px solid rgb(9, 158, 226);
}
.paging:hover {
background-color: #f8f8ff;
color: black;
border: 1px solid rgb(9, 158, 226);
}
.ligne_donnee .fa-times,
.ligne_donnee_light .fa-times,
.badge.rounded-pill.badge_times {
color: #ff071c;
}
.ligne_donnee .fa-check,
.ligne_donnee_light .fa-check,
.badge.rounded-pill.badge_check {
color: #35cf57;
}
#bloc_boutons_haut,
#barre_laterale {
display: none;
}
.bloc_info {
float: left;
width: 140px;
height: 60px;
padding: 10px;
margin-left: 20px;
border: 1px solid silver;
border-top: 4px solid rgb(9, 158, 202);
transition: background 0.6s;
cursor: pointer;
}
.bloc_info h3 {
font-size: 11px;
text-transform: uppercase;
font-weight: normal;
}
.bloc_info span {
display: inline-block;
font-size: 26px;
margin-top: 16px;
}
.bloc_info:hover {
background-color: #eee;
}
.categorie-attribut:before {
clear: both;
}
.categorie-attribut {
padding: 2px 5px;
border-bottom: 1px solid silver;
margin-top: 15px;
clear: both;
}
div#div_complements h3.categorie-attribut {
margin-bottom: 12px;
}
.select-container {
position: relative;
/*border: 1px solid #ccc;*/
/*padding: 5px;*/
/*border-radius: 5px;*/
cursor: text;
/*min-height: 40px;*/
float: right;
width: 300px;
background-color: white;
height: 34px;
position: relative;
}
#select-input-societe {
border: none;
outline: none;
width: 100%;
position: absolute;
top: 18px;
left: 0;
}
.selected-text {
display: inline;
font-size: 14px;
}
.filtres_header .selected-text span {
color: black;
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: white;
border: 1px solid #ccc;
max-height: 150px;
overflow-y: auto;
z-index: 1000;
display: none;
font-size: 14px;
}
.dropdown div {
padding: 5px;
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
}
.dropdown div:hover {
background: #f0f0f0;
}
.dropdown div.disabled {
color: gray;
pointer-events: none;
}
.removable > strong {
cursor: pointer;
}
/* flex_horizontal_vertical */
.flex_around_center {
display: flex;
justify-content: space-around;
align-items: center;
}
.flex_center_center {
display: flex;
justify-content: center;
align-items: center;
}
.flex_start_center {
display: flex;
justify-content: start;
align-items: center;
}
.flex_end_center {
display: flex;
justify-content: end;
align-items: center;
}
.flex_center_stretch {
display: flex;
justify-content: center;
align-items: stretch;
}
.flex_start_stretch {
display: flex;
justify-content: start;
align-items: stretch;
}
.flex_between_stretch {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.flex_between_start {
display: flex;
justify-content: space-between;
align-items: start;
}
.flex_between_center {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex_end_bottom {
display: flex;
justify-content: end;
align-items: flex-end;
}
.flex_row_reverse_center {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
}
.flex_row_reverse_center {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
}
.flex_col {
display: flex;
flex-direction: column;
}
/* cercle du logo */
.crop_circle_65,
.crop_circle_48 {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border: 1px solid #005477;
box-shadow: 2px 2px 6px #666;
color: #005477;
overflow: hidden;
font-weight: bold;
}
.crop_circle_65 {
width: 65px;
height: 65px;
font-size: 38px;
}
.crop_circle_48 {
width: 40px;
height: 40px;
font-size: 30px;
}
.crop_circle_65 img,
.crop_circle_48 img {
width: 100%;
height: 100%;
}
.crop_circle_48 i {
font-size: 19px;
}
div.entete_fiche {
padding: 0px 1%;
background-color: #03a9f417; /*#c0c0c042*/
}
div.entete_fiche div.flex_center_center {
width: 5%;
padding: 2px;
}
div.entete_fiche div button {
padding: 7px 15px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinner-rotate {
animation: spin 1s linear infinite;
}
.gap-10 {
gap: 10px;
}
.gap-5 {
gap: 5px;
}
.gap-20 {
gap: 20px;
}
td.texte_tronque,
div.texte_tronque,
span.texte_tronque {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.label_title {
margin: 0 0 20px 0;
font-weight: bold;
color: #005477;
line-height: 28px;
}
/* Nouveaux filtres_header à utiliser avec flexbox */
.filtres_header_non_float {
border: 1px solid silver;
border-radius: 5px;
height: 38px;
margin: 10px 10px 0 0;
padding: 7px 10px;
position: relative;
vertical-align: top;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
overflow: visible;
}
.filtres_header_non_float span:first-child {
color: white;
display: inline-block;
font-size: 14px;
margin-top: 2px;
margin-right: 10px;
padding-top: 0px;
vertical-align: top;
height: 20px;
overflow: hidden;
}
.filtres_header_non_float .select {
display: inline-block;
margin: 0;
width: 180px;
}
div.div_contenu .filtres_header_non_float .select {
display: inline-block;
margin: 0;
width: 180px;
}
div.div_contenu .filtres_header_non_float .select::before,
.bloc_champ .select::before {
width: 21px;
bottom: 2.5px;
top: 1.5px;
}
div.div_contenu .filtres_header_non_float .select::after,
.bloc_champ .select::after {
right: 4px;
top: 47%;
}
.filtres_header_non_float .multiselect-wrapper {
display: flex;
align-items: center;
margin: 0 !important;
width: 180px;
position: relative;
overflow: visible;
height: 100%;
}
.footer-flex {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: relative;
}
.footer-center {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
gap: 10px;
}
.footer-right {
position: absolute;
right: 10px;
top: 0;
height: 100%;
display: flex;
align-items: center;
}
.footer-right button {
margin-left: 20px;
}
.clearfix::after {
content: '';
display: table;
clear: both;
}
/**
* Onglet Attributs
* ***/
div#tr_onglet_hautATRBT div.card {
background: #fff;
border: 1px solid #e3e8ee;
border-radius: 6px;
margin: 12px auto;
padding: 0 0 10px;
}
/* Bandeau de categorie d'attributs : aligne sur le gris de la charte
(fond #f7f9fb + filet #e8edf2, comme .entete_fiche) au lieu du bleu clair
#e8f7fe, qui etait le seul de son espece dans l'application.
Le libelle vient d'une categorie saisie par l'utilisateur : on le laisse en
casse d'origine, sans text-transform. */
div#tr_onglet_hautATRBT div.card h3{
background-color: #f7f9fb;
color: #005477;
font-weight: 600;
border-bottom: 1px solid #e8edf2;
padding: 10px 15px;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
/* Aide contextuelle / mode opératoire */
.aide-trigger {
cursor: pointer;
font-size: 12px;
font-weight: normal;
color: #3498db;
margin-left: 12px;
}
.bloc_aide {
background: #f0f4f8;
border: 1px solid #aed6f1;
border-radius: 6px;
border-left: 4px solid #005477;
padding: 14px 18px;
margin: 8px 10px 16px;
font-size: 12px;
line-height: 1.6;
}
.bloc_aide h5, .bloc_aide h4 {
font-weight: bold;
margin: 6px 0;
font-size: 1.1em;
}
.bloc_aide h4 {
color:#005477;
}
.bloc_aide h4:before {
content: 'ⓘ';
padding-right: 5px;
}
.bloc_aide .attention {
margin: 6px 0 0 0;
font-size: 11px;
color: #555;
}
.bloc_aide .attention:before {
content: '⚠';
padding-right: 5px;
color: orange;
}
.bloc_aide table {
width:100%;
border-collapse:collapse;
margin-bottom:12px;
}
.bloc_aide table td {
padding:4px 8px;
border-bottom:1px solid #ddd;
}
.bloc_aide table th {
padding:5px 8px;
text-align:left;
}
.bloc_aide ol, .bloc_aide ul {
margin:0 0 6px 20px;
padding:0;
}
.message_edition {
/*padding: 5px 12px;
border-radius: 4px;
font-size: 13px;
position: absolute;
left: 30%;
right: 30%;
margin-top: 2px;
text-align: center;
top: 18px;*/
font-weight: 600;
margin:0 1%;
padding:7px 12px;
border-left: 4px solid #005477;
background:#f8f9fa;
border-radius:0 4px 4px 0;
display:flex;
align-items:center;
gap:10px;
font-size:13px;
}
.message_edition--info {
background-color: #e8f4fd;
color: #1a6fa8;
border-color: #bee3f8;
}
.message_edition--warning {
background-color: #fff8e1;
color: #856404;
border-color: #ffc107;
}
.message_edition--error {
background-color: #ffdada;
color: #680202;
border-color: #ff071c;
}
.message_edition--success {
background-color: #e0ffe4;
color: #0e5717;
border-color: #35cf57;
}
.message_edition i.fa {
font-size:16px;
flex-shrink:0;
}
.message_edition--info i.fa {
color:#005477;
}
.message_edition em {
margin-left:auto;
font-size:11px;
color:#6c757d;
}
/* Wrapper inline pour champs conditionnels type projet (valo TJM) — display:flex survivant au reset JS el.style.display='' */
.typeProjetInlineWrapper {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 4px;
white-space: nowrap;
}
/* ============================================================================
Refonte GLOBALE des boutons (inspiree de la maquette fiche affaire)
- Primaire (.button_valid) : teal de marque #005477, plein
- Secondaire (.button_standard, .bt) : blanc, contour leger
- Danger (.button_cancel) : rouge discret (contour)
- Coins arrondis 6px, padding & transitions homogenes.
Ordre : base -> secondaire -> primaire/danger, pour que les classes
combinees (ex. .bt.button_valid) resolvent vers la bonne couleur.
NB : les themes qui ciblent .bt_rd.button_valid (classique/refonte) gardent
leur rendu specifique (specificite superieure).
============================================================================ */
.bt,
.button_valid,
.button_cancel,
.button_standard,
.button_disabled {
border-radius: 6px;
padding: 5px 12px;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Secondaire / neutre : fond gris tres clair (au lieu de blanc, pour se
distinguer du fond de page blanc), contour leger */
.bt,
.button_standard {
background-color: #eef2f6;
color: #334155;
border: 1px solid #d5dbe1;
}
.bt:hover,
.button_standard:hover {
background-color: #e1e8f0;
border-color: #b9c4cf;
color: #334155;
}
/* Primaire : teal de marque, plein */
table.InputTextButton button.button_valid,
.button_valid {
background-color: #005477;
color: #ffffff;
border: 1px solid #005477;
}
.button_valid:hover {
background-color: #044a66;
border-color: #044a66;
color: #ffffff;
}
/* Icone (::after) du bouton primaire : blanche pour rester lisible sur le
fond teal (par defaut .bt:after est bleu #42a2eb). Vaut pour toute icone
posee sur un button_valid (refresh, check, ...). */
.bt.button_valid:after {
color: #ffffff;
}
/* Danger : rouge discret (contour) */
.button_cancel {
background-color: #ffffff;
color: #d0342c;
border: 1px solid #e3a9a5;
}
.button_cancel:hover {
background-color: #fbecea;
border-color: #d0342c;
color: #d0342c;
}
/* Desactive : muet */
.button_disabled {
background-color: #eef1f4;
color: #9aa7b2;
border: 1px solid #e0e5ea;
cursor: default;
}
/* Boutons semantiques des barres d'action de fiche (cibles par ID stable) :
la police/positionnement de l'icone viennent de .bt:after (ces boutons
sont des .bt) ; on ajoute juste le glyphe et la couleur. */
/* Supprimer -> icone poubelle */
#bt_supprimer::after {
content: '\f014'; /* fa-trash */
color: #d0342c;
}
/* Valider (et "Valider et retour", meme id) -> vert succes + coche */
#bt_valider {
background-color: #2e9e5b;
border-color: #2e9e5b;
color: #ffffff;
}
#bt_valider:hover {
background-color: #278a4f;
border-color: #278a4f;
color: #ffffff;
}
#bt_valider::after {
content: '\f00c'; /* fa-check */
color: #ffffff;
}
/* Barre d'actions de la fiche facture : trois boutons destructifs, hierarchie
visuelle calee sur la gravite reelle de l'action.
- Invalider l'echeance : REVERSIBLE (retour dans le circuit) -> gris + fleche retour
- Annuler : definitif, conserve la trace -> ambre + interdiction
- Supprimer : destruction de la ligne -> rouge + poubelle (#bt_supprimer)
AfficheBoutonCancelSiDroit ajoute .button_cancel (rouge) : on le neutralise
ici (specificite .bt.X.button_cancel > .button_cancel). */
/* "Annuler" (annuler une instance de facturation) : passe status_ligne a
'annule', l'echeance est conservee mais ne sera PAS regeneree si le projet
est periodique. L'icone fleche-retour utilisee jusqu'ici suggerait au
contraire un recyclage : on prend l'interdiction. Ambre et non rouge, le
rouge restant reserve a la seule suppression reelle de la ligne. */
.bt.annuler_instance,
.bt.annuler_instance.button_cancel {
background-color: #ffffff;
color: #8a5a00;
border-color: #f0c88a;
}
.bt.annuler_instance:hover,
.bt.annuler_instance.button_cancel:hover {
background-color: #fff8e1;
border-color: #e08e0b;
color: #8a5a00;
}
.bt.annuler_instance::after {
content: '\f05e'; /* fa-ban : annulation definitive, pas de regeneration */
color: #e08e0b;
}
/* "Invalider l'echeance" (= annuler sa validation) : action REVERSIBLE,
l'echeance repart dans le circuit de validation. Elle portait l'icone
interdiction, plus forte que celle du bouton Annuler qui est pourtant
definitif : les deux etaient intervertis. Elle reprend la fleche-retour,
en gris neutre. */
.bt.invalider_validation,
.bt.invalider_validation.button_cancel {
background-color: #eef2f6;
color: #334155;
border-color: #d5dbe1;
}
.bt.invalider_validation:hover,
.bt.invalider_validation.button_cancel:hover {
background-color: #e1e8f0;
border-color: #b9c4cf;
color: #475569;
}
.bt.invalider_validation::after {
content: '\f0e2'; /* fa-arrow-rotate-left : retour dans le circuit (reversible) */
color: #64748b;
}
/* Nouvelle classe reutilisable : icone copie/duplication (suit la convention
des .bt.trash / .bt.check). Appliquee au bouton Dupliquer via son id car il
est genere par AfficherBouton (pas de classe custom possible). */
.bt.copy::after,
#bt_dupliquer::after {
content: '\f0c5'; /* fa-copy */
}
#bt_dupliquer::after {
color: #ffffff; /* icone blanche sur le bouton teal */
}
/* Icone a GAUCHE du libelle (au lieu de droite). On conserve le systeme
.bt.X::after (glyphes) et on repositionne via flexbox : bouton en inline-flex
+ icone en premier (order:-1). Exclusion des .navbouton (menus deroulants). */
.bt:not(.navbouton) {
display: inline-flex;
align-items: center;
justify-content: center;
}
.bt:not(.navbouton)::after {
order: -1;
margin: -4px 5px -1px 0; /* espace a droite de l'icone, avant le texte */
}
/* ============================================================================
Menu "Liens" (fiche affaire) facon maquette : panneau blanc, categories,
icone par ligne + icone lien externe, hover gris clair.
Scope .menu_liens pour ne pas toucher les autres .navbouton.
============================================================================ */
.menu_liens ul {
background-color: #ffffff !important;
color: #334155 !important;
border: 1px solid #e3e8ee !important;
border-radius: 10px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .14) !important;
text-shadow: none !important;
padding: 6px 0 !important;
min-width: 290px !important;
max-height: 380px;
overflow-y: auto;
}
.menu_liens ul li {
padding: 0 !important;
text-align: left !important;
}
/* En-tete de categorie */
.menu_liens ul li.menu_liens_cat {
padding: 11px 14px 4px !important;
font-size: 10px;
font-weight: 700;
letter-spacing: .6px;
text-transform: uppercase;
color: #94a3b8;
cursor: default;
}
.menu_liens ul li.menu_liens_cat:hover,
.menu_liens ul li.menu_liens_cat:hover a {
background: none !important;
color: #94a3b8 !important;
opacity: 1 !important;
}
/* Ligne de lien */
.menu_liens ul li a {
display: flex !important;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 8px 14px !important;
color: #334155 !important;
text-decoration: none;
text-align: left !important;
}
.menu_liens ul li a:hover,
.menu_liens ul li:hover a {
background-color: #f1f5f8 !important;
color: #005477 !important;
opacity: 1 !important;
}
.menu_liens_icone {
color: #64748b;
width: 16px;
text-align: center;
flex-shrink: 0;
}
.menu_liens ul li a:hover .menu_liens_icone {
color: #005477;
}
.menu_liens_libelle {
flex: 1;
text-align: left !important;
white-space: nowrap;
padding-left: 0 !important; /* annule .navbouton span { padding-left:10px } */
}
/* Le libelle est un : il heritait du chevron .navbouton span:after
(rendu en carre "tofu") -> on le neutralise pour le menu Liens. */
.menu_liens ul li span::after {
content: none !important;
display: none !important;
}
.menu_liens_ext {
color: #cbd5e1;
font-size: 11px;
flex-shrink: 0;
}
.menu_liens ul li a:hover .menu_liens_ext {
color: #94a3b8;
}
/* Chevron du bouton en FA6 (le nom FA5 ne resout pas toujours) */
.menu_liens > span::after {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
/* ============================================================================
Composant "workflow de validation" : badges de valideurs.
Genere par getBadgesWorkflowValidation(). Chaque badge est teinte par le
statut : la couleur exacte vient de la base via --wf-color (sinon defaut par
classe). valide = vert/check, attente = orange/point, refuse = rouge/croix.
============================================================================ */
.wf-valideurs {
display: inline-flex;
flex-wrap: nowrap;
gap: 2px;
align-items: center;
vertical-align: middle;
}
.wf-badge {
flex-shrink: 0;
}
.wf-badge {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 0 5px;
border-radius: 8px;
font-size: 9px;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
color: var(--wf-color, #64748b);
background-color: #f2f5f8; /* fallback si color-mix non supporte */
background-color: color-mix(in srgb, var(--wf-color, #64748b) 13%, #ffffff);
border: 1px solid #e3e8ee; /* fallback */
border: 1px solid color-mix(in srgb, var(--wf-color, #64748b) 32%, #ffffff);
}
.wf-badge i {
font-size: 7px;
}
/* Couleurs par defaut si la base ne fournit pas de couleur */
.wf-badge--valide { --wf-color: #2e9e5b; }
.wf-badge--attente { --wf-color: #e08e0b; }
.wf-badge--refuse { --wf-color: #d0342c; }
/* Badges plus grands dans la colonne Decision de l'onglet Validation (contexte
.content_etapes_validation) — l'onglet Factures garde les badges compacts. */
.content_etapes_validation .wf-badge {
font-size: 12px;
padding: 3px 11px;
border-radius: 12px;
gap: 5px;
}
.content_etapes_validation .wf-badge i {
font-size: 10px;
}
/* Onglet Validation : lignes de HAUTEUR UNIFORME (max 5 étapes) → tableau plus
léger. Le motif (textarea) héritait de `.div_contenu textarea { height:52px }`
et gonflait la ligne « en cours » → on le compacte sur une ligne. Il
s'agrandit au focus pour permettre la saisie. */
.content_etapes_validation tr.ligne_donnee > td {
height: 34px;
vertical-align: middle;
}
.content_etapes_validation textarea,
.content_etapes_validation textarea.input_text {
height: 26px !important;
min-height: 26px !important;
line-height: 18px;
padding: 3px 6px;
box-sizing: border-box;
resize: none;
overflow: hidden;
vertical-align: middle;
}
.content_etapes_validation textarea:focus {
height: 56px !important; /* s'agrandit au clic pour saisir le motif */
overflow: auto;
}
/* ============================================================================
.icone_action : icones-boutons d'action (listes / onglets de fiche).
Glyphe nu, sans cadre, avec un leger zoom au survol, SANS changer la couleur
propre de l'icone (vert = ajouter, rouge = supprimer, etc.).
Definition UNIQUE depuis le 07/10/2026. Il en existait une seconde en haut de
ce fichier, heritee de 2021 : fond blanc, bordure silver, padding 5px et coins
arrondis. Les deux se cumulaient - celle-ci n'annulait ni le fond, ni la
bordure, ni le padding - et chaque icone d'action portait donc un cadre que la
refonte de juillet 2026 ne voulait plus. Deux ecrans la neutralisaient deja a
la main (roles_liste.php, importer_accueil.php). Ne pas la reintroduire : une
taille propre a un ecran se pose en surcharge locale, comme ces deux pages le
font pour leur font-size.
============================================================================ */
.icone_action {
cursor: pointer;
font-size: 11px !important; /* icones d'action compactes (annule le fa-lg) */
transition: transform .12s ease, filter .12s ease;
}
.icone_action:hover {
transform: scale(1.22); /* leger zoom au survol, aucune taille en plus au repos */
filter: brightness(0.9);
}
.icone_action:active {
transform: scale(0.9); /* petit enfoncement au clic */
}
/* Variante desactivee : meme taille compacte que .icone_action, mais sans
interaction. La transparence (tache non modifiable) vient de la couleur du
parent (#...30). */
.icone_action_off {
font-size: 11px !important;
cursor: default;
}
/* Icone de suppression : petit cadre rouge tres leger pour la faire ressortir. */
.icone_suppression {
background-color: rgba(208, 52, 44, 0.09);
border-radius: 6px;
/*
color: #d0342c !important;
*/
/* glyphe poubelle en rouge (pas seulement le cadre) */
color: red !important;
}
.icone_suppression:hover {
background-color: rgba(208, 52, 44, 0.18);
}
/* ============================================================================
Bandeau de titre de fiche (.entete_fiche) — SOCLE COMMUN à toutes les fiches
qui adoptent cette structure (affaire, facture, …). Fond gris "toolbar" +
trait ; pastille icône carré-arrondi (le FOND et le GLYPHE sont définis par le
contexte : dossier vert pour l'affaire, icône de type pour la facture) ;
cluster de boutons à droite. Le spécifique reste dans le module
(affaires.css / facturation.css).
============================================================================ */
.div_contenu .entete_fiche {
background-color: #f7f9fb;
border-bottom: 1px solid #e8edf2;
}
.div_contenu .entete_fiche .crop_circle_48 {
border: none !important;
box-shadow: none;
border-radius: 12px;
}
.div_contenu .entete_fiche .right {
display: flex;
flex-wrap: nowrap;
flex-shrink: 0;
justify-content: flex-end;
align-items: center;
align-self: center;
gap: 8px;
}
.div_contenu .entete_fiche .right .bt {
margin: 0;
padding: 6px 12px;
border: 1px solid #d5dbe1;
border-radius: 6px;
background-color: #ffffff;
color: #334155;
font-weight: 500;
font-size: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background-color .15s ease, border-color .15s ease;
}
.div_contenu .entete_fiche .right .bt:hover {
background-color: #f1f5f8;
border-color: #b9c4cf;
}
/* ============================================================================
Onglets de fiche (barre de tabs) — SOCLE COMMUN (généralisé depuis affaires.css).
Style « segmenté » : pastille grise pour l'onglet inactif, pastille teal pleine
pour l'actif, coins 8px. Scope `#onglet_fiche_detail #content_onglet .onglet`
→ toutes les fiches à onglets (affaire, facture, employé…). La fiche affaire a
déjà ces règles dans affaires.css (identiques → pas de régression) ; les modules
gardent leur spécifique par-dessus.
============================================================================ */
#onglet_fiche_detail #content_onglet {
border: none;
background-color: transparent;
padding-left: 12px;
}
#onglet_fiche_detail .content_detail.content_onglets {
top: 44px;
border-top: none;
}
#onglet_fiche_detail #content_onglet .onglet {
min-width: auto !important;
margin: 0 4px 3px 0;
padding: 8px 16px;
border: none;
border-radius: 8px;
background-color: #e6ecf2;
color: #5b6b7a;
font-size: 13px;
font-weight: 500;
vertical-align: bottom;
transition: color .15s ease, background-color .15s ease;
}
#onglet_fiche_detail #content_onglet .onglet:hover {
background-color: #d5dee7;
color: #005477;
}
#onglet_fiche_detail #content_onglet .onglet.onglet_selected,
#onglet_fiche_detail #content_onglet .onglet_selected:hover {
background-color: #005477;
color: #ffffff;
font-weight: 600;
border: none;
box-shadow: 0 1px 3px rgba(0, 84, 119, 0.20);
}
#onglet_fiche_detail #content_onglet .onglet span[id^="nb_onglet"] {
font-weight: 600;
opacity: .75;
}
/* ============================================================================
Formulaires de fiche — SOCLE COMMUN (généralisé depuis la fiche affaire).
Inputs arrondis + focus teal ; labels gris, poids moyen, alignés à gauche.
S'applique à TOUTES les fiches d'édition adoptant la structure standard
(.div_contenu #content_detail .card / #onglet_fiche_detail .content_onglets).
Les modules (affaires.css…) gardent leur spécifique par-dessus.
============================================================================ */
.div_contenu #content_detail .card input:not([type="checkbox"]):not([type="radio"]),
.div_contenu #content_detail .card select,
.div_contenu #content_detail .card textarea,
.div_contenu #onglet_fiche_detail .content_onglets .bloc_champ input:not([type="checkbox"]):not([type="radio"]),
.div_contenu #onglet_fiche_detail .content_onglets .bloc_champ select,
.div_contenu #onglet_fiche_detail .content_onglets .bloc_champ textarea {
border: 1px solid #d5dbe1;
border-radius: 4px;
}
.div_contenu #content_detail .card input:focus,
.div_contenu #content_detail .card select:focus,
.div_contenu #content_detail .card textarea:focus,
.div_contenu #onglet_fiche_detail .content_onglets .bloc_champ input:focus,
.div_contenu #onglet_fiche_detail .content_onglets .bloc_champ select:focus,
.div_contenu #onglet_fiche_detail .content_onglets .bloc_champ textarea:focus {
border-color: #005477;
outline: none;
box-shadow: 0 0 0 2px rgba(0, 84, 119, .12);
}
.div_contenu #content_detail .bloc_champ label,
.div_contenu #content_detail .bloc_champ_flex label,
.div_contenu #onglet_fiche_detail .content_onglets .bloc_champ label,
.div_contenu #onglet_fiche_detail .content_onglets .bloc_champ_flex label {
color: #6b7785 !important;
font-weight: 500 !important;
}
.div_contenu #content_detail .bloc_champ > label,
.div_contenu #content_detail .bloc_champ_flex > label,
.div_contenu #onglet_fiche_detail .content_onglets .bloc_champ > label,
.div_contenu #onglet_fiche_detail .content_onglets .bloc_champ_flex > label {
text-align: left;
}
/* Checkbox/radio des formulaires de fiche : largeur NATURELLE. Sinon
`.bloc_champ input { width:100% }` les étire, et le navigateur centre le glyphe
au milieu de la zone valeur → très loin du libellé, illisible. width:auto les
ramène collés à droite du label. */
.div_contenu #content_detail .card input[type="checkbox"],
.div_contenu #content_detail .card input[type="radio"],
.div_contenu #onglet_fiche_detail .content_onglets .bloc_champ input[type="checkbox"],
.div_contenu #onglet_fiche_detail .content_onglets .bloc_champ input[type="radio"] {
width: auto !important;
}
/* ============================================================================
Champs de formulaire dans les POPINS (.content_support) — SOCLE COMMUN.
Homogénéise toutes les popins support (labels gris à gauche, inputs/selects
bordure #d5dbe1 + focus teal, flèche du widget .select aplatie). Le chrome
(titre teal, corps blanc, boutons) est déjà charté par ailleurs.
============================================================================ */
.content_support .bloc_champ label {
color: #6b7785;
font-weight: 500;
}
.content_support input.input_text:not([type="checkbox"]):not([type="radio"]),
.content_support select,
.content_support textarea.input_text {
border: 1px solid #d5dbe1;
border-radius: 4px;
box-sizing: border-box;
background-color: #fff;
}
.content_support input.input_text:not([type="checkbox"]):not([type="radio"]) {
height: 28px;
}
.content_support input.input_text:focus,
.content_support select:focus,
.content_support textarea.input_text:focus {
border-color: #005477;
outline: none;
box-shadow: 0 0 0 2px rgba(0, 84, 119, .12);
}
.content_support .select {
height: auto !important;
overflow: visible;
}
.content_support .select select {
border: 1px solid #d5dbe1 !important;
border-radius: 4px;
height: 28px;
padding: 4px 26px 4px 8px;
background-color: #fff;
color: #334155;
}
.content_support .select select:focus {
border-color: #005477 !important;
outline: none;
box-shadow: 0 0 0 2px rgba(0, 84, 119, .12);
}
.content_support .select:before {
border: 0 !important;
background-color: transparent !important;
}
.content_support .select:after {
color: #64748b;
font-size: 11px;
}
/* Le CONTENEUR .conteneur_tableau_donnees a un fond teal de base (règle globale) ;
dans un onglet de fiche on le rend transparent — les cellules fournissent le
fond clair. Sans ça, le teal du conteneur ressort là où les cellules ne
couvrent pas (petit bloc teal en haut à droite, zone scrollbar). */
body .div_contenu :is(#onglet_fiche_detail, #liste_affaires) .conteneur_tableau_donnees {
background-color: transparent !important;
}
/* En-têtes de tableaux dans les ONGLETS de fiche : gris clair façon maquette
(généralisé depuis facturation.css). Sinon `.tr_header` tombe sur le teal
global des listes de menu → mauvais rendu dans un onglet de fiche. Le préfixe
`body` + id `#onglet_fiche_detail` bat la règle de base ET les thèmes teal.
`#liste_affaires` : certaines fiches (groupe_affaires) nomment leur conteneur
d'onglet différemment → on le couvre aussi via :is(). */
body .div_contenu :is(#onglet_fiche_detail, #liste_affaires) .conteneur_tableau_donnees tr th,
body .div_contenu :is(#onglet_fiche_detail, #liste_affaires) .conteneur_tableau_donnees.entete tr td,
body .div_contenu :is(#onglet_fiche_detail, #liste_affaires) .conteneur_tableau_donnees.entete tr th,
body .div_contenu :is(#onglet_fiche_detail, #liste_affaires) .tr_header th,
body .div_contenu :is(#onglet_fiche_detail, #liste_affaires) .tr_header td,
body .div_contenu :is(#onglet_fiche_detail, #liste_affaires) .tr_header_sub th,
body .div_contenu :is(#onglet_fiche_detail, #liste_affaires) .tr_header_sub td {
background-color: #f3f6f9 !important;
color: #64748b !important;
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
letter-spacing: .3px;
padding-top: 8px !important;
padding-bottom: 8px !important;
/* neutralise le cadre gris hérité de `.tr_header > td` (border grey tout autour) */
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: 1px solid #e3e8ee !important;
}
/* ============================================================================
Tableaux de REPORTING — design "synthèse juillet 2026", généralisé depuis
synthese_production.css mais SCOPÉ à `body.reporting` (les classes tr_niveau*
sont partagées par ~147 pages tous modules → on ne veut PAS toucher
Compta/RH/facturation). Une page reporting opte-in via .
Spécificité 0,2,x → bat les règles globales `.tr_niveau*` de commun.css.
============================================================================ */
/* Lignes de regroupement : une teinte par niveau, du plus foncé (niveau 1) au plus
clair (niveau 3). La ligne entière porte la même teinte, cellules de libellé et de
total comprises : une ligne bicolore se lit comme un défaut d'affichage. */
body.reporting tr.tr_niveau1,
body.reporting tr.tr_niveau1 .td_libelle,
body.reporting tr.tr_niveau1 .td_total {
background-color: #d3e4ef;
}
body.reporting tr.tr_niveau2,
body.reporting tr.tr_niveau2 .td_libelle,
body.reporting tr.tr_niveau2 .td_total {
background-color: #e0ecf4;
}
body.reporting tr.tr_niveau3,
body.reporting tr.tr_niveau3 .td_libelle,
body.reporting tr.tr_niveau3 .td_total {
background-color: #e8f1f7;
}
/* Lignes de totaux : inchangées, elles n'appartiennent pas à l'échelle ci-dessus. */
body.reporting tr.tr_niveau1_total td,
body.reporting tr.tr_niveau2_total td {
background-color: #d3e4ef;
}
body.reporting tr.tr_niveau3_total {
background-color: #e0ecf4;
}
/* Rendu "light" synthèse : dans le reporting, `ligne_donnee` adopte le même
aspect épuré que `ligne_donnee_light` (bordure fine, sans zébrage lourd).
Fait en CSS et NON par renommage de classe : plusieurs pages reporting ont
du JS / CSS inline qui cible `.ligne_donnee` (le renommer les casserait). */
body.reporting tr.ligne_donnee {
background-color: transparent;
}
body.reporting tr.ligne_donnee td {
border-bottom: 1px solid #f1eeee;
}
body.reporting .value_negative {
color: red;
}
body.reporting .value_positive {
color: #00a000;
}
/* Formulaires de FILTRE reporting : les cartes filtre sont `content_detail card`
SANS id #content_detail ni .div_contenu → le socle formulaire (fiches) ne les
atteint pas. On applique le même socle charté (inputs arrondis + focus teal),
scopé reporting. Le widget `.select` ($getTopSelect) supporte déjà ce style
sur les fiches. */
body.reporting .content_detail input.input_text:not([type="checkbox"]):not([type="radio"]),
body.reporting .content_detail select {
border: 1px solid #d5dbe1;
border-radius: 4px;
}
body.reporting .content_detail input.input_text:focus,
body.reporting .content_detail select:focus {
border-color: #005477;
outline: none;
box-shadow: 0 0 0 2px rgba(0, 84, 119, .12);
}
/* Vieux widget `.select` ($getTopSelect : div.select + bordure/boîte-flèche silver)
harmonisé dans les filtres reporting → bordure charté, coins arrondis, flèche
discrète, façon selects plats de l'espace Commerce. Scopé reporting (le widget
est partagé par tout le site). */
body.reporting .select {
height: auto !important; /* libère la contrainte 22px pour un select aéré */
overflow: visible;
}
body.reporting .select select {
height: 28px;
padding: 4px 26px 4px 8px;
}
/* champs texte du filtre alignés en hauteur sur les selects */
body.reporting .content_detail input.input_text:not([type="checkbox"]):not([type="radio"]) {
height: 28px;
box-sizing: border-box;
}
/* Labels des filtres reporting (td_label) : MÊME style que les labels de fiche
(socle : gris clair, léger, aligné à gauche) pour un rendu homogène partout. */
body.reporting .td_label {
font-weight: 500;
text-align: left;
vertical-align: middle;
}
/* Champs InputTextButton (dates, collaborateur…) alignés en hauteur sur les
selects/inputs (sinon 18px vs 28px → désalignement vertical du filtre). */
body.reporting .content_detail .InputTextButton input,
body.reporting .content_detail .InputTextButton button {
height: 28px;
box-sizing: border-box;
vertical-align: middle;
}
/* cellules du filtre centrées verticalement pour un alignement homogène */
body.reporting .content_detail td {
vertical-align: middle;
}
/* Multi-select "spannable" (Service affaire / employé) : même format que le
widget .select (bordure chartée, coins arrondis, 28px, flèche discrète). */
body.reporting .span-select-multiple-spannable {
border: 1px solid #d5dbe1 !important;
border-radius: 4px;
height: 28px;
line-height: 26px;
padding: 0 24px 0 8px;
box-sizing: border-box;
background-color: #fff;
color: #334155;
position: relative;
}
body.reporting .span-select-multiple-spannable::after {
content: '\25BC';
color: #64748b;
font-size: 11px;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
/* Labels des colonnes intermédiaires : un peu d'air à gauche pour ne pas
être collés au champ de la colonne précédente (les labels de 1re colonne,
:first-child, restent alignés au bord). */
body.reporting .content_detail td.td_label:not(:first-child) {
padding-left: 14px;
}
/* Bloc filtre reporting en "carte" : bordure chartée + coins arrondis pour bien
délimiter le filtre du reste de la page. Couvre les 2 wrappers rencontrés :
.content_detail.card (synthese_production…) et fieldset.card (tableau_activite…).
Le socle .div_contenu .content_detail supprime la bordure (border:none) et
.content_detail impose border-radius:0 → on rétablit ici, arrondi et charté,
avec une spécificité suffisante (0,4,1) pour l'emporter. */
body.reporting .content_detail.card,
body.reporting .div_contenu .content_detail.card,
body.reporting fieldset.card {
border: 1px solid #d5dbe1 !important;
border-radius: 7px !important;
box-sizing: border-box;
}
/* Labels des filtres reporting en bloc_champ / bloc_champ_flex (layout moderne,
hors div_contenu) → même gris charté que td_label et le socle fiche. */
body.reporting .content_detail .bloc_champ label,
body.reporting .content_detail .bloc_champ_flex label {
color: #6b7785;
font-weight: 500;
}
/* Selects intégrés DANS un en-tête de colonne teal (tri, filtre) : on les fond
dans le header — fond translucide, texte/flèche blancs, bordure discrète —
au lieu d'une boîte blanche qui détonne sur le teal. */
body.reporting .tr_header .select select,
body.reporting .tr_header_sub .select select {
background-color: rgba(255, 255, 255, .14) !important;
border: 1px solid rgba(255, 255, 255, .4) !important;
color: #fff;
}
body.reporting .tr_header .select select option,
body.reporting .tr_header_sub .select select option {
color: #334155;
background-color: #fff;
}
body.reporting .tr_header .select:after,
body.reporting .tr_header_sub .select:after {
color: #fff;
}
/* ============================================================================
Segmented control (.segmented) — bascule type iOS : piste grise + segment
actif blanc (teal) avec indicateur qui GLISSE. Segments équi-largeur.
L'indicateur se positionne via data-active="0|1|2" sur le conteneur.
Réutilisable pour tout switch de vue (Tableau / Graphe / …).
============================================================================ */
.segmented {
--seg-count: 3; /* nombre de segments — surcharger (ex. style="--seg-count:2") */
position: relative;
display: inline-flex;
background: #eef2f6;
border: 1px solid #e3e8ee;
border-radius: 8px;
padding: 3px;
margin: 12px 0;
vertical-align: middle;
}
.segmented::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
bottom: 3px;
width: calc((100% - 6px) / var(--seg-count));
background: #ffffff;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(16, 24, 40, .14);
transition: transform .22s cubic-bezier(.4, 0, .2, 1);
z-index: 0;
}
.segmented[data-active="1"]::before { transform: translateX(100%); }
.segmented[data-active="2"]::before { transform: translateX(200%); }
.segmented .seg {
position: relative;
z-index: 1;
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
white-space: nowrap;
border: 0;
background: transparent;
color: #64748b;
font-size: 13px;
font-weight: 500;
padding: 7px 18px;
cursor: pointer;
transition: color .18s ease;
}
.segmented .seg:hover { color: #334155; }
.segmented[data-active="0"] .seg:nth-child(1),
.segmented[data-active="1"] .seg:nth-child(2),
.segmented[data-active="2"] .seg:nth-child(3) {
color: #005477;
}
/* ============================================================================
Bouton "Actualiser" homogène (.btn_refresh) — teal + icône refresh à gauche.
Standard à généraliser sur tous les boutons Actualiser des pages filtre.
============================================================================ */
.btn_refresh {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 7px;
/* !important : bat .InputTextButton button (fond transparent + bordure silver)
qui gagnait en spécificité et rendait le bouton "blanc". */
background-color: #005477 !important;
color: #ffffff !important;
border: 1px solid #005477 !important;
border-radius: 6px !important;
padding: 7px 16px !important;
height: auto !important;
width: auto !important;
font-size: 12px;
font-weight: 600;
line-height: 1;
cursor: pointer;
white-space: nowrap;
transition: background-color .15s ease, border-color .15s ease;
}
.btn_refresh::before {
content: '\f021'; /* fa-arrows-rotate (refresh) */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 12px;
}
.btn_refresh:hover {
background-color: #044a66 !important;
border-color: #044a66 !important;
color: #ffffff !important;
}
/* ============================================================================
REFONTE LISTES — pages FILTRE/LISTE (nouveau ton "maquette"). SCOPE :
`.tabcontent_global` (conteneur des pages filtre) + `.liste_resultats` (le
de l'iframe de résultats). Les listes DANS les fiches
(`#onglet_fiche_detail`) NE sont PAS touchées (autre conteneur, style propre).
Préfixe `body` + `!important` pour battre le socle teal et les thèmes.
============================================================================ */
/* 1. En-tête de colonnes : teal foncé, blanc UPPERCASE, coins arrondis en haut.
(Pas de chevron de tri ajouté : ceux-ci n'existent que sur les colonnes
triables, gérées par le markup — la liste des instances n'en a pas.) */
/* .tr_footer partage ce traitement : c'est l'autre bandeau de chrome du même
tableau (la ligne de total), et il doit donc porter exactement la même teinte,
la même casse et la même graisse que l'en-tête. Sans cette ligne, une page qui
balise correctement son total en .tr_footer retombait sur le style historique du
socle — texte en casse d'origine, taille par défaut, filets gris — et détonnait
à côté de son propre en-tête. C'est ce qui poussait certaines pages à détourner
.tr_header pour leur ligne de total. */
body .tabcontent_global .tr_header,
body .tabcontent_global .tr_header td,
body .tabcontent_global .tr_header th,
body .tabcontent_global .tr_footer,
body .tabcontent_global .tr_footer td,
body .tabcontent_global .tr_footer th {
background-color: #005477 !important;
color: #ffffff !important;
font-weight: 600;
text-transform: uppercase;
font-size: 11px;
letter-spacing: .4px;
border: none !important;
padding-top: 3px;
padding-bottom: 3px;
vertical-align: middle;
}
/* En-tête compact : le select de colonne ne prend plus de place inutile
(la boîte n'est plus visible) → on réduit sa hauteur. */
body .tabcontent_global .tr_header .select,
body .tabcontent_global .tr_header .select_attribute {
height: 20px !important;
line-height: 20px !important;
}
/* Bouton "sauver colonnes" (liste dynamique) : flottant à droite de l'en-tête,
petit bouton blanc + icône teal, calé sur la hauteur du bandeau teal.
!important pour battre le fond teal posé par le JS de la page. */
.tabcontent_global #btn_sauvegarder_colonnes {
width: 18px !important; /* tient dans l'espace de la scrollbar (~17px) */
height: 28px !important;
background-color: #ffffff !important;
border: none !important;
border-radius: 3px !important;
color: #005477 !important;
box-sizing: border-box;
}
.tabcontent_global #btn_sauvegarder_colonnes i {
color: #005477 !important;
font-size: 12px;
}
/* Hauteur du bandeau teal (tr_header) — compacte 28px. Le padding vertical du
s'AJOUTAIT au height (28+3+3=34px sur les listes simples) → on le met à 0
ici ; le contenu reste centré via vertical-align:middle. */
body .tabcontent_global .tr_header td,
body .tabcontent_global .tr_header th {
height: 28px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body .tabcontent_global .tr_header td:first-child,
body .tabcontent_global .tr_header th:first-child { border-top-left-radius: 8px; }
body .tabcontent_global .tr_header td:last-child,
body .tabcontent_global .tr_header th:last-child { border-top-right-radius: 8px; }
/* En-tete sur plusieurs lignes : seule la 1re ligne porte les coins arrondis (sinon les cellules
de bord des lignes suivantes s'arrondissent aussi et laissent une encoche blanche). */
body .tabcontent_global .tr_header + .tr_header td:first-child,
body .tabcontent_global .tr_header + .tr_header th:first-child { border-top-left-radius: 0; }
body .tabcontent_global .tr_header + .tr_header td:last-child,
body .tabcontent_global .tr_header + .tr_header th:last-child { border-top-right-radius: 0; }
/* 2. Filtres du haut (Service / Société / Établissement…) : petite CARTE
moderne (fond blanc, bordure claire, ombre douce), label gris UPPERCASE, et
le lui-même arrondi + focus teal. On garde le composant .select
(et sa flèche) : c'est juste du restyle, rien de cassé. */
body .filtres_header,
body .filtres_header_non_float {
background-color: #ffffff !important;
color: #64748b !important;
border: 1px solid #e3e8ee !important;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
/* Label + select alignés verticalement (au lieu de vertical-align:top + float). */
display: inline-flex !important;
align-items: center;
gap: 10px;
}
body .filtres_header .select,
body .filtres_header_non_float .select,
body .filtres_header .multiselect-wrapper,
body .filtres_header_non_float .multiselect-wrapper {
float: none !important;
}
body .filtres_header span,
body .filtres_header_non_float span {
color: #64748b !important;
}
body .filtres_header span:first-child,
body .filtres_header_non_float span:first-child {
font-size: 11px !important;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .3px;
margin: 0 !important;
height: auto !important;
}
/* Le du filtre : arrondi, bordure claire, hover + focus teal. */
body .filtres_header .select select,
body .filtres_header_non_float .select select {
border: 1px solid #d5dbe1 !important;
border-radius: 6px !important;
background-color: #f7f9fb !important;
color: #334155 !important;
transition: border-color .15s ease, box-shadow .15s ease;
}
body .filtres_header .select select:hover {
border-color: #b9c4cf !important;
}
body .filtres_header .select select:focus {
border-color: #005477 !important;
box-shadow: 0 0 0 2px rgba(0, 84, 119, .12) !important;
}
/* 3. Ligne de recherche : champs arrondis + LOUPE dans les inputs texte */
/* NB : le wrapper `.select` est sans bordure (composant `.select{border:0}`) et
c'est le natif à l'intérieur qui porte la bordure → on borde le
(et les inputs), PAS le wrapper, sinon double bordure. */
body .tabcontent_global .tr_filtre input:not([type="checkbox"]):not([type="radio"]),
body .tabcontent_global .tr_filtre select,
body .tabcontent_global .tr_filtre .input_text {
border: 1px solid #d5dbe1 !important;
border-radius: 6px !important;
/* padding loupe (24px) inclus dans la largeur -> plus de débordement sur la
colonne suivante (les inputs ont width:100%). */
box-sizing: border-box !important;
max-width: 100% !important;
}
body .tabcontent_global .tr_filtre input[type="text"],
body .tabcontent_global .tr_filtre .input_text:not(textarea) {
padding-left: 24px;
/* L'input remplit sa cellule -> son bord s'aligne avec l'en-tête de colonne
(droite/gauche), au lieu de rester collé à gauche du . */
width: 100% !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.3'/%3E%3Cline x1='10.5' y1='10.5' x2='14' y2='14'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 8px center;
background-size: 12px;
}
body .tabcontent_global .tr_filtre input:focus,
body .tabcontent_global .tr_filtre select:focus,
body .tabcontent_global .tr_filtre .input_text:focus {
border-color: #005477 !important;
outline: none;
box-shadow: 0 0 0 2px rgba(0, 84, 119, .12);
}
/* 4. Lignes de résultats (iframe) : alternance douce + hover teal léger. Ciblé
`.liste_resultats` (classe posée sur le des résultats) → n'impacte pas
les listes des fiches. */
body .liste_resultats tr.ligne_donnee:nth-child(odd) { background-color: #f7f9fb; }
body .liste_resultats tr.ligne_donnee:nth-child(even) { background-color: #ffffff; }
body .liste_resultats tr.ligne_donnee.hover:hover td,
body .liste_resultats tr.ligne_donnee.hover:hover td > i,
body .liste_resultats tr.ligne_donnee.hover:hover td > a {
background-color: #eef5f8 !important;
}
/* 5. Bandeau total en bas de liste : blocs allégés (carte claire). */
div.affichage_total {
border: 1px solid #e3e8ee;
border-radius: 8px;
background-color: #ffffff;
color: #334155;
box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
padding: 6px 14px;
}
/* 6. Pagination : boutons blancs arrondis, page active teal, hover teal léger.
(Pas de sélecteur de taille de page — non géré par l'appli.) */
.paging_content .paging {
float: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
box-sizing: border-box;
padding: 3px 6px;
margin: 0 2px;
border: 1px solid #e3e8ee !important;
border-radius: 7px;
background-color: #ffffff;
color: #334155;
font-size: 12px;
font-weight: 500;
}
.paging_content .paging:hover {
background-color: #eef5f8;
border-color: #b9c4cf !important;
color: #005477;
}
.paging_content .paging.selected {
background-color: #005477 !important;
border-color: #005477 !important;
color: #ffffff !important;
}
.paging_content .nopaging {
float: none;
color: #94a3b8;
}
/* 7a. Badge de STATUT (colonne Statut, badge seul) : un peu plus grand. Il peut
wrapper : les libelles de reference depassent la largeur de leur colonne (un role
comme « Assistante (avec saisie des temps) » dans une colonne a 8 %), et le nowrap
de .wf-badge elargirait le tableau au lieu de laisser la ligne grandir comme le
faisait le texte brut. Le groupe .wf-valideurs reprend nowrap en 7b. */
.liste_resultats .wf-badge {
font-size: 10px;
padding: 1px 7px;
border-radius: 9px;
white-space: normal;
}
/* 7b. Badges de WORKFLOW (colonne Workflow, groupe .wf-valideurs) : petits +
nowrap, comme l'onglet Factures de la fiche. Le title de la cellule
(getTitreWorkflowValidation) liste les valideurs → pas besoin de wrap. */
.liste_resultats .wf-valideurs {
flex-wrap: nowrap;
gap: 2px;
}
.liste_resultats .wf-valideurs .wf-badge {
font-size: 9px;
padding: 0 5px;
border-radius: 8px;
white-space: nowrap;
}
/* Légende d'aide repliable (onboarding). Sur les pages liste, `.tabcontent_global`
est en position:absolute (top fixe) : une légende en flux la chevaucherait. Ici
elle est repliée par défaut (summary compact) et, dépliée, le contenu s'affiche
en OVERLAY au-dessus de la liste (aucun décalage de mise en page). Réutilisable :
… …
) : on les fait ressembler à des libellés propres
(transparent, blanc, uppercase), et la flèche de config n'apparaît qu'au
SURVOL de la cellule d'en-tête → en-tête aussi net que les listes simples. */
/* Le natif : transparent, blanc, uppercase (= libellé propre). */
.tabcontent_global .tr_header .select_attribute {
background-color: transparent !important;
border: none !important;
color: #ffffff !important;
font-weight: 600 !important;
text-transform: uppercase;
font-size: 11px !important;
letter-spacing: .4px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
padding: 0 12px 0 0 !important;
}
/* Le WRAPPER .select dessine une boîte silver + une flèche grise : on retire la
boîte, et la flèche devient un petit chevron blanc qui n'apparaît qu'au
SURVOL de la colonne → en-tête net comme une liste simple. */
.tabcontent_global .tr_header .select::before {
display: none !important;
}
.tabcontent_global .tr_header .select::after {
content: '\25BE' !important;
color: #ffffff !important;
font-size: 10px !important;
right: 2px !important;
opacity: .7; /* chevron discret mais TOUJOURS visible */
transition: opacity .12s ease;
}
.tabcontent_global .tr_header td:hover .select::after,
.tabcontent_global .tr_header th:hover .select::after {
opacity: 1;
}
/* le menu déroulant (options) reste lisible : fond blanc, texte sombre.
L' "Attributs" avait été oublié ici : il héritait du color:#ffffff
!important posé sur le select juste au-dessus, donc blanc sur blanc, et son
libellé se lisait comme une ligne vide au-dessus des attributs. */
.tabcontent_global .tr_header .select_attribute option,
.tabcontent_global .tr_header .select_attribute optgroup {
color: #334155;
background-color: #ffffff;
text-transform: none;
}
table tr td.exergue{
/* utilisé pour mettre en valeur une donnée dans une liste */
font-weight:bold;
color: #005477;
}
/* bloc légende */
#conteneur_legende {
position: relative;
cursor: help;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border: 1px solid #e3e8ee;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
color: #64748b;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .3px;
white-space: nowrap;
}
#conteneur_legende > i {
color: #005477;
font-size: 13px;
}
#bloc_legende {
display: block;
visibility: hidden;
opacity: 0;
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 60;
box-sizing: border-box;
width: 280px;
/* La legende peut etre longue (couleurs + liste des absences) :
on la borne a la hauteur de la fenetre et on la fait defiler. */
max-height: 70vh;
overflow-y: auto;
padding: 10px 12px;
border: 1px solid #e3e8ee;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
color: #334155;
font-size: 12px;
font-weight: normal;
text-transform: none;
letter-spacing: 0;
text-align: left;
white-space: normal;
transition: opacity 0.2s;
}
#conteneur_legende:hover #bloc_legende {
opacity: 1;
visibility: visible;
}
#bloc_legende b {
color: #005477;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .3px;
}
#bloc_legende ul {
margin: 6px 0 0;
padding: 0 0 0 18px;
}
#bloc_legende .ligne_legende {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
}
#bloc_legende .pastille_legende {
flex: none;
width: 12px;
height: 12px;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, .08);
}
/* Un intertitre (Couleurs / Liste des absences) sauf le premier. */
#bloc_legende b {
display: block;
margin-top: 10px;
}
#bloc_legende b:first-child {
margin-top: 0;
}
/* Fragment recherche mis en evidence dans une liste, via SurlignerRecherche().
Jaune tres clair pour rester lisible sur fond blanc comme sur ligne zebree. */
.surlignage_recherche {
background-color: #fff3bf;
border-radius: 2px;
padding: 0 1px;
}