/* ============================================================================
   MySo — CHARTE GRAPHIQUE TERRACOTTA  —  custom.css
   marketplace-mysongoriginal.fr — 14/07/2026
   ----------------------------------------------------------------------------
   CE FICHIER REMPLACE custom.css ET custom-charte-graphique.css.
   PrestaShop 8 ne charge AUTOMATIQUEMENT que custom.css : un fichier nommé
   autrement (custom-charte-graphique.css) n'est jamais lu par le navigateur.
   C'est pourquoi la charte precedente restait sans effet. Tout est reuni ici.
   → Renomme l'ancien custom-charte-graphique.css en .bak (securite anti-conflit).
   ============================================================================ */

:root {
    --myso-terracotta: #C4674A;        /* accent principal : boutons, prix, liens */
    --myso-terracotta-hover: #A85440;  /* survol : plus profond */
    --myso-terracotta-clair: #D1745B;  /* accent secondaire, badges */
    --myso-argile: #E8C4B0;            /* terracotta pâle : liens sur fond sombre */
    --myso-creme: #EFE6DC;             /* texte sur fond sombre */
    --myso-sable: #FAF8F5;             /* fonds clairs */
    --myso-marron: #3D2817;            /* footer, titres */
    --myso-encre: #3A3A35;             /* texte courant */
}

/* === BOUTONS PRINCIPAUX ===
   Ancien #D2A679 (beige) + texte blanc = contraste 2:1, illisible.
   Terracotta + blanc = 4,6:1, conforme AA. */
.btn-primary,
button.btn-primary,
a.btn-primary {
    background: #C4674A !important;
    border-color: #C4674A !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: #A85440 !important;
    border-color: #A85440 !important;
    color: #fff !important;
}

/* === BOUTONS SECONDAIRES ===
   Contour plutôt qu'aplat : la hiérarchie visuelle devient lisible,
   le bouton principal ne se bat plus avec le secondaire. */
.btn-secondary {
    background: transparent !important;
    border: 1px solid #C4674A !important;
    color: #C4674A !important;
}
.btn-secondary:hover {
    background: #C4674A !important;
    border-color: #C4674A !important;
    color: #fff !important;
}

/* === HEADER / NAVIGATION ===
   Le dégradé disparaît : un aplat crème, plus doux, laisse respirer le logo. */
#header,
.header-top,
.main-menu {
    background: #FAF8F5 !important;
    border-bottom: 1px solid #E8DED2 !important;
}
.main-menu a,
.header-top a {
    color: #3D2817 !important;
}
.main-menu a:hover,
.header-top a:hover {
    color: #C4674A !important;
}

/* === FOOTER ===
   LE correctif majeur : sur le marron, on n'écrit JAMAIS en terracotta.
   Sélecteurs élargis : le footer peut être un #footer classique OU une section
   Creative Elements. On attrape les deux via [class*="footer"] / [id*="footer"]. */
#footer,
footer,
.footer-container,
[id*="footer"],
[class*="footer"] {
    color: #EFE6DC !important;
}
#footer,
footer,
.footer-container {
    background: #3D2817 !important;
}

/* Titres de colonnes : crème clair, jamais marron */
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
[class*="footer"] h1, [class*="footer"] h2, [class*="footer"] h3,
[class*="footer"] h4, [class*="footer"] h5, [class*="footer"] h6,
[id*="footer"] h2, [id*="footer"] h3, [id*="footer"] h4,
#footer .h3, #footer .h4,
.footer-container .h3,
#footer .title,
#footer .block-title,
[class*="footer"] .title,
[class*="footer"] .block-title {
    color: #E8C4B0 !important;
}

/* Texte courant du footer */
#footer p, #footer li, #footer span, #footer address, #footer div,
footer p, footer li, footer span, footer address,
[class*="footer"] p,
[class*="footer"] li,
[class*="footer"] span,
[class*="footer"] address {
    color: #EFE6DC !important;
}

