/* ============================================
   ORISHA DESIGN SYSTEM - MOBILE SALES OVERRIDE
   Version: 2.0.0
   Based on OrishaUI 3.13.1 Design Tokens
   Extracted from SSMS-ODS Figma maquettes
   ============================================ */

/* ---------------------- FONT IMPORT ---------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ---------------------- DESIGN TOKENS ---------------------- */
:root {
  /* Colors */
  --oui-color-primary: #482882;
  --oui-color-primary-hover: #5a35a6;
  --oui-color-primary-active: #3a2070;
  --oui-color-primary-state-tint: #eae0fc;
  --oui-color-on-primary: #efeef2;
  --oui-color-secondary: #dbcafa;
  --oui-color-on-secondary: #2d2b36;
  --oui-color-surface: #ffffff;
  --oui-color-background: #efeef2;
  --oui-color-on-surface: #3d3a47;
  --oui-color-on-surface-variant: #484552;
  --oui-color-on-surface-subtle: #797389;
  --oui-color-outline: #9692a5;
  --oui-color-outline-subtle: rgba(72, 40, 130, 0.2);
  --oui-color-critical: #e8005f;
  --oui-color-positive: #00875a;
  --oui-color-warning: #f5a623;

  /* Typography */
  --oui-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --oui-font-size-xs: 12px;
  --oui-font-size-sm: 14px;
  --oui-font-size-md: 16px;
  --oui-font-size-lg: 18px;
  --oui-font-size-xl: 20px;
  --oui-font-size-2xl: 24px;
  --oui-line-height-xs: 15px;
  --oui-line-height-sm: 17.5px;
  --oui-line-height-md: 19px;
  --oui-line-height-lg: 22px;
  --oui-line-height-2xl: 29px;
  --oui-letter-spacing-sm: 0.2px;
  --oui-letter-spacing-md: 0.4px;

  /* Spacing */
  --oui-spacing-xs: 4px;
  --oui-spacing-sm: 8px;
  --oui-spacing-md: 12px;
  --oui-spacing-lg: 16px;
  --oui-spacing-xl: 24px;
  --oui-spacing-2xl: 32px;
  --oui-spacing-3xl: 48px;

  /* Border Radius */
  --oui-radius-sm: 4px;
  --oui-radius-md: 8px;
  --oui-radius-lg: 16px;
  --oui-radius-xl: 32px;

  /* Shadows — DS Elevation/Shadow: drop-shadow #8658E133 offset(0,5) blur 16 */
  --oui-shadow-sm: 0 2px 8px rgba(134, 88, 225, 0.1);
  --oui-shadow-md: 0 5px 16px rgba(134, 88, 225, 0.2);
  --oui-shadow-lg: 0 8px 24px rgba(134, 88, 225, 0.2);

  /* Transitions */
  --oui-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   PRESERVED ORIGINAL STYLES (from style.css)
   Ces règles restaurent le comportement structurel/fonctionnel
   de l'original. Elles sont placées AVANT les overrides Orisha
   afin que ces derniers gardent la priorité dans la cascade.
   Ne pas supprimer.
   ============================================================ */

/* --- Polices originales (utilisées par certains champs/boutons) --- */
@font-face {
	font-family: 'opensans';
	src: url('./opensans-regular.ttf') format('truetype');
	font-weight: regular;
	font-style: regular;
}
@font-face {
	font-family: 'opensans-bold';
	src: url('./opensans-bold.ttf') format('truetype');
	font-weight: bold;
	font-style: bold;
}
@font-face {
	font-family: 'opensans-semibold';
	src: url('./opensans-semibold.ttf') format('truetype');
	font-weight: bold;
	font-style: bold;
}
@font-face {
	font-family: 'muli-bold';
	src: url('./muli-bold.ttf') format('truetype');
	font-weight: bold;
	font-style: bold;
}
@font-face {
	font-family: 'muli-regular';
	src: url('./muli-regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* --- Structure de page & typographie de base --- */
.ui-mobile, .ui-mobile body {height: 99.9%;}
p {font-weight:normal;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none;margin: 0;}
input[type=number] { -moz-appearance: textfield;}
.normal {font-weight:normal!important;}
.padding-top-45 {padding-top:45px;min-height:calc(100vh - 45px);}
.ui-header h1 {font-weight:bold;font-size: 1em; min-height: 1.1em;text-align: center;display: block;margin: 0 30%;padding: 0.7em 0;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;outline: 0!important;}
.ui-content {padding:22px;}
.ui-page-theme-a .ui-btn, .ui-page-theme-a .ui-btn:visited, html .ui-body-a .ui-btn {background-color:#ffffff;}
.ui-btn-icon-left {padding-left: .5625em;}
.container-blue {width:100%;padding:0;margin:0;background: linear-gradient(rgb(0, 135, 205) 0%, rgb(0, 74, 147) 100%);}
.height-100 {height:100%;min-height:calc(100vh - 20px);padding-bottom:20px;}
.container-blue h1 {font-size:1rem;font-weight:normal;color:#ffffff;text-shadow:none;margin:0;}
.ui-body-d {background-color:#ffffff;box-shadow:0 3px 5px 0 rgba(174,194,205,0.4);}
.ui-body-i {background-color:#ffffff;}
.ui-body-e p {color:#ffffff;}
.ui-body-f p {color:#ffffff;}
.ui-body-g p {color:#ffffff;}
.m-0 {margin:0;}
.ls-0 {letter-spacing:0;}
.btn-g {background-color:#cb4c4c!important;box-shadow:0 3px 5px 0 rgba(174,194,205,0.4); color:#ffffff!important;border:none;text-shadow:none!important;}
.btn-h {background-color:#134e95!important;box-shadow:0 3px 5px 0 rgba(174,194,205,0.4); color:#ffffff!important;border:none;text-shadow:none!important;font-weight:normal!important;}
.ui-btn .btn-white {background-color:#ffffff;opacity: 1;font-size: 16px;text-indent: initial;color: #343939;border-color:#b1b6bd;}
.ui-btn .btn-blue {background-color: #134e95;opacity: 1;font-size: 16px;text-indent: initial;color: #fff;}
.ui-page-theme-a a {font-weight:normal!important;}
.ui-input-search input {padding:17px 18px 17px 40px;}
.ui-input-search input::placeholder {color:#828787;opacity:1;}
.ui-input-search::after {left: 15px;margin-top: -8px;width: 16px;height: 16px;opacity: 1;background: url(../img/search.png) no-repeat;background-size:contain;}
.ui-input-search .ui-icon-delete::after {background: url(../img/search-delete.png) no-repeat;background-size:contain;width: 18px;height: 18px;margin-top: -9px;}
input[type="search" i]::-webkit-search-cancel-button {-webkit-appearance: none;background: url(../img/search-delete.png) no-repeat;background-size:contain;width: 14px;height: 14px;}
.creatClient {font-size:12px!important;}

/* --- Focus / active jQuery Mobile --- */
.ui-page-theme-a .ui-btn:focus, html .ui-bar-a .ui-btn:focus, html .ui-body-a .ui-btn:focus, html body .ui-group-theme-a .ui-btn:focus, html head + body .ui-btn.ui-btn-a:focus, .ui-page-theme-a .ui-focus, html .ui-bar-a .ui-focus, html .ui-body-a .ui-focus, html body .ui-group-theme-a .ui-focus, html head + body .ui-btn-a.ui-focus, html head + body .ui-body-a.ui-focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  text-shadow: none;
}
.ui-page-theme-a .ui-btn.ui-btn-active, html .ui-bar-a .ui-btn.ui-btn-active, html .ui-body-a .ui-btn.ui-btn-active, html body .ui-group-theme-a .ui-btn.ui-btn-active, html head + body .ui-btn.ui-btn-a.ui-btn-active, .ui-page-theme-a .ui-checkbox-on::after, html .ui-bar-a .ui-checkbox-on::after, html .ui-body-a .ui-checkbox-on::after, html body .ui-group-theme-a .ui-checkbox-on::after, .ui-btn.ui-checkbox-on.ui-btn-a::after, .ui-page-theme-a .ui-flipswitch-active, html .ui-bar-a .ui-flipswitch-active, html .ui-body-a .ui-flipswitch-active, html body .ui-group-theme-a .ui-flipswitch-active, html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active, .ui-page-theme-a .ui-slider-track .ui-btn-active, html .ui-bar-a .ui-slider-track .ui-btn-active, html .ui-body-a .ui-slider-track .ui-btn-active, html body .ui-group-theme-a .ui-slider-track .ui-btn-active, html body div.ui-slider-track.ui-body-a .ui-btn-active {
  color:initial;
  text-shadow:none!important;
  background-color:#dfe3e8;
}
html .ui-page-theme-a .menu-index .ui-btn.ui-btn-active {background:none!important;}
.ui-listview > li p {
    text-overflow: initial;
    white-space: normal;
}

/***** LOGIN (structure) *****/
.container-formulaire .ui-btn:hover {background-color:#134e95;border:none;color:#ffffff;text-shadow:none;}
.container-formulaire .ui-btn:active {background-color:#5d9bfd;border:none;color:#ffffff;text-shadow:none;}
.ui-mobile .login  label, .serveur-login {display:block;text-align:left;color:#828787;font-size:13px;padding:0;margin:0;font-weight:normal;text-shadow:none;}
.login .ui-input-text input {
    padding:5px 0 7px;
    margin: 0;min-height: 2.2em;
    text-align: left;
    border: 0;
    background: transparent none;
    -webkit-appearance: none;
    -webkit-border-radius: inherit;
    border-radius: inherit;
    line-height: 1.4em;
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
}
.login .ui-input-text {box-shadow:none;border-radius:0;border:none;border-bottom: 1px solid #b1b6bd;margin:0 0 12px;}
.connexion span {display:inline-block;vertical-align:text-top;width:18px;height:18px;margin-right:10px;background: url(../img/power-off.png) no-repeat;background-size:contain;}
.serveur-name-login {padding:5px 0 5px;margin:0 0 20px;font-weight:normal;text-align:left;color:#333;}
.drapeau {width:35px;margin:15px 25px 0 0;}
.drapeau_last {margin-right:0;}
.shadow {box-shadow:0 3px 5px 3px rgba(174,194,205,0.4);}

/***** MENU (icônes & footer d'origine) *****/
.menu-index .ui-content {padding:22px;}
.menu-index ul.ui-shadow {box-shadow:none;}
.menu-index .ui-btn:after {left:0;}
.index-footer {position:absolute;bottom:22px;left:22px;}
.index-footer p {color:#ffffff;font-size:14px;text-shadow:none;font-weight:normal;letter-spacing:0;opacity:0.75;margin:5px 0 0 0;}
.iconestock {position:relative;}
.iconestock::after {content: "";background: url(../img/box-alt-blanc.png) no-repeat left;opacity:0.75;top: 0;left: 0;bottom: 0;right: 0;position: absolute;}
.iconejumelage {position:relative;}
.iconejumelage::after {content: "";width:20px;height:20px;background: url(../img/rss.png) no-repeat;background-size:contain;opacity:0.75;top:5px;left: 0;position: absolute;}
.iconeconnexion {position:relative;}
.iconeconnexion::after {content: "";width:20px;height:20px;background: url(../img/power-off.png) no-repeat;background-size:contain;opacity:0.75;top:9px;left: 0;;position: absolute;}
.iconeglobe {position:relative;}
.iconeglobe::after {content: "";width:20px;height:20px;background: url(../img/globe.png) no-repeat;background-size:contain;opacity:0.75;top:8x;left: 0;;position: absolute;}
.iconeuser {position:relative;}
.iconeuser::after {content: "";width:20px;height:20px;background: url(../img/user-circle.png) no-repeat left;background-size:contain;top: 0px;left: 0;position: absolute;}
.exclamation {display:inline-block;vertical-align:bottom;width:21px;height:21px;margin-right:10px;background: url(../img/exclamation-circle.png) no-repeat center;background-size:contain;opacity:0.8;}

/***** VENTE (structure & icônes) *****/
.count-stock {right: 30px;}
.iconerefresh {display:inline-block;width:21px;height:21px;margin-right:10px;background: url(../img/sync-alt.png) no-repeat center;background-size:contain;}
.iconecard {display:inline-block;vertical-align: text-top;width:21px;height:21px;margin-right:10px;background: url(../img/credit-card.png) no-repeat center;background-size:contain;}
.ui-page-theme-a .ui-btn.enregister {background:none;border:none;text-shadow:none;box-shadow:none;font-size:16px;color:#009c53;padding:8px 0;margin-right:10px;letter-spacing:-0.39px;}
.ui-page-theme-a .ui-btn.btn-back {background:none;border:none;text-shadow:none;box-shadow:none;font-size:16px;color:#343939;padding:8px 0;letter-spacing:-0.39px;}
.btn-back span {display:inline-block;width:9px;height:18px;background: url(../img/chevron-left.png) no-repeat right;background-size: contain;vertical-align:sub;margin-right:8px;}
.formulaire-create label {text-align: left;color: #828787;font-size: 13px;padding: 0;margin: 0;font-weight: normal;text-shadow: none;}
.formulaire-create .ui-input-text input {padding: 5px 0 7px;}
.formulaire-create .ui-input-text input::placeholder {color:#828787;opacity:1;}
.creer-panier .ui-input-text {margin-bottom:20px;}
.ui-page-theme-a .ui-btn.iconeclient {background: url(../img/user-alt.png) no-repeat 12px;background-size: 17px;}
.ui-page-theme-a .ui-btn.iconevendeur {background: url(../img/finger.png) no-repeat 12px;background-size: 17px;}
.modreg {margin:12px 0;}
.modreg .ui-btn {border:none!important;}
.modreg .ui-listview-inset {margin:4px 0;}
.modreg a {color:#4e5353;font-size:14px;line-height:20px;padding:19px 20px 17px 20px;}
.modreg .ui-icon-myicon::after {background: url(../img/trash-alt.png) no-repeat;background-size: 19px;border-radius:0;}
.modreg-montant .ui-block-a {width:40%;}
.modreg-montant .ui-block-b {width:60%;padding-left:5px;}
.modreg-montant .ui-block-a .ui-input-text {border:none!important;}
.modreg-montant .ui-block-b h2 a {line-height: 25px;border: none;background-color: #169c58;text-shadow: none;color: #fff;padding: 14px 20px 17px 20px;font-family:'muli-bold';font-weight:normal;}
.modreg-montant .ui-block-b h2 a::after {border-radius:0;width: 55px;height: 56px;top: 0;margin-top: 0;right: 0;border-left: 1px solid rgba(255,255,255,0.51);background: url(../img/chevron-down-white.svg) no-repeat center;background-size: 14px;}
.complete {display:block;width:45px;height:45px;background: url(../img/complete.svg) no-repeat center;background-size:contain;margin: 0 auto;}

/***** CLIENT (structure) *****/
.client-btn-creer {position:fixed;bottom:0;left:0;width:calc(100% - 44px);padding:15px 22px 20px 22px;background-color:#ffffff;z-index: 10;box-sizing: initial;}
.client-btn-creer .ui-btn {padding-top: 18px;padding-bottom: 21px;}
.formulaire-create .ui-input-text {box-shadow:none;border-radius:0;border:1px solid #ffffff!important;border-bottom: 1px solid #b1b6bd!important;margin:0 0 12px;}
.formulaire-radio {display:flex;margin-top:28px;margin-bottom:18px;}
.formulaire-radio .form-check {width:50%;}
.formulaire-radio .ui-btn {border:none;text-shadow:none;box-shadow:none;}
.formulaire-radio label {padding-left:5px;font-size:16px;line-height: 25px;color:#333;}
.formulaire-check label {font-size:16px;line-height: 25px;color:#333;}
.creer-client .ui-radio input {opacity:0;}
.formulaire-radio .ui-btn-icon-left::after {left:0px;}
.ui-radio .ui-btn.ui-radio-on:after {width:18px!important;height:18px!important;}
.ui-radio .ui-btn.ui-radio-off:after {width:18px!important;height:18px!important;}
.creer-client .ui-input-text {margin-bottom:25px;}
.creer-client .ui-input-text input {padding: 5px 0 15px;}
.creer-client .creer-client-select {margin: 0;width:100%;border:none;padding:10px 0 18px;}
.creer-client .ui-select .ui-btn {border:1px solid #ffffff!important;border-bottom: 1px solid #b1b6bd!important;box-shadow: none;border-radius: 0;padding: 10px 0 18px;text-align: left;}
.creer-client .ui-select .ui-btn::after {width: 18px;height: 18px;background: url(../img/chevron-down.png) no-repeat;background-size: contain;}
.ui-listview .ui-btn:focus {box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;}
html .creer-client .ui-focus {box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;border:1px solid #b1b6bd!important;}

/***** PANIER (structure) *****/
.contenu_panier {padding-right:70px!important;}
.contenu_panier p {margin:5px 0!important;}
.contenu_panier .ui-li-count {top: 26px;right: 40px;border:none!important;background:none!important;}
.iconesupprimer {display:inline-block;width:21px;height:21px;margin-right:10px;background: url(../img/trash-alt.png) no-repeat center;background-size:contain;}
.iconemoins {background: url(../img/icone-moins.svg) no-repeat 22px;background-size:contain;}
.iconeplus {background: url(../img/icone-plus.svg) no-repeat;background-size:contain;background-position: bottom 50% right 22px;}
.ui-btn.iconemoins:active, .ui-btn.iconeplus:active {background-color:#ffffff!important;}
.formulaire-change .ui-input-text {box-shadow:none!important;border:none!important;}
.input-change {padding:17px 18px!important;border:none!important;box-shadow:none!important;margin-bottom:20px!important;}

/* --- green-button-theme --- */
.ui-btn-up-g, .ui-btn-hover-g, .ui-btn-down-g
{
	color: white;
	font-weight: bold;
	text-decoration: none;
}
.ui-btn-up-g, .ui-btn-g
{
	border: 1px solid #397114;
	background: #5aab25;
	text-shadow: 0 -1px 1px #397114;
	background-image: -moz-linear-gradient(top, #7ec44f, #5aab25);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #87c45e), color-stop(1, #619e39));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7ec44f', EndColorStr='#5aab25')";
}
.ui-btn-hover-g
{
	border: 1px solid #2c6e00;
	background: #75b54a;
	text-shadow: 0 -1px 1px #2a6901;
	background-image: -moz-linear-gradient(top, #99d472, #75b54a);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #99d472), color-stop(1, #75b54a));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99d472', EndColorStr='#75b54a')";
}
.ui-btn-g:active
{
	border: 1px solid #457823;
	background: #7ec44f;
	text-shadow: 0 -1px 1px #457823;
	background-image: -moz-linear-gradient(top, #619e39, #7ec44f);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #619e39), color-stop(1, #7ec44f));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#619e39', EndColorStr='#7ec44f')";
}

/* --- Divers utilitaires --- */
.taille-right
{
    position: absolute;
    font-weight: 700;
    text-align: center;
    padding: 0 .48em;
    line-height: 1.6em;
    min-width: .64em;
    right: 0;
    top: 50%;
    margin-top: -0.88em;
}
.ventepage
{
  max-height : 50vh;
  overflow : auto;
  display: block;
}
.iconepanier-vide
{
  right: 12px;
  top: 8px;
  padding:0;
  width:24px;
  height:24px;
  border-radius: 0 !important;
  background : url(../img/shopping-cart.svg) no-repeat center ;
  background-color: transparent!important;
  background-size:contain;
  box-shadow:none!important;
  border:none!important;
}
.iconepanier-empty
{
  right: 12px;
  top: 8px;
  padding:0;
  width:24px;
  height:24px;
  border-radius: 0 !important;
  background : url(../img/shopping-cart-empty.svg) no-repeat center ;
  background-color: transparent!important;
  background-size:contain;
  box-shadow:none!important;
  border:none!important;
}
.iconemenu
{
  left: 12px;
  top: 10px;
  padding:0;
  width:22px;
  height:22px;
  border-radius: 0 !important;
  background : url(../img/bars.svg) no-repeat center ;
  background-color: transparent!important;
  background-size:contain;
  box-shadow:none!important;
  border:none!important;
}
.iconeflecheright
{
  background: url(../img/chevron-right.png) no-repeat top 50% right 15px ;
  padding-right:30px;
  background-size: 8px;
}
.iconepoint
{
  background: url(../img/point-option.svg) no-repeat top 50% right 15px ;
  padding-right:30px;
  background-size: 25px;
}
.creatClient label { padding: .7em 1em; }

/* --- Loader --- */
#pageloader {
  display:none;
  position:fixed;
  z-index:1000;
  top:20%;
  left:0;
  width: 100%;
}
.imgloader {
  margin:0 auto;
  border: 3px solid #CDCDCD;
  border-top: 3px solid #555555;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================================
   FIN DES STYLES ORIGINAUX PRÉSERVÉS
   Les overrides Orisha ci-dessous ont la priorité.
   ============================================================ */

/* ---------------------- BASE TYPOGRAPHY ---------------------- */
body {
  font-family: var(--oui-font-family) !important;
  letter-spacing: var(--oui-letter-spacing-sm) !important;
  color: var(--oui-color-on-surface) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, p, .ui-btn, input, button, label, select, a {
  font-family: var(--oui-font-family) !important;
}
h1 { font-weight: 600 !important; }
.bolder { font-family: var(--oui-font-family) !important; font-weight: 700 !important; }
.bold { font-family: var(--oui-font-family) !important; font-weight: 600 !important; }
.muli-bold { font-family: var(--oui-font-family) !important; font-weight: 500 !important; }
.muli-regular { font-family: var(--oui-font-family) !important; font-weight: 400 !important; }

/* ---------------------- PAGE BACKGROUND ---------------------- */
.ui-page { background-color: var(--oui-color-background) !important; }

/* ---------------------- HEADER / APP BAR ---------------------- */
/* DS AppBar: white surface, 56px height, border-bottom outline-subtle */
.ui-header {
  background-color: var(--oui-color-surface) !important;
  border-bottom: 1px solid var(--oui-color-outline-subtle) !important;
  box-shadow: none !important;
  height: 56px !important;
}
.ui-header h1 {
  color: var(--oui-color-on-surface) !important;
  font-size: var(--oui-font-size-md) !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  letter-spacing: var(--oui-letter-spacing-md) !important;
}
.ui-page-theme-a .ui-btn.btn-back {
  color: var(--oui-color-on-surface) !important;
  font-weight: 500 !important;
  font-size: var(--oui-font-size-sm) !important;
}
.ui-page-theme-a .ui-btn.enregister {
  color: var(--oui-color-primary) !important;
  font-weight: 600 !important;
  font-size: var(--oui-font-size-sm) !important;
}

/* ---------------------- LOGIN PAGE ---------------------- */
.container-blue {
  background: linear-gradient(160deg, var(--oui-color-primary) 0%, #2d1a54 100%) !important;
}
.header-login {
  margin-bottom: var(--oui-spacing-xl) !important;
  padding-top: var(--oui-spacing-2xl) !important;
}
.container-blue h1 {
  font-size: var(--oui-font-size-lg) !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  letter-spacing: var(--oui-letter-spacing-md) !important;
  margin-top: var(--oui-spacing-sm) !important;
}
/* Login form card */
.container-formulaire {
  background-color: var(--oui-color-surface) !important;
  border-radius: var(--oui-radius-md) !important;
  border: 1px solid var(--oui-color-outline-subtle) !important;
  box-shadow: var(--oui-shadow-lg) !important;
  padding: var(--oui-spacing-xl) !important;
  max-width: 340px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Labels — DS Caption: Poppins Medium 12px */
.ui-mobile .login label,
.serveur-login {
  font-size: var(--oui-font-size-xs) !important;
  color: var(--oui-color-on-surface-variant) !important;
  font-weight: 500 !important;
  letter-spacing: var(--oui-letter-spacing-sm) !important;
  text-transform: none !important;
  margin-bottom: var(--oui-spacing-xs) !important;
}

/* DS TextField Medium: bordered box, radius 8px, border #9692a5, height ~40px */
.login .ui-input-text {
  border: 1px solid var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-md) !important;
  margin: 0 0 var(--oui-spacing-md) !important;
  box-shadow: none !important;
  transition: border-color var(--oui-transition) !important;
  background-color: var(--oui-color-surface) !important;
  padding: 6px 12px !important;
}
.login .ui-input-text:focus-within {
  border-color: var(--oui-color-primary) !important;
  border-width: 2px !important;
}
.login .ui-input-text input {
  padding: 4px 0 !important;
  font-size: var(--oui-font-size-sm) !important; /* 14px — Medium size */
  color: var(--oui-color-on-surface) !important;
  font-weight: 400 !important;
  line-height: var(--oui-line-height-sm) !important; /* 17.5px */
  border: none !important;
  background: transparent !important;
  min-height: 24px !important;
}
.login .ui-input-text input::placeholder {
  color: var(--oui-color-on-surface-subtle) !important;
  opacity: 1 !important;
}

/* Server info */
.serveur-name-login {
  color: var(--oui-color-on-surface) !important;
  font-size: var(--oui-font-size-sm) !important;
  font-weight: 500 !important;
  margin-bottom: var(--oui-spacing-xl) !important;
}

/* DS Action Button primary: radius 32px (pill), Poppins Medium 14px */
.container-formulaire .ui-btn,
.connexion.ui-btn {
  background-color: var(--oui-color-primary) !important;
  border: none !important;
  border-radius: var(--oui-radius-xl) !important;
  color: var(--oui-color-on-primary) !important;
  font-weight: 500 !important;
  font-size: var(--oui-font-size-sm) !important;
  letter-spacing: var(--oui-letter-spacing-md) !important;
  padding: 16px 24px !important;
  box-shadow: none !important;
  transition: all var(--oui-transition) !important;
  text-shadow: none !important;
  text-transform: none !important;
  width: 100% !important;
  margin: var(--oui-spacing-sm) 0 !important;
  min-height: 48px !important;
}
.container-formulaire .ui-btn:hover,
.connexion.ui-btn:hover {
  background-color: var(--oui-color-primary-hover) !important;
}
.container-formulaire .ui-btn:active,
.connexion.ui-btn:active {
  background-color: var(--oui-color-primary-active) !important;
}
/* Hide the power-off icon span */
.connexion span { background: none !important; display: none !important; }

/* Privacy link & flags */
.container-formulaire a.external, a.external {
  color: var(--oui-color-on-surface-subtle) !important;
  font-size: var(--oui-font-size-xs) !important;
  text-decoration: none !important;
  margin-top: var(--oui-spacing-lg) !important;
  display: inline-block !important;
}
.drapeau {
  width: 32px !important; height: 22px !important;
  margin: var(--oui-spacing-lg) 12px 0 0 !important;
  border-radius: var(--oui-radius-sm) !important;
  opacity: 0.7;
  transition: transform var(--oui-transition), opacity var(--oui-transition) !important;
}
.drapeau:hover { opacity: 1; transform: scale(1.05); }
.drapeau.shadow {
  opacity: 1 !important;
  box-shadow: 0 2px 8px rgba(72, 40, 130, 0.3) !important;
  transform: scale(1.05);
}
.drapeau_last { margin-right: 0 !important; }

/* ---------------------- MENU / INDEX PAGE ---------------------- */
.menu-titre {
  padding: var(--oui-spacing-2xl) var(--oui-spacing-xl) var(--oui-spacing-xl) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.menu-titre p { color: #ffffff !important; font-weight: 400 !important; }
.menu-index .ui-btn {
  color: #ffffff !important;
  font-size: var(--oui-font-size-sm) !important;
  font-weight: 500 !important;
  border-radius: var(--oui-radius-lg) !important;
  transition: background-color var(--oui-transition) !important;
  text-shadow: none !important;
  background-color: transparent !important;
  border: none !important;
}
.menu-index .ui-btn:hover,
.menu-index .ui-btn:active {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
/* Menu buttons: padding renforcé (spécificité > .ui-listview .ui-btn)
   pour laisser la place à l'icône positionnée en absolu à gauche.
   Icône: left 16px + largeur 20px => texte à partir de ~48px. */
.menu-index .ui-listview .ui-btn,
.ui-page-theme-a .menu-index .ui-btn,
html .menu-index .ui-listview-inset .ui-btn {
  color: #ffffff !important;
  background-color: transparent !important;
  text-shadow: none !important;
  border: none !important;
  padding: 14px 16px 14px 48px !important;
  position: relative !important;
}
/* Menu icons — use DS Orisha icons in white */
.menu-index .iconejumelage::after {
  content: "" !important;
  background: url(../img/icon-jumelage.svg) no-repeat center !important;
  background-size: 20px 20px !important;
  width: 20px !important;
  height: 20px !important;
  top: 50% !important;
  margin-top: -10px !important;
  left: 16px !important;
  right: auto !important;
  position: absolute !important;
  opacity: 1 !important;
}
.menu-index .iconeglobe::after {
  content: "" !important;
  background: url(../img/icon-traductions.svg) no-repeat center !important;
  background-size: 20px 20px !important;
  width: 20px !important;
  height: 20px !important;
  top: 50% !important;
  margin-top: -10px !important;
  left: 16px !important;
  right: auto !important;
  position: absolute !important;
  opacity: 1 !important;
}
.menu-index .iconeconnexion::after {
  content: "" !important;
  background: url(../img/icon-deconnexion.svg) no-repeat center !important;
  background-size: 20px 20px !important;
  width: 20px !important;
  height: 20px !important;
  top: 50% !important;
  margin-top: -10px !important;
  left: 16px !important;
  right: auto !important;
  position: absolute !important;
  opacity: 1 !important;
}
.menu-index .iconestock::after {
  content: "" !important;
  background: url(../img/icon-stock.svg) no-repeat center !important;
  background-size: 20px 20px !important;
  width: 20px !important;
  height: 20px !important;
  top: 50% !important;
  margin-top: -10px !important;
  left: 16px !important;
  right: auto !important;
  position: absolute !important;
  opacity: 1 !important;
}
.index-footer p {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: var(--oui-font-size-xs) !important;
}
.index-footer a {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: var(--oui-font-size-xs) !important;
}

/* ---------------------- SEARCH INPUT ---------------------- */
.ui-input-search {
  background-color: var(--oui-color-surface) !important;
  border: 1px solid var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-md) !important;
  box-shadow: none !important;
  transition: border-color var(--oui-transition) !important;
}
.ui-input-search:focus-within {
  border-color: var(--oui-color-primary) !important;
  border-width: 2px !important;
}
.ui-input-search input {
  font-size: var(--oui-font-size-sm) !important;
  padding: 14px 18px 14px 40px !important;
}

/* ---------------------- CARDS ---------------------- */
.ui-body-a {
  background-color: var(--oui-color-surface) !important;
  border: 1px solid var(--oui-color-outline-subtle) !important;
  border-radius: var(--oui-radius-md) !important;
  box-shadow: var(--oui-shadow-sm) !important;
}
.ui-shadow { box-shadow: var(--oui-shadow-sm) !important; }
.br-5 { border-radius: var(--oui-radius-md) !important; }
.p-33 { padding: var(--oui-spacing-xl) !important; }

/* ---------------------- GENERIC ACTION BUTTONS ---------------------- */
/* Primary action buttons (inline style override for bg:#134e95) */
.ui-btn[style*="background:#134e95"],
.ui-btn[style*="background-color:#134e95"] {
  background-color: var(--oui-color-primary) !important;
  border-radius: var(--oui-radius-xl) !important;
  font-weight: 500 !important;
  font-size: var(--oui-font-size-sm) !important;
  letter-spacing: var(--oui-letter-spacing-md) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Action buttons ex-verts (Réserver en magasin) -> violet Orisha primary */
.ui-btn[style*="background:#169c58"] {
  background-color: var(--oui-color-primary) !important;
  border-radius: var(--oui-radius-xl) !important;
  font-weight: 500 !important;
  font-size: var(--oui-font-size-sm) !important;
  letter-spacing: var(--oui-letter-spacing-md) !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--oui-color-on-primary) !important;
}
.ui-btn[style*="background:#169c58"]:hover {
  background-color: var(--oui-color-primary-hover) !important;
}
/* Secondary outlined buttons */
.ui-btn[style*="border-color:#b1b6bd"] {
  border-color: var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-md) !important;
  color: var(--oui-color-on-surface) !important;
  font-size: var(--oui-font-size-sm) !important;
}
/* DS btn-h (primary) */
.btn-h {
  background-color: var(--oui-color-primary) !important;
  border: none !important;
  border-radius: var(--oui-radius-xl) !important;
  box-shadow: none !important;
  color: var(--oui-color-on-primary) !important;
  font-weight: 500 !important;
}
.btn-h:hover { background-color: var(--oui-color-primary-hover) !important; }
/* DS btn-g (destructive) */
.btn-g {
  background-color: var(--oui-color-critical) !important;
  border: none !important;
  border-radius: var(--oui-radius-xl) !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Bouton "Retour en vente" (ValiderResa / ValiderVente) : thème jQuery Mobile
   ui-btn-b (fond gris foncé) -> Action Button primaire Orisha (pill violet).
   L'icône flèche jQuery Mobile (cercle sombre) est neutralisée. */
.ui-btn.ui-btn-b {
  background-color: var(--oui-color-primary) !important;
  color: var(--oui-color-on-primary) !important;
  border: none !important;
  border-radius: var(--oui-radius-xl) !important;
  font-family: var(--oui-font-family) !important;
  font-weight: 500 !important;
  font-size: var(--oui-font-size-sm) !important;
  letter-spacing: var(--oui-letter-spacing-md) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 14px 24px !important;
  min-height: 48px !important;
  text-align: center !important;
}
.ui-btn.ui-btn-b:hover { background-color: var(--oui-color-primary-hover) !important; }
.ui-btn.ui-btn-b:active { background-color: var(--oui-color-primary-active) !important; }
.ui-btn.ui-btn-b.ui-icon-arrow-l::after { display: none !important; }

/* ---------------------- PRODUCT PAGE ---------------------- */
/* Texte ex-vert (#30ac6c) -> violet Orisha primary.
   Couvre le montant total (span), le titre "Transaction validée" (h2)
   et le prix produit, quel que soit l'élément portant le style inline. */
[style*="color:#30ac6c"],
.ui-content p[style*="color:#30ac6c"],
.ui-content [style*="color:#30ac6c"] {
  color: var(--oui-color-primary) !important;
}
/* Quantity selector */
.ui-grid-b.br-5 {
  border: 1px solid var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-md) !important;
  overflow: hidden;
}
.ui-grid-b .ui-btn.iconemoins,
.ui-grid-b .ui-btn.iconeplus {
  background-color: var(--oui-color-surface) !important;
  border: none !important;
}
.ui-grid-b .ui-btn.iconemoins:active,
.ui-grid-b .ui-btn.iconeplus:active {
  background-color: var(--oui-color-primary-state-tint) !important;
}

/* ---------------------- LISTVIEW (Search results, colors, paniers) ---------------------- */
.ui-listview-inset {
  border-radius: var(--oui-radius-md) !important;
  overflow: hidden;
}
.ui-listview .ui-btn {
  font-size: var(--oui-font-size-sm) !important;
  color: var(--oui-color-on-surface) !important;
  border-color: var(--oui-color-outline-subtle) !important;
  /* padding décomposé : ne pas écraser le padding-left/right spécifique
     des items de menu (icône) ou des items avec compteur (badge stock) */
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.ui-listview .ui-btn:active {
  background-color: var(--oui-color-primary-state-tint) !important;
}
/* Items de liste avec compteur de stock (résultats de recherche, paniers) :
   réserver la place du badge .ui-li-count/.count-stock à droite pour éviter
   que le texte passe sous le badge. */
.ui-li-has-count .ui-btn,
.ui-listview .ui-btn.contenu_panier {
  padding-right: 88px !important;
}
.contenu_panier p {
  font-size: var(--oui-font-size-sm) !important;
  color: var(--oui-color-on-surface) !important;
}

/* ---------------------- PAYMENT PAGE (ventePayer) ---------------------- */
.modreg a {
  color: var(--oui-color-on-surface) !important;
  font-size: var(--oui-font-size-sm) !important;
  border-radius: var(--oui-radius-md) !important;
}
.modreg .ui-listview-inset { margin: 4px 0; }
.modreg-montant .ui-block-b h2 a {
  background-color: var(--oui-color-positive) !important;
  border-radius: var(--oui-radius-xl) !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}
.modreg-montant .ui-block-b h2 .ui-btn:hover {
  background-color: var(--oui-color-positive) !important;
}
.modreg-montant .ui-block-a .ui-input-text {
  border: 1px solid var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-md) !important;
  background-color: var(--oui-color-surface) !important;
}
#Montant {
  color: var(--oui-color-on-surface) !important;
  padding: 14px 16px !important;
  background-color: var(--oui-color-surface) !important;
  font-size: var(--oui-font-size-md) !important;
}

/* ---------------------- VENTE MENU PAGE ---------------------- */
/* Client/Vendeur buttons */
.ui-page-theme-a .ui-btn.iconeclient,
.ui-page-theme-a .ui-btn.iconevendeur {
  border: 1px solid var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-md) !important;
  color: var(--oui-color-on-surface) !important;
  font-size: var(--oui-font-size-sm) !important;
  box-shadow: none !important;
}

/* ---------------------- CLIENT CREATION FORM ---------------------- */
.formulaire-create label,
.creer-client label {
  font-size: var(--oui-font-size-xs) !important;
  color: var(--oui-color-on-surface-variant) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: var(--oui-letter-spacing-sm) !important;
}
/* DS TextField for forms */
.formulaire-create .ui-input-text,
.creer-client .ui-input-text {
  border: 1px solid var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-md) !important;
  background-color: var(--oui-color-surface) !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
  margin: 0 0 var(--oui-spacing-md) !important;
  transition: border-color var(--oui-transition) !important;
}
.formulaire-create .ui-input-text:focus-within,
.creer-client .ui-input-text:focus-within {
  border-color: var(--oui-color-primary) !important;
  border-width: 2px !important;
}
.formulaire-create .ui-input-text input,
.creer-client .ui-input-text input {
  font-size: var(--oui-font-size-md) !important;
  color: var(--oui-color-on-surface) !important;
  border: none !important;
  background: transparent !important;
  padding: 4px 0 !important;
}
.formulaire-create .ui-input-text input::placeholder,
.creer-client .ui-input-text input::placeholder {
  color: var(--oui-color-on-surface-subtle) !important;
}
/* Select / Dropdown (widget jQuery Mobile) */
.creer-client .ui-select .ui-btn {
  border: 1px solid var(--oui-color-outline) !important;
  border-radius: var(--oui-radius-md) !important;
  box-shadow: none !important;
  color: var(--oui-color-on-surface) !important;
  font-size: var(--oui-font-size-md) !important;
}
/* Select natif (.creer-client-select) : police Poppins + flèche, dans son
   conteneur .ui-input-text déjà bordé. Fond transparent pour épouser la boîte. */
.creer-client-select,
select.creer-client-select {
  font-family: var(--oui-font-family) !important;
  font-size: var(--oui-font-size-md) !important;
  color: var(--oui-color-on-surface) !important;
  background-color: transparent !important;
  border: none !important;
  width: 100% !important;
  padding: 4px 24px 4px 0 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23797389' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
}

/* Radio buttons & Checkboxes */
.formulaire-radio label,
.formulaire-check label,
.form-check-label {
  color: var(--oui-color-on-surface) !important;
  font-size: var(--oui-font-size-sm) !important;
  font-weight: 400 !important;
}
.form-check-input:checked {
  background-color: var(--oui-color-primary) !important;
  border-color: var(--oui-color-primary) !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px var(--oui-color-primary-state-tint) !important;
  border-color: var(--oui-color-primary) !important;
}
/* Submit button in client form (inline style override) */
.creer-client .ui-btn[style*="background-color:#134e95"],
#submitButton {
  background-color: var(--oui-color-primary) !important;
  border-radius: var(--oui-radius-xl) !important;
  color: var(--oui-color-on-primary) !important;
  font-weight: 500 !important;
  font-size: var(--oui-font-size-sm) !important;
  letter-spacing: var(--oui-letter-spacing-md) !important;
  box-shadow: none !important;
  border: none !important;
}
/* Client bottom CTA bar */
.client-btn-creer {
  background-color: var(--oui-color-surface) !important;
  border-top: 1px solid var(--oui-color-outline-subtle) !important;
  box-shadow: none !important;
}
.client-btn-creer .ui-btn {
  background-color: var(--oui-color-primary) !important;
  border-radius: var(--oui-radius-xl) !important;
  color: var(--oui-color-on-primary) !important;
  font-weight: 500 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---------------------- STATUS COLORS ---------------------- */
.ui-body-e { background-color: var(--oui-color-positive) !important; border-radius: var(--oui-radius-sm) !important; box-shadow: none !important; }
.ui-body-f { background-color: var(--oui-color-warning) !important; border-radius: var(--oui-radius-sm) !important; box-shadow: none !important; }
.ui-body-g { background-color: var(--oui-color-critical) !important; border-radius: var(--oui-radius-sm) !important; box-shadow: none !important; }
.ui-body-h { background-color: var(--oui-color-primary) !important; border-radius: var(--oui-radius-sm) !important; box-shadow: none !important; }

/* ---------------------- LOADER ---------------------- */
.imgloader {
  border: 3px solid var(--oui-color-outline-subtle) !important;
  border-top: 3px solid var(--oui-color-primary) !important;
}

/* ---------------------- FOCUS & ACTIVE STATES ---------------------- */
.ui-page-theme-a .ui-btn:focus,
html .ui-bar-a .ui-btn:focus,
html .ui-body-a .ui-btn:focus {
  box-shadow: 0 0 0 3px var(--oui-color-primary-state-tint) !important;
  outline: none !important;
  text-shadow: none !important;
}
.ui-page-theme-a .ui-btn.ui-btn-active {
  background-color: var(--oui-color-primary-state-tint) !important;
  color: var(--oui-color-primary) !important;
  text-shadow: none !important;
}
html .ui-page-theme-a .menu-index .ui-btn.ui-btn-active {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---------------------- MISC OVERRIDES ---------------------- */
/* Remove old button active state colors */
.ui-page-theme-a .ui-btn.ui-btn-active,
html .ui-bar-a .ui-btn.ui-btn-active {
  background-color: var(--oui-color-primary-state-tint) !important;
  text-shadow: none !important;
}
/* Cart icon in header */
.iconepanier-vide, .iconepanier-empty {
  box-shadow: none !important;
  border: none !important;
}
/* Menu burger icon */
.iconemenu {
  box-shadow: none !important;
  border: none !important;
}