/* 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;
}
.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); } }
.form-group 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%;
    }
}