/* Liens du footer : argile, blanc au survol */
#footer a,
footer a,
.footer-container a,
[class*="footer"] a,
[id*="footer"] a {
    color: #E8C4B0 !important;
}
#footer a:hover,
footer a:hover,
.footer-container a:hover,
[class*="footer"] a:hover {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

/* === PRIX === */
.product-price,
.current-price,
.price,
.product-price-and-shipping .price {
    color: #C4674A !important;
    font-weight: 600;
}
.regular-price {
    color: #8A887F !important;
}

/* === AJOUTER AU PANIER === */
.add-to-cart,
button[name="add_to_cart"],
.btn-add-to-cart {
    background: #C4674A !important;
    border-color: #C4674A !important;
    color: #fff !important;
}
.add-to-cart:hover,
.btn-add-to-cart:hover {
    background: #A85440 !important;
    border-color: #A85440 !important;
}

/* === BADGES PRODUITS === */
.product-flag.new,
.product-flag.online-only {
    background: #C4674A !important;
    color: #fff !important;
}
.product-flag.discount,
.product-flag.on-sale,
.product-flag.discount-percentage {
    background: #A85440 !important;
    color: #fff !important;
}
.product-flag.pack {
    background: #D1745B !important;
    color: #fff !important;
}

/* === LIENS === */
a {
    color: #C4674A;
}
a:hover {
    color: #A85440;
}

/* === BADGES / LABELS === */
.badge-primary,
.label-primary {
    background: #C4674A !important;
    color: #fff !important;
}

/* === CARTES PRODUITS === */
.product-miniature:hover {
    border-color: #C4674A !important;
    box-shadow: 0 4px 12px rgba(196, 103, 74, 0.18) !important;
}

/* === PAGINATION === */
.pagination .page-link {
    color: #C4674A !important;
}
.pagination .page-item.active .page-link {
    background: #C4674A !important;
    border-color: #C4674A !important;
    color: #fff !important;
}

/* === FORMULAIRES === */
input:focus,
textarea:focus,
select:focus {
    border-color: #C4674A !important;
    box-shadow: 0 0 0 0.2rem rgba(196, 103, 74, 0.25) !important;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #C4674A !important;
    border-color: #C4674A !important;
}

/* === SÉLECTION DE TEXTE === */
::selection {
    background: #C4674A;
    color: #fff;
}
::-moz-selection {
    background: #C4674A;
    color: #fff;
}

/* === TITRES ===
   ATTENTION : ces règles sont volontairement LIMITÉES au contenu principal.
   Une règle h1/h2/h3 globale assombrissait aussi les titres du footer
   (qui est construit avec Creative Elements et ignore #footer). */
#main h1, #main h2, #main h3,
#content h1, #content h2, #content h3,
.page-content h1, .page-content h2, .page-content h3,
.page-header h1 {
    color: #3D2817;
}
#main h4, #main h5, #main h6,
#content h4, #content h5, #content h6 {
    color: #5A4030;
}

/* === ALERTES === */
.alert-success {
    background: #F2F7F0 !important;
    border-color: #7FB069 !important;
    color: #3F5C3A !important;
}
.alert-info {
    background: #FDF6F2 !important;
    border-color: #C4674A !important;
    color: #A85440 !important;
}
.alert-warning {
    background: #FDF4E7 !important;
    border-color: #D9A441 !important;
    color: #8B5A2B !important;
}

/* === ICÔNES DE L'ESPACE CLIENT ===
   Les tuiles « Informations / Adresses / Historique »… si l'orange y résiste,
   c'est qu'il vient de Creative Elements (voir la note en fin de fichier). */
.links .link-item i,
#main .page-content i.material-icons,
.account-links i,
.account-link i,
.link-item i {
    color: #C4674A !important;
}
.links .link-item:hover,
.account-link:hover {
    border-color: #C4674A !important;
}

/* === BARRE MYSO COINS ===
   L'ancienne barre orange sur brun devenait illisible. */
.myso-coins-bar,
.progress-bar {
    background: #C4674A !important;
    color: #fff !important;
}

