/*
 * Theme FinixPhone pour le portail ASTPP 3.6
 * Surcouche chargee APRES les feuilles d'origine (header.php, popup_header.php, view_login.php).
 * Aucune regle d'origine n'est modifiee : retirer la balise <link> suffit a revenir en arriere.
 * Couleurs du logo : orange #e94e1b, bleu petrole #1e536b.
 */

:root {
    --fx-bleu: #1e536b;
    --fx-bleu-fonce: #163f52;
    --fx-bleu-clair: #e8f0f4;
    --fx-orange: #e94e1b;
    --fx-orange-fonce: #c93f12;
    --fx-orange-clair: #fdeee8;
    --fx-fond: #f3f5f8;
    --fx-surface: #ffffff;
    --fx-bord: #e1e6eb;
    --fx-bord-fort: #cfd7de;
    --fx-texte: #1f2d36;
    --fx-texte-doux: #62727d;
    --fx-vert: #1f8a5b;
    --fx-vert-clair: #e5f4ec;
    --fx-rouge: #c83a3a;
    --fx-rouge-clair: #fbeaea;
    --fx-ambre: #b7791f;
    --fx-rayon: 10px;
    --fx-rayon-petit: 7px;
    --fx-ombre: 0 1px 2px rgba(16, 38, 51, .06), 0 1px 3px rgba(16, 38, 51, .08);
    --fx-ombre-haute: 0 10px 30px rgba(16, 38, 51, .14), 0 2px 6px rgba(16, 38, 51, .08);
    --fx-police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------------ base */
html, body, html body {
    background: var(--fx-fond) !important;
    color: var(--fx-texte);
    font-family: var(--fx-police) !important;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
body, p, span, label, input, select, textarea, button, h1, h2, h3, h4, h5, h6, .btn, legend, th, td {
    font-family: var(--fx-police) !important;
}
a { color: var(--fx-bleu); }
a:hover, a:focus { color: var(--fx-orange); text-decoration: none; }
::selection { background: var(--fx-orange-clair); }

/* ------------------------------------------------------------------ en-tete */
header {
    position: sticky !important;
    top: 0;
    z-index: 1000 !important;
    height: 64px;
    background: var(--fx-surface) !important;
    border-bottom: 1px solid var(--fx-bord);
    box-shadow: 0 1px 0 rgba(16, 38, 51, .03), 0 4px 14px rgba(16, 38, 51, .05) !important;
}
header > .container { width: 100% !important; max-width: none; padding: 0 20px; }
header .navbar-brand { padding: 0 !important; margin-top: 10px !important; }
header #logo { width: auto !important; height: 44px !important; }

/* menu principal */
.navbar-white .navbar-nav > li > a {
    color: var(--fx-texte) !important;
    font-size: 14px !important;
    font-weight: 500;
    padding: 9px 12px !important;
    margin: 12px 2px 0 !important;
    border-radius: 8px;
    border: 0 !important;
    transition: background .15s, color .15s;
}
.navbar-white .navbar-nav > li:hover > a,
.navbar-white .navbar-nav > li > a:hover,
.navbar-white .navbar-nav > li > a:focus {
    background: var(--fx-bleu-clair) !important;
    color: var(--fx-bleu) !important;
}
.navbar-nav > li > a .caret { margin-left: 5px; opacity: .55; }

/* menus deroulants */
.navbar-nav > li > ul.dropdown-menu,
.navbar-nav > li:hover > ul {
    border: 1px solid var(--fx-bord) !important;
    border-radius: var(--fx-rayon) !important;
    box-shadow: var(--fx-ombre-haute) !important;
    padding: 6px !important;
    margin-top: 6px !important;
    min-width: 220px !important;
    background: var(--fx-surface) !important;
}
.navbar-nav > li:hover > ul { margin-top: 0 !important; }
.navbar-nav .dropdown-menu > li > a,
.navbar-nav .col-12 li a {
    color: var(--fx-texte) !important;
    font-size: 13.5px !important;
    padding: 8px 12px !important;
    border-radius: var(--fx-rayon-petit);
    background: transparent !important;
    line-height: 1.35;
}
.navbar-nav .dropdown-menu > li:hover > a,
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .col-12 li a:hover {
    background: var(--fx-orange-clair) !important;
    color: var(--fx-orange-fonce) !important;
}
.navbar-nav > li:hover > ul > li:hover > .col-4,
.navbar-nav > li:hover > ul > li:hover > .col-6 {
    border: 1px solid var(--fx-bord);
    border-radius: var(--fx-rayon);
    box-shadow: var(--fx-ombre-haute) !important;
    padding: 6px 0 !important;
}

/* profil + solde */
.profile_border { border: 0 !important; }
.navbar-profile > li > a {
    height: auto !important;
    margin: 10px 0 0 !important;
    padding: 6px 12px 6px 44px !important;
    border: 1px solid var(--fx-bord) !important;
    border-radius: 999px;
    position: relative;
    text-align: left;
    white-space: nowrap;
    background: var(--fx-surface);
}
.navbar-profile > li > a:before {
    content: "\f007";
    font-family: FontAwesome !important;
    position: absolute;
    left: 6px; top: 50%;
    width: 30px; height: 30px; margin-top: -15px;
    line-height: 30px; text-align: center;
    border-radius: 50%;
    background: var(--fx-bleu);
    color: #fff;
    font-size: 14px;
}
.navbar-profile > li:hover > a,
.navbar-profile > li > a:hover { border-color: var(--fx-bleu) !important; background: var(--fx-bleu-clair); }
.navbar-profile > li > a > span { display: flex; flex-direction: column; align-items: flex-start; }
.navbar-profile .profile_name { display: block; float: none; height: auto; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fx-texte); font-weight: 600; font-size: 13px; line-height: 1.25; }
.navbar-profile .profile_label { display: block; line-height: 1.2; margin: 1px 0 0 !important; height: auto; }
.navbar-profile .profile_label span { font-size: 11.5px !important; }
.navbar-profile .profile_label b { font-weight: 600; }
.navbar-profile > li > ul {
    border: 1px solid var(--fx-bord) !important;
    border-radius: var(--fx-rayon) !important;
    box-shadow: var(--fx-ombre-haute) !important;
    padding: 6px !important;
    margin-top: 6px;
    overflow: hidden;
}
.navbar-profile > li > ul li a { border-radius: var(--fx-rayon-petit); font-size: 13.5px !important; padding: 8px 12px !important; }
.navbar-profile > li > ul li a:hover { background: var(--fx-orange-clair) !important; color: var(--fx-orange-fonce) !important; }
.col-md-1_new { width: auto !important; min-width: 0; }

/* ------------------------------------------------------------------ bandeau de titre */
section.slice.color-one {
    background: transparent !important;
    border: 0 !important;
    padding: 22px 0 6px !important;
}
section.slice.color-one .border_box,
section.slice.color-one .w-section { background: transparent !important; border: 0 !important; box-shadow: none !important; }
section.slice.color-one .container { width: 100% !important; padding: 0 28px; }
section.slice.color-one h2 {
    color: var(--fx-texte) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
    margin: 4px 0 !important;
    padding: 0 !important;
    background: none !important;
    text-shadow: none !important;
}
section.slice.color-one h2:before {
    content: "";
    display: inline-block;
    width: 4px; height: 20px;
    margin-right: 10px;
    vertical-align: -3px;
    border-radius: 2px;
    background: var(--fx-orange);
}
section.slice.color-one .margin-t-51 { margin-top: 0 !important; }
section.slice.color-one .breadcrumb { background: transparent; margin: 0; padding: 6px 0; }

/* ------------------------------------------------------------------ zone de contenu */
.page-wrap { padding: 12px 13px 36px !important; background: transparent !important; }
.page-wrap .container, section.slice .container { width: 100% !important; max-width: none; }
section.slice, section.slice.color-three, .w-section, .w-section.inverse { background: transparent !important; }

/* ------------------------------------------------------------------ boutons */
.btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn .fa { margin-right: 6px; }
.btn .fa-lg { font-size: 1.05em; vertical-align: -1px; }

/* principal : enregistrer / rechercher */
.btn-line-parrot, .btn-success, .btn-primary, .btn-line-success {
    background: var(--fx-bleu) !important;
    border: 1px solid var(--fx-bleu) !important;
    color: #fff !important;
    padding: 8px 20px !important;
    min-width: 110px;
}
.btn-line-parrot:hover, .btn-success:hover, .btn-primary:hover, .btn-line-success:hover,
.btn-line-parrot:focus, .btn-success:focus, .btn-primary:focus, .btn-line-success:focus {
    background: var(--fx-bleu-fonce) !important;
    border-color: var(--fx-bleu-fonce) !important;
    color: #fff !important;
}
/* secondaire : annuler / effacer / fermer */
.btn-line-sky, .btn-close, .btn-line-purple {
    background: var(--fx-surface) !important;
    border: 1px solid var(--fx-bord-fort) !important;
    color: var(--fx-texte) !important;
    padding: 8px 20px !important;
    min-width: 110px;
}
.btn-line-sky:hover, .btn-close:hover, .btn-line-purple:hover,
.btn-line-sky:focus, .btn-close:focus { background: var(--fx-fond) !important; border-color: var(--fx-texte-doux) !important; color: var(--fx-texte) !important; }
.btn-close { border-radius: 8px !important; font-weight: 600; font-size: 13px; cursor: pointer; }
/* action de creation : orange de la marque */
.btn-line-warning, .btn-line-warning a, .btn-warning, .btn-orange {
    background: var(--fx-orange) !important;
    border: 1px solid var(--fx-orange) !important;
    color: #fff !important;
}
.btn-line-warning:hover, .btn-line-warning:hover a, .btn-warning:hover, .btn-orange:hover,
.btn-line-warning:focus, .btn-warning:focus { background: var(--fx-orange-fonce) !important; border-color: var(--fx-orange-fonce) !important; color: #fff !important; }
/* autres actions : contour neutre */
.btn-line-blue, .btn-xing, .btn-update, .btn-lightblue, .btn-three, .btn-two {
    background: var(--fx-surface) !important;
    border: 1px solid var(--fx-bord-fort) !important;
    color: var(--fx-bleu) !important;
}
.btn-line-blue:hover, .btn-xing:hover, .btn-update:hover, .btn-lightblue:hover, .btn-three:hover, .btn-two:hover {
    background: var(--fx-bleu-clair) !important;
    border-color: var(--fx-bleu) !important;
    color: var(--fx-bleu) !important;
}
/* destructif */
.btn-line-danger, .btn-danger {
    background: var(--fx-surface) !important;
    border: 1px solid #e6b8b8 !important;
    color: var(--fx-rouge) !important;
}
.btn-line-danger:hover, .btn-danger:hover, .btn-line-danger:focus, .btn-danger:focus {
    background: var(--fx-rouge) !important;
    border-color: var(--fx-rouge) !important;
    color: #fff !important;
}
/* boutons de ligne (modifier / supprimer ...) : pastilles carrees, couleur par action */
.btn-royelblue, .btn-royelblue:first-child, .btn-royelblue:last-child {
    display: inline-flex !important;
    float: none !important;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 1px solid var(--fx-bord) !important;
    background: var(--fx-surface) !important;
    color: var(--fx-bleu) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    vertical-align: middle;
}
.btn-royelblue .fa { margin: 0 !important; width: auto; font-size: 14px; }
.btn-royelblue:hover, .btn-royelblue:focus {
    background: var(--fx-bleu) !important;
    border-color: var(--fx-bleu) !important;
    color: #fff !important;
}
.btn-royelblue[title="Refill"], .btn-royelblue[title="Payment"] { color: var(--fx-vert) !important; }
.btn-royelblue[title="Refill"]:hover, .btn-royelblue[title="Payment"]:hover { background: var(--fx-vert) !important; border-color: var(--fx-vert) !important; color: #fff !important; }
.btn-royelblue[title="Delete"], .btn-royelblue[title="delete"] { color: var(--fx-rouge) !important; }
.btn-royelblue[title="Delete"]:hover, .btn-royelblue[title="delete"]:hover { background: var(--fx-rouge) !important; border-color: var(--fx-rouge) !important; color: #fff !important; }
.flexigrid div.bDiv td div { word-spacing: 2px; }

/* boutons du bandeau (Rechercher / Mise a jour groupee) */
#show_search.btn, #updatebar {
    padding: 8px 16px !important;
    margin-top: 2px !important;
    margin-left: 8px !important;
}
#show_search.btn {
    background: var(--fx-surface) !important;
    border: 1px solid var(--fx-bord-fort) !important;
    color: var(--fx-bleu) !important;
}
#show_search.btn:hover { background: var(--fx-bleu-clair) !important; border-color: var(--fx-bleu) !important; }
#show_search.btn font { color: inherit !important; }

/* ------------------------------------------------------------------ tableaux flexigrid */
.flexigrid {
    background: var(--fx-surface) !important;
    border: 1px solid var(--fx-bord) !important;
    border-radius: var(--fx-rayon) !important;
    box-shadow: var(--fx-ombre) !important;
    overflow: hidden;
    font-size: 13.5px !important;
}
.flexigrid div.tDiv {
    background: var(--fx-surface) !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--fx-bord) !important;
    padding: 12px 14px !important;
    overflow: visible;
}
.flexigrid div.tDiv2 { padding: 0 !important; float: none; display: flex; flex-wrap: wrap; gap: 8px; }
.flexigrid div.fbutton { float: none !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; }
.flexigrid div.fbutton div { float: none !important; padding: 0 !important; }
.flexigrid div.fbutton span.btn,
.flexigrid div.fbutton span {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 7px 14px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    min-width: 0;
    background-image: none !important;
}
.flexigrid div.fbutton span .fa { margin: 0 !important; }
.flexigrid div.fbutton:hover, .flexigrid div.fbutton.fbOver { background: none !important; border: 0 !important; }

/* en-tete de colonnes */
.flexigrid div.hDiv {
    background: #f7f9fb !important;
    border: 0 !important;
    border-bottom: 1px solid var(--fx-bord) !important;
}
.flexigrid div.hDiv th, .flexigrid div.hDiv th div {
    background: transparent !important;
    border: 0 !important;
    color: var(--fx-texte-doux) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    height: auto !important;
    line-height: 1.3 !important;
}
.flexigrid div.hDiv th { padding: 0 !important; }
.flexigrid div.hDiv th div { padding-left: 5px !important; padding-right: 5px !important; }
.flexigrid input.ace[type=checkbox] + .lbl, .flexigrid input[type=checkbox] { vertical-align: middle; margin: 0 !important; }
.flexigrid div.hDiv th.sorted, .flexigrid div.hDiv th.sorted div { color: var(--fx-bleu) !important; }
.flexigrid div.hDiv th.thOver div, .flexigrid div.hDiv th.thOver { background: #eef2f5 !important; border: 0 !important; }
.flexigrid div.hDiv th div.sdesc, .flexigrid div.hDiv th div.sasc { background-position: right center !important; padding-right: 16px !important; }

/* corps */
.flexigrid div.bDiv { background: var(--fx-surface) !important; border: 0 !important; }
.flexigrid div.hDivBox, .flexigrid div.hDiv table, .flexigrid div.bDiv table { width: 100% !important; }
.flexigrid div.bDiv td {
    border: 0 !important;
    border-bottom: 1px solid #edf1f4 !important;
    color: var(--fx-texte) !important;
    background: transparent !important;
    vertical-align: middle !important;
}
.flexigrid div.bDiv td div { padding-top: 9px !important; padding-bottom: 9px !important; }
.flexigrid div.bDiv tr.erow td { background: #fbfcfd !important; }
.flexigrid div.bDiv tr:hover td,
.flexigrid div.bDiv tr.trOver td { background: #f1f6f9 !important; }
.flexigrid div.bDiv tr.trSelected td,
.flexigrid div.bDiv tr.trSelected:hover td { background: var(--fx-orange-clair) !important; border-bottom-color: #f6d5c8 !important; }
.flexigrid div.bDiv a { color: var(--fx-bleu) !important; font-weight: 600; }
.flexigrid div.bDiv a:hover { color: var(--fx-orange) !important; }
.flexigrid div.bDiv td a.btn-royelblue { font-weight: normal; }
.flexigrid div.nBtn { display: none !important; }
.flexigrid div.cDrag { display: none !important; }

/* pastilles de statut */
.label {
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 9px !important;
    letter-spacing: .01em;
    text-shadow: none !important;
    line-height: 1.3 !important;
}
.label.arrowed-in, .label.arrowed, .label.arrowed-right, .label.arrowed-in-right { margin: 0 !important; }
.label.arrowed-in:before, .label.arrowed:before, .label.arrowed-in:after, .label.arrowed:after,
.label.arrowed-right:after, .label.arrowed-in-right:after { display: none !important; }
.label-success { background: var(--fx-vert-clair) !important; color: var(--fx-vert) !important; }
.label-inverse, .label-grey { background: #eceff2 !important; color: #5c6b75 !important; }
.label-danger, .label-important { background: var(--fx-rouge-clair) !important; color: var(--fx-rouge) !important; }
.label-warning { background: #fdf3e1 !important; color: var(--fx-ambre) !important; }
.label-info, .label-primary { background: var(--fx-bleu-clair) !important; color: var(--fx-bleu) !important; }
.label-default { background: #eef2f5 !important; color: var(--fx-texte-doux) !important; font-weight: 600 !important; }
.flexigrid .label-default { font-size: 10px !important; padding: 2px 7px !important; margin-top: 1px; }

/* pagination */
.flexigrid div.pDiv {
    background: #f9fafb !important;
    border: 0 !important;
    border-top: 1px solid var(--fx-bord) !important;
    padding: 8px 12px !important;
    color: var(--fx-texte-doux);
}
.flexigrid div.pDiv2 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 !important; }
.flexigrid div.pDiv .pGroup { float: none !important; display: flex; align-items: center; gap: 4px; }
.flexigrid div.pDiv .btnseparator { display: none !important; }
.flexigrid div.pDiv .pButton {
    width: 32px !important; height: 32px !important;
    border: 1px solid var(--fx-bord) !important;
    border-radius: 7px !important;
    background-color: var(--fx-surface) !important;
    margin: 0 !important;
    display: flex; align-items: center; justify-content: center;
}
.flexigrid div.pDiv .pButton:hover, .flexigrid div.pDiv .pButton.pBtnOver { border-color: var(--fx-bleu) !important; background-color: var(--fx-bleu-clair) !important; }
.flexigrid div.pDiv .pButton span { margin: 0 !important; float: none !important; }
.flexigrid div.pDiv input {
    width: 44px !important; height: 32px !important;
    border: 1px solid var(--fx-bord-fort) !important;
    border-radius: 7px !important;
    text-align: center;
    background: var(--fx-surface) !important;
    margin: 0 6px !important;
    box-shadow: none !important;
}
.flexigrid div.pDiv .pcontrol, .flexigrid div.pDiv .pPageStat { color: var(--fx-texte-doux); font-size: 13px; margin: 0 8px !important; float: none !important; }
.flexigrid div.pDiv select.form-control { height: 32px !important; border-radius: 7px !important; padding: 4px 8px !important; margin: 0 !important; }
.flexigrid div.pDiv .pReload { margin-left: 8px !important; }

/* tableaux bootstrap hors flexigrid (tableau de bord, recapitulatifs) */
.table { background: var(--fx-surface); }
.table > thead > tr > th, .table > tbody > tr > th, table.flexigrid th {
    background: #f7f9fb !important;
    color: var(--fx-texte-doux) !important;
    font-size: 11.5px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700 !important;
    border-color: var(--fx-bord) !important;
}
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > thead > tr > th { border-color: var(--fx-bord) !important; }
table.flexigrid { border-radius: 8px !important; box-shadow: none !important; }
table.flexigrid td { padding: 9px 10px !important; }

/* ------------------------------------------------------------------ formulaires */
.form-control, input[type=text].form-control, input[type=password].form-control, select.form-control, textarea.form-control,
.page-wrap input[type=text], .page-wrap input[type=password], .page-wrap input[type=email], .page-wrap select, .page-wrap textarea {
    border: 1px solid var(--fx-bord-fort) !important;
    border-radius: var(--fx-rayon-petit) !important;
    background-color: var(--fx-surface) !important;
    box-shadow: none !important;
    color: var(--fx-texte) !important;
    font-size: 13.5px !important;
    min-height: 36px;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .page-wrap input:focus, .page-wrap select:focus, .page-wrap textarea:focus {
    border-color: var(--fx-orange) !important;
    box-shadow: 0 0 0 3px rgba(233, 78, 27, .15) !important;
    outline: 0 !important;
}
.form-control[disabled], .form-control[readonly] { background: #f5f7f9 !important; color: var(--fx-texte-doux) !important; }

/* listes deroulantes bootstrap-select : un seul cadre, texte normal */
.bootstrap-select.form-control { border: 0 !important; padding: 0 !important; box-shadow: none !important; background: transparent !important; min-height: 0; }
.bootstrap-select > .btn.dropdown-toggle, .bootstrap-select > .btn-default {
    background: var(--fx-surface) !important;
    border: 1px solid var(--fx-bord-fort) !important;
    border-radius: var(--fx-rayon-petit) !important;
    color: var(--fx-texte) !important;
    font-weight: 400 !important;
    font-size: 13.5px !important;
    height: 36px;
    padding: 6px 12px !important;
    min-width: 0;
}
.bootstrap-select.open > .btn.dropdown-toggle, .bootstrap-select > .btn.dropdown-toggle:focus { border-color: var(--fx-orange) !important; box-shadow: 0 0 0 3px rgba(233, 78, 27, .15) !important; outline: 0 !important; }
.bootstrap-select .dropdown-menu { border: 1px solid var(--fx-bord) !important; border-radius: var(--fx-rayon) !important; box-shadow: var(--fx-ombre-haute) !important; padding: 4px !important; }
.bootstrap-select .dropdown-menu li a { border-radius: 6px; padding: 6px 10px !important; }
.bootstrap-select .dropdown-menu li.selected a, .bootstrap-select .dropdown-menu li a:hover { background: var(--fx-orange-clair) !important; color: var(--fx-orange-fonce) !important; }

.bootstrap-select > select, .bootstrap-select > select.form-control {
    position: absolute !important; left: 0 !important; bottom: 0 !important;
    width: 1px !important; height: 1px !important; min-height: 0 !important;
    padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none;
}

/* blocs de formulaire (fieldset) en cartes */
.page-wrap fieldset, .pop_md fieldset {
    background: var(--fx-surface) !important;
    border: 1px solid var(--fx-bord) !important;
    border-radius: var(--fx-rayon) !important;
    box-shadow: var(--fx-ombre);
    padding: 54px 20px 14px !important;
    margin: 0 0 16px !important;
    position: relative;
}
.page-wrap legend, .pop_md legend {
    position: absolute;
    top: 0; left: 0; right: 0;
    margin: 0 !important;
    padding: 12px 20px !important;
    width: 100% !important;
    border: 0 !important;
    border-bottom: 1px solid var(--fx-bord) !important;
    border-radius: var(--fx-rayon) var(--fx-rayon) 0 0;
    background: #f9fafb !important;
    color: var(--fx-bleu) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}
.page-wrap fieldset li, .pop_md fieldset li { list-style: none; padding: 5px 0 !important; min-height: 0 !important; display: flex; align-items: center; flex-wrap: wrap; float: none; }
.page-wrap fieldset li > label.col-md-3, .pop_md fieldset li > label.col-md-3 { flex: 0 0 34%; max-width: 34%; float: none; padding-top: 0 !important; margin: 0 !important; }
.page-wrap fieldset li > .form-control, .pop_md fieldset li > .form-control, .page-wrap fieldset li > .bootstrap-select, .pop_md fieldset li > .bootstrap-select { flex: 1 1 0; float: none; max-width: 60%; margin-top: 0 !important; margin-bottom: 0 !important; }
.page-wrap fieldset li > label, .pop_md fieldset li > label { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.35; }
.page-wrap fieldset li > .error_div, .pop_md fieldset li > .error_div { flex: 0 0 auto; }
/* champs sans .form-control (form_textarea d'ASTPP, champs .text.field) : meme mise en forme */
.page-wrap fieldset li > textarea, .pop_md fieldset li > textarea,
.page-wrap fieldset li > input.field, .pop_md fieldset li > input.field,
.page-wrap fieldset li > select:not(.form-control), .pop_md fieldset li > select:not(.form-control) {
    flex: 1 1 0; float: none; max-width: 60%; width: 100% !important; margin: 0 !important;
    border: 1px solid var(--fx-bord-fort) !important; border-radius: var(--fx-rayon-petit) !important;
    background: var(--fx-surface) !important; color: var(--fx-texte) !important;
    font-size: 13.5px !important; padding: 8px 10px !important; box-shadow: none !important; min-height: 36px;
}
.page-wrap fieldset li > textarea, .pop_md fieldset li > textarea { min-height: 70px; resize: vertical; line-height: 1.4; }
.page-wrap fieldset li > textarea:focus, .pop_md fieldset li > textarea:focus,
.page-wrap fieldset li > input.field:focus, .pop_md fieldset li > input.field:focus { border-color: var(--fx-orange) !important; box-shadow: 0 0 0 3px rgba(233, 78, 27, .15) !important; outline: 0; }
/* global-style impose .popup .col-md-5 { width: 69.667% !important } : dans une modale, le champ suit sa ligne */
#facebox .pop_md fieldset li > .col-md-5, #facebox .pop_md fieldset li > .bootstrap-select { width: 100% !important; }
/* lignes ne contenant que des champs caches (form_hidden) : aucune place */
.page-wrap fieldset li:has(> input[type=hidden]:only-child), .pop_md fieldset li:has(> input[type=hidden]:only-child), fieldset li.fx-ligne-cachee { display: none !important; }
.page-wrap fieldset li > label, .pop_md fieldset li > label {
    color: var(--fx-texte) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}
.page-wrap fieldset li > label span[style*="black"], .pop_md fieldset li > label span[style*="black"] { color: var(--fx-orange) !important; }
.page-wrap fieldset li .form-control, .pop_md fieldset li .form-control { width: 100% !important; }
.pop_md .col-md-6 > .col-md-12 { padding: 0 8px !important; }
.pop_md center > div, .pop_md center { display: block; }
.pop_md center .btn, .page-wrap form center .btn { margin: 0 5px !important; }

/* barre de recherche */
#search_bar, #update_bar { cursor: default !important; }
#search_bar fieldset, #update_bar fieldset { padding-top: 54px !important; }
#search_bar .search_label, .search_label {
    color: var(--fx-texte-doux) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none;
    margin-bottom: 4px !important;
}
#search_bar .col-md-3, #update_bar .col-md-4 { padding: 0 8px 10px !important; }
#search_bar .col-md-3 .form-control, #search_bar .col-md-3 input { width: 100% !important; }
#search_bar .margin-t-20, #update_bar .margin-t-20 { margin-top: 8px !important; }
#global_clearsearch_filter, #global_clearbatchupdate_filter {
    position: absolute;
    top: 9px; right: 12px;
    min-width: 0 !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    z-index: 2;
}
#search_bar > form > div > ul, #search_bar ul.padding-15 { padding: 0 !important; }
#search_bar fieldset .col-md-12, #update_bar fieldset .col-md-12 { position: static !important; }
#search_bar .margin-t-20 { display: flex; justify-content: flex-end; gap: 8px; padding: 0 8px !important; }
#search_bar .margin-t-20 .btn { float: none !important; margin: 0 !important; }

/* erreurs de validation */
.popup_error, .error_div .error { color: var(--fx-rouge) !important; font-size: 12px; }

/* cases a cocher ASTPP (.ace) */
input.ace[type=checkbox] + .lbl:before, input.ace[type=radio] + .lbl:before {
    border-radius: 4px !important;
    border-color: var(--fx-bord-fort) !important;
    box-shadow: none !important;
}
input.ace[type=checkbox]:checked + .lbl:before { background: var(--fx-orange) !important; border-color: var(--fx-orange) !important; color: #fff !important; }

/* ------------------------------------------------------------------ panneaux (tableau de bord) */
.panel {
    border: 1px solid var(--fx-bord) !important;
    border-radius: var(--fx-rayon) !important;
    box-shadow: var(--fx-ombre) !important;
    overflow: hidden;
    background: var(--fx-surface) !important;
}
.panel-default > .panel-heading, .panel-heading {
    background: var(--fx-surface) !important;
    border-bottom: 1px solid var(--fx-bord) !important;
    color: var(--fx-texte) !important;
    padding: 12px 16px !important;
}
.panel-title, .panel-heading h3 { color: var(--fx-texte) !important; font-size: 15px !important; font-weight: 700 !important; }
.panel-title .fa { color: var(--fx-orange); margin-right: 4px; }
.panel-heading .back_strip {
    background: var(--fx-bleu-clair) !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 999px;
    color: var(--fx-bleu) !important;
    padding: 4px 12px !important;
    margin-left: 6px;
    width: auto !important;
}
.panel-heading .back_strip:first-child { background: var(--fx-orange-clair) !important; color: var(--fx-orange-fonce) !important; }
#month_total_info { color: var(--fx-bleu) !important; font-weight: 600 !important; }
#month_year_name { color: var(--fx-orange-fonce) !important; font-weight: 600; }
.panel-heading select.form-control { min-height: 30px; height: 30px !important; padding: 2px 8px !important; }
.panel-body { padding: 16px !important; }

/* ------------------------------------------------------------------ fiches compte (left_panel_master.php) */
/* bandeau fil d'Ariane (.border_box, sombre a l'origine) */
.border_box {
    background: transparent !important;
    border: 0 !important;
}
#main-wrapper .border_box, .tabcontents .border_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 12px !important;
    margin: 0 0 4px;
}
#main-wrapper .border_box > .pull-left, #main-wrapper .border_box > .pull-right { float: none !important; }
.page-wrap .breadcrumb {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
}
.page-wrap .breadcrumb > li { color: var(--fx-texte-doux); }
.page-wrap .breadcrumb > li + li:before { color: var(--fx-bord-fort) !important; padding: 0 8px !important; }
.page-wrap .breadcrumb li a { color: var(--fx-texte-doux) !important; font-weight: 500; }
.page-wrap .breadcrumb li a:hover { color: var(--fx-orange) !important; }
.page-wrap .pull-left > .breadcrumb > li.active a,
.page-wrap .pull-left > .breadcrumb > li.active {
    color: var(--fx-texte) !important;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
}
/* bouton Retour */
.page-wrap .pull-right > .breadcrumb > li.active,
.page-wrap .breadcrumb > li.pull-right { float: none !important; }
.page-wrap .pull-right > .breadcrumb > li > a,
section.slice.color-one .breadcrumb li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--fx-bord-fort);
    border-radius: 8px;
    background: var(--fx-surface);
    color: var(--fx-bleu) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.page-wrap .pull-right > .breadcrumb > li > a:hover,
section.slice.color-one .breadcrumb li a:hover { background: var(--fx-bleu-clair); border-color: var(--fx-bleu); color: var(--fx-bleu) !important; }
.page-wrap .pull-right > .breadcrumb .fa-fast-backward:before { content: "\f060"; }

/* menu lateral : carte claire au lieu du bandeau sombre */
.sidebar {
    background: var(--fx-surface) !important;
    border: 1px solid var(--fx-bord);
    border-radius: var(--fx-rayon);
    box-shadow: var(--fx-ombre);
    top: 12px !important;
    bottom: auto !important;
    left: 13px !important;
    width: 220px !important;
    padding: 8px;
    z-index: 20;
}
.sidebar:before { display: none !important; }
.sidebar .sidemenu li { border-radius: var(--fx-rayon-petit); margin: 1px 0; background: transparent !important; }
.sidebar .sidemenu li a {
    color: var(--fx-texte) !important;
    font-size: 13.5px !important;
    padding: 8px 12px !important;
    border-radius: var(--fx-rayon-petit);
    border-left: 3px solid transparent;
}
.sidebar .sidemenu li:hover a { background: var(--fx-fond) !important; color: var(--fx-bleu) !important; }
.sidebar .sidemenu li.active a {
    background: var(--fx-orange-clair) !important;
    color: var(--fx-orange-fonce) !important;
    border-left-color: var(--fx-orange);
    font-weight: 600;
}
#main-wrapper { padding-top: 0 !important; min-height: 0 !important; }
#main-wrapper > #content > .row { margin-left: 0 !important; margin-right: 0 !important; }
.tabcontents { margin-top: 0 !important; }
div.tabcontents section { border: 0 !important; }
#main-wrapper .padding-15 { padding: 0 !important; }
#main-wrapper .content_border, .content_border {
    border: 0 !important;
    background: transparent !important;
    width: 100%;
}
#main-wrapper .pop_md { padding: 0 !important; margin-top: 0 !important; }
#main-wrapper .content_border.col-md-12 { padding-left: 0 !important; padding-right: 0 !important; }
.nav_sidetoggle.white_bar {
    float: none;
    display: none;
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid var(--fx-bord-fort) !important;
    border-radius: 8px;
    background: var(--fx-surface) !important;
}
.nav_sidetoggle.white_bar .icon-bar { background: var(--fx-bleu) !important; }
@media (min-width: 1200px) {
    #main-wrapper { padding-left: 246px !important; }
}
@media (max-width: 1199px) {
    .nav_sidetoggle.white_bar { display: block; }
    .sidebar { position: absolute !important; top: 60px !important; box-shadow: var(--fx-ombre-haute); }
}

/* ------------------------------------------------------------------ chargement des graphes (tableau de bord) */
#call-graph .loading, #call-count .loading {
    margin: 0 !important;
    width: 100%;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--fx-texte-doux);
    font-size: 13.5px;
}
#call-count .loading { min-height: 200px; }
#call-graph .loading ~ .loading, #call-count .loading ~ .loading { display: none; }
#call-graph .ball-clip-rotate > div, #call-count .ball-clip-rotate > div {
    display: block;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    border-radius: 50%;
    border: 4px solid var(--fx-bleu-clair) !important;
    border-top-color: var(--fx-orange) !important;
    background: none !important;
    -webkit-animation: fx-rotation .8s linear infinite !important;
    animation: fx-rotation .8s linear infinite !important;
}
#call-graph .loading:after, #call-count .loading:after { content: "Calcul des statistiques en cours\2026"; }
@-webkit-keyframes fx-rotation { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes fx-rotation { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
.fx-graphe-erreur {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--fx-texte-doux);
    font-size: 13.5px;
    text-align: center;
}
.fx-graphe-erreur .fa { font-size: 26px; color: var(--fx-ambre); }
.fx-graphe-erreur .btn { min-width: 0; padding: 6px 14px !important; }

/* ------------------------------------------------------------------ cellules des listes */
/* badge du type de compte (C client, P fournisseur, A admin, S sous-admin) */
.flx_font {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 20px !important; height: 20px !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    vertical-align: middle;
    float: none !important;
}
.flx_magenta { background: var(--fx-bleu-clair) !important; color: var(--fx-bleu) !important; }
.flx_blue { background: var(--fx-orange-clair) !important; color: var(--fx-orange-fonce) !important; }
.flx_pink { background: #ece9fb !important; color: #5a4fcf !important; }
.flx_purple { background: #fbe9f3 !important; color: #b3337a !important; }
.flexigrid div.bDiv td a[title="Edit"] > span, .flexigrid div.bDiv td a[title="Update"] > span { vertical-align: middle; }

/* dates en deux lignes et dates nulles (finix-theme.js) */
.flexigrid .fx-date { display: block; line-height: 1.3; }
.flexigrid .fx-heure { display: block; line-height: 1.3; font-size: 11.5px; color: var(--fx-texte-doux); }
.flexigrid .fx-vide { color: #b3bec6; }
.flexigrid div.hDiv th div { line-height: 1.25 !important; }

/* interrupteur Active / Inactive */
.onoffswitch { float: none !important; width: auto !important; display: inline-block; }
.onoffswitch-label, label.onoffswitch-label {
    display: inline-block !important;
    width: 78px !important;
    height: 24px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    overflow: hidden;
    vertical-align: middle;
    box-shadow: inset 0 0 0 1px rgba(16, 38, 51, .08);
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    width: 50% !important;
    height: 24px !important;
    line-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-family: var(--fx-police) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}
.onoffswitch-inner:before { background: var(--fx-vert-clair) !important; color: var(--fx-vert) !important; }
.onoffswitch-inner:after { background: #eceff2 !important; color: #6b7a84 !important; }
.onoffswitch-inner:before { content: "\25CF  Active" !important; }
.onoffswitch-inner:after { content: "\25CB  Inactive" !important; }

/* chargement du tableau : voile + anneau au lieu du blanc seul */
.flexigrid div.gBlock { background: rgba(255, 255, 255, .7) !important; }
.flexigrid div.gBlock:after {
    content: "";
    position: absolute;
    left: 50%; top: 80px;
    width: 36px; height: 36px;
    margin-left: -18px;
    border-radius: 50%;
    border: 4px solid var(--fx-bleu-clair);
    border-top-color: var(--fx-orange);
    -webkit-animation: fx-rotation .8s linear infinite;
    animation: fx-rotation .8s linear infinite;
}

/* ------------------------------------------------------------------ fenetres modales (facebox) */
#facebox_overlay.facebox_overlayBG { background: rgba(16, 38, 51, .55) !important; opacity: 1 !important; z-index: 1001 !important; }
#facebox .popup {
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 60px rgba(16, 38, 51, .30) !important;
    overflow: hidden;
    background: var(--fx-surface);
}
#facebox .content {
    display: block !important;
    padding: 0 !important;
    border-radius: 14px !important;
    background: var(--fx-surface) !important;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
/* en-tete de la modale (section.slice.gray des vues popup) */
#facebox section.slice.gray, #facebox .slice.gray {
    background: var(--fx-surface) !important;
    border-bottom: 1px solid var(--fx-bord) !important;
    padding: 0 !important;
    margin: 0 !important;
}
#facebox section.slice.gray .col-md-12 { margin: 0 !important; padding: 18px 56px 16px 22px !important; float: none; }
#facebox section.slice.gray .col-md-10, #facebox section.slice.gray b, #facebox section.slice.gray h2 {
    color: var(--fx-texte) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    width: auto; float: none;
}
#facebox section.slice.gray .col-md-10:before {
    content: "";
    display: inline-block;
    width: 4px; height: 16px;
    margin-right: 10px;
    vertical-align: -2px;
    border-radius: 2px;
    background: var(--fx-orange);
}
#facebox section.color-three, #facebox .slice.color-three { background: var(--fx-surface) !important; padding: 0 !important; }
#facebox .pop_md { padding: 18px 22px 4px !important; margin: 0 !important; float: none; width: 100%; }
#facebox .pop_md fieldset { box-shadow: none; }
#facebox .pop_md center .col-md-12, #facebox form center > div {
    margin: 4px 0 18px !important;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 !important;
}
#facebox .pop_md center .btn { margin: 0 !important; }
/* croix de fermeture */
#facebox .close {
    top: 14px !important; right: 14px !important;
    width: 32px; height: 32px;
    padding: 0 !important;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--fx-texte-doux) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    z-index: 5;
}
#facebox .close img { display: none !important; }
#facebox .close:before { content: "\f00d"; font-family: FontAwesome !important; font-size: 17px; }
#facebox .close:hover { background: var(--fx-fond); color: var(--fx-texte) !important; }
/* chargement de la modale : anneau FinixPhone au lieu du logo ASTPP */
#facebox .loading {
    min-height: 150px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--fx-texte-doux);
    font-size: 13.5px;
}
#facebox .loading:after { content: "Chargement\2026"; }
#facebox .ball-clip-rotate > div {
    display: block !important;
    width: 40px !important; height: 40px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 4px solid var(--fx-bleu-clair) !important;
    border-top-color: var(--fx-orange) !important;
    background: none !important;
    -webkit-animation: fx-rotation .8s linear infinite !important;
    animation: fx-rotation .8s linear infinite !important;
}

