/*
 * ============================================================
 *  CHAMPAGNE YVES SAINTOT — CSS CUSTOM
 *  Thème child Classic — PS 8.2.2
 * ============================================================ */

/* ============================================================
   1. VARIABLES GLOBALES
   ============================================================ */
:root {
  --color-primary:       #142150;
  --color-primary-mid:   #324893;
  --color-accent:        #d1a465;
  --color-accent-hover:  #b8893e;
  --color-white:         #ffffff;
  --color-white-warm:    #f0e6d0;  /* blanc cassé chaud */
  --color-white-soft:    #e8dcc8;  /* blanc cassé légèrement doré */
  --color-muted:         #c8bea8;  /* texte secondaire (fond sombre) */
  --color-muted-on-light: #5c6a8a; /* texte secondaire lisible sur fond clair, cohérent avec --color-primary-mid */
  --color-text-dark:     #232323;
  --color-green:         #4cbb6c;
}

/* ============================================================
   2. HEADER
   ============================================================ */
#header {
  background: var(--color-primary) !important;
  color: var(--color-accent);
}
#header a              { color: var(--color-accent) !important; }
#header a:hover        { color: var(--color-white) !important; }

#header .header-nav .cart-preview .shopping-cart,
#header .shopping-cart,
.header .shopping-cart  { background: var(--color-primary) !important; color: var(--color-accent); }

#header .header-nav .blockcart          { background: var(--color-primary) !important; }
#header .header-nav .blockcart a:hover  { color: var(--color-accent) !important; }
#header .header-nav .cart-preview.active { background: var(--color-primary-mid) !important; }

#header .header-nav .cart-preview.active .material-icons.shopping-cart {
  background: var(--color-primary-mid) !important;
  color: var(--color-accent) !important;
}

#header .header-nav .currency-selector,
#header .header-nav .language-selector  { color: var(--color-accent) !important; }

/* Logo centré */
.header-top .row   { position: relative; display: flex; align-items: center; }
#_desktop_logo     { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
.header-top-right  { margin-right: auto; }
.header-top-right * { text-align: left; }

/* Navigation hover */
#header .top-menu a[data-depth="0"]:hover,
.dropdown:hover .expand-more,
.carousel .carousel-control .icon-next:hover i,
.carousel .carousel-control .icon-prev:hover i,
.page-my-account #content .links a:hover i,
.search-widget form button[type=submit] .search:hover,
.top-menu .sub-menu a:hover,
.block_newsletter form input[type=text]:focus + button .search,
.btn-unstyle:focus .expand-more,
.search-widget form input[type=text]:focus + button .search { color: var(--color-accent) !important; }

/* ============================================================
   3. BODY / WRAPPER
   ============================================================ */

#wrapper {
  background: linear-gradient(var(--color-primary), var(--color-primary-mid));
  color: var(--color-white-warm);
}

/* Titres globaux */
#wrapper h1, #wrapper h2, #wrapper h3,
#wrapper h4, #wrapper h5, #wrapper h6,
#wrapper .h1, #wrapper .h2, #wrapper .h3, #wrapper .h4 { color: var(--color-white) !important; }

/* Remplacement titre "Nos Champagnes" → "Nos Cuvées" */
.products-section-title {
  font-size: 0 !important;
}
.products-section-title::before {
  content: "Nos Cuvées";
  font-size: 1.5rem;
  color: var(--color-accent) !important;
}

/* Paragraphes (défaut fond sombre) */
#wrapper p { color: var(--color-white-soft) !important; }

/* Texte secondaire (défaut fond sombre — surchargé sur fond clair en section 15) */
#wrapper .text-muted, #wrapper .text-muted:hover,
#wrapper small, #wrapper .small,
#wrapper .nav-item .nav-link,
#wrapper .nav-item .nav-separtor { color: var(--color-muted) !important; }

/* Section title */
.products-section-title { color: var(--color-accent) !important; }

/* Tri produits */
#products .products-select,
#products #products-sort-order label { color: var(--color-white-warm) !important; }

/* "Créer une nouvelle adresse" — hors carte blanche, sur fond #wrapper sombre.
   Le thème parent lui impose un gris foncé (#232323), à corriger ici. */
.page-addresses .addresses-footer a       { color: var(--color-accent) !important; }
.page-addresses .addresses-footer a:hover { color: var(--color-accent-hover) !important; }

