/* @group @variables - @link */

:root {
--link-border-color: hsl(197.5deg 55% 42.5%);
--link-action-border-color: hsl(197.5deg 55% 42.5%);
--link-active-border-color: hsl(197.5deg 55% 37.5%);

--link-color: hsl(197.5deg 55% 37.5%);
--link-action-color: hsl(197.5deg 55% 32.5%);
--link-active-color: hsl(197.5deg 55% 27.5%);
--link-disabled-color: hsl(0deg 0% 90% / 50%);
}

:where([class*="o-mutual-footer"]) {
--link-border-color: hsl(0deg 0% 90%);
--link-action-border-color: hsl(0deg 0% 85%);
--link-active-border-color: hsl(0deg 0% 75%);

--link-color: hsl(0deg 0% 100%);
--link-action-color: hsl(0deg 0% 90%);
--link-active-color: hsl(0deg 0% 80%);
--link-disabled-color: hsl(0deg 0% 100% / 50%);
}

/* @end @variables - @a-link */

/* @group @variables - @link */

:root {
--link-padding-bottom: .25rem;
--link-background-position: 0 100%;
--link-background-size: 0 1px;
--link-action-background-size: 100% 1px;
/*--link-background-position: 100% 100%;
--link-background-size: 100% 1px;
--link-action-background-size: 0 1px;*/
}

:where([class*="o-mutual-nav"] [class*="is-active"]) {
--link-background-size: 100% 1px;
}

/* @end @variables - @a-link */

/* @group @a-link-primary */

:where(a):not([class]):not(:has(img)):not(:has(svg)),
[class*="a-link-primary"] {
box-decoration-break: clone;
margin-bottom: calc(-1 * var(--link-padding-bottom));
padding-bottom: var(--link-padding-bottom);
background-image: linear-gradient(var(--link-border-color), var(--link-border-color));
background-position: var(--link-background-position);
background-repeat: no-repeat;
background-size: var(--link-background-size);
color: var(--link-color);
transition: background-size .3s 0s var(--transition-cubic-bezier), color .3s 0s var(--transition-cubic-bezier);
}

:where(a):not([class]):not(:has(img)):not(:has(svg)):focus,
[class*="a-link-primary"]:focus {
background-size: var(--link-action-background-size);
color: var(--link-action-color);
text-decoration: none;
}

@media (hover: hover) {

:where(a):not([class]):not(:has(img)):not(:has(svg)):hover,
[class*="a-link-primary"]:hover {
background-size: var(--link-action-background-size);
color: var(--link-action-color);
text-decoration: none;
}

}

:where(a):not([class]):not(:has(img)):not(:has(svg)):active,
[class*="a-link-primary"]:active {
border-bottom-color: var(--link-active-color);
color: var(--link-active-color);
text-decoration: none;
}

:where(a):not([class]):not(:has(img)):not(:has(svg)):disabled,
[class*="a-link-primary"]:disabled {
color: var(--link-disabled-color);
}

/* @end @a-link-primary */

/* -------------------------------------------------------- */

/* @group @variables - @link */

:root {
--button-color: var(--color-text);
--button-action-color: var(--color-text-action);
--button-active-color: var(--color-text-active);
--button-disabled-color: var(--color-text-disabled);
}

/* @end @variables - @a-link */

/* @group @a-link-primary */

:where(button):not([class]):not(:has(img)) {
margin-bottom: calc(-1 * var(--button-padding-bottom, -.25rem));
padding-bottom: var(--button-padding-bottom, .25rem);
background-image: linear-gradient(var(--button-border-color, hsl(197.5deg 55% 52.5%)), var(--button-border-color, hsl(197.5deg 55% 52.5%)));
background-position: var(--button-background-position, 0 100%);
background-repeat: no-repeat;
background-size: var(--button-background-size, 100% 1px);
transition: background-size .3s 0s var(--transition-cubic-bezier), color .3s 0s var(--transition-cubic-bezier);
}

:where(button):not([class]):not(:has(img)):focus {
background-size: var(--button-action-background-size, 100% 1px);
text-decoration: none;
}

@media (hover: hover) {
:where(button):not([class]):not(:has(img)):hover {
background-size: var(--button-action-background-size, 100% 1px);
text-decoration: none;
}

}

:where(button):not([class]):not(:has(img)):active {
background-image: linear-gradient(var(--link-border-color, hsl(197.5deg 55% 47.5%)), var(--link-border-color), hsl(197.5deg 55% 47.5%));
text-decoration: none;
}

/* @end @a-link-primary */

/* -------------------------------------------------------- */

/* @group variables - @a-btn-link */

:root {
--btn-grid-template-columns: clamp(1.5rem, 1.143rem + 1.79vw, 2.25rem) 1fr;
--btn-gap: .375rem;
--btn-icon-grid-column: 1;
--btn-text-grid-column: 2;
--btn-width: 100%;
--btn-height: 4.5rem;
--btn-padding: 0 clamp(1.5rem, 1.143rem + 1.79vw, 2.25rem);
--btn-font-size: clamp(1rem, 0.881rem + 0.6vw, 1.25rem);
--btn-line-height: 1.25;
--btn-font-weight: var(--font-weight-bold);
--btn-font-weight: 700;
--btn-background-color: var(--color-primary);
--btn-action-background-color: var(--color-primary-action);
--btn-disabled-background-color: var(--color-primary-disabled);
--btn-border-color: transparent;
--btn-action-border-color: var(--color-primary-button-action);
--btn-active-border-color: var(--color-primary-button-active);
--btn-border-radius: 99rem;
--btn-color: var(--color-white);
--btn-action-color: var(--color-white);
--btn-active-color: var(--color-white);
--btn-disabled-color: var(--color-white);
--btn-text-shadow: 0.7px 0.7px hsl(58deg 85% 35%), 1px 0 hsl(58deg 85% 35%), 0.7px -0.7px hsl(58deg 85% 35%), 0 -1px hsl(58deg 85% 35%), -0.7px -0.7px hsl(58deg 85% 35%), -1px 0 hsl(58deg 85% 35%), -0.7px 0.7px hsl(58deg 85% 35%), 0 1px hsl(58deg 85% 35%);
--btn-transition: color .1875s .0625s cubic-bezier(.6, .5, .5, .75), filter .25s 0s var(--transition-cubic-bezier);
}