/* ------------------------------------------------------------------ pages particulieres */
/* recherche rapide des onglets de fiche (div#show_search sans .btn) */
div#show_search:not(.btn) { margin: 0 0 12px !important; padding: 0 !important; background: none !important; border: 0 !important; float: right; }
#left_panel_quick_search {
    width: 280px !important; max-width: 100%;
    padding-left: 34px !important;
    background: var(--fx-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2362727d' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center !important;
    border-radius: 999px !important;
}
/* barre d'outils vide d'un tableau (aucun bouton) */
.flexigrid div.tDiv.fx-vide, .flexigrid div.tDiv:has(> .tDiv2:empty) { display: none !important; }
/* textes pales d'origine (.color-three = #9ab2cc) */
.page-wrap .color-three, .page-wrap .color-three p, #facebox .color-three { color: var(--fx-texte) !important; }
.page-wrap .color-three label, #facebox .color-three label { color: var(--fx-texte); }
/* cadres w-box (pages d'import, parametres e-mail) */
.page-wrap .w-box {
    background: var(--fx-surface) !important;
    border: 1px solid var(--fx-bord) !important;
    border-radius: var(--fx-rayon) !important;
    box-shadow: var(--fx-ombre) !important;
}
.page-wrap .w-box h2, .page-wrap .w-box h3, .page-wrap .w-box h4 { color: var(--fx-bleu) !important; font-weight: 700 !important; }
.page-wrap .w-box p { color: var(--fx-texte-doux); }
/* tableaux de facture : bandeaux bleu fonce en ligne -> en-tetes clairs */
.page-wrap tr[style*="375c7c"], #facebox tr[style*="375c7c"] {
    background: #eef3f6 !important;
    color: var(--fx-texte) !important;
}
.page-wrap tr[style*="375c7c"] td, .page-wrap tr[style*="375c7c"] th { border-color: var(--fx-bord) !important; font-weight: 600; }
.invoice_table3, .invoice_table4, .invoice_table1 { border-color: var(--fx-bord) !important; }
.page-wrap table.datatable th, #facebox table.datatable th, .page-wrap tr[style*="375c7c"] th {
    background: #eef3f6 !important;
    color: var(--fx-texte-doux) !important;
    font-size: 11.5px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.page-wrap .col-md-12[style*="border: 1px solid #ccc"] { border-color: var(--fx-bord) !important; border-radius: var(--fx-rayon) !important; background: var(--fx-surface); box-shadow: var(--fx-ombre); }