/* ============================================================
   4. LIENS & BOUTONS
   ============================================================ */

/* Liens généraux */
a        { color: var(--color-accent); }
a:hover,
a:focus  { color: var(--color-accent-hover); }

/* btn-primary */
.btn-primary,
.btn-primary:hover { color: var(--color-primary) !important; background-color: var(--color-accent) !important; border-color: transparent !important; }
.btn-primary:focus, .btn-primary.focus,
.btn-primary:active, .btn-primary.active,
.open > .btn-primary.dropdown-toggle { color: var(--color-primary) !important; background-color: var(--color-accent-hover) !important; border-color: transparent !important; }

/* btn-outline-primary */
.btn-outline-primary { color: var(--color-accent) !important; border-color: var(--color-accent) !important; background-color: transparent !important; }
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-primary.active, .btn-outline-primary:active { color: var(--color-primary) !important; background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; }

/* btn-link */
.btn-link        { color: var(--color-accent) !important; }
.btn-link:hover,
.btn-link:focus  { color: var(--color-accent-hover) !important; }

/* Utilitaires Bootstrap */
.bg-primary                         { background-color: var(--color-accent) !important; }
a.bg-primary:hover, a.bg-primary:focus { background-color: var(--color-accent-hover) !important; }
.text-primary                       { color: var(--color-accent) !important; }
a.text-primary:hover, a.text-primary:focus { color: var(--color-accent-hover) !important; }

/* Tags / badges */
.tag-primary                          { background-color: var(--color-accent) !important; }
.tag-primary[href]:hover,
.tag-primary[href]:focus              { background-color: var(--color-accent-hover) !important; }

/* Formulaires focus */
.form-control:focus,
.input-group.focus                    { outline-color: var(--color-accent) !important; }
.custom-radio input[type=radio]:checked + span { background-color: var(--color-accent) !important; }

/* ============================================================
   5. FIL D'ARIANE
   ============================================================ */
#wrapper .breadcrumb li::after,
#wrapper .breadcrumb li:last-child  { color: var(--color-accent) !important; }
#wrapper .breadcrumb li a           { color: var(--color-white) !important; }
#wrapper .breadcrumb-item.active    { color: var(--color-accent) !important; }

/* ============================================================
   6. MINIATURES PRODUITS (page accueil / liste)
   ============================================================ */
.product-miniature .thumbnail-container img { padding: 10px; object-fit: contain; }

/* Titre miniature — color-primary sur hover color-primary-mid */
.product-miniature .product-title a        { color: var(--color-primary) !important; }
.product-miniature .product-title a:hover  { color: var(--color-primary-mid) !important; }

/* Prix miniature */
.product-miniature .product-price-and-shipping { color: var(--color-white) !important; }
.product-miniature .regular-price              { color: var(--color-muted) !important; }
.product-miniature .comments_note              { color: var(--color-muted) !important; }

/* Quick view hover */
.product-miniature .highlighted-informations .quick-view:hover { color: var(--color-accent) !important; }

/* Lien "Tous les produits" */
#products .all-product-link,
.featured-products .all-product-link { color: var(--color-accent) !important; }

/* Flags produit */
.product-flags li.product-flag { background: var(--color-accent) !important; color: var(--color-primary) !important; }

/* Prix produit */
.product-price { color: var(--color-accent) !important; }

/* ============================================================
   7. FICHE PRODUIT
   ============================================================ */

/* Textes principaux — blanc pur */
#product .product-information,
#product .product-information .product-description,
#product-description-short,
#product-description-short p,
#product-description-short ul li,
#product-availability,
#product .social-sharing,
#block-reassurance span { color: var(--color-white) !important; }

/* Exception : texte "En stock" conserve le vert */
#product-availability .product-available { color: var(--color-green) !important; }

/* Label livraison / taxe */
#product .product-prices .tax-shipping-delivery-label { color: var(--color-muted) !important; }

/* Réassurance séparateur */
#block-reassurance li { border-bottom-color: rgba(255,255,255,0.15) !important; }

