/
injectés */
.crm-installations-table
.crm-inline-etat > br,
.crm-installations-table
.crm-inline-etat p,
.crm-installations-table
.frm_edit_link_container br {
margin: 0 !important;
padding: 0 !important;
}
.crm-installations-table
.crm-inline-etat > br,
.crm-installations-table
.frm_edit_link_container br {
display: none !important;
}
.crm-installations-table
.crm-inline-etat p {
display: contents;
}
/* ==========================================================
BADGE ÉTAT
========================================================== */
.crm-installations-table .crm-badge-status {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 25px;
padding: 4px 10px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
/* Pastille */
.crm-installations-table
.crm-badge-status::before {
content: "";
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
/* En installation */
.crm-installations-table
.crm-ref-installation_en_cours {
color: #8a5a08;
background: #fff6dc;
border-color: #f5df9d;
}
/* Installation terminée */
.crm-installations-table
.crm-ref-installation_terminee {
color: #176b3a;
background: #eaf8ef;
border-color: #b7e5c8;
}
/* À planifier — si utilisé */
.crm-installations-table
.crm-ref-installation_a_planifier {
color: #475467;
background: #f2f4f7;
border-color: #e4e7ec;
}
/* En attente — si utilisé */
.crm-installations-table
.crm-ref-installation_en_attente {
color: #9a5b0a;
background: #fff7e8;
border-color: #f5d89a;
}
/* Annulée — si utilisé */
.crm-installations-table
.crm-ref-installation_annulee {
color: #a32d2d;
background: #fcecec;
border-color: #f2b9b9;
}
/* ==========================================================
PETIT CRAYON D'ÉDITION DE L'ÉTAT
========================================================== */
.crm-installations-table .crm-etat-edit-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
padding: 0;
color: #98a2b3;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
font-size: 13px;
line-height: 1;
text-decoration: none;
opacity: .35;
transition:
color .15s ease,
background-color .15s ease,
border-color .15s ease,
opacity .15s ease;
}
/* Le crayon devient bien visible au survol de la ligne */
.crm-installations-table
tbody tr:hover
.crm-etat-edit-link {
opacity: 1;
}
.crm-installations-table
.crm-etat-edit-link:hover,
.crm-installations-table
.crm-etat-edit-link:focus-visible {
color: #3d7fff;
background: #eef4ff;
border-color: #c8d9ff;
opacity: 1;
}
/* ==========================================================
RESPONSABLE / DATE
========================================================== */
.crm-installations-table
.crm-installation-responsable {
min-width: 130px;
color: #344054;
white-space: nowrap;
}
.crm-installations-table
.crm-installation-created-at {
min-width: 120px;
color: #475467;
white-space: nowrap;
}
/* ==========================================================
BOUTON MODIFIER PRINCIPAL
========================================================== */
.crm-installations-table
.crm-installation-actions {
width: 70px;
text-align: center;
}
.crm-installations-table
.crm-installation-edit-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid #d9e0e9;
border-radius: 6px;
background: #fff;
color: #344057 !important;
font-size: 13px;
line-height: 1;
text-decoration: none !important;
transition:
border-color .15s ease,
background-color .15s ease,
color .15s ease;
}
.crm-installations-table
.crm-installation-edit-link:hover {
border-color: #b8c5d8;
background: #f5f8fc;
color: #2563eb !important;
}
/* ==========================================================
ÉDITION IN-PLACE DE L'ÉTAT
========================================================== */
.crm-installations-table
.crm-installation-status-cell
.frm_forms {
min-width: 175px;
margin: 0;
}
.crm-installations-table
.crm-installation-status-cell
.frm_form_fields,
.crm-installations-table
.crm-installation-status-cell
fieldset,
.crm-installations-table
.crm-installation-status-cell
.frm_fields_container {
margin: 0;
padding: 0;
border: 0;
}
.crm-installations-table
.crm-installation-status-cell
.frm_form_field {
margin: 0;
}
/* Label masqué visuellement */
.crm-installations-table
.crm-installation-status-cell
.frm_primary_label {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Select */
.crm-installations-table
.crm-installation-status-cell
select {
width: 100%;
min-width: 160px;
height: 34px;
min-height: 34px;
padding: 0 28px 0 9px;
color: #344054;
background: #fff;
border: 1px solid #d0d5dd;
border-radius: 6px;
font-size: 11px;
outline: none;
}
.crm-installations-table
.crm-installation-status-cell
select:focus {
border-color: #84adff;
box-shadow:
0 0 0 3px
rgba(61, 127, 255, .12);
}
/* Submit in-place */
.crm-installations-table
.crm-installation-status-cell
.frm_submit {
display: flex;
align-items: center;
gap: 5px;
margin-top: 6px;
}
.crm-installations-table
.crm-installation-status-cell
.frm_button_submit {
min-height: 30px;
padding: 5px 9px;
color: #fff;
background: #3d7fff;
border: 0;
border-radius: 6px;
font-size: 10px;
font-weight: 600;
}
/* ==========================================================
LARGEURS DE COLONNES
========================================================== */
.crm-installations-table
th:nth-child(1),
.crm-installations-table
td:nth-child(1) {
width: 11%;
}
.crm-installations-table
th:nth-child(2),
.crm-installations-table
td:nth-child(2) {
width: 16%;
}
.crm-installations-table
th:nth-child(3),
.crm-installations-table
td:nth-child(3) {
width: 24%;
}
.crm-installations-table
th:nth-child(4),
.crm-installations-table
td:nth-child(4) {
width: 17%;
}
.crm-installations-table
th:nth-child(5),
.crm-installations-table
td:nth-child(5) {
width: 13%;
}
.crm-installations-table
th:nth-child(6),
.crm-installations-table
td:nth-child(6) {
width: 12%;
}
.crm-installations-table
th:nth-child(7),
.crm-installations-table
td:nth-child(7) {
width: 7%;
}
/* ==========================================================
RESPONSIVE
========================================================== */
/*
* Le tableau reste horizontal comme Clients.
* Il vaut mieux scroller que compresser les colonnes.
*/
@media (max-width: 1100px) {
.crm-installations-table {
min-width: 1000px;
}
}
@media (max-width: 768px) {
.crm-installations-table {
min-width: 940px;
}
.crm-installations-table th {
padding: 9px 10px;
font-size: 9px;
}
.crm-installations-table td {
padding: 10px;
font-size: 11px;
}
}
/* ==========================================================
ALLIANCE CRM — TABLEAU SAV & TICKETS
Harmonisé avec Clients / Installations
========================================================== */
/* ==========================================================
TABLEAU
========================================================== */
.crm-sav-table {
width: 100%;
min-width: 1100px;
margin: 0;
border: 0;
border-spacing: 0;
border-collapse: collapse;
table-layout: auto;
color: #1a2233;
background: #ffffff;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
font-size: 12px;
line-height: 1.4;
}
/* Neutralisation de styles WP / Elementor */
.crm-sav-table,
.crm-sav-table thead,
.crm-sav-table tbody,
.crm-sav-table tr,
.crm-sav-table th,
.crm-sav-table td {
background-clip: padding-box;
}
/* ==========================================================
NETTOYAGE WORDPRESS / FORMIDABLE
========================================================== */
.crm-sav-table th > br,
.crm-sav-table td br {
display: none !important;
}
.crm-sav-table td > p,
.crm-sav-table th > p,
.crm-sav-table .crm-sav-client-cell p,
.crm-sav-table .crm-sav-object-cell p {
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
EN-TÊTE
========================================================== */
.crm-sav-table thead {
background: #ffffff;
}
.crm-sav-table th {
position: relative;
padding: 10px 12px;
color: #6b7a99;
background: #ffffff;
border: 0;
border-bottom: 1px solid #e2e6ec;
text-align: left;
vertical-align: middle;
font-size: 10px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .7px;
text-transform: uppercase;
white-space: nowrap;
}
/* Séparations verticales légères */
.crm-sav-table th + th {
border-left: 1px solid rgba(226, 230, 236, .48);
}
/* ==========================================================
LIGNES
========================================================== */
.crm-sav-table tbody tr {
position: relative;
color: #1a2233;
background: #ffffff;
transition:
background-color .14s ease,
box-shadow .14s ease;
}
/* ==========================================================
CELLULES
========================================================== */
.crm-sav-table td {
padding: 12px;
color: #344054;
background: #fff !important;
border: 0;
border-bottom: 1px solid #e8ecf1;
text-align: left;
vertical-align: middle;
font-size: 12px;
font-weight: 400;
line-height: 1.45;
}
/* Dernière ligne sans bordure */
.crm-sav-table tbody tr:last-child td {
border-bottom: 0;
}
/* Hover identique aux autres tableaux */
.crm-sav-table tbody tr:hover td {
background: #f7f9fb;
}
.crm-sav-table tbody tr:hover {
box-shadow: inset 2px 0 0 #3d7fff;
}
/* ==========================================================
N° DU TICKET
========================================================== */
.crm-sav-table .crm-sav-column-code {
min-width: 120px;
}
.crm-sav-table .crm-sav-column-code > a {
display: inline-flex;
align-items: center;
gap: 5px;
color: #1a2233;
font-weight: 600;
text-decoration: none;
transition:
color .15s ease,
text-decoration-color .15s ease;
}
.crm-sav-table .crm-sav-column-code > a:hover,
.crm-sav-table .crm-sav-column-code > a:focus-visible {
color: #3d7fff;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Petit chevron discret */
.crm-sav-table .crm-sav-column-code > a::after {
content: "›";
color: #a7b0c0;
font-size: 15px;
font-weight: 400;
line-height: 1;
transform: translateY(-1px);
transition:
color .15s ease,
transform .15s ease;
}
.crm-sav-table .crm-sav-column-code > a:hover::after {
color: #3d7fff;
transform: translate(2px, -1px);
}
/* ==========================================================
CLIENT
========================================================== */
.crm-sav-table .crm-sav-column-client {
min-width: 145px;
}
.crm-sav-client-name {
font-weight: 600;
}
.crm-sav-client-name a {
color: #1a2233 !important;
text-decoration: none !important;
}
.crm-sav-client-name a:hover,
.crm-sav-client-name a:focus-visible {
color: #3d7fff !important;
text-decoration: underline !important;
text-underline-offset: 3px;
}
/* ==========================================================
OBJET
========================================================== */
.crm-sav-table .crm-sav-column-object {
min-width: 240px;
}
.crm-sav-object-title {
display: block;
color: #344054;
font-size: 12px;
line-height: 1.45;
}
/* ==========================================================
BADGES — BASE
========================================================== */
.crm-sav-table .crm-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 25px;
padding: 4px 10px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
/* Catégorie / statut sans point si classe demandée */
.crm-sav-table .crm-badge-no-dot::before {
display: none !important;
}
/* ==========================================================
CATÉGORIES
========================================================== */
.crm-sav-table
.crm-ref-sav_categorie_technique {
color: #2563eb;
background: #eef5ff;
border-color: #bfd7ff;
}
.crm-sav-table
.crm-ref-sav_categorie_facturation {
color: #7c3aed;
background: #f5f3ff;
border-color: #ddd6fe;
}
.crm-sav-table
.crm-ref-sav_categorie_commercial {
color: #176b3a;
background: #eaf8ef;
border-color: #b7e5c8;
}
.crm-sav-table
.crm-ref-sav_categorie_installation {
color: #a85d08;
background: #fff4e5;
border-color: #f6cf9c;
}
.crm-sav-table
.crm-ref-sav_categorie_administratif {
color: #475467;
background: #f2f4f7;
border-color: #e4e7ec;
}
/* ==========================================================
STATUTS
========================================================== */
.crm-sav-table
.crm-ref-sav_statut_nouveau,
.crm-sav-table
.crm-ref-sav_statut_ouvert {
color: #2563eb;
background: #eef5ff;
border-color: #bfd7ff;
}
.crm-sav-table
.crm-ref-sav_statut_en_cours {
color: #8a5a08;
background: #fff6dc;
border-color: #f5df9d;
}
.crm-sav-table
.crm-ref-sav_statut_en_attente {
color: #9a5b0a;
background: #fff7e8;
border-color: #f5d89a;
}
.crm-sav-table
.crm-ref-sav_statut_resolu,
.crm-sav-table
.crm-ref-sav_statut_termine,
.crm-sav-table
.crm-ref-sav_statut_ferme {
color: #176b3a;
background: #eaf8ef;
border-color: #b7e5c8;
}
/* ==========================================================
PRIORITÉ
========================================================== */
.crm-sav-table .crm-sav-column-priority {
min-width: 105px;
white-space: nowrap;
}
/*
* Avec le HTML rendu actuellement, WordPress sépare parfois
* le conteneur de priorité et ses enfants.
* On remet donc la cellule elle-même en flex.
*/
.crm-sav-table .crm-sav-column-priority {
font-size: 0;
}
.crm-sav-table .crm-sav-priority,
.crm-sav-table .crm-sav-priority-dot,
.crm-sav-table .crm-sav-priority-label {
vertical-align: middle;
}
.crm-sav-table .crm-sav-priority {
display: none;
}
/* Point */
.crm-sav-table .crm-sav-priority-dot {
display: inline-block;
width: 7px;
height: 7px;
margin-right: 6px;
border-radius: 50%;
background: #98a2b3;
}
/* Texte */
.crm-sav-table .crm-sav-priority-label {
display: inline;
color: #475467;
font-size: 11px;
font-weight: 500;
}
/* Couleurs selon les classes générées dans la cellule */
.crm-sav-table
.crm-sav-column-priority:has(.crm-ref-sav_priorite_basse)
.crm-sav-priority-dot {
background: #22a35a;
}
.crm-sav-table
.crm-sav-column-priority:has(.crm-ref-sav_priorite_normale)
.crm-sav-priority-dot,
.crm-sav-table
.crm-sav-column-priority:has(.crm-ref-sav_priorite_moyenne)
.crm-sav-priority-dot {
background: #d99a13;
}
.crm-sav-table
.crm-sav-column-priority:has(.crm-ref-sav_priorite_haute)
.crm-sav-priority-dot {
background: #e16b32;
}
.crm-sav-table
.crm-sav-column-priority:has(.crm-ref-sav_priorite_urgente)
.crm-sav-priority-dot,
.crm-sav-table
.crm-sav-column-priority:has(.crm-ref-sav_priorite_critique)
.crm-sav-priority-dot {
background: #d92d20;
}
/* ==========================================================
DATE
========================================================== */
.crm-sav-table .crm-sav-column-date {
min-width: 110px;
white-space: nowrap;
}
.crm-sav-created-date {
color: #475467;
font-size: 12px;
}
/* ==========================================================
RESPONSABLE
========================================================== */
.crm-sav-table .crm-sav-column-assignee {
min-width: 125px;
white-space: nowrap;
}
.crm-sav-assignee {
color: #344054;
font-size: 12px;
}
/* ==========================================================
BOUTON MODIFIER
========================================================== */
.crm-sav-table .crm-sav-column-actions {
width: 70px;
text-align: center;
}
.crm-sav-table .crm-sav-edit-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid #d9e0e9;
border-radius: 6px;
background: #fff;
color: #344057 !important;
font-size: 13px;
line-height: 1;
text-decoration: none !important;
transition:
border-color .15s ease,
background-color .15s ease,
color .15s ease;
}
.crm-sav-table .crm-sav-edit-link:hover {
border-color: #b8c5d8;
background: #f5f8fc;
color: #2563eb !important;
}
/* ==========================================================
LARGEURS DES COLONNES
========================================================== */
.crm-sav-table
th:nth-child(1),
.crm-sav-table
td:nth-child(1) {
width: 10%;
}
.crm-sav-table
th:nth-child(2),
.crm-sav-table
td:nth-child(2) {
width: 13%;
}
.crm-sav-table
th:nth-child(3),
.crm-sav-table
td:nth-child(3) {
width: 23%;
}
.crm-sav-table
th:nth-child(4),
.crm-sav-table
td:nth-child(4) {
width: 11%;
}
.crm-sav-table
th:nth-child(5),
.crm-sav-table
td:nth-child(5) {
width: 11%;
}
.crm-sav-table
th:nth-child(6),
.crm-sav-table
td:nth-child(6) {
width: 9%;
}
.crm-sav-table
th:nth-child(7),
.crm-sav-table
td:nth-child(7) {
width: 9%;
}
.crm-sav-table
th:nth-child(8),
.crm-sav-table
td:nth-child(8) {
width: 10%;
}
.crm-sav-table
th:nth-child(9),
.crm-sav-table
td:nth-child(9) {
width: 4%;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 1100px) {
.crm-sav-table {
min-width: 1050px;
}
}
@media (max-width: 768px) {
.crm-sav-table {
min-width: 980px;
}
.crm-sav-table th {
padding: 9px 10px;
font-size: 9px;
}
.crm-sav-table td {
padding: 10px;
font-size: 11px;
}
}
/* ==========================================================
ALLIANCE CRM — TABLEAU DEVIS
Harmonisé avec Clients / Installations / SAV
========================================================== */
/* ==========================================================
WRAPPER
========================================================== */
.crm-devis-table-wrapper {
position: relative;
width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: visible;
background: #ffffff;
-webkit-overflow-scrolling: touch;
}
/* Nettoyage des paragraphes parasites autour du tableau */
.crm-devis-table-wrapper > p {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================
TABLEAU
========================================================== */
.crm-devis-table {
width: 100%;
min-width: 1120px;
margin: 0;
border: 0;
border-spacing: 0;
border-collapse: collapse;
table-layout: auto;
color: #1a2233;
background: #ffffff;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 12px;
line-height: 1.4;
}
/* Neutralisation WP / Elementor */
.crm-devis-table,
.crm-devis-table thead,
.crm-devis-table tbody,
.crm-devis-table tr,
.crm-devis-table th,
.crm-devis-table td {
background-clip: padding-box;
}
/* ==========================================================
NETTOYAGE WORDPRESS / FORMIDABLE
========================================================== */
.crm-devis-table td > p,
.crm-devis-table th > p {
margin: 0 !important;
padding: 0 !important;
}
.crm-devis-table td br,
.crm-devis-table th br,
.crm-devis-table .frm_edit_link_container br {
display: none !important;
}
/* ==========================================================
EN-TÊTE
========================================================== */
.crm-devis-table thead {
background: #ffffff;
}
.crm-devis-table th {
position: relative;
padding: 10px 12px;
color: #6b7a99;
background: #ffffff;
border: 0;
border-bottom: 1px solid #e2e6ec;
text-align: left;
vertical-align: middle;
font-size: 10px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .7px;
text-transform: uppercase;
white-space: nowrap;
}
/* Séparateurs verticaux très légers */
.crm-devis-table th + th {
border-left:
1px solid rgba(226, 230, 236, .48);
}
/* ==========================================================
LIGNES
========================================================== */
.crm-devis-table tbody tr {
position: relative;
color: #1a2233;
background: #ffffff;
transition:
background-color .14s ease,
box-shadow .14s ease;
}
/* ==========================================================
CELLULES
========================================================== */
.crm-devis-table td {
padding: 12px;
color: #344054;
background: transparent;
border: 0;
border-bottom: 1px solid #e8ecf1;
text-align: left;
vertical-align: middle;
font-size: 12px;
font-weight: 400;
line-height: 1.45;
}
/* Dernière ligne */
.crm-devis-table tbody tr:last-child td {
border-bottom: 0;
}
/* Hover */
.crm-devis-table tbody tr:hover td {
background: #f7f9fb;
}
.crm-devis-table tbody tr:hover {
box-shadow: inset 2px 0 0 #3d7fff;
}
/* ==========================================================
CLIENT
========================================================== */
.crm-devis-client-cell {
min-width: 170px;
}
.crm-devis-client {
display: flex;
align-items: center;
gap: 9px;
}
/* Avatar */
.crm-devis-client-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: 0 0 30px;
overflow: hidden;
border-radius: 50%;
background: #eef4ff;
color: #3978ed;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
}
/* Le lien "..." généré par Formidable reste discret */
.crm-devis-client-avatar
.frm_text_exposed_show {
color: inherit !important;
font-size: inherit;
text-decoration: none !important;
}
/* Nom */
.crm-devis-client-name {
color: #1a2233;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
/* ==========================================================
CODE / N° PROPOSITION
========================================================== */
.crm-devis-code-cell {
min-width: 130px;
}
.crm-devis-code-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: #1a2233 !important;
font-weight: 600;
text-decoration: none !important;
transition:
color .15s ease,
text-decoration-color .15s ease;
}
.crm-devis-code-link:hover,
.crm-devis-code-link:focus-visible {
color: #3d7fff !important;
text-decoration: underline !important;
text-underline-offset: 3px;
}
/* Petit chevron */
.crm-devis-code-link::after {
content: "›";
color: #a7b0c0;
font-size: 15px;
font-weight: 400;
line-height: 1;
transform: translateY(-1px);
transition:
color .15s ease,
transform .15s ease;
}
.crm-devis-code-link:hover::after {
color: #3d7fff;
transform: translate(2px, -1px);
}
/* ==========================================================
OPÉRATEUR
========================================================== */
.crm-devis-operator-cell {
min-width: 100px;
color: #475467;
white-space: nowrap;
}
/* ==========================================================
VALEURS FINANCIÈRES
========================================================== */
.crm-devis-money-cell {
min-width: 115px;
white-space: nowrap;
}
.crm-devis-money-value,
.crm-devis-margin-value {
color: #344054;
font-size: 12px;
font-weight: 600;
}
/* SP / économie positives */
.crm-devis-money-value--positive {
color: #159447;
}
/* Marge */
.crm-devis-money-cell--margin
.crm-devis-margin-value {
color: #159447;
}
/* ==========================================================
STATUT
========================================================== */
.crm-devis-status-cell {
min-width: 175px;
white-space: nowrap;
}
.crm-devis-inline-status {
display: inline-flex;
align-items: center;
gap: 5px;
}
/* Nettoyage des paragraphes générés */
.crm-devis-inline-status > p {
display: contents;
margin: 0 !important;
padding: 0 !important;
}
/* Badge */
.crm-devis-table
.crm-badge-status {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 25px;
padding: 4px 10px;
border: 1px solid #f5df9d;
border-radius: 999px;
background: #fff6dc;
color: #8a5a08;
font-size: 11px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
/* Pastille */
.crm-devis-table
.crm-badge-status::before {
content: "";
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
/* ==========================================================
PETIT CRAYON DU STATUT
========================================================== */
.crm-devis-table
.crm-status-edit-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
padding: 0;
color: #98a2b3;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
font-size: 13px;
line-height: 1;
text-decoration: none !important;
opacity: .35;
transition:
color .15s ease,
background-color .15s ease,
border-color .15s ease,
opacity .15s ease;
}
/* Visible au hover de la ligne */
.crm-devis-table
tbody tr:hover
.crm-status-edit-link {
opacity: 1;
}
.crm-devis-table
.crm-status-edit-link:hover,
.crm-devis-table
.crm-status-edit-link:focus-visible {
color: #3d7fff;
background: #eef4ff;
border-color: #c8d9ff;
opacity: 1;
}
/* ==========================================================
ÉDITION IN-PLACE DU STATUT
========================================================== */
.crm-devis-table
.crm-devis-status-cell
.frm_forms {
min-width: 175px;
margin: 0;
}
.crm-devis-table
.crm-devis-status-cell
.frm_form_fields,
.crm-devis-table
.crm-devis-status-cell
fieldset,
.crm-devis-table
.crm-devis-status-cell
.frm_fields_container {
margin: 0;
padding: 0;
border: 0;
}
.crm-devis-table
.crm-devis-status-cell
.frm_form_field {
margin: 0;
}
/* Label masqué visuellement */
.crm-devis-table
.crm-devis-status-cell
.frm_primary_label {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Select */
.crm-devis-table
.crm-devis-status-cell
select {
width: 100%;
min-width: 160px;
height: 34px;
min-height: 34px;
padding: 0 28px 0 9px;
color: #344054;
background: #fff;
border: 1px solid #d0d5dd;
border-radius: 6px;
font-size: 11px;
outline: none;
}
.crm-devis-table
.crm-devis-status-cell
select:focus {
border-color: #84adff;
box-shadow:
0 0 0 3px
rgba(61, 127, 255, .12);
}
/* Submit */
.crm-devis-table
.crm-devis-status-cell
.frm_submit {
display: flex;
align-items: center;
gap: 5px;
margin-top: 6px;
}
.crm-devis-table
.crm-devis-status-cell
.frm_button_submit {
min-height: 30px;
padding: 5px 9px;
color: #fff;
background: #3d7fff;
border: 0;
border-radius: 6px;
font-size: 10px;
font-weight: 600;
}
/* ==========================================================
ACTION MODIFIER
========================================================== */
.crm-devis-table__actions-heading,
.crm-devis-actions-cell {
width: 65px;
text-align: center !important;
}
.crm-devis-edit-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid #d9e0e9;
border-radius: 6px;
background: #fff;
color: #344057 !important;
font-size: 13px;
line-height: 1;
text-decoration: none !important;
transition:
border-color .15s ease,
background-color .15s ease,
color .15s ease;
}
.crm-devis-edit-button:hover {
border-color: #b8c5d8;
background: #f5f8fc;
color: #2563eb !important;
}
/* ==========================================================
LARGEURS DES COLONNES
========================================================== */
.crm-devis-table
th:nth-child(1),
.crm-devis-table
td:nth-child(1) {
width: 16%;
}
.crm-devis-table
th:nth-child(2),
.crm-devis-table
td:nth-child(2) {
width: 12%;
}
.crm-devis-table
th:nth-child(3),
.crm-devis-table
td:nth-child(3) {
width: 9%;
}
.crm-devis-table
th:nth-child(4),
.crm-devis-table
td:nth-child(4) {
width: 10%;
}
.crm-devis-table
th:nth-child(5),
.crm-devis-table
td:nth-child(5) {
width: 10%;
}
.crm-devis-table
th:nth-child(6),
.crm-devis-table
td:nth-child(6) {
width: 12%;
}
.crm-devis-table
th:nth-child(7),
.crm-devis-table
td:nth-child(7) {
width: 15%;
}
.crm-devis-table
th:nth-child(8),
.crm-devis-table
td:nth-child(8) {
width: 10%;
}
.crm-devis-table
th:nth-child(9),
.crm-devis-table
td:nth-child(9) {
width: 6%;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 1100px) {
.crm-devis-table {
min-width: 1060px;
}
}
@media (max-width: 768px) {
.crm-devis-table {
min-width: 980px;
}
.crm-devis-table th {
padding: 9px 10px;
font-size: 9px;
}
.crm-devis-table td {
padding: 10px;
font-size: 11px;
}
}
/* ==========================================================
CORRECTIF — CELLULE CLIENT DU TABLEAU DEVIS
========================================================== */
.crm-devis-table .crm-devis-client-cell {
padding: 12px !important;
}
/* Le conteneur ne doit plus créer de layout particulier */
.crm-devis-table .crm-devis-client {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
/* Neutralise les
ajoutés par WordPress / Formidable */
.crm-devis-table .crm-devis-client p {
display: block !important;
margin: 0 !important;
padding: 0 !important;
line-height: inherit !important;
}
/* Nom du client */
.crm-devis-table .crm-devis-client-name {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
color: #1a2233;
font-size: 12px;
font-weight: 600;
line-height: 1.45;
white-space: nowrap;
}
/* Supprime les éventuels
résiduels */
.crm-devis-table .crm-devis-client-cell br {
display: none !important;
}
/* ==========================================================
CRM ALLIANCE — TABLEAU MATÉRIELS
Harmonisé avec le reste du CRM
========================================================== */
/* ==========================================================
WRAPPER
========================================================== */
.crm-materials {
width: 100%;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
color: #1a2233;
font-size: 12px;
line-height: 1.4;
}
.crm-materials-table-wrapper {
width: 100%;
overflow-x: auto;
border: 1px solid #dfe5ed;
border-radius: 10px;
background: #fff;
-webkit-overflow-scrolling: touch;
}
/* ==========================================================
NETTOYAGE WORDPRESS / FORMIDABLE
========================================================== */
/*
* Très important :
* les
du header ne doivent pas devenir des items Grid.
*/
.crm-materials-table__header > br {
display: none !important;
}
/*
* Paragraphes parasites directement dans les lignes.
*/
.crm-material-row > p {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/*
* Paragraphes internes aux cellules.
*/
.crm-material-cell > p,
.crm-material-actions > p {
margin: 0 !important;
padding: 0 !important;
}
.crm-material-cell br,
.crm-material-actions br {
display: none !important;
}
/* ==========================================================
GRILLE COMMUNE
========================================================== */
/*
* Même grille pour le header ET pour chaque ligne.
*
* Photo
* Désignation
* Description
* Type
* Actions
*/
.crm-materials-table__header,
.crm-material-row {
display: grid;
grid-template-columns:
72px
minmax(220px, 1.15fr)
minmax(320px, 1.6fr)
130px
155px;
align-items: center;
column-gap: 12px;
}
/* ==========================================================
HEADER
========================================================== */
.crm-materials-table__header {
min-width: 1000px;
padding: 10px 12px;
border-bottom: 1px solid #e2e6ec;
background: #fff;
color: #6b7a99;
font-size: 10px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .7px;
text-transform: uppercase;
}
/* ==========================================================
BODY / LIGNES
========================================================== */
.crm-materials-table__body {
min-width: 1000px;
}
.crm-material-row {
position: relative;
min-height: 70px;
padding: 0 12px;
border-bottom: 1px solid #e8ecf1;
background: #fff;
transition:
background-color .14s ease,
box-shadow .14s ease;
}
.crm-material-row:last-child {
border-bottom: 0;
}
.crm-material-row:hover {
background: #f7f9fb;
box-shadow:
inset 2px 0 0 #3d7fff;
}
/* ==========================================================
CELLULES
========================================================== */
.crm-material-cell {
display: flex;
align-items: center;
min-width: 0;
min-height: 70px;
padding: 10px 0;
color: #344054;
font-size: 12px;
}
/* Labels mobiles cachés sur desktop */
.crm-material-mobile-label {
display: none;
}
/* ==========================================================
PHOTO
========================================================== */
.crm-material-cell--photo {
justify-content: flex-start;
}
.crm-material-photo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
overflow: hidden;
border: 1px dashed #cbd5e1;
border-radius: 7px;
background: #f8fafc;
color: #94a3b8;
text-align: center;
}
.crm-material-photo span {
display: block;
font-size: 11px;
line-height: 1;
}
.crm-material-photo small {
display: block;
margin-top: 3px;
font-size: 9px;
line-height: 1;
}
/* Si une vraie image est ajoutée plus tard */
.crm-material-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ==========================================================
DÉSIGNATION
========================================================== */
.crm-material-cell--name {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 3px;
}
.crm-material-name {
display: block;
color: #1a2233;
font-size: 12px;
font-weight: 600;
line-height: 1.35;
}
.crm-material-code {
display: block;
color: #98a2b3;
font-size: 10px;
font-weight: 500;
letter-spacing: .02em;
}
/* ==========================================================
DESCRIPTION
========================================================== */
.crm-material-cell--description {
align-items: center;
}
.crm-material-description {
display: block;
color: #475467;
font-size: 12px;
line-height: 1.45;
}
/* ==========================================================
TYPE
========================================================== */
.crm-material-cell--type {
white-space: nowrap;
}
.crm-material-type {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 4px 9px;
border: 1px solid #d8e0e9;
border-radius: 999px;
background: #f5f7fa;
color: #526078;
font-size: 10px;
font-weight: 600;
}
/* ==========================================================
ACTIONS
========================================================== */
.crm-material-cell--actions {
justify-content: flex-end;
}
.crm-material-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
width: 100%;
}
/* Modifier */
.crm-material-action--edit {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 5px 8px;
border: 1px solid #d9e0e9;
border-radius: 6px;
background: #fff;
color: #344057 !important;
font-size: 10px;
font-weight: 600;
line-height: 1;
text-decoration: none !important;
transition:
border-color .15s ease,
background-color .15s ease,
color .15s ease;
}
.crm-material-action--edit:hover {
border-color: #b8c5d8;
background: #f5f8fc;
color: #2563eb !important;
}
/* Désactiver */
.crm-material-actions
.frm_update_field_link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 5px 8px;
border: 0;
border-radius: 6px;
background: transparent;
color: #a54c4c !important;
font-size: 10px;
font-weight: 600;
line-height: 1;
text-decoration: none !important;
transition:
background-color .15s ease,
color .15s ease;
}
.crm-material-actions
.frm_update_field_link:hover {
background: #fff1f1;
color: #c13f3f !important;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 900px) {
.crm-materials-table__header,
.crm-materials-table__body {
min-width: 920px;
}
.crm-materials-table__header,
.crm-material-row {
grid-template-columns:
65px
minmax(200px, 1fr)
minmax(280px, 1.4fr)
110px
145px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 650px) {
/*
* On abandonne le faux-tableau et chaque matériel
* devient une petite carte.
*/
.crm-materials-table-wrapper {
overflow: visible;
border: 0;
background: transparent;
}
.crm-materials-table__header {
display: none;
}
.crm-materials-table__body {
min-width: 0;
}
.crm-material-row {
display: grid;
grid-template-columns:
58px
minmax(0, 1fr);
gap: 10px 12px;
min-height: 0;
margin-bottom: 10px;
padding: 12px;
border: 1px solid #dfe5ed;
border-radius: 8px;
background: #fff;
}
.crm-material-cell {
min-height: 0;
padding: 0;
}
/* Photo sur toute la hauteur gauche */
.crm-material-cell--photo {
grid-column: 1;
grid-row: 1 / span 3;
align-items: flex-start;
}
.crm-material-cell--name,
.crm-material-cell--description,
.crm-material-cell--type,
.crm-material-cell--actions {
grid-column: 2;
}
.crm-material-cell--name {
grid-row: 1;
}
.crm-material-cell--description {
grid-row: 2;
}
.crm-material-cell--type {
grid-row: 3;
}
.crm-material-cell--actions {
grid-column: 1 / -1;
grid-row: 4;
justify-content: flex-end;
margin-top: 3px;
padding-top: 10px;
border-top: 1px solid #edf0f4;
}
.crm-material-actions {
justify-content: flex-end;
}
}