/**
 * Version mobile / tablette — SITE ENTIER (tous domaines)
 * Chargé globalement en dernier dans layout.php.
 * Aucune restriction par nom de domaine.
 */

/* ---------- Tablette / petit desktop ---------- */
@media screen and (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Conteneurs à largeur fixe (1082px → fluide) */
  .corps,
  .entete,
  .englobe_entete .entete,
  .footer,
  .englobe_footer .footer,
  .footer_xbar,
  .englobe_footer_xbar .footer_xbar {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .corps {
    margin: 0 auto;
    padding: 12px 12px 24px;
  }

  /* Header */
  .englobe_entete {
    width: 100%;
    height: auto !important;
    position: relative;
    padding: 0;
    box-sizing: border-box;
  }

  .entete {
    position: relative !important;
    height: auto !important;
    min-height: 0;
    top: 0 !important;
    left: 0;
    right: 0;
    margin: 0;
    overflow: visible;
  }

  body {
    padding-top: 0 !important;
  }

  /* ---------- Header : ligne logo + déconnexion, puis barre de menu ---------- */
  .englobe_entete > pre {
    display: none;
  }

  .entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .entete .logo {
    order: 1;
    flex: 0 0 auto;
    float: none;
    display: flex;
    align-items: center;
    padding: 6px 12px !important;
    height: auto !important;
    box-sizing: border-box;
  }

  .entete .logo img {
    width: auto;
    max-width: 160px;
    height: auto;
    max-height: 40px;
    object-fit: contain;
  }

  .entete .logo img.logo_xbar {
    max-width: 180px;
    max-height: 38px;
  }

  .entete .infos_user {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
    margin-left: auto;
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 12px;
    width: auto !important;
    height: auto !important;
    padding: 6px 12px !important;
    border-left: none !important;
    background-image: none !important;
    box-sizing: border-box;
    font-size: 13px;
  }

  .entete .infos_user > div,
  .entete .infos_user .connexion,
  .entete .infos_user .panier {
    float: none;
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto !important;
    padding: 0 !important;
  }

  .entete .infos_user div[style*="float"] {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
  }

  .entete .infos_user br,
  .entete .infos_user div[style*="clear"] {
    display: none;
  }

  .entete .infos_user a.logout img {
    max-height: 28px;
    width: auto;
  }

  .entete .choix_langue {
    order: 3;
    flex: 0 0 auto;
    float: none;
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    height: auto !important;
    padding: 6px 12px 6px 0 !important;
    background: none !important;
  }

  .entete .choix_langue hr {
    display: none;
  }

  /* Barre de menu : défilement horizontal, icône au-dessus du libellé */
  .entete .menu {
    order: 10;
    flex: 0 0 100%;
    width: 100%;
    height: auto !important;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }

  .entete .menu::-webkit-scrollbar {
    display: none;
  }

  .entete .menu ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2px;
    width: max-content;
    min-width: 100%;
    margin: 0 !important;
    padding: 4px 32px 4px 6px !important;
    box-sizing: border-box;
  }

  .entete .menu ul li {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: auto !important;
    min-width: 64px;
    max-width: 96px;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 6px 5px !important;
    border: 1px solid transparent !important;
    border-radius: 8px;
    opacity: 1;
    text-align: center;
    white-space: normal;
    vertical-align: top;
    scroll-snap-align: start;
    box-sizing: border-box;
  }

  .entete .menu ul li.actif {
    border-color: currentColor !important;
  }

  /* Variante admin : <li><img> <a>Libellé</a></li> */
  .entete .menu ul li > img {
    display: block;
    width: auto !important;
    height: 24px !important;
    max-width: none;
    margin: 0 0 4px;
  }

  .entete .menu ul li > a {
    display: block;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: normal;
    word-break: normal;
  }

  /* Variante client : <li class="…"><div><a><i></i><br><b>LIBELLÉ</b></a></div></li> */
  .entete .menu ul li > div {
    height: auto !important;
    padding: 0 !important;
  }

  .entete .menu ul li > div a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 !important;
  }

  .entete .menu ul li > div a br {
    display: none;
  }

  .entete .menu ul li > div a i {
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .entete .menu ul li > div a b {
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2px;
    white-space: normal;
  }
  /* Tables & contenu : scroll horizontal si trop large */
  .corps table,
  #tableau_resultat,
  .tableau_liste {
    max-width: 100%;
  }

  .corps > table,
  .corps .zone_tableau,
  .corps .ui-widget,
  #tableau_resultat {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .flash,
  .global_flash,
  .flash_element {
    width: auto !important;
    max-width: 100%;
    margin-left: 8px;
    margin-right: 8px;
    box-sizing: border-box;
  }

  /* ---------- Login classique (toutes marques) ---------- */
  .encart_login,
  .encart_passeoublier,
  .encart_login_bo,
  .encart_login_jwpro,
  .encart_login_remix,
  .encart_login_spv,
  .encart_login_remix_us,
  .encart_login_o2,
  .encart_login_mys,
  .encart_login_panda,
  .encart_login_frenchlab {
    width: 100% !important;
    max-width: 422px;
    height: auto !important;
    min-height: 360px;
    margin: 16px auto !important;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    box-sizing: border-box;
  }

  .encart_login > div,
  .encart_passeoublier > div,
  .encart_login_bo > div,
  .encart_login_jwpro > div,
  .encart_login_remix > div,
  .encart_login_spv > div,
  .encart_login_remix_us > div,
  .encart_login_o2 > div,
  .encart_login_mys > div,
  .encart_login_panda > div,
  .encart_login_frenchlab > div {
    padding: 140px 16px 16px !important;
    box-sizing: border-box;
  }

  .encart_login table,
  .encart_passeoublier table,
  .encart_login_bo table,
  .encart_login_jwpro table,
  .encart_login_remix table,
  .encart_login_spv table,
  .encart_login_remix_us table,
  .encart_login_o2 table,
  .encart_login_mys table,
  .encart_login_panda table,
  .encart_login_frenchlab table {
    width: 100% !important;
    max-width: 100%;
  }

  .encart_login input[type="text"],
  .encart_login input[type="password"],
  .encart_passeoublier input[type="text"],
  .encart_passeoublier input[type="password"],
  .encart_login_bo input[type="text"],
  .encart_login_bo input[type="password"],
  .encart_login_jwpro input[type="text"],
  .encart_login_jwpro input[type="password"],
  .encart_login_remix input[type="text"],
  .encart_login_remix input[type="password"],
  .encart_login_spv input[type="text"],
  .encart_login_spv input[type="password"],
  .encart_login_remix_us input[type="text"],
  .encart_login_remix_us input[type="password"],
  .encart_login_o2 input[type="text"],
  .encart_login_o2 input[type="password"],
  .encart_login_mys input[type="text"],
  .encart_login_mys input[type="password"],
  .encart_login_panda input[type="text"],
  .encart_login_panda input[type="password"],
  .encart_login_frenchlab input[type="text"],
  .encart_login_frenchlab input[type="password"] {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    height: 40px;
  }

  .encart_login .btn_valider,
  .encart_passeoublier .btn_valider,
  .encart_login_bo .btn_valider,
  .encart_login_jwpro .btn_valider,
  .encart_login_remix .btn_valider,
  .encart_login_spv .btn_valider,
  .encart_login_remix_us .btn_valider,
  .encart_login_o2 .btn_valider,
  .encart_login_mys .btn_valider,
  .encart_login_panda .btn_valider,
  .encart_login_frenchlab .btn_valider,
  .encart_login input[type="submit"],
  .encart_login .ui-button {
    min-height: 42px;
    padding: 8px 18px !important;
  }

  /* ---------- Login X-BAR (si présent) ---------- */
  .encart_login_xbar {
    width: auto !important;
    max-width: 420px;
    margin: 20px auto 28px !important;
  }

  .encart_login_xbar .xbar-login,
  .xbar-login {
    padding: 32px 28px 28px;
    box-sizing: border-box;
  }

  .xbar-logo {
    margin: 4px 0 32px;
  }

  .xbar-logo-pro,
  .xbar-logo-bar {
    font-size: 40px;
  }

  .xbar-logo-pro {
    margin-right: 10px;
  }

  .xbar-field {
    margin-bottom: 18px;
  }

  .xbar-field input {
    height: 52px;
    font-size: 16px;
  }

  .xbar-actions {
    gap: 12px;
  }

  .encart_login_xbar .xbar-submit,
  .encart_login_xbar .xbar-submit.ui-button,
  .encart_login_xbar .ui-button.xbar-submit {
    min-width: 120px;
    height: 44px;
  }

  /* ---------- Footer (tous) ---------- */
  .englobe_footer,
  .englobe_footer_accueil,
  .englobe_footer_xbar,
  .englobe_footer_xbar.englobe_footer_accueil {
    height: auto !important;
    min-height: 0;
    position: relative !important;
    width: 100%;
  }

  .footer,
  .englobe_footer .footer,
  .footer_xbar,
  .englobe_footer_xbar .footer_xbar {
    height: auto !important;
    margin: 0;
    padding: 22px 16px 18px;
  }

  .footer > table,
  .footer_xbar > table {
    width: 100% !important;
  }

  .footer > table > tbody > tr > td,
  .footer_xbar > table > tbody > tr > td {
    width: 33.33% !important;
    padding: 0 8px;
    vertical-align: top;
    font-size: 12px;
    line-height: 1.45;
  }

  .footer > table > tbody > tr > td > table,
  .footer_xbar > table > tbody > tr > td > table {
    width: 100% !important;
  }

  .footer_xbar_col {
    border-right-color: rgba(255, 255, 255, 0.22);
  }

  .footer_xbar_pro,
  .footer_xbar_name {
    font-size: 15px;
  }

  .footer_xbar_brand_img {
    height: 24px;
    max-width: 130px;
  }

  .footer_xbar_ico {
    width: 24px;
    height: 24px;
    background-size: 14px 14px;
  }

  .footer_xbar_copy {
    line-height: 1.4;
    font-size: 11px;
  }

  .modal-content {
    width: 92% !important;
    margin: 12% auto !important;
    box-sizing: border-box;
  }
}