/* Onglets "Description" et "Détails du produit" */
#product .tabs { background: var(--color-white) !important; }
#product .tabs .nav-tabs .nav-link { color: var(--color-accent) !important; }
#product .tabs .nav-tabs .nav-link.active,
#product .tabs .nav-tabs .nav-link:hover { border-bottom-color: var(--color-accent) !important; color: var(--color-accent) !important; }
#product .tabs p,
#product .tabs ul li,
#product .tabs .tab-pane { color: var(--color-text-dark) !important; }
#product .tabs h3,
#product .tabs h4 { color: var(--color-primary) !important; }

/* Thumbnail sélectionné */
.product-images > li.thumb-container .thumb.selected,
.product-images > li.thumb-container .thumb:hover,
#product-modal .modal-content .modal-body .product-images img:hover { border-color: var(--color-accent) !important; }

/* Masque la vignette sous l'image principale */
.js-qv-mask.mask { display: none !important; }

/* Masque l'onglet "Détails du produit" */
#product .tabs .nav-tabs a[href="#product-details"],
#product #product-details { display: none !important; }

/* Descriptif fiche produit — justifié, interligne augmenté */
#product-description-short,
#product-description-short p,
#product .product-description {
  text-align: justify;
  text-align-last: left;
  line-height: 1.7;
}

/* ============================================================
   8. PANIER & CHECKOUT
   ============================================================ */

/* Pavé "Produit ajouté avec succès" — bordures (couleur du nom : voir section 15) */
#blockcart-modal .modal-content,
.blockcart-modal .modal-content { border: 2px solid var(--color-accent) !important; }
#blockcart-modal .divide-right,
.blockcart-modal .divide-right { border-right-color: var(--color-accent) !important; }

/* ============================================================
   9. DROPDOWN / FILTRES / PAGINATION
   ============================================================ */
.dropdown-item.active, .dropdown-item.active:hover,
.dropdown-item.active:focus { background-color: var(--color-accent) !important; color: var(--color-primary) !important; }
.dropdown-item:hover,
.dropdown-item:focus        { color: var(--color-accent) !important; }

.list-group-item.active, .list-group-item.active:hover,
.list-group-item.active:focus { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; }

.page-link             { color: var(--color-accent); }
.page-link:hover,
.page-link:focus       { color: var(--color-accent-hover); }
.page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus { color: var(--color-primary) !important; background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; }
.pagination .disabled  { color: var(--color-muted) !important; }
.pagination a          { color: var(--color-accent) !important; }

.brands-sort .select-list:hover,
.products-sort-order .select-list:hover,
.suppliers-sort .select-list:hover,
.facet-dropdown .select-list:hover { background: var(--color-accent) !important; color: var(--color-primary) !important; }
.facet-dropdown.open > .select-title { border-color: var(--color-accent) !important; }

/* Onglets actifs (hors fiche produit) */
.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover { border-bottom-color: var(--color-accent) !important; color: var(--color-accent) !important; }

/* ============================================================
   10. BLOC CATÉGORIE
   ============================================================ */
.block-category h1,
.block-category .block-category-inner #category-description p,
.block-category .block-category-inner #category-description ul { color: var(--color-white) !important; }

#subcategories ul li .subcategory-name:hover { color: var(--color-accent) !important; }
#subcategories ul li:hover .subcategory-image a { border-color: var(--color-accent) !important; }
.block-categories .arrows .arrow-down:hover,
.block-categories .arrows .arrow-right:hover,
.block-categories .collapse-icons .add:hover,
.block-categories .collapse-icons .remove:hover { color: var(--color-accent) !important; }

/* ============================================================
   11. NEWSLETTER / RECHERCHE — focus
   ============================================================ */
.block_newsletter form input[type=email]:focus,
.block_newsletter form input[type=text]:focus,
.search-widget form input[type=text]:focus { border-color: var(--color-accent) !important; outline-color: var(--color-accent) !important; }
.block_newsletter form button[type=submit] .search:hover { color: var(--color-accent) !important; }
.block-social ul li:hover { background-color: var(--color-accent) !important; }

/* ============================================================
   12. BANDE AU-DESSUS DU FOOTER
   ============================================================ */
.footer-labels-bande {
  background-color: var(--color-primary-mid);
  border-top: 2px solid var(--color-accent);
  padding: 12px 0;
  width: 100vw;
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  margin-top: 0 !important; margin-bottom: 40px !important;
}
.footer-labels-bande .d-flex img { display: inline-block; }

