/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* ============================================================
   UNIVERS PRATIQUE — Custom CSS (child theme Flatsome)
   Fichier nettoyé : aucun doublon, mobile-first.
   Organisation :
   0. Palette
   1. Top bar annonce
   2. Bande promo
   3. Réassurance
   4. Boutons (CTA)
   5. Badge promo + prix
   6. Cartes produit
   7. Section produits phares
   8. Badges de confiance (fiche produit)
   9. WhatsApp flottant
   10. Header / liens / titres
   11. Footer
   12. Section confiance
   13. Bloc vidéo produit
   14. Confort mobile
   ============================================================ */

/* -----------------------------------------------------------
   0. PALETTE
   ----------------------------------------------------------- */
:root {
    --up-bleu:        #1A2B4A;
    --up-bleu-clair:  #27406b;
    --up-orange:      #FF6B35;
    --up-orange-fonce:#e6531f;
    --up-vert:        #2BB673;
    --up-rouge:       #E63946;
    --up-creme:       #FAF7F2;
    --up-gris:        #4A4A4A;
    --up-gris-clair:  #EDEDED;
}

/* -----------------------------------------------------------
   1. TOP BAR ANNONCE (livraison + paiement + whatsapp)
   ----------------------------------------------------------- */
.up-announce {
    background: var(--up-bleu);
    color: #fff;
    font-size: 13px;
    text-align: center;
    padding: 8px 12px;
    letter-spacing: .2px;
}
.up-announce__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.up-announce__sep { opacity: .5; }
@media (max-width: 600px) {
    .up-announce__sep { display: none; }
    .up-announce { font-size: 11px; padding: 7px 8px; }
}

/* -----------------------------------------------------------
   2. BANDE PROMO (en haut de la home)
   ----------------------------------------------------------- */
.up-promo-strip {
    background: linear-gradient(90deg, var(--up-bleu), var(--up-bleu-clair));
    color: #fff;
    text-align: center;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    margin: 0 12px 18px;
}
.up-promo-strip .accent { color: #ffd166; }
@media (min-width: 850px) {
    .up-promo-strip { font-size: 16px; max-width: 1000px; margin: 0 auto 24px; }
}

/* -----------------------------------------------------------
   3. RÉASSURANCE — 2×2 mobile, 4 colonnes desktop
   Classe sur la Row : up-reassure
   ----------------------------------------------------------- */
.up-reassure {
    background: var(--up-creme);
    border-top: 1px solid var(--up-gris-clair);
    border-bottom: 1px solid var(--up-gris-clair);
    padding: 14px 0 8px;
    margin-bottom: 0;
}
.up-reassure .row { display: flex; flex-wrap: wrap; }
.up-reassure .col {
    flex: 0 0 50%;
    max-width: 50%;
    text-align: center;
    font-size: 12px;
    color: var(--up-gris);
    font-weight: 600;
    padding: 8px 6px;
}
.up-reassure strong { color: var(--up-bleu); display: block; font-size: 13px; }
@media (min-width: 850px) {
    .up-reassure .col { flex: 0 0 25%; max-width: 25%; font-size: 14px; }
}
.up-reassure .col,
.up-reassure .col p,
.up-reassure .icon-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    flex-wrap: nowrap;
}
.up-reassure .icon-box-img { margin: 0 !important; }

/* -----------------------------------------------------------
   4. BOUTONS — CTA orange
   ----------------------------------------------------------- */
.button.primary,
.button.alt,
button.single_add_to_cart_button,
.add_to_cart_button,
.checkout-button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button.alt {
    background-color: var(--up-orange) !important;
    border-color: var(--up-orange) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
    transition: background-color .2s ease, transform .1s ease;
}
.button.primary:hover,
button.single_add_to_cart_button:hover,
.add_to_cart_button:hover,
.checkout-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button.alt:hover {
    background-color: var(--up-orange-fonce) !important;
    border-color: var(--up-orange-fonce) !important;
    transform: translateY(-1px);
}

/* -----------------------------------------------------------
   5. BADGE PROMO + PRIX  (défini UNE seule fois)
   Rectangle rouge propre, sans kaki ni ovale.
   ----------------------------------------------------------- */
.onsale,
.woocommerce span.onsale,
.product-small .onsale,
.badge-inner,
.product-small .badge .badge-inner,
.product-small .badge .badge-inner.on-sale {
    background: var(--up-rouge) !important;
    background-image: none !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    transform: none !important;
    -webkit-transform: none !important;
    box-shadow: none !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
}
/* conteneur transparent + pseudo-éléments neutralisés */
.product-small .badge-container,
.product-small .badge,
.product-small .badge-container .callout {
    background: transparent !important;
    box-shadow: none !important;
}
.onsale::before, .onsale::after,
.badge::before, .badge::after,
.badge-inner::before, .badge-inner::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Prix : barré discret, prix actuel fort */
.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del {
    color: #999 !important;
    font-weight: 400;
}
.woocommerce div.product p.price ins,
.woocommerce ul.products li.product .price ins {
    color: var(--up-rouge) !important;
    font-weight: 700;
    text-decoration: none;
}

