@import url('https://fonts.googleapis.com/css2?family=Single+Day&display=swap');

body, #wrapper {
  background-color: #D1C4E9;

  background-image:
    /* --- Étoiles très transparentes --- */
    /* MODIFICATION : J'ai mis opacity='0.2' (20% de visibilité)
       au lieu de 0.5 dans la ligne ci-dessous */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 80 80' opacity='0.2'%3E%3Cpath fill='white' d='m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z' stroke-linejoin='round' stroke-linecap='round' stroke-width='12' stroke='white'/%3E%3C/svg%3E"),

    /* --- Gradient de fond --- */
    linear-gradient(270deg, #FFECB3 0%, #FFE0B2 20%, #FFCDD2 40%, #F8BBD9 60%, #E1BEE7 80%, #D1C4E9 100%);

  background-repeat: repeat, no-repeat;
  background-size: 500px 500px, cover; 
  background-position: 0 0, center;
}

@font-face {
    font-family: 'Helvetica-Rounded';
    src: url('/themes/classic/assets/fonts/helvetica-rounded-bold.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica';
    src: url('/themes/classic/assets/fonts/Helvetica.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
  --color-gold: #ce991c;
  --color-header: #FFEA97;
  --color-blue-soft: #9EB6E5;
  --color-pink-flag: #b2505f;
  --color-white: #ffffff;
  --color-pink:#FFA0B0;
  --color-pink-hard:#f76d92;
  --color-blue-hard: #629bd9;
  --color-black: #000000;
}

span.color {
    border-radius: 100px!important;
}

/* Products Featured title */

.products-section-title {
    color: var(--color-blue-hard);
}

/* H3 product-title */

h2.h3.product-title a, h3.product-title a {
    font-family: "Helvetica-Rounded", sans-serif!important;
    color: var(--color-pink-hard)!important;
}

/* Tous les produits / View all */

a.all-product-link {
    font-size:0.95rem;
    font-family: "Helvetica"!important;
    font-weight: 600;
    color:var(--color-pink-hard)!important;
}

/* NOUVEAU > NEW */

.product-flags li.product-flag {
  background: #ff5e5e;
  color:#ffd799;
border-radius: 40px;
    margin-left:10px;
}

.product-flags li.product-flag.discount {
  background: var(--color-blue-soft);
}

/* TRIER PAR */

span.sort-by {
    color:var(--color-black);
    font-family: "Helvetica"!important;
}

/* Trier par BLOC */

.btn-unstyle.select-title {
    border-radius:100px;
    background: #FFEA97;
    border:none;
    color:#ce991c;
    font-weight: 600;
}

.dropdown-menu {
  background: #FFEA97;
  border: none;
  padding: 0; /* important pour que l'arrondi colle bien */
  background: none!important;
    box-shadow: none!important;
  -webkit-box-shadow: none!important;
  color:#ce991c!important;
}

.dropdown-menu > a {
  display: block;
  background: #FFEA97;
  color: #ce991c;
  font-weight: 600;
  padding: 10px 16px!important;
  color:#ce991c!important;

}

.dropdown-menu > a:first-child {
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
}

.dropdown-menu > a:last-child {
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
}

/* SUIVANT */

ul.page-list {
    background: none!important;
    font-size:0.95rem;
    font-family: "Helvetica"!important;
    font-weight: 600;
    color:var(--color-pink-hard)!important;
}

ul.page-list li a {
        background: none!important;
    font-size:0.95rem;
    font-family: "Helvetica"!important;
    font-weight: 600;
    color:var(--color-pink-hard)!important;
}

/* ========================== */
/* Curseur principal */
/* ========================== */
html, body, *, *::before, *::after {
  cursor: url('../img/starter-burning-star-cursor.png') 8 8, auto !important;
  font-family: "Helvetica", sans-serif;
}

html {
    font-family: "Helvetica", sans-serif;
    font-size:16px;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 700!important;
    font-family: "Helvetica-Rounded", sans-serif!important;
}

.header-nav span,
.header-nav a {
  font-family: "Helvetica-Rounded", sans-serif;
  font-weight: 700;
}

/* MENU */
.menu * {
  font-family: "Single Day", cursive!important;
  color: var(--color-gold);
}

#top-menu > li.category > a {
    font-size:2rem;   
}

.top-menu a[data-depth="0"] {
  color: var(--color-gold) !important;
}

.col-md-7.right-nav *  {
  color: #9EB6E5;
}

.user-info * {
  color: #9EB6E5!important;

}

#_desktop_cart * {
    color:white;
}

.popover.sub-menu.js-sub-menu.collapse {
  background: var(--color-gold);
  border-radius: 32px;
  margin-top:16px;
  font-size:2rem;
}

#header a {
    color:var(--color-header);
}


/* ========================== */
/* Curseur pointer */
/* ========================== */
a,
button,
input[type="button"],
input[type="submit"],
input[type="checkbox"],
input[type="radio"],
label,
select,
.summary,
.cart-summary,
.product-add-to-cart,
.ps-shoppingcart,
*[onclick],
*[role="button"] {
  cursor: url('../img/starter-burning-star-pointer.png') 8 8, pointer !important;
}