.avertissement-texte { font-family: 'Manrope', sans-serif; color: var(--color-white) !important; text-align: left; }
.avert-titre { font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--color-white) !important; }
.avert-sous  { font-size: 10px; font-weight: 400; margin-bottom: 2px; color: var(--color-white) !important; }
.logo-rf     { height: 50px; width: auto; flex-shrink: 0; align-self: flex-start; margin-top: 12px; }

/* ============================================================
   13. FOOTER
   ============================================================ */
#footer,
.footer-container {
  margin-top: 0 !important; padding-top: 0 !important;
  background-color: var(--color-primary-mid) !important;
  color: var(--color-white) !important;
}

/* Liens footer — blanc, hover blanc cassé (pas de couleur spécifique) */
.footer-container li a       { color: var(--color-white) !important; }
.footer-container li a:hover { color: var(--color-muted) !important; }

.footer-container .h3, .footer-container .h4,
.footer-container .block-contact-title,
.footer-container .blockcms-title,
.footer-container .myaccount-title,
.footer-container .myaccount-title a,
.footer-container .block-contact,
.footer-container .contact-rich { color: var(--color-white) !important; }

.footer-container .links .collapse { background-color: transparent !important; }

/* ============================================================
   14. BLOC TEXTE ACCUEIL
   ============================================================ */
#custom-text { background: transparent !important; }
#custom-text h2 { color: var(--color-primary) !important; }

/* Partie 1 — sans fond, texte doré */
#custom-text .bloc-accueil-p1 { background: transparent !important; }
#custom-text .bloc-accueil-p1 h3 {
  color: var(--color-accent) !important;
  font-size: 16pt;
  font-weight: 600;
}
#custom-text .bloc-accueil-p1 p {
  color: var(--color-accent) !important;
  font-size: 14pt;
  font-weight: 400;
}

/* Partie 2 — fond doré, texte primary, bloc resserré */
#custom-text .bloc-accueil-p2 {
  background: var(--color-accent) !important;
  color: var(--color-primary) !important;
  margin: 10px 40px;
  padding: 20px 30px;
  border-radius: 8px;
}
#custom-text .bloc-accueil-p2 h3 {
  color: var(--color-primary) !important;
  font-size: 12pt;
  font-weight: 700;
}
#custom-text .bloc-accueil-p2 p {
  color: var(--color-primary) !important;
  font-size: 12pt;
  font-weight: 500;
}
#custom-text .bloc-accueil-p2 ul {
  list-style-type: disc;
  padding-left: 25px;
  margin-left: 0;
}
#custom-text .bloc-accueil-p2 li {
  color: var(--color-primary) !important;
  font-size: 12pt;
  font-weight: 500;
  line-height: 2;
  padding-left: 5px;
}
#custom-text .bloc-accueil-p2 ul li::marker {
  color: var(--color-primary) !important;
}

/* Liens partie 2 */
#custom-text .bloc-accueil-p2 a       { color: var(--color-primary-mid) !important; font-weight: 600; }
#custom-text .bloc-accueil-p2 a:hover { color: var(--color-primary-mid) !important; font-weight: 700; }

/* ============================================================
   15. ZONES "FOND CLAIR" — SYSTÈME UNIFIÉ DE CONTRASTE
   ============================================================
   #wrapper (section 3) suppose un fond sombre par défaut.
   Ces gabarits/composants affichent en réalité une carte
   blanche Bootstrap : ajoutez ici tout nouveau cas détecté,
   dans les 4 blocs de rôle ci-dessous — ne créez plus de
   section dédiée par page.

   Deux types de zones à fond clair :
   A) Pages entières à fond blanc (body#id / classe de page) :
      .page-cms #content, .page-authentication,
      .page-customer-account #content, .page-my-account #content,
      .page-order-detail #content, body#checkout,
      body#order-confirmation, .cart-grid-body,
      #blockcart-modal, .blockcart-modal
   B) Composants réutilisés par PrestaShop sur PLUSIEURS pages
      (ex: #order-items est partagé entre order-confirmation et
      page-order-detail) — cibler le composant, pas la page :
      #order-items, #order-details, .order-confirmation-table
   ============================================================ */