/* ---------- Mobile téléphone ---------- */
@media screen and (max-width: 600px) {
  .corps {
    padding: 8px 10px 20px;
  }

  .entete .logo img {
    max-width: 130px;
    max-height: 34px;
  }

  .entete .infos_user {
    font-size: 12px;
    gap: 4px 10px;
  }

  .entete .menu ul li {
    min-width: 60px;
    max-width: 84px;
    padding: 5px 4px 4px !important;
  }

  .entete .menu ul li > img {
    height: 22px !important;
  }

  /* Login classique */
  .encart_login,
  .encart_passeoublier,
  .encart_login_bo,
  .encart_login_jwpro,
  .encart_login_remix,
  .encart_login_spv,
  .encart_login_remix_us,
  .encart_login_o2,
  .encart_login_mys,
  .encart_login_panda,
  .encart_login_frenchlab {
    max-width: none;
    width: 100% !important;
    min-height: 320px;
    margin: 8px 0 16px !important;
    background-size: cover;
  }

  .encart_login > div,
  .encart_passeoublier > div,
  .encart_login_bo > div,
  .encart_login_jwpro > div,
  .encart_login_remix > div,
  .encart_login_spv > div,
  .encart_login_remix_us > div,
  .encart_login_o2 > div,
  .encart_login_mys > div,
  .encart_login_panda > div,
  .encart_login_frenchlab > div {
    padding: 120px 12px 20px !important;
  }

  .encart_login table tr,
  .encart_passeoublier table tr,
  .encart_login_bo table tr,
  .encart_login_jwpro table tr,
  .encart_login_remix table tr,
  .encart_login_spv table tr,
  .encart_login_remix_us table tr,
  .encart_login_o2 table tr,
  .encart_login_mys table tr,
  .encart_login_panda table tr,
  .encart_login_frenchlab table tr {
    display: block;
  }

  .encart_login table td,
  .encart_passeoublier table td,
  .encart_login_bo table td,
  .encart_login_jwpro table td,
  .encart_login_remix table td,
  .encart_login_spv table td,
  .encart_login_remix_us table td,
  .encart_login_o2 table td,
  .encart_login_mys table td,
  .encart_login_panda table td,
  .encart_login_frenchlab table td {
    display: block;
    width: 100% !important;
    padding: 6px 0 !important;
    text-align: left !important;
  }

  .encart_login .btn_valider,
  .encart_passeoublier .btn_valider,
  .encart_login_bo .btn_valider,
  .encart_login_jwpro .btn_valider,
  .encart_login_remix .btn_valider,
  .encart_login_spv .btn_valider,
  .encart_login_remix_us .btn_valider,
  .encart_login_o2 .btn_valider,
  .encart_login_mys .btn_valider,
  .encart_login_panda .btn_valider,
  .encart_login_frenchlab .btn_valider,
  .encart_login input[type="submit"],
  .encart_login .ui-button {
    width: 100%;
    box-sizing: border-box;
  }

  /* Login X-BAR */
  .encart_login_xbar {
    max-width: none;
    width: 100% !important;
    margin: 12px 0 20px !important;
    border-radius: 14px;
  }

  .encart_login_xbar::before {
    width: 160px;
    height: 160px;
    top: -50px;
    left: -40px;
  }

  .encart_login_xbar::after {
    width: 180px;
    height: 180px;
    right: -60px;
    bottom: -70px;
  }

  .encart_login_xbar .xbar-login,
  .xbar-login {
    padding: 28px 18px 24px;
    border-radius: 12px;
  }

  .xbar-logo {
    margin: 0 0 28px;
    white-space: normal;
  }

  .xbar-logo-pro,
  .xbar-logo-bar {
    font-size: 34px;
  }

  .xbar-logo-pro {
    margin-right: 8px;
  }

  .xbar-field {
    margin-bottom: 14px;
  }

  .xbar-field input {
    height: 50px;
    padding-left: 48px;
  }

  .xbar-field::before {
    left: 14px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
  }

  .xbar-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-top: 4px;
  }

  .xbar-memo {
    font-size: 14px;
    order: 2;
  }

  .encart_login_xbar .xbar-submit,
  .encart_login_xbar .xbar-submit.ui-button,
  .encart_login_xbar .ui-button.xbar-submit {
    width: 100%;
    min-width: 0;
    height: 48px;
    font-size: 14px !important;
    order: 1;
  }

  .xbar-forgot {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    text-align: center;
  }

  /* Footer empilé */
  .englobe_footer,
  .englobe_footer_accueil,
  .englobe_footer_xbar,
  .englobe_footer_xbar.englobe_footer_accueil {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .footer,
  .englobe_footer .footer,
  .footer_xbar,
  .englobe_footer_xbar .footer_xbar {
    padding: 20px 16px 16px;
  }

  .footer > table,
  .footer > table > tbody,
  .footer > table > tbody > tr,
  .footer_xbar > table,
  .footer_xbar > table > tbody,
  .footer_xbar > table > tbody > tr {
    display: block;
    width: 100% !important;
  }

  .footer > table > tbody > tr > td,
  .footer_xbar > table > tbody > tr > td {
    display: block;
    width: 100% !important;
    padding: 14px 0;
    text-align: left !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 13px;
    box-sizing: border-box;
  }

  .footer > table > tbody > tr > td:last-child,
  .footer_xbar > table > tbody > tr > td:last-child {
    border-bottom: none;
    padding-bottom: 4px;
  }

  .footer_xbar_col {
    border-right: none !important;
  }

  .footer > table > tbody > tr > td > table,
  .footer_xbar > table > tbody > tr > td > table {
    width: 100% !important;
  }

  .footer > table > tbody > tr > td > table td,
  .footer_xbar > table > tbody > tr > td > table td {
    height: auto !important;
    padding: 6px 0;
    line-height: 1.45;
    word-break: break-word;
  }

  .footer_xbar_pro,
  .footer_xbar_name {
    font-size: 17px;
  }

  .footer_xbar_brand_img {
    height: 26px;
    max-width: 150px;
  }

  .footer_xbar_ico {
    width: 26px;
    height: 26px;
    background-size: 15px 15px;
  }

  .footer_xbar_copy {
    font-size: 12px;
    line-height: 1.4;
  }

  .footer img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
  }

  .modal-content {
    margin: 18% auto !important;
    padding: 16px !important;
  }

  .modal-content table {
    width: 100%;
  }

  .modal-content input[type="text"],
  .modal-content #usernameP {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: 44px;
    font-size: 16px;
  }
}

