/* ==========================================================
   BOUTONS PRINCIPAUX (.btn-primary)
   ========================================================== */
/*
   Personnalisation des boutons principaux du thème.

   Couleur normale :
   - fond : vert #609084
   - texte : blanc
   - bordure : vert #609084

   Au survol :
   - fond : vert foncé #3a5951
   - texte : blanc
*/
.btn-primary {

    /* Couleur du texte du bouton */
    --bs-btn-color: #fff;

    /* Couleur de fond du bouton */
    --bs-btn-bg: #609084;

    /* Couleur de la bordure du bouton */
    --bs-btn-border-color: #609084;

    /* ------------------------------------------------------
       ÉTAT AU SURVOL (HOVER)
       ------------------------------------------------------ */
    /* Couleur du texte au survol */
    --bs-btn-hover-color: #fff;

    /* Fond vert foncé au survol */
    --bs-btn-hover-bg: #3a5951;

    /* Couleur de la bordure au survol */
    --bs-btn-hover-border-color: #609084;

    /* ------------------------------------------------------
       ÉTAT DE FOCUS
       ------------------------------------------------------ */
    /*
       Valeur RGB utilisée par Bootstrap pour l'ombre
       lors du focus du bouton.

       Cette valeur utilise la couleur verte du thème.
    */
    --bs-btn-focus-shadow-rgb: 96, 144, 132;

    /* ------------------------------------------------------
       ÉTAT ACTIF / CLIQUÉ
       ------------------------------------------------------ */
    /* Couleur du texte lorsque le bouton est actif */
    --bs-btn-active-color: #fff;

    /* Couleur de fond lorsque le bouton est actif */
    --bs-btn-active-bg: #609084;

      /* Couleur de la bordure lorsque le bouton est actif */
      --bs-btn-active-border-color: #3a5951;

    /* Ombre intérieure du bouton actif */
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

    /* ------------------------------------------------------
       ÉTAT DÉSACTIVÉ
       ------------------------------------------------------ */
    /* Couleur du texte d'un bouton désactivé */
    --bs-btn-disabled-color: #fff;

    /* Couleur de fond d'un bouton désactivé */
    --bs-btn-disabled-bg: #609084;

    /* Couleur de bordure d'un bouton désactivé */
    --bs-btn-disabled-border-color: #609084;
}

/* ==========================================================
   LIENS BOOTSTRAP
   ========================================================== */
/*
   Bootstrap utilise plusieurs variables pour gérer les liens.

   --bs-link-color :
       couleur principale du lien.

   --bs-link-color-rgb :
       même couleur sous forme RGB.
       Elle est notamment utilisée par Bootstrap dans
       les règles utilisant rgba().

   --bs-link-hover-color :
       couleur du lien lorsqu'il est survolé.
*/
:root,
[data-bs-theme="light"] {

    /* Couleur normale des liens */
    --bs-link-color: #609084;

    /*
       Version RGB de #609084.

       #609084 = RGB(96, 144, 132)
    */
    --bs-link-color-rgb: 96, 144, 132;

    /* Couleur des liens au survol */
    --bs-link-hover-color: #3a5951;
}

/* ==========================================================
   LIENS DU SITE
   ========================================================== */
/*
   Couleur générale des liens du site.

   Les liens sont verts par défaut.
*/
body a {
    color: #609084;
}

/*
   Au survol d'un lien, le vert devient plus foncé.

   Cela permet de distinguer clairement l'état normal
   de l'état hover.
*/
body a:hover {
    color: #3a5951;
}

/* ==========================================================
   TEXTE DES BOUTONS PRINCIPAUX
   ========================================================== */
/*
   Les boutons .btn-primary peuvent être des liens <a>.
   La règle générale "body a" leur attribue la couleur
   des liens (#609084).

   On force donc ici le texte des boutons principaux
   à rester blanc.
*/
body a.btn-primary {
    color: #fff;
}

/*
   Le texte reste également blanc lorsque le bouton
   est survolé.
*/
body a.btn-primary:hover {
    color: #fff;
}

/* ==========================================================
   FOOTER
   ========================================================== */
/*
   Les liens du footer sont blancs à l'état normal.

   Cette règle vient volontairement après "body a" afin
   que le footer conserve sa couleur blanche.
*/
footer a {
    color: #fff;
}

/*
   Au survol des liens du footer, on utilise une couleur
   légèrement différente du blanc.

   #d6e2df correspond à un blanc légèrement teinté de vert.
   La différence reste volontairement discrète.
*/
footer a:hover {
    color: #d6e2df;
}

/* ==========================================================
   MENU PRINCIPAL
   ========================================================== */