/* Rôle 1 — Titres */
:is(.page-cms #content, .page-authentication, .page-customer-account #content,
    .page-my-account #content, .page-order-detail #content, body#checkout,
    body#order-confirmation, .cart-grid-body, #blockcart-modal, .blockcart-modal,
    #order-items, #order-details, .order-confirmation-table)
  :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4,
      .card-title, .step-title, .products-section-title) {
  color: var(--color-primary) !important;
}

/* Rôle 2 — Texte courant */
:is(.page-cms #content, .page-authentication, .page-customer-account #content,
    .page-my-account #content, .page-order-detail #content, body#checkout,
    body#order-confirmation, .cart-grid-body, #blockcart-modal, .blockcart-modal,
    #order-items, #order-details, .order-confirmation-table)
  :is(p, td, th, li, dt, dd, address, label,
      .price, .order-line, .no-account,
      .psgdprinfo17, .ec_min_price_cat_det, .ec_price_opc_det,
      .password-requirements-length, .password-requirements-strength) {
  color: var(--color-primary) !important;
}

/* Rôle 3 — Texte secondaire (.text-muted, small) */
:is(.page-cms #content, .page-authentication, .page-customer-account #content,
    .page-my-account #content, .page-order-detail #content, body#checkout,
    body#order-confirmation, .cart-grid-body, #order-items, #order-details)
  :is(.text-muted, small, .small) {
  color: var(--color-muted-on-light) !important;
}
:is(.page-cms #content, .page-authentication, .page-customer-account #content,
    .page-my-account #content, .page-order-detail #content, body#checkout,
    body#order-confirmation, .cart-grid-body, #order-items, #order-details)
  :is(.text-muted, small, .small):hover {
  color: var(--color-primary) !important;
}

/* Rôle 4 — Liens */
:is(.page-cms #content, .page-authentication, .page-customer-account #content,
    .page-my-account #content, .page-order-detail #content, body#checkout,
    body#order-confirmation, .cart-grid-body, #blockcart-modal, .blockcart-modal,
    #order-items, #order-details, .order-confirmation-table) a {
  color: var(--color-primary-mid) !important;
}
:is(.page-cms #content, .page-authentication, .page-customer-account #content,
    .page-my-account #content, .page-order-detail #content, body#checkout,
    body#order-confirmation, .cart-grid-body, #blockcart-modal, .blockcart-modal,
    #order-items, #order-details, .order-confirmation-table) a:hover {
  color: var(--color-accent-hover) !important;
}

/* --- Exceptions volontaires (plus spécifiques, gagnent naturellement) --- */

/* Libellé panier "modifier/supprimer" : reste doré, choix visuel existant */
.cart-grid-body a.label       { color: var(--color-accent) !important; }
.cart-grid-body a.label:hover { color: var(--color-accent-hover) !important; }

/* Nom produit dans la modale panier : gras + primary */
#blockcart-modal .product-name,
.blockcart-modal .product-name { color: var(--color-primary) !important; font-weight: bold; }

/* h1 du récapitulatif panier (déjà couvert par la règle générique ci-dessus,
   conservé pour le cas générique .card-block h1.h1 hors zone listée) */
.card-block h1.h1 { color: var(--color-primary) !important; }

/* Icônes de statut mot de passe : couleur native conservée */
.password-requirements-length .material-icons.text-danger,
.password-requirements-strength .material-icons.text-danger  { color: #ff4c4c !important; }
.password-requirements-length .material-icons.text-success,
.password-requirements-strength .material-icons.text-success { color: #4cbb6c !important; }

/* ============================================================
   16. MODULE EC_MIN_PRICE — MESSAGE QUANTITÉ MINIMUM (panier)
   ============================================================ */
.ec_min_price_cat_det,
.ec_price_opc_det {
  color: var(--color-primary) !important;
}

/* ============================================================
   17. PAGE NOUS CONTACTER
   ============================================================ */

.contact-rich h4 {
  color: #ffffff;
  font-weight: 700;
}

.contact-rich .block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.contact-rich .block .icon i.material-icons {
  color: #ffffff;
  font-size: 22px;
  opacity: 0.9;
}

.contact-rich .block .data {
  color: #ffffff;
}

.contact-rich .block .data.email a,
.contact-rich .block .data.email a:visited {
  color: #f0c987;
  font-weight: 600;
  text-decoration: underline;
}

.contact-rich .block .data.email a:hover {
  color: #ffffff;
}

.contact-rich hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin: 15px 0;
}