/* ---------- Très petits écrans ---------- */
@media screen and (max-width: 360px) {
  .encart_login > div,
  .encart_passeoublier > div,
  .encart_login_bo > div,
  .encart_login_jwpro > div,
  .encart_login_remix > div,
  .encart_login_spv > div,
  .encart_login_remix_us > div,
  .encart_login_o2 > div,
  .encart_login_mys > div,
  .encart_login_panda > div,
  .encart_login_frenchlab > div {
    padding: 100px 10px 16px !important;
  }

  .encart_login_xbar .xbar-login,
  .xbar-login {
    padding: 24px 14px 20px;
  }

  .xbar-logo-pro,
  .xbar-logo-bar {
    font-size: 28px;
  }

  .footer,
  .englobe_footer .footer,
  .footer_xbar,
  .englobe_footer_xbar .footer_xbar {
    padding: 16px 12px 14px;
  }
}

/* ---------- Login JWELL (.encart_login / cadre_login.png) ----------
 * cadre_login.png (422x410) contient le logo ET les cadres des champs à
 * position fixe : sur mobile on n'affiche que la bande logo (haut de
 * l'image, ~140px sur 410) et la carte + les champs sont dessinés en CSS.
 */
@media screen and (max-width: 900px) {
  .encart_login,
  .encart_passeoublier {
    width: 100% !important;
    max-width: 422px;
    height: auto !important;
    min-height: 0 !important;
    margin: 16px auto !important;
    background: #f2f5f6 !important;
    border: 1px solid #dde4e7;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    box-sizing: border-box;
  }

  .encart_login::before,
  .encart_passeoublier::before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-top: 33.18%; /* 140 / 422 : ratio de la bande logo */
    background: url("/images/cadre_login.png") no-repeat top center;
    background-size: 100% auto;
  }

  .encart_login > div,
  .encart_passeoublier > div {
    padding: 4px 18px 22px !important;
  }

  .encart_login table,
  .encart_passeoublier table {
    width: 100% !important;
    margin-top: 0 !important;
    border-collapse: collapse;
  }

  .encart_login table + table,
  .encart_passeoublier table + table {
    margin-top: 16px !important;
  }

  .encart_login table tr,
  .encart_passeoublier table tr {
    display: block;
  }

  .encart_login table td,
  .encart_passeoublier table td {
    display: block;
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
    box-sizing: border-box;
  }

  /* Libellés "Identifiant :" / "Mot de passe :" */
  .encart_login table:first-of-type td[valign="top"]:first-child {
    padding: 12px 0 6px !important;
    font-size: 14px;
    color: #6b6b6b;
  }

  .encart_login br {
    display: none;
  }

  .encart_login input[type="text"],
  .encart_login input[type="password"],
  .encart_passeoublier input[type="text"],
  .encart_passeoublier input[type="password"] {
    display: block;
    width: 100% !important;
    height: 46px;
    margin: 0;
    padding: 0 12px 0 40px;
    border: 1px solid #dde1e4;
    border-radius: 4px;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 16px 16px;
    font-size: 16px;
    color: #333;
    box-shadow: none;
    box-sizing: border-box;
  }

  .encart_login input[type="text"]:focus,
  .encart_login input[type="password"]:focus {
    border-color: #baac94;
  }

  .encart_login input[type="text"],
  .encart_passeoublier input[type="text"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/%3E%3C/svg%3E");
  }

  .encart_login input[type="password"],
  .encart_passeoublier input[type="password"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'%3E%3Crect x='5' y='10' width='14' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0' fill='none' stroke='%23777' stroke-width='2'/%3E%3C/svg%3E");
  }

  /* Rester connecté */
  .encart_login label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
  }

  .encart_login label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
  }

  /* Bouton VALIDER */
  .encart_login .btn_valider,
  .encart_login input[type="submit"] {
    display: block;
    width: 100% !important;
    height: 46px;
    margin-top: 14px;
    padding: 0 18px !important;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.5px;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    box-sizing: border-box;
  }

  /* Mot de passe oublié */
  .encart_login #passe_oublier {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
  }
}

