/* =====================================================================================
   Hyper — identité visuelle (LOT 2) appliquée au balisage rwd d'OpenMage 20.18.
   Reprend l'apparence de l'ancien site (tv_schon1) SANS reprendre son code :
   bleu canard #006666, barre de menu #66999a, cartes produit gris clair, Arial.
   ===================================================================================== */
body, button, input, select, table, textarea,
h1, h2, h3, h4, h5, h6, .nav-primary a.level0, .page-title h1, .page-title h2 {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body { color: #333; background: #fff; }
a, a:hover, .breadcrumbs a { color: #006666; }
a:hover { color: #004d4d; }

/* ---------- Bandeau haut + en-tête ---------- */
.header-language-background { background: #006666; }
.header-language-background .header-language-container,
.header-language-background p { color: #fff; }
.logo { max-width: 260px; min-height: 76px; }
.logo img { max-width: 231px; height: auto; }
.skip-link, .skip-link .label { color: #333; }
.skip-link:hover, .skip-link.skip-active { color: #006666; }
.header-minicart .count { background: #006666; }

/* ---------- Barre de navigation pleine largeur #66999a ---------- */
@media only screen and (min-width: 771px) {
    /* fond pleine largeur par pseudo-élément : ne rogne pas les menus déroulants (l'ancien clip-path les coupait) */
    #header-nav { background: #66999a; margin-top: 10px; position: relative; z-index: 10; }
    #header-nav::before {
        content: ""; position: absolute; top: 0; bottom: 0; z-index: -1;
        left: calc(50% - 50vw); width: 100vw; background: #66999a;
    }
    html, body { overflow-x: clip; }
    .nav-primary a.level0 {
        color: #fff;
        font-size: 13px;
        padding: 0 12px;
        line-height: 50px;
        border-right: 1px solid rgba(255, 255, 255, .6);
    }
    .nav-primary li.level0:last-child > a.level0 { border-right: 0; }
    .nav-primary a.level0:hover,
    .nav-primary li.level0.menu-active > a.level0 { color: #fff; background: #006666; }
    .nav-primary li.menu-active > ul { border-top: 3px solid #006666; }
}
@media only screen and (max-width: 770px) {
    .nav-primary a.level0 { color: #006666; }
}

/* ---------- Recherche ---------- */
#search_mini_form .input-text { border-color: #66999a; }
#search_mini_form .search-button { background: #006666; }
#search_mini_form .search-button:before { background-image: none; border: 0; }

/* ---------- Boutons ---------- */
.button, .button2, button.button, a.button {
    background: #006666;
    color: #fff;
    border-radius: 3px;
    text-transform: none;
    font-weight: bold;
}
.button:hover, button.button:hover, a.button:hover { background: #004d4d; }
.btn-checkout, .button.btn-proceed-checkout { background: #e26703; }
.btn-checkout:hover, .button.btn-proceed-checkout:hover { background: #c55800; }

/* ---------- Titres de sections ---------- */
.page-title h1, .page-title h2, .widget-title h2, .section-title {
    color: #999;
    font-weight: normal;
    text-transform: uppercase;
    border-bottom: 1px solid #999;
}

/* ---------- Grilles et fiches produit (cartes gris clair) ---------- */
.products-grid > li {
    background: #f6f6f6;
    padding: 5px 5px 15px;
    text-align: center;
    border: 1px solid #f2f2f2;
}
.products-grid > li:hover { border-color: #66999a; }
.products-grid .product-image { background: #fff; }
.products-grid .product-name, .products-list .product-name a { color: #333; font-size: 13px; text-transform: none; }
.price-box .price, .product-view .price-box .price { color: #333; font-weight: bold; }
.price-box .special-price .price { color: #e26703; }
.price-box .old-price .price { color: #999; font-weight: normal; }
.product-view .product-shop .product-name .h1 { color: #333; text-transform: none; }
.availability.in-stock span { color: #006666; }

/* ---------- Pied de page ---------- */
.footer-container { background: #f2f2f2; }
.footer .block-title, .footer .block-title strong, .footer .links .block-title { color: #006666; }
.footer a { color: #555; }
.footer .copyright { color: #006666; }

/* ---------- Checkout / panier ---------- */
.opc .section.allow .step-title, .opc .section.active .step-title { color: #006666; }
.opc .step-title .number { background: #006666; }
.cart-table .product-cart-price .price, .cart-totals .price { color: #333; }

/* ---------- Pastilles des cartes produit (list.phtml Hyper) ---------- */
.products-grid > li { position: relative; }
.hyper-badges { position: absolute; top: 5px; left: 5px; right: 5px; z-index: 5; pointer-events: none; }
.hyper-unavailable { display: block; background: #5f5f5f; color: #fff; font-size: 12px; line-height: 22px; text-align: center; }
.hyper-picto { display: block; width: 52px; height: 31px; margin-top: 4px; background: center no-repeat; }
.hyper-picto-coeur { background-image: url(../images/picto-coeur.png); }
.hyper-picto-mag { background-image: url(../images/picto-mag.png); }
.hyper-picto-tv { background-image: url(../images/picto-tv.png); }
.hyper-discount { position: absolute; top: 0; right: 0; background: #e26703; color: #fff; font: bold 19px/30px Arial, sans-serif; padding: 0 8px; }
.products-grid .product-image { position: relative; display: block; }
.hyper-banner { position: absolute; left: 0; right: 0; bottom: 0; color: #fff; font: bold 12px/22px Arial, sans-serif; text-transform: uppercase; }
.hyper-brand { margin: 2px 0 6px; font-weight: bold; font-size: 14px; color: #555; }
.hyper-brand-title { font-style: italic; font-weight: normal; }
.hyper-brand-link { margin: 6px 0 12px; }
.hyper-brand-link a { color: #006666; font-weight: bold; }

/* Mobile : couleurs Hyper sur les en-têtes repliables (rwd = bleu #3399cc) */
.block-layered-nav .block-title, .block-layered-nav--no-filters .block-title,
.toggle-content .toggle-tabs li.current span, .sidebar .block-title { background-color: #006666; color: #fff; }
.block-layered-nav .block-title:after { border-top-color: #fff; }
.header-minicart .count { color: #fff; }

/* ---------- LOT 3 : barre « Nos marques », page marques, sections d'accueil ---------- */
.hyper-brand-letters { clear: both; text-align: center; padding: 8px 0; border-bottom: 1px solid #ddd; font-size: 14px; }
.hyper-brand-letters a { display: inline-block; padding: 2px 6px; color: #333; }
.hyper-brand-letters a:hover { color: #006666; }
.hyper-brand-letters__label a { color: #333; padding: 0; }
.hyper-brand-index { font-size: 16px; margin: 10px 0 20px; }
.hyper-brand-index a, .hyper-brand-index span { display: inline-block; padding: 2px 7px; }
.hyper-brand-index span { color: #ccc; }
.hyper-brand-group h2 { color: #006666; border-bottom: 1px solid #ddd; margin-top: 20px; }
.hyper-brand-group ul { columns: 4 180px; }
.hyper-brand-group li { padding: 2px 0; }
.hyper-home-section { margin: 20px 0 30px; }
.hyper-home-section .product-name { font-size: 13px; text-transform: none; }
.hyper-brandlogos { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center; }
.hyper-brandlogos img { max-height: 80px; max-width: 160px; }
.hyper-summary { color: #555; margin: 4px 0 8px; }
@media only screen and (max-width: 770px) { .hyper-brand-letters { display: none; } }

/* ---------- LOT 3 : encart promotionnel du menu (ancien Megamenu, cat_block_right) ---------- */
.nav-primary li.hyper-menu-promo { display: none; }
@media only screen and (min-width: 771px) {
    .nav-primary li.level1.hyper-menu-promo { display: block; float: none; width: auto; padding: 8px 10px 6px; border-bottom: 1px solid #e5e5e5; }
    .nav-primary li.hyper-menu-promo img { max-width: 100%; height: auto; display: block; margin-bottom: 6px; }
    .nav-primary li.hyper-menu-promo ul { position: static; display: block; padding: 0; background: none; box-shadow: none; border: 0; }
    .nav-primary li.hyper-menu-promo li { float: none; width: auto; padding: 2px 0; border: 0; }
    .nav-primary li.hyper-menu-promo a { color: #006666; font-weight: bold; padding: 0; }
}

/* ---------- LOT 3 : aperçu produits de la recherche (Hyper_SearchAutocomplete) ---------- */
#search_mini_form { position: relative; }
.hyper-ac { position: absolute; left: 0; right: 0; top: 100%; z-index: 200; margin: 2px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid #66999a; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.hyper-ac li a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: #333; text-decoration: none; border-bottom: 1px solid #eee; }
.hyper-ac li a:hover, .hyper-ac li a.active { background: #f0f7f7; }
.hyper-ac img { flex: 0 0 50px; }
.hyper-ac .hyper-ac-name { flex: 1; font-size: 13px; }
.hyper-ac .hyper-ac-price { font-weight: bold; white-space: nowrap; }