/* rechargement de compte (user_payment) */
.page-wrap fieldset[style*="87, 127, 141"] { border: 1px solid var(--fx-bord) !important; padding: 10px 20px 20px !important; }
.page-wrap h1[style*="30A1E9"] { color: var(--fx-texte) !important; font-size: 22px !important; font-weight: 700 !important; }
/* blocs jQuery UI d'origine (portlet) */
.portlet.ui-widget, .portlet.ui-widget-content {
    background: var(--fx-surface) !important;
    border: 1px solid var(--fx-bord) !important;
    border-radius: var(--fx-rayon) !important;
    box-shadow: none;
    color: var(--fx-texte) !important;
    margin: 0 0 12px;
}
.portlet-header.ui-widget-header, .ui-widget-header {
    background: #f9fafb !important;
    border: 0 !important;
    border-bottom: 1px solid var(--fx-bord) !important;
    border-radius: var(--fx-rayon) var(--fx-rayon) 0 0 !important;
    color: var(--fx-texte) !important;
    font-weight: 700;
    padding: 12px 18px !important;
}
.page-wrap > .portlet-header.ui-widget-header, section.page-wrap > .portlet-header { background: transparent !important; border: 0 !important; padding: 0 0 10px !important; }
.portlet-header .ui-icon { display: none !important; }
.portlet .portlet-content { padding: 14px 18px !important; }
.portlet ul { padding: 0; margin: 0; width: auto !important; }
.portlet fieldset { width: auto !important; }
.portlet legend span { color: var(--fx-bleu) !important; font-size: 14px !important; }
input.ui-button, .ui-button, button.ui-button {
    background: var(--fx-bleu) !important;
    border: 1px solid var(--fx-bleu) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 7px 16px !important;
    cursor: pointer;
}
input[type=file].ui-button { background: var(--fx-surface) !important; color: var(--fx-texte) !important; border-color: var(--fx-bord-fort) !important; font-weight: 400 !important; }
/* champs et boutons sans classe dans les fenetres modales */
#facebox .content { padding: 0 !important; }
#facebox .content > .portlet { border: 0 !important; border-radius: 0 !important; margin: 0; }
#facebox .content > .portlet > .portlet-header { border-radius: 0 !important; padding: 18px 56px 16px 22px !important; font-size: 17px; background: var(--fx-surface) !important; }
#facebox .content > .portlet > .portlet-content { padding: 18px 22px !important; }
#facebox fieldset:not(.fx-x) { border: 1px solid var(--fx-bord) !important; border-radius: var(--fx-rayon) !important; padding: 14px 18px !important; margin: 0 0 14px !important; }
#facebox fieldset > legend:not(.fx-x) { width: auto !important; border: 0 !important; padding: 0 6px !important; margin: 0 !important; font-size: 14px !important; color: var(--fx-bleu) !important; background: none !important; position: static !important; }
#facebox .pop_md fieldset > legend { position: absolute !important; width: 100% !important; padding: 12px 20px !important; background: #f9fafb !important; border-bottom: 1px solid var(--fx-bord) !important; }
#facebox .pop_md fieldset { padding: 54px 20px 14px !important; }
#facebox input[type=text]:not(.form-control), #facebox input[type=password]:not(.form-control), #facebox select:not(.form-control), #facebox textarea:not(.form-control) {
    border: 1px solid var(--fx-bord-fort);
    border-radius: var(--fx-rayon-petit);
    padding: 6px 10px;
    min-height: 34px;
    background: var(--fx-surface);
    color: var(--fx-texte);
}
#facebox li { list-style: none; }
#facebox label.desc { font-weight: 500; margin-right: 10px; }
#facebox button:not(.btn):not(.close), #facebox input[type=submit]:not(.btn), #facebox input[type=button]:not(.btn) {
    background: var(--fx-bleu);
    border: 1px solid var(--fx-bleu);
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 7px 16px;
    margin: 0 4px 0 0;
}
/* champ fichier natif */
input[type=file] { font-size: 13px; }
input[type=file]::-webkit-file-upload-button, input[type=file]::file-selector-button {
    border: 1px solid var(--fx-bord-fort);
    border-radius: 7px;
    background: var(--fx-fond);
    color: var(--fx-texte);
    padding: 5px 12px;
    margin-right: 10px;
    cursor: pointer;
}