@media screen and (max-width: 360px) {
  .encart_login > div,
  .encart_passeoublier > div {
    padding: 2px 12px 18px !important;
  }
}

/* ---------- Popups de recherche (back-office) ----------
 * 1) La boîte jQuery UI ouverte depuis interface/frame (730px fixes en JS).
 *    Ne jamais forcer `display` : jQuery ferme la boîte via display:none.
 * 2) Les pages de recherche chargées dans ses iframes (layout popup) :
 *    .zone_haut (formulaire) + #tableau_resultat (résultats, hauteur en JS).
 * Sur PC la boîte fait 730px : la largeur seule ne suffit pas à distinguer
 * le mobile, d'où (pointer: coarse) = écran tactile uniquement.
 */
@media screen and (max-width: 900px) and (pointer: coarse) {
  /* Toutes les boîtes jQuery UI : jamais plus larges que l'écran */
  .ui-dialog {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px);
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .ui-dialog .ui-dialog-content {
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .ui-dialog .ui-resizable-handle {
    display: none !important;
  }

  .ui-dialog .ui-dialog-titlebar-close {
    width: 32px;
    height: 32px;
    margin-top: -16px;
  }

  /* Boîte de recherche : plein écran */
  .ui-dialog:has(.div_recherche_facture) {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  .ui-dialog:has(.div_recherche_facture) .ui-dialog-titlebar {
    height: 48px;
    padding: 0 52px 0 14px;
    display: flex;
    align-items: center;
    border-radius: 0;
    box-sizing: border-box;
  }

  .ui-dialog:has(.div_recherche_facture) .ui-dialog-title {
    font-size: 15px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ui-dialog:has(.div_recherche_facture) .ui-dialog-titlebar-close {
    right: 10px;
  }

  .ui-dialog:has(.div_recherche_facture) .ui-dialog-content {
    height: calc(100% - 48px) !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  /* Pages de recherche : le body était en overflow:hidden (*_liste.css) */
  body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .zone_haut {
    padding: 0 !important;
  }

  .zone_haut .global_box {
    padding: 8px !important;
    box-sizing: border-box;
  }

  /* Colonnes du formulaire (critères gauche / droite / boutons) empilées */
  .zone_haut form > table,
  .zone_haut form > table > tbody,
  .zone_haut form > table > tbody > tr {
    display: block;
    width: 100% !important;
  }

  .zone_haut form > table > tbody > tr > td {
    display: block;
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
    box-sizing: border-box;
  }

  .zone_haut form > table > tbody > tr > td + td {
    margin-top: 8px;
  }

  /* Boutons Nouveau / Rechercher / Excel : alignés en ligne */
  .zone_haut form > table > tbody > tr > td:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding-top: 8px !important;
    border-top: 1px solid #e3e3e3;
  }

  .zone_haut form > table > tbody > tr > td:last-child br {
    display: none;
  }

  .zone_haut form > table > tbody > tr > td:last-child button {
    min-width: 48px;
    min-height: 44px;
    margin: 0 !important;
  }

  /* Libellés au-dessus des champs */
  .zone_haut label[style*="width"] {
    display: block !important;
    width: auto !important;
    margin: 0 0 4px;
  }

  .zone_haut table table,
  .zone_haut table table td {
    width: 100% !important;
  }

  /* Critères sur 2 colonnes (ex. recherche commande) : empilés */
  .zone_haut form > table table,
  .zone_haut form > table table > tbody,
  .zone_haut form > table table > tbody > tr {
    display: block;
  }

  .zone_haut form > table table > tbody > tr > td {
    display: block;
    padding: 0 0 8px !important;
    box-sizing: border-box;
  }

  /* Chosen 1.4.2 refuse de s'initialiser sur iPhone / Android mobile, alors que
   * le template masque l'input flexselect à sa place : on réaffiche l'input
   * uniquement quand Chosen n'a rien construit. */
  .zone_haut td:not(:has(.chosen-container)) > input#recherche_id_client_flexselect {
    display: block !important;
  }

  .flexselect_dropdown {
    max-height: 50vh;
    -webkit-overflow-scrolling: touch;
  }

  .flexselect_dropdown li {
    padding: 10px 12px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.3;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
  }

  .zone_haut p[align="left"] {
    margin: 0 0 8px !important;
  }

  .zone_haut input[type="text"],
  .zone_haut input[type="password"],
  .zone_haut input[type="number"],
  .zone_haut select {
    max-width: 100%;
    min-height: 36px;
    font-size: 16px;
    box-sizing: border-box;
  }

  /* Les templates forcent ces ids en 250px !important : il faut un id pour gagner */
  .zone_haut [id$="_flexselect"],
  .zone_haut #recherche_id_client_flexselect,
  .zone_haut #relance_id_client_flexselect {
    width: 100% !important;
    background-position: right 8px center !important;
  }

  .zone_haut .hasDatepicker {
    width: 130px !important;
    height: 36px;
    background-position: right 6px center !important;
  }

  .zone_haut input[type="checkbox"] {
    width: 18px;
    height: 18px;
    vertical-align: middle;
  }

  .criteres_tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .criteres_tab {
    flex: 0 0 auto;
    padding: 10px 16px !important;
    font-size: 14px;
  }

  /* Résultats : hauteur naturelle + défilement horizontal */
  #hdScrolltableau_resultat {
    height: auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  #hdtableau_resultat {
    display: none !important;
  }

  #hdScrolltableau_resultat #tableau_resultat {
    display: table;
    min-width: 640px;
  }

  .zone_ext {
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- Mon historique (/mon_historique, facture_client/liste) ----------
 * Les cases blanches et icônes du pavé sont dessinées dans l'image de fond
 * search_criteres.png (1082x138) ; les champs réels sont transparents par-dessus.
 * En mobile l'image est retirée et les champs sont dessinés en CSS.
 */
@media screen and (max-width: 900px) {
  .div_global_facture {
    padding: 12px 0 0 !important;
  }

  .div_global_facture .bloc_recherche {
    width: 100% !important;
    height: auto !important;
    padding: 12px !important;
    background: #f2f5f6 !important;
    border: 1px solid #e1e7ea;
    border-radius: 6px;
    box-sizing: border-box;
  }

  .div_global_facture .bloc_recherche #form_recherche > table {
    display: block;
    width: 100% !important;
  }

  .div_global_facture .bloc_recherche #form_recherche > table > tbody {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 12px;
  }

  .div_global_facture .bloc_recherche #form_recherche > table > tbody > tr {
    display: contents;
  }

  .div_global_facture .bloc_recherche #form_recherche td {
    display: block;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    text-align: left !important;
    vertical-align: top !important;
  }

  /* Libellés : Date de début, Date de fin, Origine, Statut */
  .div_global_facture .bloc_recherche #form_recherche tr:first-child > td:nth-child(odd):not(:last-child),
  .div_global_facture .bloc_recherche #form_recherche tr:nth-child(2) > td:nth-child(odd) {
    margin: 10px 0 5px;
    font-size: 13px;
    font-weight: 600;
    color: #4a5358;
  }

  .div_global_facture .bloc_recherche #form_recherche tr:first-child > td:first-child {
    margin-top: 0;
  }

  /* Bouton(s) RECHERCHER toujours en bas */
  .div_global_facture .bloc_recherche #form_recherche tr:first-child > td:last-child {
    order: 1;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
  }

  /* Le fond du bouton porte la couleur du thème (+ loupe 22px en haut) : ne pas y toucher */
  .div_global_facture .bloc_recherche .recherche_histo,
  .div_global_facture .bloc_recherche .recherche_last {
    width: 100% !important;
    height: auto !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
  }

  .div_global_facture .bloc_recherche .recherche_histo {
    min-height: 58px;
    padding: 26px 12px 8px !important;
  }

  /* X-BAR : dégradé sans loupe, texte centré */
  body:has(.logo_xbar) .div_global_facture .bloc_recherche .recherche_histo {
    min-height: 48px;
    /*padding: 0 12px !important;*/
  }

  /* Champs */
  .div_global_facture .bloc_recherche #recherche_date_debut,
  .div_global_facture .bloc_recherche #recherche_date_fin,
  .div_global_facture .bloc_recherche #recherche_origine,
  .div_global_facture .bloc_recherche #recherche_statut {
    display: block;
    width: 100% !important;
    height: 44px !important;
    margin: 0;
    padding: 0 12px 0 40px !important;
    border: 1px solid #dde4e7 !important;
    border-radius: 4px;
    background-color: #fff !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 18px 18px !important;
    font-size: 16px;
    text-align: left !important;
    color: #333;
    box-sizing: border-box;
  }

  .div_global_facture .bloc_recherche #recherche_date_debut,
  .div_global_facture .bloc_recherche #recherche_date_fin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9399' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") !important;
  }

  .div_global_facture .bloc_recherche #recherche_origine,
  .div_global_facture .bloc_recherche #recherche_statut {
    padding-right: 36px !important;
    -webkit-appearance: none;
    appearance: none;
    background-position: 12px center, right 12px center !important;
    background-size: 18px 18px, 14px 14px !important;
  }

  .div_global_facture .bloc_recherche #recherche_origine {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6 10v10h12V10'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9399' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  }

  .div_global_facture .bloc_recherche #recherche_statut {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='5' rx='1'/%3E%3Crect x='3' y='16' width='6' height='5' rx='1'/%3E%3Crect x='15' y='16' width='6' height='5' rx='1'/%3E%3Cpath d='M12 8v4M6 16v-4h12v4'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9399' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  }

  .div_global_facture .bloc_recherche p {
    margin: 0 !important;
  }

  /* Résultats : le conteneur est figé à 804px en inline */
  .div_global_facture #results > div[style*="804px"] {
    width: 100% !important;
    float: none !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .div_global_facture #results #tableau_resultat {
    display: table;
    width: 100% !important;
    max-width: none;
    table-layout: auto;
  }

  .div_global_facture #tableau_resultat thead th {
    height: auto !important;
    padding: 10px 3px !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
    line-height: 1.2;
    white-space: normal;
  }

  .div_global_facture #tableau_resultat tbody td {
    height: auto !important;
    padding: 10px 3px !important;
    font-size: 12px;
    line-height: 1.25;
  }

  .div_global_facture #tableau_resultat tbody td:nth-child(2),
  .div_global_facture #tableau_resultat tbody td:last-child {
    white-space: nowrap;
  }

  .div_global_facture #tableau_resultat tbody td:last-child {
    text-align: right;
  }

  .div_global_facture #tableau_resultat td img[src*="mys"] {
    width: 16px;
    height: 16px;
    margin: 0 3px 0 0 !important;
    vertical-align: middle;
  }

  .div_global_facture #tableau_resultat td img[src*="mys"] + span {
    margin-left: 0 !important;
  }

  .div_global_facture #results .load_results,
  .div_global_facture #results .load_results_rech {
    display: block;
    margin: 40px auto !important;
  }

  /* Actions sur la ligne choisie : barre fixe en bas (sinon sous toute la liste) */
  .div_global_facture #choix_facture {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }

  .div_global_facture #choix_facture:not(:empty) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    gap: 6px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
  }

  .div_global_facture #choix_facture br {
    display: none;
  }

  .div_global_facture #choix_facture #choose_flavors_div {
    display: contents;
  }

  .div_global_facture #choix_facture #modif_com,
  .div_global_facture #choix_facture #detail_facture,
  .div_global_facture #choix_facture #choose_flavors,
  .div_global_facture #choix_facture #pdf_facture {
    /* main_client.css : .ui-button { position: inherit } => hériterait du fixed */
    position: relative !important;
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    height: auto !important;
    min-height: 46px;
    margin: 0 !important;
    font-size: 11px;
    line-height: 1.2;
    white-space: normal;
  }

  .div_global_facture #choix_facture .ui-button-text {
    padding: 4px !important;
  }

  .div_global_facture #results {
    padding-bottom: 80px;
  }
}

