.favorite-toggle-btn { background: transparent; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.heart-icon { font-family: 'HEART', sans-serif; line-height: 1; color: transparent;  transition: color 0.2s ease, -webkit-text-stroke 0.2s ease; }
.remove-btn { background: #C0CEF7; border: none; font-weight: bold; cursor: pointer; padding: 0 6px; display: inline-flex; align-items: center; border-radius: 0px 5px 5px 0px; }
html[dir="rtl"] .remove-btn { border-radius: 5px 0px 0px 5px; }

.heart-desktop { margin-top: -3px; margin-bottom: -3px; }
.heart-desktop .heart-icon { -webkit-text-stroke: 1.5px #666C80; background: #eee; border-radius: 100px; height: 27px; width: 27px; margin-top: -4px; padding-top: 4px; }
.heart-desktop.is-active .heart-icon { color: #FFB84A; -webkit-text-stroke: 1.5px #FFB84A; display: inline; background: #fff; }
.heart-text-desktop { font-size: calc(1rem - 5px); color: #666C80; border-left: 1px dashed #666C80; border-bottom: 1px dashed #666C80; border-top: none; border-right: none; border-radius: 0px 0px 0px 5px; line-height: 1; transition: color 0.2s ease, -webkit-text-stroke 0.2s ease; text-align: left; padding: 0px 3px 3px 5px; }
html[dir="rtl"] .heart-text-desktop { text-align: right; padding: 0px 5px 3px 3px; border-left: none; border-bottom: 1px dashed #666C80; border-top: none; border-right: 1px dashed #666C80; border-radius: 0px 0px 5px 0px; }
.heart-desktop.is-active .heart-text-desktop { display: none; }
.list-desktop { display: flex; flex-wrap: wrap; gap: 12px; margin: -3px 24px 3px 24px; }
.item-desktop { background-color: #FFF; padding: 0px 0px 0px 8px; border-radius: 5px; font-size: 14px; line-height: 2; }
html[dir="rtl"] .item-desktop { padding: 0px 8px 0px 0px; }
.item-desktop a { color: #000; margin-right: 10px; }
html[dir="rtl"] .item-desktop a { margin-right: 0; margin-left: 10px; }
.item-desktop .remove-btn { color: #FFF; font-size: 14px; }

.heart-mobile { margin-top: -5px; margin-bottom: -3px; }
.heart-mobile .heart-icon { -webkit-text-stroke: 2px #FFFFFF; background: #FFFFFF60; border-radius: 100px; height: 27px; width: 27px; margin-top: 1px; padding-top: 3px; }
.heart-mobile.is-active .heart-icon { color: #FFB84A; -webkit-text-stroke: 2px #FFB84A; display: inline; background: #FFFFFF00; box-shadow: inset 0 0 0 1px #FFB84A00; }
.heart-text-mobile { font-size: calc(1rem - 5px); color: #FFF; border-left: 1px dashed #FFF; border-bottom: 1px dashed #FFF; border-top: none; border-right: none; border-radius: 0px 0px 0px 5px; line-height: 1; transition: color 0.2s ease, -webkit-text-stroke 0.2s ease; text-align: left; padding: 0px 3px 3px 5px; }
html[dir="rtl"] .heart-text-mobile { text-align: right; padding: 0px 5px 3px 3px; border-left: none; border-bottom: 1px dashed #FFF; border-top: none; border-right: 1px dashed #FFF; border-radius: 0px 0px 5px 0px; }
.heart-mobile.is-active .heart-text-mobile { display: none; }
.list-mobile { display: flex; flex-wrap: wrap; gap: 10px; margin: -1px 8px 1px 8px; }
.item-mobile { background-color: #FFF; padding: 0px 0px 0px 8px; border-radius: 5px; font-size: 14px; line-height: 2; }
html[dir="rtl"] .item-mobile { padding: 0px 8px 0px 0px; }
.item-mobile a { color: #000; margin-right: 10px; }
html[dir="rtl"] .item-mobile a { margin-right: 0; margin-left: 10px; }
.item-mobile .remove-btn { color: #FFF; font-size: 14px; }
 
.fav-weather-icon { width: 20px; height: 20px; vertical-align: top; margin-top: 5px; margin-right: 6px; display: none; }
html[dir="rtl"] .fav-weather-icon { margin-right: 0; margin-left: 6px; }

.favorite-item {
    /* Épaisseur et style de la bordure, couleur par défaut transparente */
    border-inline-start: 3px solid transparent; 
    
    /* Si votre serveur ne supporte pas border-inline-end (très rare aujourd'hui), 
       utilisez border-right: 4px solid transparent; et gérez le RTL manuellement */
}