/* -----------------------------------------------------------
   6. CARTES PRODUIT
   ----------------------------------------------------------- */
.products .product-small.box,
.col-inner .box-image {
    border-radius: 12px;
    overflow: hidden;
}
.products .product-small .box-text { padding-top: 12px; }
.product-small.box:hover {
    box-shadow: 0 8px 24px rgba(26,43,74,.10);
    transition: box-shadow .25s ease;
}

/* -----------------------------------------------------------
   7. SECTION PRODUITS PHARES
   Classe sur la Section : up-phares
   ----------------------------------------------------------- */
.up-phares { padding: 28px 0 12px; }
.up-phares .section-title { justify-content: center; }
.up-phares .section-title span,
.up-phares h2,
.up-phares h3,
.up-phares .is-title {
    display: block !important;
    text-align: center !important;
    color: var(--up-bleu) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 auto 18px !important;
    padding: 0 16px !important;
    text-transform: none !important;
}
/* grille : 2 colonnes mobile, 4 desktop */
.up-phares .products .product-small {
    width: 50% !important;
    padding-left: 6px;
    padding-right: 6px;
}
.up-phares .product-small .price { font-size: 16px; font-weight: 700; color: var(--up-rouge); }
.up-phares .product-small del { color: #9a9a9a; font-weight: 400; font-size: 13px; }
.up-phares .product-small .button {
    min-height: 44px;
    border-radius: 8px !important;
    font-size: 13px !important;
}
@media (min-width: 850px) {
    .up-phares { padding: 40px 0 20px; }
    .up-phares .section-title span { font-size: 22px !important; }
    .up-phares .products .product-small { width: 25% !important; }
}

/* -----------------------------------------------------------
   8. BADGES DE CONFIANCE (fiche produit)
   ----------------------------------------------------------- */
.up-trust {
    margin: 18px 0;
    padding: 14px 16px;
    background: var(--up-creme);
    border: 1px solid var(--up-gris-clair);
    border-radius: 10px;
}
.up-trust__item { font-size: 14px; color: var(--up-gris); padding: 4px 0; }
.up-trust__item strong { color: var(--up-bleu); }

/* -----------------------------------------------------------
   9. WHATSAPP FLOTTANT
   ----------------------------------------------------------- */
.up-wa-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #25D366;
    color: #fff !important;
    padding: 12px 18px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 6px 20px rgba(37,211,102,.45);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.up-wa-float:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(37,211,102,.55);
    color: #fff !important;
}
.up-wa-float svg { flex: 0 0 auto; }
@media (max-width: 600px) {
    .up-wa-float span { display: none; }
    .up-wa-float { padding: 14px; border-radius: 50%; }
}
/* sur fiche produit : remonter pour libérer la barre d'achat */
@media (max-width: 849px) {
    .single-product .up-wa-float { bottom: 76px; }
}

/* -----------------------------------------------------------
   10. HEADER / LIENS / TITRES
   ----------------------------------------------------------- */
.nav-dropdown { border-radius: 10px; }
a { color: var(--up-bleu-clair); }
a:hover { color: var(--up-orange); }
.section-title-inner span,
h3.section-title { color: var(--up-bleu); }

/* -----------------------------------------------------------
   11. FOOTER
   ----------------------------------------------------------- */
.footer-1, .footer-2 { background-color: var(--up-bleu) !important; }
.footer .is-divider { background-color: rgba(255,255,255,.15); }

/* -----------------------------------------------------------
   12. SECTION CONFIANCE (boutiques physiques)
   Classe sur la Section : up-confiance
   ----------------------------------------------------------- */
.up-confiance {
    background: var(--up-bleu);
    color: #fff;
    padding: 30px 0;
    margin-top: 24px;
}
.up-confiance h3, .up-confiance .is-title { color: #fff !important; }
.up-confiance p { color: rgba(255,255,255,.85); font-size: 14px; }
@media (min-width: 850px) { .up-confiance { padding: 40px 0; } }

/* -----------------------------------------------------------
   13. BLOC VIDÉO PRODUIT (optionnel)
   ----------------------------------------------------------- */
.up-product-video {
    max-width: 1080px;
    margin: 40px auto 32px;
    padding: 0 15px;
}
.up-product-video__embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
}
.up-product-video__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
@media (max-width: 768px) {
    .up-product-video { margin: 24px auto; padding: 0 10px; }
}

/* -----------------------------------------------------------
   14. CONFORT MOBILE GÉNÉRAL
   ----------------------------------------------------------- */
@media (max-width: 549px) {
    .products .box-text .name { font-size: 13px; line-height: 1.3; }
    .products .price { font-size: 15px; }
    .nav-dropdown li > a { padding-top: 12px; padding-bottom: 12px; }
}