/* Tablette : critères sur 2 colonnes (dates en haut, origine/statut dessous) */
@media screen and (min-width: 601px) and (max-width: 900px) {
  .div_global_facture .bloc_recherche #form_recherche > table > tbody {
    grid-template-columns: 1fr 1fr;
  }

  .div_global_facture .bloc_recherche #form_recherche tr:first-child > td:nth-child(1) { grid-area: 1 / 1; }
  .div_global_facture .bloc_recherche #form_recherche tr:first-child > td:nth-child(2) { grid-area: 2 / 1; }
  .div_global_facture .bloc_recherche #form_recherche tr:first-child > td:nth-child(3) { grid-area: 1 / 2; margin-top: 0; }
  .div_global_facture .bloc_recherche #form_recherche tr:first-child > td:nth-child(4) { grid-area: 2 / 2; }
  .div_global_facture .bloc_recherche #form_recherche tr:nth-child(2) > td:nth-child(1) { grid-area: 3 / 1; }
  .div_global_facture .bloc_recherche #form_recherche tr:nth-child(2) > td:nth-child(2) { grid-area: 4 / 1; }
  .div_global_facture .bloc_recherche #form_recherche tr:nth-child(2) > td:nth-child(3) { grid-area: 3 / 2; }
  .div_global_facture .bloc_recherche #form_recherche tr:nth-child(2) > td:nth-child(4) { grid-area: 4 / 2; }
  .div_global_facture .bloc_recherche #form_recherche tr:first-child > td:last-child { grid-area: 5 / 1 / 6 / 3; }

  .div_global_facture .bloc_recherche .recherche_histo,
  .div_global_facture .bloc_recherche .recherche_last {
    width: auto !important;
    min-width: 220px;
    align-self: flex-end;
  }
}