/* ============================================================================
   NOTE IMPORTANTE — CE QUE CE FICHIER NE PEUT PAS ATTEINDRE
   ----------------------------------------------------------------------------
   Les sections construites avec Creative Elements (le bandeau « Seconde Main
   Premium », les blocs Personal Shopper / Enchères, les icônes de l'espace
   client) tirent leurs couleurs des COULEURS GLOBALES de Creative Elements,
   stockées en base — pas ici. Si un orange résiste après ce fichier :

     Creative Elements → Réglages du site → Couleurs globales
       Primaire   → #C4674A
       Secondaire → #A85440
       Accent     → #D1745B
       Texte      → #3A3A35

   Un seul changement là-bas repeint tout ce qui a été construit avec CE.
   ============================================================================ */

/* ============================================================================
   SURVOLS ET CATEGORIES  (repris de ton ancien custom.css)
   Les #FF8C00 sont remplaces par le terracotta : c'etait l'une des sources
   de l'orange residuel sur les liens, boutons et titres de categories.
   ============================================================================ */

.category a:hover,
.category-page a:hover,
body[id*="category"] a:hover,
.index a:hover,
.home a:hover,
#index a:hover {
    color: #A85440 !important;
    transition: color 0.3s ease;
}

.featured-categories a:hover,
.block-categories a:hover,
.categories-list a:hover,
.category-block a:hover,
.category-miniature a:hover {
    color: #A85440 !important;
}

.category .btn:hover,
.category .button:hover,
.home .btn:hover,
.home .button:hover {
    background-color: #A85440 !important;
    border-color: #A85440 !important;
    color: #fff !important;
}

.product-title a:hover,
.product-name a:hover,
.product-item a:hover {
    color: #A85440 !important;
}

.pagination a:hover {
    background-color: #A85440 !important;
    border-color: #A85440 !important;
    color: #fff !important;
}

.facet-label:hover,
.custom-select:hover,
.selectpicker:hover {
    color: #A85440 !important;
}

.subcategories h3 a,
.subcategory-name,
.category-title,
.category-name,
.block-categories h3 {
    color: #3D2817 !important;
    transition: color 0.3s ease;
}
.subcategories h3 a:hover,
.subcategory-name:hover,
.category-title:hover,
.category-name:hover,
.block-categories h3:hover {
    color: #C4674A !important;
}

.subcategory-item:hover img,
.category-miniature:hover img,
.category-block:hover img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.category h2,
.home h2.h3 {
    color: #3D2817;
}

/* Fil d'ariane */
.breadcrumb a,
.breadcrumb li a span {
    color: #C4674A !important;
}
.breadcrumb a:hover {
    color: #A85440 !important;
}

/* Liens de bas de page client (Retour a votre compte / Accueil) */
.account-link,
.account-link i,
.page-footer a,
footer.page-footer a {
    color: #C4674A !important;
}
.account-link:hover,
.page-footer a:hover {
    color: #A85440 !important;
}
/* ============================================================================
   FIX — Visibilité des textes de la frise circulaire (hero Creative Elements)
   Le texte pâle vient d'une opacity réduite / animation d'apparition bloquée
   dans le bloc CE. On force l'opacité pleine et les couleurs à la charte.
   ============================================================================ */
.mkt-loop *,
.mkt-steps *,
.mkt-step *,
.mkt-step__card *,
.mkt-transfer * {
    opacity: 1 !important;
    animation: none !important;
}
.mkt-step__tag              { color: #C4674A !important; }
.mkt-step__title           { color: #3D5A3D !important; }
.mkt-step__text            { color: #2D3029 !important; }
.mkt-step__text b          { color: #3D5A3D !important; }
.mkt-transfer__text        { color: #2D3029 !important; }
.mkt-transfer__text strong { color: #3D5A3D !important; }
.mkt-loop__title           { color: #1A1F16 !important; }
.mkt-loop__title em        { color: #7D9A78 !important; }
.mkt-loop__text p          { color: #2D3029 !important; }
.mkt-loop__eyebrow         { color: #3D5A3D !important; }