<!-- start Simple Custom CSS and JS -->
<style type="text/css">
a.gustave-button {
display: flex;
align-items: center;
justify-content: center;

height: 48px;
border-radius: 8px;
border: 1px solid transparent;
gap: 8px;
padding: 10px 16px 14px 16px;

font-family: Golos, serif;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #FFF;
}

a.gustave-button.big-button {
padding: 14px 24px 18px 24px;


height: 56px;

font-size: 18px;
line-height: 24px;
}

a.gustave-button.small-button {
padding: 9px 16px 11px 16px;

height: 40px;

font-size: 14px;
line-height: 20px;
}

a.gustave-button.fit-content {
width: fit-content;
}

a.gustave-button:focus-visible {
border: 2px solid #93C5FD !important;
padding: 10px 14px;
}

a.gustave-button.primary {
color: #FFF;
border-color: #1D4ED8;
background: #1D4ED8;
box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.3);
position: relative; /* Ajout pour assurer le positionnement correct */
}

a.gustave-button.primary svg path {
fill: #FFF
}

a.gustave-button.primary:hover {
background: #2563EB;
border-color: #2563EB;
}

a.gustave-button.primary:active {
background: #2563EB;
border-color: #2563EB;
box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.3);
padding-top: 12px; /* Augmente le padding top de 3px */
padding-bottom: 12px; /* Diminue le padding bottom de 3px */
}

a.gustave-button.secondary {
color: #1E3A8A;
border-color: #B4D5FE;
background: #FFF;
box-shadow: inset 0 -5px 0 0 rgba(210, 229, 254);
}

a.gustave-button.secondary svg path {
fill: #1E3A8A;
}

a.gustave-button.secondary:hover {
background: #E5F1FF;
border: 1px solid #93C5FD;
}

a.gustave-button.secondary:active {
background: #E5F1FF;
border: 1px solid #93C5FD;
box-shadow: inset 0 -2px 0 0 rgba(210, 229, 254);
padding-top: 12px; /* Augmente le padding top de 3px */
padding-bottom: 12px; /* Diminue le padding bottom de 3px */
}

a.gustave-button.danger {
color: #FFF;
border-color: #BE123C;
background: #BE123C;
box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.3);
position: relative; /* Ajout pour assurer le positionnement correct */
}

a.gustave-button.danger svg path {
fill: #FFF
}

a.gustave-button.danger:hover {
background: #E11D48;
border-color: #E11D48;
}

a.gustave-button.danger:active {
background: #E11D48;
border-color: #E11D48;
box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.3);
padding-top: 12px; /* Augmente le padding top de 3px */
padding-bottom: 12px; /* Diminue le padding bottom de 3px */
}

a.gustave-button.tertiary {
color: #6B7280;
border-color: #FFF;
background: #FFF;
}

a.gustave-button.tertiary svg path {
fill: #6B7280
}

a.gustave-button.tertiary:hover {
color: #111827;
}

a.gustave-button.tertiary:hover svg path {
fill: #111827
}

a.gustave-button.tertiary:active {
color: #4B5563;
}

a.gustave-button.tertiary:active svg path {
fill: #4B5563
}</style>
<!-- end Simple Custom CSS and JS -->