/*
   Texte des éléments principaux du menu en gras.

   Cette règle concerne uniquement le menu desktop
   principal de Hummingbird.
*/
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .ps-mainmenu__tree-link {
    font-weight: bold;
}

/* ==========================================================
   BOUTONS OUTLINE (.btn-outline-primary)
   ========================================================== */
/*
   Personnalisation des boutons "outline".

   À l'état normal :
   - fond transparent
   - texte vert
   - bordure verte

   Au survol :
   - fond vert
   - texte blanc
   - bordure verte
*/
.btn-outline-primary {

    /* Couleur du texte à l'état normal */
    --bs-btn-color: #609084;

    /* Couleur de la bordure à l'état normal */
    --bs-btn-border-color: #609084;

    /* ------------------------------------------------------
       ÉTAT AU SURVOL (HOVER)
       ------------------------------------------------------ */
    /* Texte blanc au survol */
    --bs-btn-hover-color: #fff;

    /* Fond vert au survol */
    --bs-btn-hover-bg: #609084;

    /* Bordure verte au survol */
    --bs-btn-hover-border-color: #609084;

    /* ------------------------------------------------------
       ÉTAT DE FOCUS
       ------------------------------------------------------ */
    /*
       Valeur RGB utilisée par Bootstrap pour l'ombre
       lors du focus.

       Cette valeur utilise la couleur verte du thème.
    */
    --bs-btn-focus-shadow-rgb: 96, 144, 132;

    /* ------------------------------------------------------
       ÉTAT ACTIF / CLIQUÉ
       ------------------------------------------------------ */
    /* Texte blanc lorsque le bouton est actif */
    --bs-btn-active-color: #fff;

    /* Fond vert lorsque le bouton est actif */
    --bs-btn-active-bg: #609084;

    /* Bordure verte lorsque le bouton est actif */
    --bs-btn-active-border-color: #609084;

    /* Ombre intérieure lorsque le bouton est actif */
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

    /* ------------------------------------------------------
       ÉTAT DÉSACTIVÉ
       ------------------------------------------------------ */
    /* Texte vert pour le bouton désactivé */
    --bs-btn-disabled-color: #609084;

    /* Fond transparent pour le bouton désactivé */
    --bs-btn-disabled-bg: transparent;

    /* Bordure verte pour le bouton désactivé */
    --bs-btn-disabled-border-color: #609084;


    /* Aucun dégradé */
    --bs-gradient: none;
}

/* ==========================================================
   CORRECTION DU HOVER DES BOUTONS OUTLINE
   ========================================================== */
/*
   Les boutons .btn-outline-primary peuvent être des liens <a>.

   Comme "body a:hover" définit également une couleur,
   cette règle garantit que le texte du bouton reste blanc
   lorsque le bouton est survolé.
*/
body a.btn-outline-primary:hover {
    color: #fff;
}

/* ==========================================================
   PANIER
   ========================================================== */
/*
   Le panier de Hummingbird n'est pas simplement un lien <a>.

   On cible donc directement les éléments utilisés par
   le bloc panier :
   - le bouton / conteneur
   - l'icône
   - le texte "Panier"

   La couleur reste verte en permanence.
*/
.ps-shoppingcart .header-block__action-btn,
.ps-shoppingcart .header-block__icon,
.ps-shoppingcart .header-block__title {
    color: #609084;
}

/* ==========================================================
   CAROUSEL
   ========================================================== */
/*
   Couleur de l'indicateur actif du carousel.
   L'indicateur correspondant à la diapositive actuellement
   affichée utilise le même vert principal que le reste
   de la personnalisation.
*/
.carousel-indicators .active {
    background-color: #609084;
}

/* ==========================================================
   BADGE DE RÉDUCTION PRODUIT
   ========================================================== */
/*
   Personnalisation des badges produits.
*/
.product-flags .badge.discount {
    background-color: #fff;
    color: #609084;
}

/*
   Bordure des badges produits :
   - badge "discount"
   - badge "new"
   - autres badges
*/
.product-flags .badge.discount,
.product-flags .badge.new,
.product-flags .badge:not(.discount):not(.new) {
    border: 1px solid #609084;
}

/* ==========================================================
   BADGE "NEW"
   ========================================================== */
html body .product-flags li.badge.new {
   --bs-primary-rgb: 96, 144, 132;
   background: #609084 !important;
   background-color: #609084 !important;
   color: #fff !important;
   border-color: #609084 !important;
}

/* ==========================================================
   ICÔNES RÉSEAUX SOCIAUX
   ========================================================== */
/*
   Définit la taille des icônes SVG des réseaux sociaux
   à 30 x 30 pixels.
*/
.ps-socialfollow svg {
    width: 30px;
    height: 30px;
}