/* -------------------------------------------------- */
/* ---------- Css FranceConnect --------------------- */
/* ---------- Ne pas modifier ----------------------- */
/* -------------------------------------------------- */

/* variables*/
:root {
    --blue-france-sun-113-625-hover: #1212ff;
    --background-action-high-blue-france-hover: var(--blue-france-sun-113-625-hover);
    --blue-france-sun-113-625-active: #2323ff;
    --background-action-high-blue-france-active: var(--blue-france-sun-113-625-active);
    --blue-france-sun-113-625: #000091;
    --background-action-high-blue-france: var(--blue-france-sun-113-625);
    --text-action-high-blue-france: var(--blue-france-sun-113-625);
    --blue-france-975-sun-113: #f5f5fe;
    --text-inverted-blue-france: var(--blue-france-975-sun-113);
    --grey-425-625: #666;
    --text-mention-grey: var(--grey-425-625);
    --text-spacing: 0 0 1.5rem;
    --underline-img: linear-gradient(0deg, currentColor, currentColor);
    --underline-max-width: 100%;
    --underline-x: calc(var(--underline-max-width)*0);
    --underline-idle-width: var(--underline-max-width);
    --underline-hover-width: 0;
    --external-link-content: "";
}

/* ---------- FranceConnect ------------------------- */

.region-france-connect {
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    --idle: transparent;
    --hover: var(--background-default-grey-hover);
    --active: var(--background-default-grey-active);
    color: var(--text-default-grey);
    font-family: Marianne, arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
}

.region-france-connect .fr-connect-group {
    --text-spacing: 0 0 1rem 0;
}

.region-france-connect *,
.region-france-connect ::after,
.region-france-connect ::before {
    box-sizing: inherit;
}

.region-france-connect .fr-connect {
    margin-bottom: 0.75rem;
    height: 56px;
    width: 209px;
}

.region-france-connect a,
.region-france-connect audio[controls],
.region-france-connect button,
.region-france-connect details,
.region-france-connect details>summary:first-of-type,
.region-france-connect input[type="button"],
.region-france-connect input[type="checkbox"],
.region-france-connect input[type="checkbox"]+label,
.region-france-connect input[type="file"],
.region-france-connect input[type="image"],
.region-france-connect input[type="radio"],
.region-france-connect input[type="radio"]+label,
.region-france-connect input[type="range"],
.region-france-connect input[type="reset"],
.region-france-connect input[type="submit"],
.region-france-connect select,
.region-france-connect textarea,
.region-france-connect video[controls] {
    cursor: pointer;
}

.region-france-connect button,
.region-france-connect input[type="button"],
.region-france-connect input[type="image"],
.region-france-connect input[type="reset"],
.region-france-connect input[type="submit"] {
    --hover-tint: var(--hover);
    --active-tint: var(--active);
    text-transform: none;
}

.region-france-connect [contenteditable]:not([contenteditable="false"]),
.region-france-connect [tabindex],
.region-france-connect a,
.region-france-connect audio[controls],
.region-france-connect button,
.region-france-connect details,
.region-france-connect details>summary:first-of-type,
.region-france-connect input,
.region-france-connect input[type="button"],
.region-france-connect input[type="checkbox"]+label::before,
.region-france-connect input[type="image"],
.region-france-connect input[type="radio"]+label::before,
.region-france-connect input[type="reset"],
.region-france-connect input[type="submit"],
.region-france-connect select,
.region-france-connect textarea,
.region-france-connect video[controls] {
    outline-color: #0a76f6;
    outline-offset: 2px;
    outline-width: 2px;
}

.region-france-connect button,
.region-france-connect input,
.region-france-connect select,
.region-france-connect textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    margin: 0;
    margin-bottom: 0px;
}

.region-france-connect button {
    border: none;
    background-image: url('../img/franceconnect-btn.svg')
}


.region-france-connect button:hover{
    background-image: url("../img/franceconnect-btn-hover.svg")
}

.region-france-connect .fr-connect__login {
    font-size: 17px;
    height: 17px;
}

.region-france-connect .fr-connect__brand {
    font-size: 18px;
    font-weight: 700;
    height: 18px;
}

.region-france-connect .fr-connect__brand, .region-france-connect .fr-connect__login {
    line-height: 1;
    z-index: 1;
}

.region-france-connect .fr-connect-group p {
    color: var(--text-mention-grey);
    font-size: 0.75rem;
    line-height: 1.25rem;
    text-align: center;
}


.region-france-connect .fr-connect-group.fr-connect-group-col {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.region-france-connect p {
    font-size: 1rem;
    line-height: 1.5rem;
    margin: var(--text-spacing);
}

.region-france-connect .fr-connect-group .fr-connect + p a {
    color: var(--text-action-high-blue-france);
    font-size: 0.875rem;
    line-height: 1.5rem;
}

.region-france-connect [href] {
    background-image: var(--underline-img), var(--underline-img);
    background-position: var(--underline-x) 100%, var(--underline-x) calc(100% - .0625em);
    background-repeat: no-repeat, no-repeat;
    background-size: var(--underline-hover-width) 0.125em, var(--underline-idle-width) 0.0625em;
    transition: background-size 0s;
}

.region-france-connect [target="_blank"]::after, .region-france-connect [target="_blank"][class*=" fr-fi-"]::after, .region-france-connect [target="_blank"][class*=" fr-icon-"]::after, .region-france-connect [target="_blank"][class^="fr-fi-"]::after, .region-france-connect [target="_blank"][class^="fr-icon-"]::after {
    --icon-size: 1rem;
    -webkit-mask-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTEwIDZ2Mkg1djExaDExdi01aDJ2NmExIDEgMCAwMS0xIDFINGExIDEgMCAwMS0xLTFWN2ExIDEgMCAwMTEtMWg2em0xMS0zdjhoLTJWNi40MTNsLTcuNzkzIDcuNzk0LTEuNDE0LTEuNDE0TDE3LjU4NSA1SDEzVjNoOHoiLz48L3N2Zz4=");
    mask-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTEwIDZ2Mkg1djExaDExdi01aDJ2NmExIDEgMCAwMS0xIDFINGExIDEgMCAwMS0xLTFWN2ExIDEgMCAwMTEtMWg2em0xMS0zdjhoLTJWNi40MTNsLTcuNzkzIDcuNzk0LTEuNDE0LTEuNDE0TDE3LjU4NSA1SDEzVjNoOHoiLz48L3N2Zz4=");
    background-color: currentColor;
    content: var(--external-link-content);
    display: inline-block;
    flex: 0 0 auto;
    height: var(--icon-size);
    margin-left: 0.25rem;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    vertical-align: calc(.375em - var(--icon-size)*0.5);
    width: var(--icon-size);
}

.region-france-connect a {
    --hover-tint: var(--idle);
    --active-tint: var(--active);
    color: inherit;
}  

@media (hover: hover) and (pointer: fine) {
    .region-france-connect a[href]:active,
    .region-france-connect a[href]:hover {
        --underline-hover-width: var(--underline-max-width);
    }
}

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