@media screen and (max-width: 360px) {
  .div_global_facture #tableau_resultat thead th {
    padding: 8px 2px !important;
    font-size: 9px !important;
  }

  .div_global_facture #tableau_resultat tbody td {
    padding: 8px 2px !important;
    font-size: 10px;
  }
}

/* ---------- Édition facture (back-office, facture/edit) ----------
 * En-tête et pied : 3 colonnes empilées.
 * #commande (16 colonnes, lignes construites par facture1.js) : défilement
 * horizontal avec largeur mini par colonne, sinon tout est écrasé à 100%.
 */
@media screen and (max-width: 900px) {
  .div_global_facture[data-fac_id] {
    padding: 8px !important;
    overflow-x: visible !important;
    box-sizing: border-box;
  }

  .div_global_facture[data-fac_id] .zone_entete > table,
  .div_global_facture[data-fac_id] .zone_entete > table > tbody,
  .div_global_facture[data-fac_id] .zone_entete > table > tbody > tr,
  .div_global_facture[data-fac_id] .zone_entete > table > tbody > tr > td,
  .div_global_facture[data-fac_id] .zone_bas_pied_facture,
  .div_global_facture[data-fac_id] .zone_bas_pied_facture > tbody,
  .div_global_facture[data-fac_id] .zone_bas_pied_facture > tbody > tr,
  .div_global_facture[data-fac_id] .zone_bas_pied_facture > tbody > tr > td {
    display: block;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    box-sizing: border-box;
  }

  .div_global_facture[data-fac_id] .zone_entete > table > tbody > tr > td + td,
  .div_global_facture[data-fac_id] .zone_bas_pied_facture > tbody > tr > td + td {
    margin-top: 16px;
  }

  /* Champs dont la largeur est posée en JS / inline */
  .div_global_facture[data-fac_id] #id_client_flexselect {
    width: calc(100% - 30px) !important;
    background-position: right 6px center !important;
    box-sizing: border-box;
  }

  .div_global_facture[data-fac_id] .zone_entete select,
  .div_global_facture[data-fac_id] .zone_entete input[type="text"] {
    max-width: 100%;
    box-sizing: border-box;
  }

  .div_global_facture[data-fac_id] #reglement,
  .div_global_facture[data-fac_id] #commentaires,
  .div_global_facture[data-fac_id] #commission {
    width: 100% !important;
  }

  .div_global_facture[data-fac_id] .zone_bas_pied_facture table {
    width: 100% !important;
    max-width: 100%;
  }

  /* Tableau des lignes : défile horizontalement dans son propre cadre */
  .div_global_facture[data-fac_id] #commande {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-left: 1px solid #c0c0c0;
  }

  .div_global_facture[data-fac_id] #commande th,
  .div_global_facture[data-fac_id] #commande td {
    min-width: 58px;
    padding: 4px !important;
    box-sizing: border-box;
  }

  .div_global_facture[data-fac_id] #commande thead th:nth-child(1),
  .div_global_facture[data-fac_id] #commande .col_action_g {
    min-width: 44px;
  }

  .div_global_facture[data-fac_id] #commande thead th:nth-child(2),
  .div_global_facture[data-fac_id] #commande .col_qte_liv,
  .div_global_facture[data-fac_id] #commande thead th:last-child,
  .div_global_facture[data-fac_id] #commande .col_action {
    min-width: 30px;
  }

  .div_global_facture[data-fac_id] #commande thead th:nth-child(3),
  .div_global_facture[data-fac_id] #commande .col_article {
    min-width: 240px;
  }

  .div_global_facture[data-fac_id] #commande .col_montant,
  .div_global_facture[data-fac_id] #commande .col_montant_remise,
  .div_global_facture[data-fac_id] #commande .col_prix_catalogue,
  .div_global_facture[data-fac_id] #commande .col_tarif {
    min-width: 76px;
  }

  .div_global_facture[data-fac_id] #commande tfoot td {
    min-width: 0;
  }

  .div_global_facture[data-fac_id] #select_update_article_flexselect {
    width: 100% !important;
    background-position: right 6px center !important;
    box-sizing: border-box;
  }

  .div_global_facture[data-fac_id] #commande .zone_ajout_pdt {
    position: sticky;
    left: 0;
    max-width: calc(100vw - 40px);
  }

  .div_global_facture[data-fac_id] #add_pdt_select_flexselect {
    width: 100% !important;
    max-width: calc(100vw - 60px);
    background-position: right 6px center !important;
    box-sizing: border-box;
  }
}

/* ---------- Édition commande (back-office, commande/edit) ----------
 * custom-commande.css : menu de boutons en position absolue à droite,
 * hauteurs fixes (.zone_entete 315px, .form-container.top 218px) et
 * champs à 60% => chevauchements en mobile.
 */
