/* ============================================================
   DoliKOM – Franco de Port | CSS Front-end v1.0.4
   Concepteur : Agence DoliKOM - #2026

   Sélecteurs personnalisables via le champ CSS du back-office :
     .dolikom-fp-produit            → bloc fiche produit (incitation)
     .dolikom-fp-produit--offert    → bloc fiche produit (port offert auto)
     .dolikom-fp-panier             → bloc panier
     .dolikom-fp-panier--offert     → panier (port offert auto)
     .dolikom-fp-panier--success    → panier (franco atteint)
     .dolikom-fp-progressbar__fill          → barre montant
     .dolikom-fp-progressbar__fill--bouteilles → barre bouteilles
   ============================================================ */
:root {
    --dk-primary:        #1a3a5c;
    --dk-accent:         #f0a500;
    --dk-success:        #2e7d32;
    --dk-success-bg:     #e8f5e9;
    --dk-success-border: #81c784;
    --dk-warn-bg:        #fff8e7;
    --dk-warn-border:    #f0a500;
    --dk-text:           #1e2a38;
    --dk-radius:         8px;
    --dk-blue:           #1565c0;
    --dk-blue-light:     #e3f2fd;
}

/* ── Fiche produit – incitation standard ── */
.dolikom-fp-produit {
    display:flex; align-items:flex-start; gap:10px;
    margin:0 0 18px; padding:12px 16px;
    background:var(--dk-warn-bg);
    border-left:4px solid var(--dk-accent);
    border-radius:0 var(--dk-radius) var(--dk-radius) 0;
    font-size:.92rem; line-height:1.55; color:var(--dk-text);
}
.dolikom-fp-produit__icon { font-size:1.2rem; flex-shrink:0; margin-top:1px; }
.dolikom-fp-produit__text { flex:1; }

/* ── Fiche produit – port offert automatique ── */
.dolikom-fp-produit--offert {
    background:var(--dk-success-bg);
    border-left-color:var(--dk-success);
    color:var(--dk-success);
}
.dolikom-fp-produit--offert .dolikom-fp-produit__text strong { color:var(--dk-success); }

/* ── Panier – conteneur commun ── */
.dolikom-fp-panier {
    display:flex; flex-direction:column; gap:8px;
    margin:0 0 16px; padding:14px 16px;
    background:var(--dk-warn-bg);
    border:1px solid var(--dk-warn-border);
    border-radius:var(--dk-radius);
    font-size:.92rem; line-height:1.5; color:var(--dk-text);
}
.dolikom-fp-panier__top { display:flex; align-items:flex-start; gap:10px; }
.dolikom-fp-panier__icon { font-size:1.2rem; flex-shrink:0; margin-top:1px; }
.dolikom-fp-panier__text { flex:1; }

/* ── Panier – port offert automatique ── */
.dolikom-fp-panier--offert {
    flex-direction:row; align-items:center;
    background:var(--dk-success-bg);
    border-color:var(--dk-success-border);
    color:var(--dk-success);
}
.dolikom-fp-panier--offert .dolikom-fp-panier__text strong { color:var(--dk-success); }

/* ── Panier – franco atteint ── */
.dolikom-fp-panier--success {
    flex-direction:row; align-items:center;
    background:var(--dk-success-bg);
    border-color:var(--dk-success-border);
    color:var(--dk-success);
}

/* ── Labels barres ── */
.dolikom-fp-panier__barre-label {
    display:flex; justify-content:space-between; align-items:center;
    font-size:.78rem; font-weight:600; color:var(--dk-text);
    margin-top:4px;
}
.dolikom-fp-panier__barre-val { font-weight:400; color:#6b7c93; }

/* ── Barre de progression – montant ── */
.dolikom-fp-progressbar {
    width:100%; height:8px; background:#e0e6ef;
    border-radius:100px; overflow:hidden;
}
.dolikom-fp-progressbar__fill {
    height:100%;
    background:linear-gradient(90deg, var(--dk-accent) 0%, #ff8f00 100%);
    border-radius:100px; transition:width .5s ease; min-width:4px;
}

/* ── Barre de progression – bouteilles (bleu) ── */
.dolikom-fp-progressbar--bouteilles { margin-top:2px; }
.dolikom-fp-progressbar__fill--bouteilles {
    background:linear-gradient(90deg, var(--dk-blue) 0%, #42a5f5 100%);
}

/* ── Légende barre bouteilles ── */
.dolikom-fp-panier__legend {
    display:flex; justify-content:space-between;
    font-size:.72rem; color:#6b7c93; margin-top:-2px;
}

/* ── Responsive ── */
@media (max-width:480px) {
    .dolikom-fp-produit,
    .dolikom-fp-panier { font-size:.85rem; padding:10px 12px; }
}