@media (width >= 48em) { /* 768px -> * */

:root {
--btn-grid-template-columns: clamp(1.5rem, 1.143rem + 1.79vw, 2.25rem) 1fr clamp(1.5rem, 1.143rem + 1.79vw, 2.25rem);
}

}


:root {
--btn-transition: color .1875s .0625s cubic-bezier(.6, .5, .5, .75), filter .25s 0s var(--transition-cubic-bezier);
--btn-before-transform: skewX(-25deg) scaleX(0);
--btn-before-transform-origin: right;
--btn-before-action-transform: skewX(-25deg) scaleX(1.5);
--btn-before-action-transform-origin: left;
--btn-before-transition: transform .25s 0s var(--transition-cubic-bezier);
}

:root {
--btn-icon-width: clamp(1.5rem, 1.143rem + 1.79vw, 2.25rem);
--btn-icon-height: clamp(1.5rem, 1.143rem + 1.79vw, 2.25rem);
--btn-link-transform: translateX(.25rem);
--btn-icon-transition: var(--link-premier-transition);
}

/* @end variables - @a-btn-link */

/* @group variables - @a-btn-link */

[class*="a-btn-link-deuxieme"] {
--btn-grid-template-columns: 1rem 1fr;
--btn-height: 2.625rem;
--btn-padding: 0 1.125rem;
--btn-font-size: .875rem;
--btn-line-height: 1.5;
--btn-icon-width: 1rem;
--btn-icon-height: 1rem;
}

/* @end variables - @a-btn-link */

/* @group variables - @a-btn-link */

[class*="a-btn-link-secondary"] {
--btn-grid-template-columns: 1rem 1fr;
--btn-height: 3rem;
--btn-padding: 0 1.125rem;
--btn-font-size: 1.25rem;
--btn-line-height: 1.5;
--btn-icon-width: 1rem;
--btn-icon-height: 1rem;
}

/* @end variables - @a-btn-link */

/* @group @a-btn-link */

[class*="a-btn-link"] {
box-sizing: border-box;
position: relative;
overflow: hidden;
z-index: 3;
display: grid;
align-content: center;
align-items: center;
grid-template-columns: var(--btn-grid-template-columns);
gap: var(--btn-gap);
width: var(--btn-width);
height: var(--btn-height);
margin-inline: var(--btn-margin-inline);
padding: var(--btn-padding);
background-image: var(--btn-background-image);
background-color: var(--btn-background-color, var(--color-primary));
background-position: var(--btn-background-position);
background-size: var(--btn-background-size);
background-repeat: no-repeat;
border-width: 1px;
border-style: solid;
border-color: var(--btn-border-color, transparent);
border-radius: var(--btn-border-radius);
font-family: var(--font-family-default);
font-size: var(--btn-font-size);
line-height: var(--btn-line-height);
font-weight: var(--btn-font-weight);
color: var(--btn-color, var(--color));
text-align: center;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
text-shadow: var(--btn-text-shadow);
direction: var(--btn-direction);
transition: var(--btn-transition);
backface-visibility: hidden;
direction: var(--btn-direction);
}

[class*="a-btn-link"]:focus {
border-color: var(--btn-action-border-color, transparent);
color: var(--btn-action-color, var(--color));
}

@media (hover: hover) {
[class*="a-btn-link"]:not(:disabled):hover {
border-color: var(--btn-action-border-color, transparent);
color: var(--btn-action-color, var(--color));
}

}

[class*="a-btn-link"]:active {
border-color: var(--btn-active-border-color, transparent);
color: var(--btn-active-color, var(--color));
}

[class*="a-btn-link"]:before {
content: '';
position: absolute;
z-index: -1;
inset: -.5rem;
background-color: var(--btn-action-background-color, var(--color-primary-action));
will-change: transform;
transform: var(--btn-before-transform);
transform-origin: var(--btn-before-transform-origin);
backface-visibility: hidden;
transition: var(--btn-before-transition);
}

[class*="a-btn-link"]:disabled {
color: var(--btn-disabled-color);
}

[class*="a-btn-link"]:not(:disabled):hover:before,
[class*="a-btn-link"]:focus:before {
will-change: transform;
transform: var(--btn-before-action-transform);
transform-origin: var(--btn-before-action-transform-origin);
}

@media (hover: hover) {
[class*="a-btn-link"]:hover {
backface-visibility: hidden;
}

}

[class*="a-btn-link"]>span {
position: relative;
z-index: 2;
grid-column: var(--btn-text-grid-column);
direction: rtl;
transition: inherit;
}

[class*="a-btn-link"]>svg {
grid-column: var(--btn-icon-grid-column);
}

[class*="a-btn-link"]>svg,
[class*="a-btn-link"]>span {
grid-row: 1;
transition: inherit;
}

[class*="a-btn-link"]>svg {
width: var(--btn-icon-width);
height: var(--btn-icon-height);
fill: currentColor;
transition: var(--btn-icon-transition);
}

/* @end @a-btn-link */