/* ==========================================================================
   ICÔNES SVG PERSONNALISÉES POUR LA HOME
   Les icônes utilisent currentColor pour hériter de la couleur CSS
   ========================================================================== */

/* Base commune pour les icônes SVG */
.home_item_icon .home-icon {
    width: 32px;
    height: 32px;
    display: block;
}

/* Icône Factures - Facture moderne avec lignes et total */
.home_item_icon .home-icon-factures {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 3h14a1 1 0 0 1 1 1v16.5a.5.5 0 0 1-.8.4l-2.2-1.7-2 1.6a.5.5 0 0 1-.6 0l-2.4-1.9-2.4 1.9a.5.5 0 0 1-.6 0l-2-1.6-2.2 1.7a.5.5 0 0 1-.8-.4V4a1 1 0 0 1 1-1z' stroke='currentColor' stroke-width='1.5'/%3E%3Cline x1='8' y1='7' x2='16' y2='7' stroke='currentColor' stroke-width='1.3'/%3E%3Cline x1='8' y1='10' x2='14' y2='10' stroke='currentColor' stroke-width='1.3'/%3E%3Cline x1='8' y1='13' x2='12' y2='13' stroke='currentColor' stroke-width='1.3'/%3E%3Ctext x='13' y='14' font-size='5' font-weight='bold' fill='currentColor'%3E€%3C/text%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 3h14a1 1 0 0 1 1 1v16.5a.5.5 0 0 1-.8.4l-2.2-1.7-2 1.6a.5.5 0 0 1-.6 0l-2.4-1.9-2.4 1.9a.5.5 0 0 1-.6 0l-2-1.6-2.2 1.7a.5.5 0 0 1-.8-.4V4a1 1 0 0 1 1-1z' stroke='currentColor' stroke-width='1.5'/%3E%3Cline x1='8' y1='7' x2='16' y2='7' stroke='currentColor' stroke-width='1.3'/%3E%3Cline x1='8' y1='10' x2='14' y2='10' stroke='currentColor' stroke-width='1.3'/%3E%3Cline x1='8' y1='13' x2='12' y2='13' stroke='currentColor' stroke-width='1.3'/%3E%3Ctext x='13' y='14' font-size='5' font-weight='bold' fill='currentColor'%3E€%3C/text%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Icône Consommation - Graphique tendance avec goutte */
.home_item_icon .home-icon-conso {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 16l4-4 4 4 5-6'/%3E%3Cpath d='M17 10h3v3'/%3E%3Ccircle cx='7' cy='16' r='1.5' fill='currentColor'/%3E%3Ccircle cx='11' cy='12' r='1.5' fill='currentColor'/%3E%3Ccircle cx='15' cy='16' r='1.5' fill='currentColor'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 16l4-4 4 4 5-6'/%3E%3Cpath d='M17 10h3v3'/%3E%3Ccircle cx='7' cy='16' r='1.5' fill='currentColor'/%3E%3Ccircle cx='11' cy='12' r='1.5' fill='currentColor'/%3E%3Ccircle cx='15' cy='16' r='1.5' fill='currentColor'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Icône Relevé - Compteur avec chiffres style odometer */
.home_item_icon .home-icon-releve {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='1' y='6' width='22' height='12' rx='2' stroke='currentColor' stroke-width='1.5'/%3E%3Crect x='3' y='8' width='3.5' height='8' rx='0.5' stroke='currentColor' stroke-width='1'/%3E%3Crect x='7' y='8' width='3.5' height='8' rx='0.5' stroke='currentColor' stroke-width='1'/%3E%3Crect x='11' y='8' width='3.5' height='8' rx='0.5' stroke='currentColor' stroke-width='1'/%3E%3Crect x='15' y='8' width='3.5' height='8' rx='0.5' fill='currentColor' opacity='0.3'/%3E%3Crect x='19' y='8' width='3.5' height='8' rx='0.5' fill='currentColor' opacity='0.3'/%3E%3Cpath d='M4.75 10v4' stroke='currentColor' stroke-width='1.2'/%3E%3Cpath d='M8.5 10.5h0.5v1.5h-0.5v1.5h0.5' stroke='currentColor' stroke-width='0.8'/%3E%3Cpath d='M12.75 10v4' stroke='currentColor' stroke-width='1.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='1' y='6' width='22' height='12' rx='2' stroke='currentColor' stroke-width='1.5'/%3E%3Crect x='3' y='8' width='3.5' height='8' rx='0.5' stroke='currentColor' stroke-width='1'/%3E%3Crect x='7' y='8' width='3.5' height='8' rx='0.5' stroke='currentColor' stroke-width='1'/%3E%3Crect x='11' y='8' width='3.5' height='8' rx='0.5' stroke='currentColor' stroke-width='1'/%3E%3Crect x='15' y='8' width='3.5' height='8' rx='0.5' fill='currentColor' opacity='0.3'/%3E%3Crect x='19' y='8' width='3.5' height='8' rx='0.5' fill='currentColor' opacity='0.3'/%3E%3Cpath d='M4.75 10v4' stroke='currentColor' stroke-width='1.2'/%3E%3Cpath d='M8.5 10.5h0.5v1.5h-0.5v1.5h0.5' stroke='currentColor' stroke-width='0.8'/%3E%3Cpath d='M12.75 10v4' stroke='currentColor' stroke-width='1.2'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Icône Demandes - Checklist moderne */
.home_item_icon .home-icon-demandes {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M8 10l2 2 4-4'/%3E%3Cpath d='M8 16h8'/%3E%3Cpath d='M8 12h2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M8 10l2 2 4-4'/%3E%3Cpath d='M8 16h8'/%3E%3Cpath d='M8 12h2'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Couleurs des icônes - utilise la couleur primaire du thème */
.home_item_factures .home_item_icon { color: rgb(from var(--primary-bg-color) r g b / 0.2); }
.home_item_conso .home_item_icon { color: rgb(from var(--primary-bg-color) r g b / 0.2); }
.home_item_releve .home_item_icon { color: rgb(from var(--primary-bg-color) r g b / 0.2); }
.home_item_demandes .home_item_icon { color: rgb(from var(--primary-bg-color) r g b / 0.2); }

/* Transition au hover */
.home_item:hover .home_item_icon {
    transform: scale(1.1);
    color: rgb(from var(--primary-bg-color) r g b / 0.75);
}

.home_item_icon {
    transition: transform 0.2s ease, color 0.2s ease;
}

/* ==========================================================================
   ICÔNES POUR LES QUICKLINKS COMPACTS
   ========================================================================== */
.home_quicklink .home-icon,
.home_quicklink_item .home-icon,
.home_quicklink_bar_item .home-icon {
    width: 28px;
    height: 28px;
    display: block;
    background-color: rgb(from var(--primary-bg-color) r g b / 0.5);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.home_quicklink .home-icon-factures,
.home_quicklink_item .home-icon-factures,
.home_quicklink_bar_item .home-icon-factures {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 3h14a1 1 0 0 1 1 1v16.5a.5.5 0 0 1-.8.4l-2.2-1.7-2 1.6a.5.5 0 0 1-.6 0l-2.4-1.9-2.4 1.9a.5.5 0 0 1-.6 0l-2-1.6-2.2 1.7a.5.5 0 0 1-.8-.4V4a1 1 0 0 1 1-1z' stroke='currentColor' stroke-width='1.5'/%3E%3Cline x1='8' y1='7' x2='16' y2='7' stroke='currentColor' stroke-width='1.3'/%3E%3Cline x1='8' y1='10' x2='14' y2='10' stroke='currentColor' stroke-width='1.3'/%3E%3Cline x1='8' y1='13' x2='12' y2='13' stroke='currentColor' stroke-width='1.3'/%3E%3Ctext x='13' y='14' font-size='5' font-weight='bold' fill='currentColor'%3E€%3C/text%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 3h14a1 1 0 0 1 1 1v16.5a.5.5 0 0 1-.8.4l-2.2-1.7-2 1.6a.5.5 0 0 1-.6 0l-2.4-1.9-2.4 1.9a.5.5 0 0 1-.6 0l-2-1.6-2.2 1.7a.5.5 0 0 1-.8-.4V4a1 1 0 0 1 1-1z' stroke='currentColor' stroke-width='1.5'/%3E%3Cline x1='8' y1='7' x2='16' y2='7' stroke='currentColor' stroke-width='1.3'/%3E%3Cline x1='8' y1='10' x2='14' y2='10' stroke='currentColor' stroke-width='1.3'/%3E%3Cline x1='8' y1='13' x2='12' y2='13' stroke='currentColor' stroke-width='1.3'/%3E%3Ctext x='13' y='14' font-size='5' font-weight='bold' fill='currentColor'%3E€%3C/text%3E%3C/svg%3E");
}

.home_quicklink .home-icon-conso,
.home_quicklink_item .home-icon-conso,
.home_quicklink_bar_item .home-icon-conso {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 16l4-4 4 4 5-6'/%3E%3Cpath d='M17 10h3v3'/%3E%3Ccircle cx='7' cy='16' r='1.5' fill='currentColor'/%3E%3Ccircle cx='11' cy='12' r='1.5' fill='currentColor'/%3E%3Ccircle cx='15' cy='16' r='1.5' fill='currentColor'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 16l4-4 4 4 5-6'/%3E%3Cpath d='M17 10h3v3'/%3E%3Ccircle cx='7' cy='16' r='1.5' fill='currentColor'/%3E%3Ccircle cx='11' cy='12' r='1.5' fill='currentColor'/%3E%3Ccircle cx='15' cy='16' r='1.5' fill='currentColor'/%3E%3C/svg%3E");
}

.home_quicklink .home-icon-demandes,
.home_quicklink_item .home-icon-demandes,
.home_quicklink_bar_item .home-icon-demandes {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M8 10l2 2 4-4'/%3E%3Cpath d='M8 16h8'/%3E%3Cpath d='M8 12h2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M8 10l2 2 4-4'/%3E%3Cpath d='M8 16h8'/%3E%3Cpath d='M8 12h2'/%3E%3C/svg%3E");
}

/* Icône abonnement pour la carte mes autres abonnements */
.home_subscription_item .home-icon-abonnement {
    width: 32px;
    height: 32px;
    display: block;
    background-color: var(--color-primary, #12447d);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9,22 9,12 15,12 15,22'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9,22 9,12 15,12 15,22'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ==========================================================================
   ICÔNE BOUTON FAIRE MA RELÈVE - Compteur avec crayon
   ========================================================================== */
.home_releve_button .home-icon-releve {
    width: 48px;
    height: 48px;
    display: block;
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3C!-- Compteur principal --%3E%3Crect x='4' y='12' width='32' height='20' rx='3' stroke='currentColor' stroke-width='2.5' fill='none'/%3E%3C!-- Cases des chiffres --%3E%3Crect x='7' y='16' width='6' height='12' rx='1' stroke='currentColor' stroke-width='1.5'/%3E%3Crect x='14' y='16' width='6' height='12' rx='1' stroke='currentColor' stroke-width='1.5'/%3E%3Crect x='21' y='16' width='6' height='12' rx='1' stroke='currentColor' stroke-width='1.5'/%3E%3Crect x='28' y='16' width='6' height='12' rx='1' fill='currentColor' opacity='0.2'/%3E%3C!-- Chiffres --%3E%3Ctext x='10' y='25' font-family='Arial' font-size='8' font-weight='bold' fill='currentColor' text-anchor='middle'%3E0%3C/text%3E%3Ctext x='17' y='25' font-family='Arial' font-size='8' font-weight='bold' fill='currentColor' text-anchor='middle'%3E4%3C/text%3E%3Ctext x='24' y='25' font-family='Arial' font-size='8' font-weight='bold' fill='currentColor' text-anchor='middle'%3E7%3C/text%3E%3C!-- Crayon --%3E%3Cpath d='M38 8l4 4-14 14-5 1 1-5L38 8z' stroke='currentColor' stroke-width='2' fill='none' stroke-linejoin='round'/%3E%3Cpath d='M36 10l4 4' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3C!-- Compteur principal --%3E%3Crect x='4' y='12' width='32' height='20' rx='3' stroke='currentColor' stroke-width='2.5' fill='none'/%3E%3C!-- Cases des chiffres --%3E%3Crect x='7' y='16' width='6' height='12' rx='1' stroke='currentColor' stroke-width='1.5'/%3E%3Crect x='14' y='16' width='6' height='12' rx='1' stroke='currentColor' stroke-width='1.5'/%3E%3Crect x='21' y='16' width='6' height='12' rx='1' stroke='currentColor' stroke-width='1.5'/%3E%3Crect x='28' y='16' width='6' height='12' rx='1' fill='currentColor' opacity='0.2'/%3E%3C!-- Chiffres --%3E%3Ctext x='10' y='25' font-family='Arial' font-size='8' font-weight='bold' fill='currentColor' text-anchor='middle'%3E0%3C/text%3E%3Ctext x='17' y='25' font-family='Arial' font-size='8' font-weight='bold' fill='currentColor' text-anchor='middle'%3E4%3C/text%3E%3Ctext x='24' y='25' font-family='Arial' font-size='8' font-weight='bold' fill='currentColor' text-anchor='middle'%3E7%3C/text%3E%3C!-- Crayon --%3E%3Cpath d='M38 8l4 4-14 14-5 1 1-5L38 8z' stroke='currentColor' stroke-width='2' fill='none' stroke-linejoin='round'/%3E%3Cpath d='M36 10l4 4' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}