/* ------------------------------------------------------------------ pages publiques (mot de passe oublie, inscription) */
body.fx-public .forget_center, body.fx-public .w-section.inverse { margin: 0 !important; }
body.fx-public .sign-in-wr .col-md-12 { float: none; }
body.fx-public .sign-in-wr > div > .col-md-12:first-child { display: flex; align-items: center; justify-content: space-between; padding: 0 !important; margin-bottom: 18px; }
body.fx-public .sign-in-wr > div > .col-md-12:first-child > a, body.fx-public .sign-in-wr > div > .col-md-12:first-child > div { width: auto !important; float: none !important; padding: 0 !important; }
body.fx-public .sign-in-wr > div > br { display: none; }
body.fx-public .sign-in-wr .forget_login { margin: 0 !important; width: auto !important; }
body.fx-public .sign-in-wr form { padding: 0 !important; }
body.fx-public .sign-in-wr .input-group { padding: 0 !important; margin: 14px 0 0 !important; display: flex !important; width: 100% !important; }
body.fx-public .sign-in-wr .input-group-addon {
    width: 44px; display: flex; align-items: center; justify-content: center;
    background: #f9fafb !important; border: 1px solid var(--fx-bord-fort) !important; border-right: 0 !important;
    border-radius: 10px 0 0 10px !important; color: var(--fx-texte-doux);
}
body.fx-public .sign-in-wr .input-group .form-control {
    height: 46px !important; border-radius: 0 10px 10px 0 !important; background: #f9fafb !important; font-size: 14.5px !important;
}
body.fx-public .sign-in-wr .input-group .btn-login { margin-top: 4px; }
body.fx-public .forget_login, body.fx-public .sign-in-wr .btn-success {
    background: var(--fx-surface) !important; color: var(--fx-bleu) !important; border: 1px solid var(--fx-bord-fort) !important;
    min-width: 0 !important; padding: 7px 12px !important;
}
body.fx-public .forget_login:hover { background: var(--fx-bleu-clair) !important; }
body.fx-public #logo, body.fx-public .sign-in-wr img { height: 44px !important; width: auto !important; }

