/* front-theme.css (filtered from crm-theme: used in templates/front only) */
:root{
  --color-total: #17a2b8;           /* Bleu turquoise équilibré (déjà cohérent avec Bootstrap info) */
  --color-en-attente: #fff7cc;          /* Jaune pâle chaleureux pour "En attente" */

  --color-accepte: #c5efd5;          /* Vert menthe pastel pour "Accepté" */
  --color-annule: #e9ecef;           /* Gris bleu pâle pour "Annulé" */
  --color-a-expedier: #cce8fc;       /* Bleu ciel très doux pour "À expédier" */
  --color-expedie: #85b6ea;          /* Bleu pastel frais pour "Expédié" */
  --color-livre: #bae5b7;            /* Vert prairie doux pour "Livré" */
  --color-paye: #d8c6ff;             /* Lavande pastel pour "Payé" */
  --color-non-paye: #ffe4e4;         /* Rose poudré pour "Non payé" */
  --color-partiellement-paye: #fff2d1; /* Beige doré pour "Partiellement payé" */
  --color-facture: #e6e2fa;          /* Mauve pâle pour "Facture" */
  --color-echange: #f4b400;            /* Jaune-orangé principal (similaire à text-warning) pour "Echnange" */
  --color-avoir: #ffd6e0;            /* Rose tendre pour "Avoir" */
  --color-retour-en-cours: #ffe6ec;   /* Rose pastel très clair pour "Retour en cours" */
  --color-retourne: #ffb4b4;         /* Rouge rosé pastel pour "Retourné" */
  --color-a-rembourser: #fa9e9e;        /* Rouge rosé pastel pour "Remboursé" */
  --color-rembourse: #fa9e9e;        /* Rouge rosé pastel pour "Remboursé" */
  --color-echange-recu: #e2f6e8;     /* Bleu-vert très pâle pour "Échange reçu" */
  --color-echange-non-recu: #fff6cc; /* Jaune vanille pour "Échange non reçu" */

  --color-brouillon: #fff7cc;          /* Jaune pâle chaleureux pour "brouillan" */
  --color-valide: #bae5b7;            /* Vert prairie doux pour "Livré" */

  --crm-primary:#1064ee;
  --crm-accent:#0aa06e;
  --crm-danger:#e55353;
  --crm-warning:#ffb020;
  --crm-muted:#6c757d;

  --crm-bg:#f7f8fa;
  --crm-card:#ffffff;
  --crm-border:#e6e8ec;

  --crm-radius:12px;
  --crm-shadow:0 8px 20px rgba(16, 100, 238, .06);
  --crm-focus:0 0 0 .2rem rgba(16,100,238,.25);


  --color-thumb-base: 76px;
}

/* Fix blocage écran modale Bootstrap */
body.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}


.modal-content{ border-radius: var(--crm-radius); overflow: hidden; }
@keyframes crm-shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes crm-spin{ to { transform: rotate(360deg); } }
.mb-3 label{
  font-size: .825rem;
  color: #6b7280;
  margin-bottom: .35rem;
}
@keyframes shimmer{ 100% { transform: translateX(100%);} }
#productPickerModal .modal-body{
  max-height: 70vh;
  overflow: auto;
  padding: .5rem .5rem;
}
#productPickerModal .product-title{
  font-weight: 400;                 /* pas de gras */
  font-size: .78rem;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;              /* 1 seule ligne */
  overflow: hidden;
  text-overflow: ellipsis;          /* … si dépassement */
  max-width: 100%;
}
.nav.nav-tabs{
  display:flex;
  flex-wrap:nowrap;           /* pas de retour a la ligne */
  overflow-x:auto;            /* scroll horizontal si trop long */
  white-space:nowrap;         /* textes sur une seule ligne */
  gap:4px;                    /* espace entre onglets */
  padding:4px 3px;
  border-bottom:1px solid var(--crm-border);
  background:#f8fafc;
  border-radius:8px;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}
