:root {
    --box-bckg: #fff;
    --b-color: #fff;
    --b-bckg: #006979;
    --b-border: #006979;
    --b-color-hov: #fff;
    --b-bckg-hov: #01454F;
    --b-border-hov: #01454F;
    --b-color-act: #fff;
    --b-bckg-act: #01454F;
    --b-border-act: #01454F;
    --h2-space: 1px;
}


@media screen and (min-width: 900px){
    :root {
        --h2-space: 24px;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
    min-width: 0;
}

:focus-visible{
    outline-color: #92CED3  ;
}

@font-face {
    font-family: "Marianne"; /* Regular */
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url("https://cdn.reseau-canope.fr/static-assets/Fonts/Marianne/Marianne-Regular.woff2") format("woff2"),
        url("https://cdn.reseau-canope.fr/static-assets/Fonts/Marianne/Marianne-Regular.woff") format("woff");
}

@font-face {
    font-family: "Marianne"; /* Medium */
    font-style: normal;
    font-weight: 500;
    font-display: auto;
    src: url("https://cdn.reseau-canope.fr/static-assets/Fonts/Marianne/Marianne-Medium.woff2") format("woff2"),
        url("https://cdn.reseau-canope.fr/static-assets/Fonts/Marianne/Marianne-Medium.woff") format("woff");
}

@font-face {
    font-family: "Marianne"; /* Bold */
    font-style: normal;
    font-weight: 700;
    font-display: auto;
    src: url("https://cdn.reseau-canope.fr/static-assets/Fonts/Marianne/Marianne-Bold.woff2") format("woff2"),
        url("https://cdn.reseau-canope.fr/static-assets/Fonts/Marianne/Marianne-Bold.woff") format("woff");
}

html {
    font-size: 100%;
    height: 100%;
}

body {
    background-color: #F0F7F7;
    font: normal 400 1rem/1.5rem Marianne;
    margin: 0;
}
h2 {
    text-align: center;
    margin: 0 0 var(--h2-space) 0;
}

button {
    cursor: pointer;
    box-shadow: none;
}
button:active {
    transform: none;
}

a {
    position: relative;
    color: #006979;
    text-decoration:none;
    background: linear-gradient(to top, #006979, #006979),
                linear-gradient(to top, transparent 0%, transparent 100%);
    background-size: 100% 1px, 100% 0%;
    background-position: bottom left, bottom left;
    background-repeat: no-repeat;
    text-decoration: none;
    transition: background-size 0.25s;
    padding-bottom: 2px;
}
a:hover,
a:focus {
    background-size: 100% 2px, 100% 0%;
    background-image: linear-gradient(to top, #006979, #006979),
                      linear-gradient(to top, transparent 0%, transparent 100%);
}

img, svg {
    max-width: 100%;
}

/* FORM */
label {
    font: 500 14px/20px Marianne;
    color: #384250;
}
input[type=text],
input[type=email],
input[type=password]{
    padding: 11px 14px;
    border: solid 1px #e5e7eb;
    font: 16px/24px Marianne;
    color: #111927;
    background-color: #fff;
    border-radius: 8px;
}
input:-internal-autofill-selected {
    background-color: #92CED3 !important;
}

/* LAYOUT COMMON */
.cas-box,
.cas-box__intro,
.cas-box__form,
form,
.form__group {
    display: flex;
    flex-direction: column;
}

/* LAYOUT BOX */
.cas-box__wrapper {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cas-box {
    gap:24px 15px;
    background-color: var(--box-bckg);
    width: calc(100% - 32px);
    max-width: 400px;
    margin-block:16px;
    border-radius: 15px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
    padding: 36px 24px 24px 24px;

}
.cas-box:has(.cas-box__form) {
    max-width: 900px;
}
.cas-box:has(.cas-box__footer) {
    padding-bottom: 12px;
}
@media screen and (min-width: 900px){
    .cas-box:has(.cas-box__form) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'cas-header cas-header'
            'cas-intro cas-form'
            'cas-footer cas-footer';
    }
}

.cas-box__header {
    grid-area: cas-header;
    text-align: center;
}

.cas-box__intro {
    grid-area: cas-intro;
    gap:20px;
}
.cas-box:has(.cas-box__form) .cas-box__intro {
    background-color: #f1f1f1;
    padding: 24px;
    border-radius: 8px;
}

.cas-box__form {
    grid-area: cas-form;
    padding: 0 24px;
}
@media screen and (min-width: 900px){
    .cas-box__form {
        padding: 24px 0 24px 9px;
    }
}
.cas-box__form form {
    height: 100%;
    flex: 1 1 auto;
    justify-content: flex-end;
}
@media screen and (min-width: 900px){
    .cas-box__form form {
        row-gap: 42px;
    }
}

.cas-box:has(.cas-box__form) h2 {
    text-align: left;
}
.cas-box__form h2 {
    margin-bottom: calc(var(--h2-space) + 22px);
}

.cas-box__form p:first-of-type {
    margin-top: 0;
    margin-bottom: 14px;
}

.cas-box__form input[type=email]{
    background-color: #f1f1f1;
}

.cas-box__footer {
    grid-area: cas-footer;
    display: flex;
    column-gap: 16px;
    font: 500 12px/18px Marianne;
}

.cas-box__footer img {
    max-width: 15%;
}

/* LAYOUT FORM */
form {
    gap: 16px;
}

.form__group {
    gap: 4px;
}

.form__msg {
    margin: 0;
}
.form__msg * {
    font: 12px/18px Marianne;
}

/* BOUTON */

.btn {
    display:inline-block;
    padding: 10px 20px 11px;
    border-radius: 8px;
    /* font: 14px/20px Marianne; */
    font: 500 16px/24px Marianne;
    text-align: center;
    transition: 0.25s;
    transition-property: background-color, color, border;
    /* $white,$primary,$primary,$white,$primary900,$primary900) */
    color: var(--b-color);
    background-color: var(--b-bckg);
    border: solid 1px var(--b-border);
}
.btn:visited,
.btn:hover,
.btn:focus,
.btn:active {
    color: var(--b-color-hov);
}

.btn:hover,
.btn:visited:hover {
    color: var(--b-color-hov);
    background-color: var(--b-bckg-hov);
    border-color: var(--b-border-hov);
}

.btn-create {
    --b-color: #006979;
    --b-bckg: #FFF;
    --b-border: #006979;
    --b-color-hov: #01454F;
    --b-bckg-hov: #E5F0F1;
    --b-border-hov: #01454F;
    --b-color-act: #333;
    --b-bckg-act: #B88F00;
    --b-border-act: #B88F00;
}

.form__group--with-field-btn {
    position: relative;
}
.form__field-btn--view-password {
    position: absolute;
    top: 25px;
    right: 1px;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 8px;
    border-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='matrix(3.4285714285714284,0,0,3.4285714285714284,0,0)'%3E%3Cg%3E%3Cpath d='M12.29,5.4c.38.34.7.67.94.93a1,1,0,0,1,0,1.34C12.18,8.8,9.79,11,7,11H6.6' style='fill: none;stroke: %23006978;stroke-linecap: round;stroke-linejoin: round'%3E%3C/path%3E%3Cpath d='M3.87,10.13A12.4,12.4,0,0,1,.77,7.67a1,1,0,0,1,0-1.34C1.82,5.2,4.21,3,7,3a6.56,6.56,0,0,1,3.13.87' style='fill: none;stroke: %23006978;stroke-linecap: round;stroke-linejoin: round'%3E%3C/path%3E%3Cline x1='12.5' y1='1.5' x2='1.5' y2='12.5' style='fill: none;stroke: %23006978;stroke-linecap: round;stroke-linejoin: round'%3E%3C/line%3E%3Cpath d='M5.59,8.41A2,2,0,0,1,5,7,2,2,0,0,1,7,5a2,2,0,0,1,1.41.59' style='fill: none;stroke: %23006978;stroke-linecap: round;stroke-linejoin: round'%3E%3C/path%3E%3Cpath d='M8.74,8A2,2,0,0,1,8,8.73' style='fill: none;stroke: %23006978;stroke-linecap: round;stroke-linejoin: round'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px;
}
.form__field-btn--view-password-hide {
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='matrix(3.4285714285714284,0,0,3.4285714285714284,0,0)'%3E%3Cg%3E%3Cpath d='M13.23,6.33a1,1,0,0,1,0,1.34C12.18,8.8,9.79,11,7,11S1.82,8.8.77,7.67a1,1,0,0,1,0-1.34C1.82,5.2,4.21,3,7,3S12.18,5.2,13.23,6.33Z' style='fill: none;stroke: %23006978;stroke-linecap: round;stroke-linejoin: round'%3E%3C/path%3E%3Ccircle cx='7' cy='7' r='2' style='fill: none;stroke: %23006978;stroke-linecap: round;stroke-linejoin: round'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* NOTIFICATIONS */
.notification {
    position: relative;
    padding: 16px 16px 16px 48px;
    border-radius: 12px;
    border: 1px solid #d2d6db;
    background-color: #fcfcfd;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='info-circle' clip-path='url(%23clip0_1130_82883)'%3E%3Cpath id='Icon' d='M10.0001 13.3333V9.99996M10.0001 6.66663H10.0084M18.3334 9.99996C18.3334 14.6023 14.6025 18.3333 10.0001 18.3333C5.39771 18.3333 1.66675 14.6023 1.66675 9.99996C1.66675 5.39759 5.39771 1.66663 10.0001 1.66663C14.6025 1.66663 18.3334 5.39759 18.3334 9.99996Z' stroke='%23475467' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1130_82883'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-position: 16px 16px;
    font: 400 14px/20px Marianne;
    color: #384250;
}

.notification--color-rouge {
    border-color: #fda29b;
    background-color: #fffbfa;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='alert-circle' clip-path='url(%23clip0_5138_13571)'%3E%3Cpath id='Icon' d='M10.0003 6.66669V10M10.0003 13.3334H10.0087M18.3337 10C18.3337 14.6024 14.6027 18.3334 10.0003 18.3334C5.39795 18.3334 1.66699 14.6024 1.66699 10C1.66699 5.39765 5.39795 1.66669 10.0003 1.66669C14.6027 1.66669 18.3337 5.39765 18.3337 10Z' stroke='%23D92D20' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5138_13571'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    color: #b42318;
}

/* LOGOUT */
.cas-logout,
.cas-logout #content {
    height: 100%;
    background: #fff;
}

.cas-logout__title {
    text-transform: none;
    font: normal 400 1.5rem/2rem Marianne;
    margin-bottom: 10px;
}

.cas-logout__title:before {
    content: "";
    display:block;
    margin-inline: auto;
    margin-bottom: 10px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #E5F0F1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='49' viewBox='0 0 48 49' fill='none'%3E%3Cpath d='M15 24.7816L21 30.7816L33 18.7816M44 24.7816C44 35.8273 35.0457 44.7816 24 44.7816C12.9543 44.7816 4 35.8273 4 24.7816C4 13.7359 12.9543 4.78162 24 4.78162C35.0457 4.78162 44 13.7359 44 24.7816Z' stroke='%23006979' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center center;
}

.cas-logout p {
    padding-inline: 16px;
}
.cas-logout p + p {
    margin-top: 16px;
}

.cas-logout__content {
    position: relative;
    align-content: center;
    text-align: center;
    height: 100%;
}
.cas-logout__logo {
    padding-block: 16px;
    position: absolute;
    top: 0;
    width: 100%;
    border-bottom: solid 1px #ddd;
}
.cas-logout__logo > svg {
    display: block;
    margin: 0 auto;
    transform: scale(0.71);
    transition: all 0.25s;
}


@media (min-width: 425px) {
    .cas-logout__logo {
        padding-block: 24px
    }
    .cas-logout__logo > svg {
        transform: scale(1);
    }
}