@media screen and (max-width: 900px) {
  .div_global_commande[data-com_id] {
    padding: 10px !important;
    overflow-x: visible !important;
    box-sizing: border-box;
  }

  /* Menu : dans le flux, 2 boutons par ligne */
  .div_global_commande[data-com_id] > .menu {
    position: static !important;
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
  }

  .div_global_commande[data-com_id] > .menu > button,
  .div_global_commande[data-com_id] > .menu > a {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    margin: 0 !important;
  }

  .div_global_commande[data-com_id] > .menu > a > button,
  .div_global_commande[data-com_id] > .menu > button {
    width: 100%;
    min-height: 40px;
    margin: 0 !important;
  }

  .div_global_commande[data-com_id] > .menu .ui-button-text {
    padding: 8px 6px !important;
    white-space: normal;
    line-height: 1.2;
  }

  /* En-tête : hauteurs libérées, 3 blocs empilés */
  .div_global_commande[data-com_id] .zone_entete.pure-form,
  .div_global_commande[data-com_id] .form-container.top {
    height: auto !important;
  }

  .div_global_commande[data-com_id] h2.order-number {
    margin-left: 0;
  }

  .div_global_commande[data-com_id] .zone_entete .management,
  .div_global_commande[data-com_id] .zone_entete .management > tbody,
  .div_global_commande[data-com_id] .zone_entete .management > tbody > tr,
  .div_global_commande[data-com_id] .zone_entete .management > tbody > tr > td,
  .div_global_commande[data-com_id] .form-container.top > table,
  .div_global_commande[data-com_id] .form-container.top > table > tbody,
  .div_global_commande[data-com_id] .form-container.top > table > tbody > tr,
  .div_global_commande[data-com_id] .form-container.top > table > tbody > tr > td {
    display: block;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  .div_global_commande[data-com_id] .form-container {
    margin: 0 0 12px;
    padding: 14px 12px;
    box-sizing: border-box;
  }

  .div_global_commande[data-com_id] .form-container h1 {
    margin-bottom: 12px;
  }

  /* Libellés au-dessus, champs pleine largeur */
  .div_global_commande[data-com_id] .zone_entete .label_1,
  .div_global_commande[data-com_id] .zone_entete .label_3 {
    display: block;
    margin: 10px 0 4px;
  }

  .div_global_commande[data-com_id] .zone_entete .adr_groupe .label_1 select {
    margin-top: 4px;
  }

  .div_global_commande[data-com_id] .form-container.top > br {
    display: none;
  }

  .div_global_commande[data-com_id] .zone_entete .champ_contact {
    display: block;
    margin-top: 4px;
  }

  .div_global_commande[data-com_id] .zone_entete select,
  .div_global_commande[data-com_id] .zone_entete input[type="text"],
  .div_global_commande[data-com_id] .zone_entete .input_date {
    width: 100% !important;
    max-width: 100%;
    min-height: 38px;
    font-size: 15px;
    box-sizing: border-box;
  }

  .div_global_commande[data-com_id] .zone_entete select#id_tva {
    width: 100% !important;
  }

  .div_global_commande[data-com_id] #id_client_flexselect {
    width: calc(100% - 30px) !important;
    background-position: right 8px center !important;
  }

  .div_global_commande[data-com_id] .zone_entete .pure-g {
    gap: 0 10px;
    flex-wrap: nowrap;
  }

  .div_global_commande[data-com_id] .zone_entete .pure-u-1-2 {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  .div_global_commande[data-com_id] .zone_entete .pure-u-1-2 br {
    display: none;
  }

  .div_global_commande[data-com_id] .zone_entete input[type="checkbox"] {
    width: 18px;
    height: 18px;
    vertical-align: middle;
  }

  /* Réglement / Suivi : l'un sous l'autre, tableaux défilants */
  .div_global_commande[data-com_id] > .pure-g > .pure-u-2-5,
  .div_global_commande[data-com_id] > .pure-g > .pure-u-3-5 {
    width: 100%;
  }

  .div_global_commande[data-com_id] .table-marges {
    margin: 0 0 12px;
  }

  .div_global_commande[data-com_id] #reglement,
  .div_global_commande[data-com_id] #commentaires {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .div_global_commande[data-com_id] #reglement th,
  .div_global_commande[data-com_id] #commentaires th {
    padding: 8px 6px !important;
  }

  /* Boutons Enregistrer / Tout réceptionner (sortis du thead par le navigateur) */
  .div_global_commande[data-com_id] #recalcul,
  .div_global_commande[data-com_id] #receptionner {
    float: none !important;
    width: 100%;
    margin: 0 0 6px !important;
  }

  /* Tableau des produits : défile horizontalement dans son cadre */
  .div_global_commande[data-com_id] #commande {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .div_global_commande[data-com_id] #commande th,
  .div_global_commande[data-com_id] #commande td {
    min-width: 60px;
    padding: 6px 4px !important;
    box-sizing: border-box;
  }

  .div_global_commande[data-com_id] #commande thead th:nth-child(1),
  .div_global_commande[data-com_id] #commande .col_action_g {
    min-width: 44px;
  }

  .div_global_commande[data-com_id] #commande thead th:nth-child(2),
  .div_global_commande[data-com_id] #commande .col_qte_liv,
  .div_global_commande[data-com_id] #commande thead th:last-child,
  .div_global_commande[data-com_id] #commande .col_action,
  .div_global_commande[data-com_id] #commande .col_man,
  .div_global_commande[data-com_id] #commande .col_grat,
  .div_global_commande[data-com_id] #commande .col_retour {
    min-width: 40px;
  }

  .div_global_commande[data-com_id] #commande thead th:nth-child(3),
  .div_global_commande[data-com_id] #commande .col_article {
    min-width: 230px;
  }

  .div_global_commande[data-com_id] #commande .col_qte,
  .div_global_commande[data-com_id] #commande .col_tarif,
  .div_global_commande[data-com_id] #commande .col_montant,
  .div_global_commande[data-com_id] #commande .col_montant_remise,
  .div_global_commande[data-com_id] #commande .col_prix_catalogue {
    min-width: 76px;
  }

  .div_global_commande[data-com_id] #commande .col_article input,
  .div_global_commande[data-com_id] #commande .col_qte input,
  .div_global_commande[data-com_id] #commande .col_tarif input {
    width: 100% !important;
    box-sizing: border-box;
  }

  .div_global_commande[data-com_id] #commande tfoot td {
    min-width: 0;
  }

  .div_global_commande[data-com_id] #commande .zone_ajout_pdt {
    position: sticky;
    left: 0;
    width: calc(100vw - 70px);
  }

  .div_global_commande[data-com_id] #add_pdt_select_flexselect {
    width: 100% !important;
    background-position: right 8px center !important;
    box-sizing: border-box;
  }

  /* Pied : totaux empilés */
  .div_global_commande[data-com_id] .zone_bas_pied_commande,
  .div_global_commande[data-com_id] .zone_bas_pied_commande > tbody,
  .div_global_commande[data-com_id] .zone_bas_pied_commande > tbody > tr,
  .div_global_commande[data-com_id] .zone_bas_pied_commande > tbody > tr > td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  .div_global_commande[data-com_id] .zone_bas_pied_commande > tbody > tr > td:first-child {
    display: none;
  }

  .div_global_commande[data-com_id] .zone_bas_pied_commande table {
    width: 100% !important;
  }

  .div_global_commande[data-com_id] .zone_bas_pied_commande br {
    display: none;
  }

  .div_global_commande[data-com_id] .zone_bas_pied_commande > tbody > tr > td > table ~ table {
    margin-top: 12px;
  }
}