.nav.nav-tabs .nav-item{
  flex:0 0 auto;              /* largeur auto, pas d'etirement */
  scroll-snap-align:start;
}
.nav.nav-tabs .nav-link{
  padding:.32rem .6rem;
  white-space:nowrap;         /* labels non casses */
  font-size:.84rem;
  font-weight:600;
  border-radius:999px;
  border:1px solid transparent;
  color:#4b5563;
  line-height:1.1;
}
.nav.nav-tabs .nav-link:hover{
  background:#ffffff;
}
.nav.nav-tabs .nav-link.active{
  color:#111827;
  background:#ffffff;
  border-color:#dbe2f0;
  box-shadow:0 2px 6px rgba(15,23,42,.06);
}
.nav.nav-tabs::-webkit-scrollbar{
  display:none;
}
.nav.nav-tabs .dropdown{
  position:static;            /* libère le menu du conteneur scroll */
}
.nav.nav-tabs .dropdown-menu{
  border-radius:8px;
  margin-top:.5rem;
}


/* {# #} Conteneur des tailles */
.size-overlay{
    display:flex;
    flex-wrap:wrap;              /* {# #} retour à la ligne */
    gap:10px;                    /* {# #} espacement horizontal + vertical */
    justify-content:center;      /* {# #} centrage horizontal */
}

/* {# #} Wrapper */
.size-pill-wrapper{
    display:inline-flex;
}

/* {# #} Bouton taille */
.size-pill{
    border-radius:0;             /* {# #} suppression radius */
    border:1px solid #d7d7d7;
    background:transparent;
    line-height:1;
    cursor:pointer;
    font-weight:500;
    color:#111;
    text-transform:uppercase;
    transition:background .2s ease, color .2s ease, border .2s ease;
}

/* {# #} Desktop */
@media (min-width:992px){
    .size-pill{
        font-size:15px;
        padding:11px 18px;
    }
}

/* {# #} Hover */
.size-pill:hover{
    background:#111;
    color:#fff;
    border-color:#111;
}

/* {# #} Taille active = noir plein */
.size-pill.active{
    background:#111;
    color:#fff;
    border-color:#111;
}

/* {# #} Tailles indisponibles (cliquables) */
.size-pill.is-oos{
    opacity:.45;
    text-decoration:line-through;
    cursor:pointer;
}

/* {# #} Hover tailles indisponibles */
.size-pill.is-oos:hover{
    opacity:.75;
    background:transparent;
    color:#111;
    border-color:#d7d7d7;
}


/* {# #} Miniatures couleurs — version XL + responsive */
.color-thumbs{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:0;
    padding:0;
    list-style:none;
}

.color-thumbs li{
    width: clamp(60px, calc(72px * var(--product-aspect-ratio, 1)), 90px);
    aspect-ratio: var(--product-aspect-ratio, 1);
    border:1px solid #e3e3e3;
    cursor:pointer;
    overflow:hidden;
    background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.color-thumbs li:hover{
    transform:scale(1.02);
}

.color-thumbs li.active{
    border:1px solid #111;
    box-shadow:0 0 0 2px rgba(17,17,17,.08);
}

.color-thumbs img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}



/* {# #} Couleur + Référence sélectionnée */
.color-ref-label{
    margin-top:0px;
    margin-bottom:10px;
    font-size:4px;
    color:#858484;
    text-align:center;
    letter-spacing:.02em;
}

.color-ref-label .sep{
    margin:0 6px;
    color:#aaa;
}

@media (min-width:992px){
    .color-ref-label{
        font-size:13px;
        text-align:left;
    }
}


/* {# #} Toast ajout panier */
.cart-toast{
    position:fixed;
    top:16px;
    right:16px;
    z-index:1200;
    max-width:320px;
    display:none;
}
.cart-toast.show{ display:block; }

.cart-toast-content{
    display:flex;
    gap:10px;
    align-items:center;
    background:#111;
    color:#fff;
    padding:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.cart-toast-content img{
    width:48px;
    height:64px;
    object-fit:contain;
    background:#fff;
}

.cart-toast-text .title{
    font-size:13px;
    font-weight:600;
}
.cart-toast-text .meta{
    font-size:12px;
    color:#ccc;
}

.cart-toast .close{
    background:none;
    border:0;
    color:#fff;
    font-size:18px;
    cursor:pointer;
}

@media (max-width:576px){
    .cart-toast{
        left:12px;
        right:12px;
        max-width:none;
    }
}

/* =========================================================
   MODALE PANIER — panneau latéral droit
   ========================================================= */

.modal-cart-panel .modal-dialog {
    max-width: 420px;
    margin: 0 0 0 auto;
    height: 100%;
}

.modal-cart-panel .modal-content {
    height: 100%;
    border-radius: 0;
}

.cart-confirm-item {
    display: flex;
    gap: 14px;
}

.cart-confirm-image {
    width: 96px;
    aspect-ratio: var(--product-aspect-ratio, 1);
    object-fit: contain;
    background: #fff;
}

.cart-confirm-info {
    font-size: 14px;
}

.cart-confirm-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.cart-confirm-line {
    font-size: 13px;
    color: #333;
    margin-bottom: 2px;
}

.cart-confirm-line .label {
    color: #777;
    margin-right: 4px;
}
/* Modale panier : panneau vertical à droite */
#cartConfirmModal {
    z-index: 1205;
}