#header .logo {
  max-width: 75px;
  height: 75px;
}


#header {
  background: var(--color-header);
}

#header .header-nav .cart-preview.active {
  background: var(--color-blue-soft);
}

.header-nav {
      border-bottom: 2px solid var(--color-blue-soft)!important;
}

.block-categories,
.block_newsletter,
#search_filters,
.card {
  background: var(--color-header);
}

#subcategories, .block-category  {
    background:#FFA0B0;
}

.subcategory-heading {
    color:white;
}

.block-category {
    display:none;
}

.block-category>h1 {
    color:white;
}

#category-description p {
    color: white!important;
}

.category-cover picture img{
    display:none;
}



/* Rechercher */
.header-top .search-widgets form input[type=text],
.header-top .search-widgets form input[type=text]::placeholder {
  background: var(--color-gold) !important;
  color: var(--color-white);
  opacity: 1;
  font-family: "Helvetica-Rounded";
}

.product-miniature .thumbnail-container,
.product-miniature .product-description {
  background: none !important;
}

.block_newsletter > .row {
  padding: 16px;
}

#contact-link {
  display: none;
}

/* Champs texte arrondis */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
  border-radius: 32px !important;
  border: 1px solid #ccc !important;
  outline: none !important;
  box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-color: var(--color-gold) !important;
  box-shadow: 0 0 5px var(--color-gold) !important;
}

@media (min-width: 768px) {
  .col-md-2, .col-md-3 {
    float: left;
    width: auto !important;
  }
}


.price {
    color: white;   
}

/*BTN */

.btn-primary, .btn-primary:hover  {
    background: var(--color-blue-soft);   
}

.button, .btn {
    border-radius: 8px;

}

.card, .row, .block_newsletter, .block-categories, #search_filters {
    border-radius: 16px;
}

.block-categories *{
    color:var(--color-gold)!important;
}

#search_filters * {
    color:var(--color-gold)!important;
}

.card.cart-summary {
    padding:16px;
}

.card-block.checkout {
    padding-top: 1.75rem;
    padding-bottom: 0;
}

footer>.container>.row {
    margin: auto 8px auto 8px;
}

a:hover {
    color:var(--color-blue-soft)!important;
}

.blockcart {
    background: var(--color-blue-soft)!important;
}

.cart-container {
    color:white;
    
}

.cart-container {
    background: var(--color-pink);
}

.subcategory-image a {
    border:none!important;
}

.subcategory-name {
    color:white;
}


.text-uppercase.h6 {
    color:var(--color-gold)!important;    
    font-family: "Single Day";
    font-weight: 800!important;
}

.highlighted-informations {
    border-radius: 32px;
    height:36px!important;
    padding:.3125rem 0;
    width:90%!important;
    left:50%;
    transform: translateX(-50%);
}


.thumbnail-container {
    border-radius: 16px;
}

.thumbnail-top a picture img {
    border-radius: 32px;
}

.variant-links {
    border-radius: 0 0 16px 16px;   
    width:80%!important;
    left:50%;
    min-height:2rem!important;
    transform: translateX(-50%);
}

.input-group.bootstrap-touchspin {
    display:flex;
} 

#product-modal .modal-content .modal-body .product-cover-modal, .product-cover img {
    background:none!important;
}

.product-line-grid-body * {
    color:var(--color-pink-flag)!important;
}

.cart-container > .card-block > h1.h1 {
    color:var(--color-pink-flag)!important;
}

#subcategories {
    display:none;
}

#left-column .block-categories li > a.text-uppercase.h6, #left-column #search_filters > p.h6, #left-column #search_filters section.facet > p.facet-title,.block-categories > ul.category-top-menu > li > a, 
.block-categories ul.category-sub-menu > li[data-depth="0"] > a
 {
    color:var(--color-blue-soft)!important;
}

#left-column .category-sub-menu a, #left-column section.facet ul li label, #left-column section.facet ul li a, #left-column section.facet ul li input {
    color: #b28a2c!important;
}

.product-price {
    color:var(--color-pink-flag)!important;
}

.blockreassurance_product .block-title {
    font-family: "Helvetica-Rounded", "sans-serif";
    font-weight: 800;
}

.blockreassurance_product p {
    margin-top: 5px;   /* espace au-dessus du paragraphe */
    margin-bottom: 30px; /* espace en dessous du paragraphe */
}

div.product-container h1.h1 {
    color:#f76d92!important;
}

span.current-price-value, span.regular-price, #product-description-short-1, .product-variants-item .control-label, select#group_1 option[selected], input.input-color:checked + span.attribute-name, input#quantity_wanted, .tax-shipping-delivery-label, #product-description-short-1 p

 {
     color:#629bd9!important;
     font-weight: 600;

 }
 
 #quantity_wanted {
     border-radius: 100px;
     text-align: center;
     background: #FFEA97;
     border:none;
 }

.social-sharing {

    color:var(--color-black);
    font-family: "Helvetica"!important;
}

.social-sharing li a {
    margin-left:4px;
    display:unset!important;
}