/* ------------------------------------------------------------------ rapport CDR clients (reports/customerReport) */
.fx-rapport { margin: 0 15px 14px; }
.fx-rapport-barre { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.fx-periode { font-size: 15px; font-weight: 700; color: var(--fx-texte); margin-right: auto; }
.fx-periode .fa { color: var(--fx-orange); margin-right: 4px; }
.fx-periodes { display: inline-flex; background: var(--fx-surface); border: 1px solid var(--fx-bord); border-radius: 10px; padding: 3px; gap: 2px; }
.fx-periodes button, .fx-filtres {
    border: 0; background: transparent; color: var(--fx-texte-doux);
    font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer;
}
.fx-periodes button:hover { color: var(--fx-bleu); background: var(--fx-fond); }
.fx-periodes button.actif { background: var(--fx-bleu); color: #fff; }
.fx-filtres { border: 1px solid var(--fx-bord-fort); background: var(--fx-surface); color: var(--fx-bleu); }
.fx-filtres:hover { background: var(--fx-bleu-clair); border-color: var(--fx-bleu); }
.fx-filtres .fa { margin-right: 5px; }
.fx-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.fx-kpi {
    background: var(--fx-surface); border: 1px solid var(--fx-bord); border-radius: var(--fx-rayon);
    box-shadow: var(--fx-ombre); padding: 14px 16px; min-width: 0;
}
.fx-kpi-titre { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fx-texte-doux); }
.fx-kpi-valeur { font-size: 24px; font-weight: 700; color: var(--fx-texte); margin: 6px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-kpi-detail { font-size: 12px; color: var(--fx-texte-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-kpi-jauge { height: 6px; border-radius: 3px; background: var(--fx-fond); overflow: hidden; margin-top: 10px; }
.fx-kpi-jauge span { display: block; height: 100%; width: 0; background: var(--fx-vert); border-radius: 3px; transition: width .4s; }
.fx-kpi-marge { border-top: 3px solid var(--fx-orange); }
.fx-kpi-marge .fx-kpi-valeur { color: var(--fx-vert); }
.fx-kpi-marge .fx-kpi-valeur.fx-negatif { color: var(--fx-rouge); }
.fx-rapport.fx-chargement .fx-kpi-valeur, .fx-rapport.fx-chargement .fx-kpi-detail { opacity: .35; }
@media (max-width: 1100px) { .fx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fx-kpi-marge { grid-column: 1 / -1; } }
@media (max-width: 560px) { .fx-kpis { grid-template-columns: 1fr; } .fx-rapport { margin: 0 0 14px; } }
/* motifs de fin d'appel en clair */
.fx-motif { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: help; }
.fx-motif-ok { background: var(--fx-vert-clair); color: var(--fx-vert); }
.fx-motif-attention { background: #fdf3e1; color: var(--fx-ambre); }
.fx-motif-neutre { background: #eceff2; color: #5c6b75; }
.fx-motif-erreur { background: var(--fx-rouge-clair); color: var(--fx-rouge); }
/* ligne Grand Total */
.flexigrid div.bDiv tr.fx-ligne-total td { background: #eef3f6 !important; border-top: 2px solid var(--fx-bord-fort) !important; font-weight: 700; }

/* ------------------------------------------------------------------ fenetre de rechargement (Refill Process) */
.fx-recharge { padding: 18px 22px 0; }
.fx-recharge-client {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border: 1px solid var(--fx-bord); border-radius: var(--fx-rayon); background: #f9fafb;
}
.fx-recharge-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--fx-bleu); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }
.fx-recharge-identite { flex: 1 1 auto; min-width: 0; }
.fx-recharge-nom { font-size: 15px; font-weight: 700; color: var(--fx-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-recharge-meta { font-size: 12.5px; color: var(--fx-texte-doux); margin-top: 2px; }
.fx-recharge-solde { text-align: right; flex: 0 0 auto; }
.fx-recharge-libelle { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fx-texte-doux); }
.fx-recharge-valeur { font-size: 20px; font-weight: 700; color: var(--fx-texte); }
.fx-recharge-operations { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
#facebox .fx-recharge .fx-recharge-operations button[data-type], .fx-recharge-operations button {
    display: flex; align-items: center; gap: 12px; text-align: left; margin: 0;
    padding: 12px 14px; border: 1px solid var(--fx-bord-fort); border-radius: var(--fx-rayon);
    background: var(--fx-surface); color: var(--fx-texte); font-weight: 400; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.fx-recharge-operations button .fa { font-size: 22px; color: var(--fx-texte-doux); }
.fx-recharge-operations button b { display: block; font-size: 14px; }
.fx-recharge-operations button small { display: block; font-size: 12px; color: var(--fx-texte-doux); margin-top: 1px; }
#facebox .fx-recharge .fx-recharge-operations button[data-type]:hover, .fx-recharge-operations button:hover { border-color: var(--fx-bleu); }
#facebox .fx-recharge .fx-recharge-operations button[data-type].actif[data-type="0"], .fx-recharge-operations button.actif[data-type="0"] { border-color: var(--fx-vert); background: var(--fx-vert-clair); box-shadow: 0 0 0 1px var(--fx-vert) inset; }
.fx-recharge-operations button.actif[data-type="0"] .fa { color: var(--fx-vert); }
#facebox .fx-recharge .fx-recharge-operations button[data-type].actif[data-type="1"], .fx-recharge-operations button.actif[data-type="1"] { border-color: var(--fx-orange); background: var(--fx-orange-clair); box-shadow: 0 0 0 1px var(--fx-orange) inset; }
.fx-recharge-operations button.actif[data-type="1"] .fa { color: var(--fx-orange); }
#facebox .fx-cache, .fx-cache { display: none !important; }
.fx-recharge-apercu {
    display: flex; align-items: center; justify-content: space-between;
    margin: 4px 0 14px; padding: 12px 16px; border-radius: var(--fx-rayon);
    background: var(--fx-bleu-clair); color: var(--fx-bleu); font-size: 13.5px; font-weight: 600;
}
.fx-recharge-apercu b { font-size: 18px; color: var(--fx-texte); }
.fx-recharge-apercu b.fx-hausse { color: var(--fx-vert); }
.fx-recharge-apercu b.fx-negatif { color: var(--fx-rouge); }
.fx-recharge-apercu.fx-debit { background: var(--fx-orange-clair); color: var(--fx-orange-fonce); }
#facebox .fx-recharge + div .pop_md { padding-top: 14px !important; }
.pop_md fieldset li.fx-recharge-montant, .pop_md fieldset li.fx-recharge-note { flex-direction: column; align-items: stretch; gap: 6px; }
.pop_md fieldset li.fx-recharge-montant > label, .pop_md fieldset li.fx-recharge-note > label { flex: none !important; max-width: none !important; width: auto; font-weight: 600 !important; }
.pop_md fieldset li.fx-recharge-montant > input, .pop_md fieldset li.fx-recharge-note > textarea { max-width: none !important; flex: none !important; }
.pop_md fieldset li.fx-recharge-montant > input { height: 48px !important; font-size: 22px !important; font-weight: 700 !important; padding: 8px 14px !important; }
.pop_md fieldset li.fx-recharge-montant .error_div { margin: 0; }
@media (max-width: 600px) {
    .fx-recharge-client { flex-wrap: wrap; }
    .fx-recharge-solde { text-align: left; width: 100%; }
    .fx-recharge-operations { grid-template-columns: 1fr; }
}
/* message de confirmation (toast) */
#toast-container .toast, #toast-container_error .toast {
    background: var(--fx-surface) !important;
    color: var(--fx-texte) !important;
    border-left: 4px solid var(--fx-vert) !important;
    padding: 14px 40px 14px 46px !important;
    font-family: var(--fx-police) !important;
    font-size: 13.5px;
    font-weight: 600;
    min-height: 0 !important;
}
#toast-container_error .toast { border-left-color: var(--fx-rouge) !important; }
#toast-container .toast:before { color: var(--fx-vert) !important; }
#toast-container_error .toast:before { color: var(--fx-rouge) !important; }
#toast-container .toast-message, #toast-container_error .toast-message { color: var(--fx-texte) !important; }
#toast-container .toast-close-button, #toast-container_error .toast-close-button { color: var(--fx-texte-doux) !important; opacity: .7; text-shadow: none !important; }

/* ------------------------------------------------------------------ notifications */
#toast-container .toast, #toast-container_error .toast {
    border-radius: var(--fx-rayon) !important;
    box-shadow: var(--fx-ombre-haute) !important;
    opacity: 1 !important;
}


/* ------------------------------------------------------------------ pied de page */
footer.site-footer {
    background: transparent !important;
    border-top: 1px solid var(--fx-bord) !important;
    box-shadow: none !important;
    color: var(--fx-texte-doux) !important;
    font-size: 12.5px;
    padding: 10px 28px !important;
    margin-top: 10px;
}
footer.site-footer .padding-b-10 { padding-bottom: 0 !important; display: flex; align-items: center; justify-content: space-between; float: none; }
footer.site-footer .pull-left.col-md-3 { width: auto; padding: 0; display: flex; align-items: center; gap: 14px; }
footer.site-footer .pull-left.col-md-3 > .col-md-12 { width: auto; margin: 0 !important; display: flex; align-items: center; gap: 6px; }
footer.site-footer label { margin: 0 !important; font-weight: 400; }
footer.site-footer .social-media a i { width: 24px !important; height: 24px !important; line-height: 24px !important; font-size: 12px !important; }
footer.site-footer span[style] { color: var(--fx-bleu) !important; text-shadow: none !important; }
footer.site-footer .pull-right { float: none !important; display: flex; gap: 6px; }
footer.site-footer .pull-right .btn { min-width: 0; padding: 0 !important; background: transparent !important; border: 0 !important; opacity: .75; }
footer.site-footer .pull-right .btn:hover { opacity: 1; }
footer.site-footer .pull-right img { border-radius: 3px; }

/* ------------------------------------------------------------------ connexion */
body.fx-login, body.fx-login html {
    background: radial-gradient(900px 500px at 80% 10%, rgba(255, 255, 255, .10), transparent 65%),
                linear-gradient(150deg, #10313f 0%, #1e536b 60%, #2a6f8d 100%) !important;
    min-height: 100vh;
    overflow-y: auto !important;
}
body.fx-login .slice123 { padding-top: 0; }
body.fx-login .row { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; }
body.fx-login .row > br { display: none; }
body.fx-login .row > .col-md-4 { width: 100%; max-width: 400px; margin: 0 !important; float: none; padding: 0; }
body.fx-login .col-lg-4.col-md-offset-4 { width: 100%; max-width: 400px; margin: 0 !important; float: none; padding: 0; }
body.fx-login .login_error { display: block; text-align: center; color: #fff !important; font-size: 13px; line-height: 1.45; margin-bottom: 14px; }
body.fx-login .login_error.fx-erreur { background: rgba(200, 58, 58, .92); border-radius: 10px; padding: 10px 14px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
body.fx-login .sign-in-wr {
    background: var(--fx-surface) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 30px 70px rgba(5, 20, 28, .35) !important;
    padding: 34px 32px 10px !important;
    margin: 0 !important;
}
body.fx-login .sign-in-wr > div { padding: 0 !important; }
body.fx-login .sign-in-wr h2 { border: 0 !important; padding: 0 0 8px !important; margin: 0 !important; }
body.fx-login #logo { width: auto !important; height: 52px !important; }
body.fx-login .fx-login-titre { text-align: center; color: var(--fx-texte-doux); font-size: 13.5px; margin: 4px 0 20px; text-transform: none !important; }
body.fx-login form { padding: 0 !important; margin: 0 !important; }
body.fx-login form .input-group { padding: 0 !important; margin: 0 0 14px !important; display: block; position: relative; }
body.fx-login form .input-group-addon.login_validate {
    position: absolute !important;
    left: 0; top: 0; bottom: 0;
    width: 42px;
    padding: 0 !important;
    display: flex; align-items: center; justify-content: center;
    background: transparent !important;
    border: 0 !important;
    color: var(--fx-texte-doux);
    z-index: 3 !important;
}
body.fx-login form .form-control.error_login {
    width: 100% !important;
    margin: 0 !important;
    height: 46px !important;
    padding-left: 42px !important;
    border: 1px solid var(--fx-bord-fort) !important;
    border-radius: 10px !important;
    background: #f9fafb !important;
    font-size: 14.5px !important;
    float: none;
}
body.fx-login form .form-control.error_login:focus { background: #fff !important; border-color: var(--fx-orange) !important; box-shadow: 0 0 0 3px rgba(233, 78, 27, .15) !important; }
body.fx-login form .col-md-12 { padding-left: 0 !important; padding-right: 0 !important; }
body.fx-login form label.error, body.fx-login form label.error span { margin: 4px 0 0 !important; display: block; font-size: 12px; color: var(--fx-rouge) !important; }
body.fx-login .btn-login {
    width: 100%;
    height: 46px;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--fx-orange) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
    box-shadow: 0 6px 16px rgba(233, 78, 27, .30) !important;
    transition: background .15s, transform .05s;
}
body.fx-login .btn-login:hover, body.fx-login .btn-login:focus { background: var(--fx-orange-fonce) !important; }
body.fx-login .btn-login:active { transform: translateY(1px); }
body.fx-login .gray_lohin {
    background: transparent !important;
    border: 0 !important;
    padding: 6px 0 14px !important;
    margin: 4px 0 0 !important;
}
body.fx-login .gray_lohin p { margin: 0 !important; }
body.fx-login .gray_lohin a { color: var(--fx-bleu) !important; font-weight: 600; font-size: 13px; }
body.fx-login .gray_lohin a:hover { color: var(--fx-orange) !important; }
body.fx-login form > br { display: none; }
body.fx-login .fx-login-pied { text-align: center; color: rgba(255, 255, 255, .6); font-size: 12px; margin-top: 18px; }

/* ------------------------------------------------------------------ petits ecrans */
@media (max-width: 991px) {
    header { height: auto; position: relative !important; }
    .navbar-white .navbar-nav > li > a { margin: 2px 0 !important; }
    section.slice.color-one .container, .page-wrap { padding-left: 14px !important; padding-right: 14px !important; }
    .page-wrap fieldset li .form-control, .pop_md fieldset li .form-control { width: 100% !important; }
    footer.site-footer .padding-b-10 { flex-direction: column; gap: 8px; }
}

/* ------------------------------------------------------------------ liste des DID (did/did_list, 2026-09-28) */
.fx-kpis-did { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); }
.fx-did-comptes { margin-top: 6px; }
.fx-did-compte { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 2px 0; }
.fx-did-compte span { color: var(--fx-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-did-compte b { color: var(--fx-bleu); }
.fx-dest b { display: block; color: var(--fx-bleu); line-height: 1.3; }
.fx-dest small { display: block; color: var(--fx-texte-doux); font-size: 11.5px; line-height: 1.3; }
@media (max-width: 1100px) { .fx-kpis-did { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fx-kpis-did { grid-template-columns: 1fr; } }
.fx-motif-info { background: var(--fx-bleu-clair); color: var(--fx-bleu); }
#purchase_did { margin: 10px 0 !important; float: right; }

/* ------------------------------------------------------------------ mobile et tablette (2026-10-03) */
/* en-tete : le menu d'ASTPP se replie sous 1200 px */
@media (max-width: 1199px) {
    /* en-tete : logo a gauche, profil compact + bouton menu a droite, menu deroulant en dessous */
    header { height: auto !important; position: sticky !important; }
    header > .container { display: flex; flex-wrap: wrap; align-items: center; padding: 0 12px !important; position: relative; min-height: 58px; }
    header .col-md-12_new, header .col-md-9_new { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; display: flex; align-items: center; justify-content: space-between; }
    header > .container:before, header > .container:after, header .col-md-12_new:before, header .col-md-12_new:after, header .col-md-9_new:before, header .col-md-9_new:after { display: none !important; }
    header .navbar-brand { margin: 7px 0 !important; height: auto; float: none !important; }
    header #logo { height: 36px !important; }
    header .navbar-toggle { margin: 0 !important; float: none; padding: 9px 10px; border: 1px solid var(--fx-bord) !important; border-radius: 8px; }
    header .navbar-toggle .icon-bar { background: var(--fx-bleu) !important; }
    header .col-md-1_new { position: absolute !important; top: 9px; right: 66px; float: none !important; width: auto !important; padding: 0 !important; z-index: 2; }
    header .profile_border { float: none !important; padding: 0 !important; }
    .navbar-profile { margin: 0 !important; }
    .navbar-profile > li > a { margin: 0 !important; padding: 4px 10px 4px 38px !important; }
    .navbar-profile > li > a:before { width: 26px; height: 26px; margin-top: -13px; line-height: 26px; left: 5px; font-size: 12px; }
    .navbar-profile .profile_name { max-width: 110px; font-size: 12px; }
    .navbar-profile > li > ul { right: 0; left: auto; min-width: 180px; }
    header .col-md-9 { float: none !important; width: 100% !important; padding: 0 !important; }
    header .col-md-9 > .col-md-12, header #navbar, header #navbar > .container { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 0; }
    header .navbar-collapse { margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--fx-bord); max-height: calc(100vh - 70px); overflow-y: auto; }
    header .navbar-collapse.in { padding-bottom: 8px !important; }
    header .navbar-nav { float: none !important; margin: 4px 0 !important; }
    header .navbar-nav > li { float: none; }
    .navbar-white .navbar-nav > li > a { margin: 1px 0 !important; padding: 11px 12px !important; display: flex; justify-content: space-between; align-items: center; }
    /* sous-menus en accordeon (ouverts au toucher par finix-theme.js) */
    .navbar-nav > li > ul.dropdown-menu, .navbar-nav > li:hover > ul.dropdown-menu {
        display: none !important; position: static !important; float: none !important; transform: none !important;
        visibility: visible !important; opacity: 1 !important; width: auto !important; min-width: 0 !important;
        box-shadow: none !important; border: 0 !important; border-left: 2px solid var(--fx-orange-clair) !important;
        border-radius: 0 !important; margin: 0 0 6px 14px !important; padding: 2px 0 2px 6px !important; background: transparent !important;
    }
    .navbar-nav > li.fx-ouvert > ul.dropdown-menu { display: block !important; }
    .navbar-nav > li.fx-ouvert > a { background: var(--fx-bleu-clair) !important; color: var(--fx-bleu) !important; }
    .navbar-nav > li.fx-ouvert > a .caret { transform: rotate(180deg); }
    .navbar-nav .dropdown-menu > li > a, .navbar-nav .col-12 li a { padding: 10px 12px !important; white-space: normal; }
    .navbar-nav .dropdown-menu > li > a .fa-caret-right { transition: transform .15s; margin-top: 3px; }
    .navbar-nav .dropdown-menu > li.fx-ouvert > a .fa-caret-right { transform: rotate(90deg); }
    .navbar-nav .dropdown-menu .col-4, .navbar-nav .dropdown-menu .col-6,
    .navbar-nav > li:hover > ul > li:hover > .col-4, .navbar-nav > li:hover > ul > li:hover > .col-6 {
        display: none; position: static !important; left: auto !important; width: auto !important; margin: 0 0 0 12px !important;
        padding: 0 !important; float: none !important; box-shadow: none !important; border: 0 !important; animation: none !important; background: transparent !important;
    }
    .navbar-nav .dropdown-menu > li.fx-ouvert > .col-4, .navbar-nav .dropdown-menu > li.fx-ouvert > .col-6 { display: block !important; }
    .navbar-nav .dropdown-menu .col-4 > ul, .navbar-nav .dropdown-menu .col-4 .col-md-6, .navbar-nav .dropdown-menu .col-4 ul.col-12 {
        visibility: visible !important; transform: none !important; float: none !important; width: auto !important; padding: 0 !important; position: static !important;
    }

}
@media (max-width: 991px) {
    html, body { overflow-x: hidden; }
    /* titre de page : titre puis boutons sur toute la largeur */
    section.slice.color-one { padding: 14px 0 4px !important; }
    section.slice.color-one .border_box, #main-wrapper .border_box { margin-top: 0 !important; }
    section.slice.color-one .container { padding: 0 12px !important; }
    section.slice.color-one h2 { font-size: 19px !important; }
    section.slice.color-one div[class*="col-"] { float: none !important; width: 100% !important; }
    section.slice.color-one .pull-right.btn { float: none !important; display: inline-flex; margin: 8px 8px 0 0 !important; }

    /* contenu : toutes les colonnes bootstrap empilees sur la largeur */
    .page-wrap { padding: 8px 4px 24px !important; }
    section div[class*="col-md-"]:not(.bootstrap-select):not(.col-md-5),
    section div[class*="col-sm-"]:not(.bootstrap-select),
    section div[class*="col-lg-"]:not(.bootstrap-select),
    #main-wrapper div[class*="col-md-"]:not(.bootstrap-select):not(.col-md-5),
    #facebox div[class*="col-md-"]:not(.bootstrap-select):not(.col-md-5) {
        float: none !important; width: 100% !important; left: auto; right: auto;
    }
    section div.pull-right[class*="col-"], #facebox div.pull-right[class*="col-"] { float: none !important; }
    .page-wrap .container, section.slice .container { padding-left: 8px !important; padding-right: 8px !important; }
    .page-wrap .row, #facebox .row { margin-left: -4px !important; margin-right: -4px !important; }

    /* largeurs fixes en ligne et decalages bootstrap des vues d'origine */
    .page-wrap div[style*="width"]:not(.flexigrid div), .page-wrap table[style*="width"], #facebox div[style*="width"] { max-width: 100% !important; }
    section[class*="col-xs-push-"], div[class*="col-xs-push-"], section[class*="col-xs-offset-"], div[class*="col-xs-offset-"] { left: auto !important; margin-left: 0 !important; }
    .page-wrap label[style*="text-align:right"], .page-wrap label[style*="text-align: right"] { text-align: left !important; }
    .page-wrap .color-three table:not(.flexigrid table) td { word-break: break-word; }

    /* formulaires : libelle au-dessus du champ */
    .page-wrap fieldset, .pop_md fieldset { padding: 50px 14px 10px !important; }
    .page-wrap legend, .pop_md legend { padding: 11px 14px !important; }
    .page-wrap fieldset li > label.col-md-3, .pop_md fieldset li > label.col-md-3,
    .page-wrap fieldset li > label, .pop_md fieldset li > label { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; margin-bottom: 4px !important; }
    .page-wrap fieldset li > .form-control, .pop_md fieldset li > .form-control,
    .page-wrap fieldset li > .bootstrap-select, .pop_md fieldset li > .bootstrap-select,
    .page-wrap fieldset li > textarea, .pop_md fieldset li > textarea,
    .page-wrap fieldset li > input.field, .pop_md fieldset li > input.field,
    .page-wrap fieldset li > select:not(.form-control), .pop_md fieldset li > select:not(.form-control) { flex: 1 1 100% !important; max-width: 100% !important; width: 100% !important; }
    .page-wrap fieldset li > input[type=checkbox] + label, .pop_md fieldset li > input[type=checkbox] + label { flex: 1 1 auto !important; width: auto !important; }
    .page-wrap .form-control, #facebox .form-control, .page-wrap input, .page-wrap select, #facebox input, #facebox select { font-size: 16px !important; }
    .pop_md center .btn, .page-wrap form center .btn { margin: 4px !important; }

    /* tableaux : defilement horizontal au doigt */
    .flexigrid div.bDiv { -webkit-overflow-scrolling: touch; }
    .flexigrid div.tDiv { padding: 10px !important; }
    .flexigrid div.fbutton span.btn, .flexigrid div.fbutton span { padding: 7px 11px !important; }
    .flexigrid div.pDiv .pcontrol, .flexigrid div.pDiv .pPageStat { margin: 0 4px !important; }
    .page-wrap .table-responsive, .page-wrap .panel-body, .page-wrap .w-box { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .page-wrap table:not(.flexigrid table):not(.autoht) { max-width: none; }

    /* fiches compte : menu lateral replie */
    #main-wrapper { padding-left: 0 !important; }
    .sidebar { left: 8px !important; right: 8px !important; width: auto !important; z-index: 50; }
    #main-wrapper .border_box { padding: 8px 4px !important; }
    #main-wrapper .breadcrumb { white-space: normal; }

    /* fenetres modales : pleine largeur */
    #facebox { position: absolute !important; left: 8px !important; right: 8px !important; width: auto !important; top: 12px !important; }
    #facebox .popup, #facebox .content, #facebox .pop_md, #facebox form, #facebox table:not(.flexigrid table) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
    #facebox .content { max-height: calc(100vh - 40px); }
    #facebox .popup .col-md-5 { width: 100% !important; }

    /* pied de page */
    footer.site-footer { padding: 10px 12px !important; }
    footer.site-footer .padding-b-10 { flex-direction: column; gap: 8px; }
    footer.site-footer .pull-left.col-md-3 { flex-wrap: wrap; justify-content: center; gap: 8px; }
}
@media (max-width: 400px) {
    header #logo { height: 30px !important; }
    .navbar-profile .profile_name { display: none !important; }
    header .col-md-1_new { top: 12px; }
}