/* Backdrop derrière le panneau */
.modal-backdrop.show {
    z-index: 1200;
}

/* Dialog : ancré à droite */
#cartConfirmModal .modal-dialog {position: fixed; top: 0; right: 0; height: 100vh; max-width: 420px; width: 100%; margin: 0;}

/* Contenu : colonne verticale */
#cartConfirmModal .modal-content {
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

/* Body scrollable */
#cartConfirmModal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Footer collé en bas */
#cartConfirmModal .modal-footer {
    margin-top: auto;
}

/* Mobile : plein écran */
@media (max-width: 576px) {
    #cartConfirmModal .modal-dialog {
        top: 0;
        height: 100vh;
        max-width: 100%;
    }
}

.form-control::placeholder {
    font-size: 12px;
    color: #9ca3af;
}


/* ================================
   ORDER RECAP — GLOBAL
   ================================ */

.order-status {
    font-size: .85rem;
    padding: .45rem .75rem;
}

/* ===========================================
   ORDER RECAP — ID COMMANDE
   =========================================== */

.order-id-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    background: #f1f3f5;
    color: #212529;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
}


/* ================================
   ORDER HEADER — STATUT
   ================================ */

.order-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    background: #fff;
    color: #111827;
    border: 1px solid var(--status-color);
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
    white-space: nowrap;
}

/* Point de statut */
.order-status-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-color);
}

/* Icône */
.order-status-badge i {
    font-size: 14px;
    color: var(--status-color);
}


/* ================================
   CARD GÉNÉRIQUE
   ================================ */

.order-card {

    background:#fff;
    border-radius:6px;
    padding:1rem;
    box-shadow:0 0 0 1px rgba(0,0,0,.04);
}

.order-card-title {
    font-size:.95rem;
    font-weight:600;
    margin-bottom:1rem;
}


/* ================================
   ORDER HEADER — DATES PAR STATUT
   ================================ */

.order-dates {
    font-size: 0.72rem;
    line-height: 1.2;
}

.order-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    background-color: transparent;
    border-color: transparent;
    color: #000000;
    white-space: nowrap;
    opacity: 0.7;
    min-width:100px;
}

.order-date-badge i {
    font-size: 0.7rem;
}

/* ===========================================
   ORDER RECAP — ALERT CONFIRMATION
   =========================================== */

.order-success-alert {
    border-left: 4px solid #198754;
    background-color: #f6fdf9;
    padding: 12px 14px;
}

.order-success-alert i {
    color: #198754;
}

/* {##} Boutons action désactivés (sans couleur verte) */
.btn-action-xs.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}


/* ===== CRM Toast (showAlert) ===== */
.crm-alert-host{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1080; /* au-dessus des modals (Bootstrap modal: 1055) */
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(420px, calc(100vw - 32px));
  z-index: 99999;
}

.crm-toast{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, .10);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transform: translateY(-6px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

.crm-toast.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.crm-toast .crm-ico{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border: 1px solid rgba(0,0,0,.08);
}

.crm-toast .crm-body{
  flex: 1 1 auto;
  min-width: 0;
}

.crm-toast .crm-title{
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  color: #111827;
  margin: 0 0 2px 0;
}

.crm-toast .crm-msg{
  font-size: 13px;
  color: #4b5563;
  line-height: 1.35;
  margin: 0;
  word-break: break-word;
}

.crm-toast .crm-close{
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #6b7280;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 8px;
}
.crm-toast .crm-close:hover{
  background: rgba(17, 24, 39, .06);
  color: #111827;
}

/* Variantes */
.crm-toast.success .crm-ico{ background: rgba(16,185,129,.12); color: #10b981; }
.crm-toast.error   .crm-ico{ background: rgba(239,68,68,.12);  color: #ef4444; }
.crm-toast.warn    .crm-ico{ background: rgba(245,158,11,.12);  color: #f59e0b; }
.crm-toast.info    .crm-ico{ background: rgba(59,130,246,.12);  color: #3b82f6; }