.social-sharing li {
 background-color:unset!important;   
}

.pinterest.icon-gray {
    display:none;
}

.twitter,.facebook {
    background-image:unset!important;
}

.tabs {
    display:none;
}

/** BOUTONS QUANTITE PANIER **/

span.input-group-btn-vertical {
    margin-left:10px;
}

/* 1. On donne une taille aux boutons générés par le système */
.bootstrap-touchspin .btn-touchspin {
    background-color: transparent !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    /* On cache le "+" et le "-" d'origine */
    font-size: 0 !important; 
    color: transparent !important;
    position: relative;
}

/* 2. On met ton image pour le PLUS */
.bootstrap-touchspin .bootstrap-touchspin-up {
    background-image: url('https://cocottt.com/themes/classic/assets/img/up.png') !important;
}

/* 3. On met ton image pour le MOINS */
.bootstrap-touchspin .bootstrap-touchspin-down {
    background-image: url('https://cocottt.com/themes/classic/assets/img/down.png') !important;
}

/* 4. On s'assure que les icônes par défaut (Material Icons) ne s'affichent pas */
.bootstrap-touchspin .btn-touchspin i {
    display: none !important;
}

/* 5. Alignement pour que tout soit sur une ligne */
.product-quantity .qty {
    display: flex !important;
    align-items: center;
}
.bootstrap-touchspin {
    display: flex;
    align-items: center;
}

/* Taille et position de ta nouvelle loupe */
.search-icon-png {
    width: 30px;       /* Ajuste la taille selon tes besoins */
    height: auto;
    cursor: pointer;
    position: absolute;
    top: 10px;         /* Ajuste pour centrer verticalement */
    left: 10px;        /* Ajuste pour centrer horizontalement */
}

/* On s'assure que le champ de texte laisse de la place à l'image */
#search_widget form input[type="text"] {
    padding-left: 40px !important; 
}

/* 1. Base commune pour l'icône */
.wishlist-button-add i.material-icons {
    font-size: 0 !important; /* Cache le texte */
    display: inline-block !important;
    width: 25px !important;
    height: 25px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* On supprime le rendu de l'icône Material */
.wishlist-button-add i.material-icons::before {
    content: "" !important;
}

/* 2. Affichage selon la classe ajoutée par notre JS */
.wishlist-button-add i.is-empty {
    background-image: url('/themes/classic/assets/img/coeur-vide.png') !important;
}

.wishlist-button-add i.is-filled {
    background-image: url('/themes/classic/assets/img/coeur-plein.png') !important;
}

/* Style pour ta nouvelle flèche PNG */
img.arrow-png-link {
    width: 20px;            /* Ajuste la taille selon ton envie */
    height: auto;
    vertical-align: middle; /* Aligne l'image au milieu du texte */
    margin-left: 8px;       /* Donne un peu d'espace avec le texte */
    display: inline-block;
}

/* On s'assure que le lien reste bien aligné sur la droite sur ordinateur */
@media (min-width: 768px) {
    .all-product-link {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}

/* On crée la classe qui fait faire demi-tour à l'image */
.arrow-png-link-reverse {
    display: inline-block; /* Obligatoire pour que la rotation fonctionne */
    transform: rotate(180deg);
    vertical-align: middle;
    width: 20px;            /* Ajuste la taille selon ton envie */
    height: auto;
    margin-left: 8px;       /* Donne un peu d'espace avec le texte */
}

/* Si tu veux l'utiliser en plus de la classe de base sur la même image */
.arrow-png-link.arrow-png-link-reverse {
    margin-right: 8px; /* On inverse aussi la marge si c'est pour un bouton "Précédent" */
    margin-left: 0;
}

.dropdown-menu {
    background-color:var(--color-gold)!important;
    border-radius: 10px;
}

.links a span {
    border-radius: 10px!important;
    background-color:var(--color-gold)!important;
    color:white;
}

/* Uniquement pour les écrans de téléphone (max 767px) */
@media (max-width: 767px) {
    .product-miniature, 
    .product-miniature .product {
        width: 170px !important; /* Force la largeur à 150px */
        margin: 0 auto;         /* Centre la miniature si besoin */
    }

    .js-product.col-xs-12 {
        width: unset !important;
        flex: 0 0 50%;          /* Optionnel : pour en mettre 2 par ligne */
        max-width: 50%;
    }
}

/* On cible le conteneur visuel de chaque variante */
.product-variants-item #group_2 .input-container label span {
    display: inline-block;
    width: 60px;               /* Ajuste la taille selon tes besoins */
    height: 60px;
    border: 2px solid #eeeeee;
    border-radius: 4px;        /* 50% pour un cercle, 4px pour un carré arrondi */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.2s ease;
    cursor: url('../img/starter-burning-star-pointer.png') 8 8, pointer !important;
}

/* Style quand la variante est sélectionnée */
.product-variants-item #group_2 input:checked + span {
    border-color: var(--color-gold); /* Utilisation de ta variable */
    box-shadow: 0 0 5px rgba(206, 153, 28, 0.5);
}