/* ===== Commande fournisseur (commande_fournisseur/edit) ===== */
@media screen and (max-width: 900px) {
  .div_global_commande[data-com_id="mm"] {
    padding: 8px !important;
    overflow-x: visible !important;
  }

  .div_global_commande[data-com_id="mm"] > br {
    display: none;
  }

  /* --- Pavé de recherche --- */
  .div_global_commande[data-com_id="mm"] #form_recherche fieldset {
    margin: 0;
    padding: 8px 10px 10px;
    border: 1px solid #d5dde2;
    border-radius: 4px;
    background: #f7f9fa;
    min-width: 0;
  }

  .div_global_commande[data-com_id="mm"] #form_recherche fieldset > table,
  .div_global_commande[data-com_id="mm"] #form_recherche fieldset > table > tbody,
  .div_global_commande[data-com_id="mm"] #form_recherche fieldset > table > tbody > tr,
  .div_global_commande[data-com_id="mm"] #form_recherche fieldset > table > tbody > tr > td,
  .div_global_commande[data-com_id="mm"] #tab-search,
  .div_global_commande[data-com_id="mm"] #tab-search > tbody,
  .div_global_commande[data-com_id="mm"] #tab-search > tbody > tr,
  .div_global_commande[data-com_id="mm"] #tab-search > tbody > tr > td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 !important;
    border: 0;
    background: transparent;
    text-align: left;
  }

  .div_global_commande[data-com_id="mm"] #tab-search .sepr_1 {
    padding-bottom: 10px;
  }

  .div_global_commande[data-com_id="mm"] #tab-search .sp,
  .div_global_commande[data-com_id="mm"] #tab-search .sp_1,
  .div_global_commande[data-com_id="mm"] #tab-search .sp_2 {
    display: block;
    width: auto !important;
    margin-bottom: 3px;
    font-size: 13px;
    font-weight: bold;
    color: #333;
  }

  .div_global_commande[data-com_id="mm"] #tab-search select,
  .div_global_commande[data-com_id="mm"] #tab-search input[type="text"],
  .div_global_commande[data-com_id="mm"] #tab-search #recherche_id_article_flexselect,
  .div_global_commande[data-com_id="mm"] #tab-search #recherche_marque_produit_flexselect,
  .div_global_commande[data-com_id="mm"] #tab-search #recherche_article_flexselect,
  .div_global_commande[data-com_id="mm"] #tab-search #recherche_categorie_flexselect {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 38px;
    font-size: 16px;
  }

  .div_global_commande[data-com_id="mm"] #tab-search #recherche_id_article_flexselect,
  .div_global_commande[data-com_id="mm"] #tab-search #recherche_marque_produit_flexselect {
    background-position: right 8px center;
    padding-right: 26px;
  }

  .div_global_commande[data-com_id="mm"] #tab-search select[multiple] {
    height: auto;
    max-height: 120px;
  }

  .div_global_commande[data-com_id="mm"] #tab-search .hasDatepicker {
    height: 38px;
    background-position: right 8px center;
  }

  /* Cases à cocher : libellé et case sur la même ligne */
  .div_global_commande[data-com_id="mm"] #tab-search .sepr_1:has(> input[type="checkbox"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: 13px;
    font-weight: bold;
  }

  .div_global_commande[data-com_id="mm"] #tab-search .sepr_1:has(> input[type="checkbox"]) > .sp_2 {
    margin: 0;
  }

  .div_global_commande[data-com_id="mm"] #tab-search input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0 12px 0 0;
  }

  /* Légendes de couleur regroupées */
  .div_global_commande[data-com_id="mm"] #tab-search td > span[style*="background-color"] {
    display: inline-block;
    width: auto !important;
    margin: 0 4px 6px 0;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
  }

  .div_global_commande[data-com_id="mm"] #tab-search > tbody > tr > td:has(> span[style*="background-color"]) {
    display: inline-block;
    width: auto !important;
  }

  /* Boutons Rechercher / Réinitialiser */
  .div_global_commande[data-com_id="mm"] #form_recherche fieldset > table > tbody > tr > td:last-child {
    display: flex;
    gap: 8px;
    margin-top: 6px;
  }

  .div_global_commande[data-com_id="mm"] #form_recherche fieldset > table > tbody > tr > td:last-child > br {
    display: none;
  }

  .div_global_commande[data-com_id="mm"] #search,
  .div_global_commande[data-com_id="mm"] #reset {
    flex: 1 1 50%;
    height: 44px;
    margin: 0 !important;
  }

  /* --- Barre d'actions --- */
  .div_global_commande[data-com_id="mm"] .pied_liste {
    width: 100% !important;
    margin-top: 8px !important;
    box-sizing: border-box;
  }

  .div_global_commande[data-com_id="mm"] .pied_liste > table:not(.commande-table),
  .div_global_commande[data-com_id="mm"] .pied_liste > table:not(.commande-table) > tbody {
    display: block;
    width: 100%;
    background: transparent;
  }

  .div_global_commande[data-com_id="mm"] .pied_liste > table:not(.commande-table) > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: transparent;
  }

  .div_global_commande[data-com_id="mm"] .pied_liste > table:not(.commande-table) > tbody > tr > td {
    display: block;
    flex: 1 1 calc(50% - 6px);
    width: auto !important;
    padding: 0;
    border: 0;
  }

  .div_global_commande[data-com_id="mm"] .pied_liste > table:not(.commande-table) > tbody > tr > td:first-child {
    flex-basis: 100%;
  }

  .div_global_commande[data-com_id="mm"] .pied_liste > table:not(.commande-table) > tbody > tr > td:first-child > span {
    float: none !important;
    display: block;
    padding: 4px 0 !important;
    text-align: left;
  }

  .div_global_commande[data-com_id="mm"] .pied_liste > table:not(.commande-table) button {
    width: 100%;
    min-height: 40px;
    border: 1px solid #c8d0d5;
    border-radius: 4px;
  }

  /* --- Tableau des produits : défilement dans son conteneur --- */
  .div_global_commande[data-com_id="mm"] .pied_liste .sticky-wrap {
    margin: 10px 0 0;
    -webkit-overflow-scrolling: touch;
  }

  .div_global_commande[data-com_id="mm"] .pied_liste .sticky-wrap.overflow-y {
    max-height: 70vh;
  }

  .div_global_commande[data-com_id="mm"] .sticky-wrap table {
    max-width: none;
  }

  .div_global_commande[data-com_id="mm"] #commande-5 td {
    font-size: 12px;
  }

  .div_global_commande[data-com_id="mm"] #commande-5 input[type="text"],
  .div_global_commande[data-com_id="mm"] #commande-5 input[type="number"] {
    font-size: 14px;
  }
}