/*BOUTONS PRINCIPAUX*/

.btn-primaire {
    display: inline-block;
    margin-top: 24px;
    padding: 12px 20px;
    border-radius: var(--rayon);
    background: var(--bleu-principal);
    color: var(--blanc);
    font-weight: 700;
}

.btn-principal {
	font-family: 'Inter', Arial, sans-serif;
    border: 1px solid rgba(25, 78, 182, 0.92);
    color: #ffffff;
    background: linear-gradient(135deg, #2462d4 0%, var(--couleur-bleu-fonce) 100%);
    box-shadow: 0 10px 22px rgba(25, 78, 182, 0.18);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition:
        transform var(--transition-standard),
        border-color var(--transition-standard),
        box-shadow var(--transition-standard),
        color var(--transition-standard),
        filter var(--transition-standard);
}

.btn-principal:hover {
    transform: translateY(-1px);
    text-decoration: none;
    color: #ffffff;
    background: linear-gradient(135deg, #1f57bc 0%, var(--couleur-bleu-fonce-hover) 100%);
    border-color: var(--couleur-bleu-fonce-hover);
    box-shadow: 0 12px 24px rgba(22, 63, 147, 0.22);
}

.btn-principal:disabled,
.btn-principal.is-disabled,
.btn-secondaire:disabled,
.btn-secondaire.is-disabled,
.btn-rouge:disabled,
.btn-rouge.is-disabled {
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
    opacity: 0.58;
    filter: grayscale(0.35);
}

.btn-principal:disabled,
.btn-principal.is-disabled {
    border-color: #cbd5e1;
    background: #d8dee8;
    color: #667085;
}


.btn-secondaire {
	font-family: 'Inter', Arial, sans-serif;
	border: 1px solid var(--couleur-bordure-forte);
    color: var(--couleur-bleu-fonce);
    background: rgba(255, 255, 255, 0.9);
	display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform var(--transition-standard), background var(--transition-standard), border-color var(--transition-standard), box-shadow var(--transition-standard), color var(--transition-standard);
}

.btn-secondaire:hover {
    transform: translateY(-1px);
    text-decoration: none;
    background: #f5f8ff;
}

.btn-rouge{
	color: #5A6A85;
	display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 12px 18px;
    border: 1px solid #CBD5E1;
    border-radius: 14px;
    background: #F7FAFC;
	font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
	font-family: 'Inter', Arial, sans-serif;
}

.btn-rouge:hover {
    transform: translateY(-1px);
    text-decoration: none;
    color: #344054;
    background: #EEF4FA;
    border-color: #AEBACC;
}

.btn-rouge--avec-icone {
    gap: 10px;
}

.btn-rouge--avec-icone > span:not(.groupe-nav__icone-masque) {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
}

/*MENU GROUPE*/

.groupe-nav__item {
    display: inline-flex;
	font-weight: 700;
    align-items: center;
    min-height: 46px;
    border: 1px solid var(--couleur-bleu-fonce);
    background: #fff;
    color: var(--couleur-bleu-fonce);
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s ease;
    text-decoration: none;
	width: 100%;
    justify-content: flex-start;
    border-radius: 14px;
    padding: 0 16px;
	font-size: 18px;
	font-family: 'Inter', Arial, sans-serif;
}

.groupe-nav__item:hover {
    background: #f5f8ff;
    text-decoration: none;
}

.groupe-nav__item.is-active {
    background: var(--couleur-bleu-fonce);
    color: #fff;
    border-color: var(--couleur-bleu-fonce);
}

.groupe-nav__badge-demande {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border: 0;
    border-radius: 999px;
    background: #E4312B;
    box-shadow: none;
}

.groupe-nav__item--avec-icone {
    gap: 10px;
    align-items: center;
    line-height: 1;
}

.groupe-nav__item-icone {
    display: block;
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    object-fit: contain;
}

.groupe-nav__item--avec-icone > span:not(.groupe-nav__icone-masque) {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    line-height: 1;
}

.groupe-nav__item--accueil > span {
    transform: translateY(2px);
}

.groupe-nav__icone-masque {
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--groupe-nav-icone) center / contain no-repeat;
    mask: var(--groupe-nav-icone) center / contain no-repeat;
}

.groupe-nav__icone-masque--danger {
    background: currentColor;
}

/*MENU CONTRIBUTION*/
/*Les 3points*/
.menu-contribution {
    position: relative;
}
.menu-contribution__toggle{
	width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	cursor: pointer;
	font-family: 'Inter', Arial, sans-serif;
}

.menu-contribution__toggle span {
    display: block;
    width: 4px;
    height: 4px;
    margin: 1.5px 0;
    border-radius: 50%;
    background: currentColor;
}

.menu-contribution__liste {
	display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    min-width: 190px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--groupe-bordure);
    background: #fff;
    box-shadow: 0 16px 32px rgba(16, 24, 40, 0.12);
	font-family: 'Inter', Arial, sans-serif;
}

.menu-contribution__action {
    display: flex;
    align-items: center;
	justify-content: center;
	width: 100%;
	text-align: center;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--groupe-texte);
    cursor: pointer;
    font-weight: 500;
	text-decoration: none;
	font-size: 16px;
	font-family: 'Inter', Arial, sans-serif;
}
.menu-contribution__action--danger {
    color: #5A6A85;
	text-decoration: none;
}

.menu-contribution__action--primary {
    color: var(--groupe-primaire);
}

.menu-contribution__form {
    margin: 0;
}

.menu-contribution__action:hover {
    background: #f7f9fc;
    text-decoration: none;
}

/*FERMER X*/
/*Regles dans la page groupe*/
.modal-regle__fermer, .modal-contribution__fermer, .groupe-drawer__close, .modal-invitation__fermer, .modal-equilibre__fermer, .modal-compensation__fermer, .modal-photo-groupe__fermer  {
	position: absolute;
	align-self: flex-end;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 50%;
    background: #f5f7fb;
    color: #344054;
    font-size: 28px;
    line-height: 1;
    padding: 0;
	font-family: Arial, sans-serif;
	border: none;
	cursor: pointer;
}


.modal-regle__fermer:hover, .modal-contribution__fermer:hover, .groupe-drawer__close:hover, .modal-invitation__fermer:hover, .modal-equilibre__fermer:hover, .modal-compensation__fermer:hover, .modal-photo-groupe__fermer:hover {
    background: #e9eef7;
}