/*========================================================================================*/
/* CSS for the 6 Le Robert digital dictionaries login pages. */
/* No preprocessor nor task runner needed. */
/* This CSS is Autoprefixed with those "browsers" settings: "last 2 versions", "> 0.25%" */
/* Big ASCII title are to easily find them in the minimap. */
/* Feel free to minify all this for your production website. */
/*========================================================================================*/

/*
 /$$$$$$           /$$   /$$
|_  $$_/          |__/  | $$
  | $$   /$$$$$$$  /$$ /$$$$$$
  | $$  | $$__  $$| $$|_  $$_/
  | $$  | $$  \ $$| $$  | $$
  | $$  | $$  | $$| $$  | $$ /$$
 /$$$$$$| $$  | $$| $$  |  $$$$/
|______/|__/  |__/|__/   \___/
*/

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 1.8rem;
    min-width: 32rem;
    color: #333333;
    background-size: contain;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

body::before {
    content:"Please add one of these classes to the body to apply CSS variables: petitRobert, grandRobert, robertCollins, robertCollege, robertIllustre, robertJunior."
}

.petitRobert::before,
.grandRobert::before,
.robertCollins::before,
.robertCollege::before,
.robertIllustre::before,
.robertJunior::before {
    display: none;
}

@media (min-width: 480px) {

    body {
        background-image: url("bg.png");
    }
}

/*
 /$$    /$$                    /$$           /$$       /$$
| $$   | $$                   |__/          | $$      | $$
| $$   | $$ /$$$$$$   /$$$$$$  /$$  /$$$$$$ | $$$$$$$ | $$  /$$$$$$   /$$$$$$$
|  $$ / $$/|____  $$ /$$__  $$| $$ |____  $$| $$__  $$| $$ /$$__  $$ /$$_____/
 \  $$ $$/  /$$$$$$$| $$  \__/| $$  /$$$$$$$| $$  \ $$| $$| $$$$$$$$|  $$$$$$
  \  $$$/  /$$__  $$| $$      | $$ /$$__  $$| $$  | $$| $$| $$_____/ \____  $$
   \  $/  |  $$$$$$$| $$      | $$|  $$$$$$$| $$$$$$$/| $$|  $$$$$$$ /$$$$$$$/
    \_/    \_______/|__/      |__/ \_______/|_______/ |__/ \_______/|_______/
*/

.petitRobert {
    --themeColor: #da291c;
    --logoUrl: url("logo-petit-robert.svg");
    --bigRadius: 0;
    --smallRadius: 0;
}

.grandRobert {
    --themeColor: #981F00;
    --logoUrl: url("logo-grand-robert.svg");
    --bigRadius: 0;
    --smallRadius: 0;
}

.robertCollins {
    --themeColor: #047EB0;
    --logoUrl: url("logo-robert-collins.svg");
    --bigRadius: 0;
    --smallRadius: 0;
}

.robertIllustre {
    --themeColor: #840081;
    --logoUrl: url("logo-robert-illustre.svg");
    --bigRadius: 2rem;
    --smallRadius: 1.5rem;
}

.robertJunior {
    --themeColor: #acbb03;
    --logoUrl: url("logo-robert-junior.svg");
    --bigRadius: 2rem;
    --smallRadius: 1.5rem;
}

.robertCollege {
    --themeColor: #78d40b;
    --logoUrl: url("logo-robert-college.svg");
    --bigRadius: 2rem;
    --smallRadius: 1.5rem;
}

/*
 /$$   /$$   /$$     /$$ /$$ /$$   /$$     /$$
| $$  | $$  | $$    |__/| $$|__/  | $$    |__/
| $$  | $$ /$$$$$$   /$$| $$ /$$ /$$$$$$   /$$  /$$$$$$   /$$$$$$$
| $$  | $$|_  $$_/  | $$| $$| $$|_  $$_/  | $$ /$$__  $$ /$$_____/
| $$  | $$  | $$    | $$| $$| $$  | $$    | $$| $$$$$$$$|  $$$$$$
| $$  | $$  | $$ /$$| $$| $$| $$  | $$ /$$| $$| $$_____/ \____  $$
|  $$$$$$/  |  $$$$/| $$| $$| $$  |  $$$$/| $$|  $$$$$$$ /$$$$$$$/
 \______/    \___/  |__/|__/|__/   \___/  |__/ \_______/|_______/
*/

.visuallyHidden {
    position: absolute!important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px,1px,1px,1px);
    border: none;
    margin: 0;
    padding: 0;
}

.relPositionned {
    position: relative;
}

.alignLeft {
    text-align: left;
}

.alignCenter {
    text-align: center;
}

.alignRight {
    text-align: right;
}

.topSpace50 {
    margin-top: 5rem;
}

/*
  /$$$$$$   /$$                                     /$$
 /$$__  $$ | $$                                    | $$
| $$  \__//$$$$$$    /$$$$$$  /$$   /$$  /$$$$$$$ /$$$$$$   /$$   /$$  /$$$$$$   /$$$$$$
|  $$$$$$|_  $$_/   /$$__  $$| $$  | $$ /$$_____/|_  $$_/  | $$  | $$ /$$__  $$ /$$__  $$
 \____  $$ | $$    | $$  \__/| $$  | $$| $$        | $$    | $$  | $$| $$  \__/| $$$$$$$$
 /$$  \ $$ | $$ /$$| $$      | $$  | $$| $$        | $$ /$$| $$  | $$| $$      | $$_____/
|  $$$$$$/ |  $$$$/| $$      |  $$$$$$/|  $$$$$$$  |  $$$$/|  $$$$$$/| $$      |  $$$$$$$
 \______/   \___/  |__/       \______/  \_______/   \___/   \______/ |__/       \_______/
*/

.loginBox {
    margin-top: 6rem;
    -webkit-box-shadow: 0px 20px 70px 20px rgba(0, 0, 0, 0.15);
            box-shadow: 0px 20px 70px 20px rgba(0, 0, 0, 0.15);
    margin-bottom: 5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #ffffff;
}

@media (min-width: 480px) {

    .loginBox {
        margin-right: 4rem;
        margin-left: 4rem;
        border-radius: var(--bigRadius);
    }
}

@media (min-width: 960px) {

    .loginBox {
        min-width: 92rem;
        -ms-flex-item-align: center;
            align-self: center;
    }
}

.loginLeft {
    width: 6rem;
    background-color: var(--themeColor);
}

.loginRight {
    width: calc(100% - 6rem);
    padding: 4rem 3.5rem;
    position: relative;
}

@media (min-width: 480px) {

    .loginLeft {
        border-radius: var(--bigRadius) 0 0 var(--bigRadius);
    }

    .loginRight {
        border-radius: 0 var(--bigRadius) var(--bigRadius) 0;
    }
}

@media (min-width: 580px) {

    .loginLeft {
        width: 17rem;
    }

    .loginRight {
        width: calc(100% - 17rem);
    }
}

@media (min-width: 790px) {

    .loginLeft {
        width: 29rem;
    }

    .loginRight {
        width: calc(100% - 29rem);
        padding: 8rem 3.5rem;
    }
}

/*
 /$$
| $$
| $$        /$$$$$$   /$$$$$$   /$$$$$$
| $$       /$$__  $$ /$$__  $$ /$$__  $$
| $$      | $$  \ $$| $$  \ $$| $$  \ $$
| $$      | $$  | $$| $$  | $$| $$  | $$
| $$$$$$$$|  $$$$$$/|  $$$$$$$|  $$$$$$/
|________/ \______/  \____  $$ \______/
                     /$$  \ $$
                    |  $$$$$$/
                     \______/
*/

.logoContainer {
    position: relative;
    background-image: url("logo-mini.svg");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    height: calc(100% - 7rem);
    margin: 3rem 0.5rem 0 1.5rem;
}

@media (min-width: 580px) {

    .logoContainer {
        background-image: var(--logoUrl);
        height: calc(100% - 8rem);
        margin: 4rem 3rem 0 3rem;
    }
}

@media (min-width: 790px) {

    .logoContainer {
        margin: 4rem 6rem 0 6rem;
    }
}

/*
 /$$$$$$$$        /$$
|__  $$__/       | $$
   | $$  /$$$$$$ | $$$$$$$   /$$$$$$$
   | $$ |____  $$| $$__  $$ /$$_____/
   | $$  /$$$$$$$| $$  \ $$|  $$$$$$
   | $$ /$$__  $$| $$  | $$ \____  $$
   | $$|  $$$$$$$| $$$$$$$/ /$$$$$$$/
   |__/ \_______/|_______/ |_______/
*/

.tabController {
    visibility: hidden;
    position: absolute;
}

.tabButton {
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff;
    position: absolute;
    right: calc(100% - 0.1rem);
    line-height: 5rem;
    padding: 0 1.5rem;
    white-space: nowrap;
    -webkit-transform-origin: bottom right;
        -ms-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
    border-radius: var(--smallRadius) var(--smallRadius) 0 0;
    -webkit-transition: color 0.2s, background-color 0.2s;
    transition: color 0.2s, background-color 0.2s;
    cursor: pointer;
}

#tab1Button {
    top: 4rem;
}

#tab2Button {
    top: 20rem;
}

.tabButton:hover,
.tabController:checked + .tabButton,
.tabController:focus + .tabButton {
    background-color: #ffffff;
    color: var(--themeColor);
}

@media (min-width: 580px) {

    .tabButton {
        min-width: 16.5rem;
        font-size: 1.6rem;
        text-align: right;
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
                transform: rotate(0);
        border-radius: var(--smallRadius) 0 0 var(--smallRadius);
    }

    #tab1Button {
        top: 17rem;
    }

    #tab2Button {
        top: 23rem;
    }
}

@media (min-width: 790px) {

    #tab1Button {
        top: 23rem;
    }

    #tab2Button {
        top: 29rem;
    }
}

.tabContainer {
    opacity: 0;
    position: absolute;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    max-width: 40rem;
    margin: 0 auto;
}

.tabContainer > div {
    display: none;
}

#tab1Controller:checked ~ #tab1Container,
#tab2Controller:checked ~ #tab2Container {
    opacity: 1;
    position: static;
}

#tab1Controller:checked ~ #tab1Container > div,
#tab2Controller:checked ~ #tab2Container > div {
    display: block;
}

/*
  /$$$$$$                        /$$                           /$$
 /$$__  $$                      | $$                          | $$
| $$  \__/  /$$$$$$  /$$$$$$$  /$$$$$$    /$$$$$$  /$$$$$$$  /$$$$$$
| $$       /$$__  $$| $$__  $$|_  $$_/   /$$__  $$| $$__  $$|_  $$_/
| $$      | $$  \ $$| $$  \ $$  | $$    | $$$$$$$$| $$  \ $$  | $$
| $$    $$| $$  | $$| $$  | $$  | $$ /$$| $$_____/| $$  | $$  | $$ /$$
|  $$$$$$/|  $$$$$$/| $$  | $$  |  $$$$/|  $$$$$$$| $$  | $$  |  $$$$/
 \______/  \______/ |__/  |__/   \___/   \_______/|__/  |__/   \___/
*/

.title {
    font-size: 2.4rem;
    font-weight: normal;
    text-transform: uppercase;
    margin: 0 0 2.6rem 0;
}

.text {
    margin: 0 0 7rem 0;
}

.formLine {
    margin: 0 0 5rem 0;
}

.formLine:last-child {
    margin-bottom: 0;
}

.formLabel {
    display: inline-block;
    margin: 0 0 0.3rem 0;
    cursor: pointer;
}

.formInput {
    font-family: 'Roboto', sans-serif;
    color: #333333;
    font-size: 1.8rem;
    line-height: 2;
    border: none;
    border-bottom: 1px solid #333333;
    width: 100%;
    padding-left: 0;
    outline: none;
    -webkit-transition: border-color 0.2s;
    transition: border-color 0.2s;
}

.formInput:focus {
    border-bottom: 1px solid var(--themeColor);
}

.btn {
    font-family: 'Roboto', sans-serif;
    color: var(--themeColor);
    font-size: 1.8rem;
    line-height: 5rem;
    border: 1px solid var(--themeColor);
    background-color: transparent;
    border-radius: var(--smallRadius);
    outline: none;
    -webkit-transition: background-color 0.2s, color 0.2s;
    transition: background-color 0.2s, color 0.2s;
    cursor: pointer;
    width: 100%;
    max-width: 21.2rem;
    margin: 0 auto 2rem auto;
}

.btn:hover,
.btn:focus {
    color: #ffffff;
    background-color: var(--themeColor);
}

.link {
    font-family: 'Roboto', sans-serif;
    color: var(--themeColor);
    font-size: 1.4rem;
    text-decoration: none;
    display: inline-block;
    border-bottom: 0.1rem solid #ffffff;
    outline: none;
    margin-bottom: 1rem;
    -webkit-transition: border-color 0.2s;
    transition: border-color 0.2s;
    cursor: pointer;
}

.link:last-child {
    margin-bottom: 0;
}

.link:hover,
.link:focus {
    border-bottom: 1px solid var(--themeColor);
}

.link-help {
    font-family: 'Roboto', sans-serif;
    color: var(--themeColor);
    text-decoration: none;
    display: inline-block;
    border-bottom: 0.1rem solid #ffffff;
    outline: none;
    margin-bottom: 1rem;
    -webkit-transition: border-color 0.2s;
    transition: border-color 0.2s;
    cursor: pointer;
}

.link-help:last-child {
    margin-bottom: 0;
}

.link-help:hover,
.link-help:focus {
    border-bottom: 1px solid var(--themeColor);
}

.errorContainer {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    width: 100%;
    padding: 0.3rem 1rem 0.3rem 3rem;
    background-color: #FF8A00;
    background-image: url("warning.svg");
    background-repeat: no-repeat;
    background-position: left 1rem top 0.4rem;
}

.errorMessage {
    margin: 0;
    color: #ffffff;
    font-size: 1.4rem;
    font-style: italic;
    text-align: left;
}

.ipTitle {
    margin-bottom: 2rem;
}

.ipText {
    margin: 0 0 2rem 0;
    color: var(--themeColor);
    font-size: 1.4rem;
}

.infos {
    margin: 2rem 0 0 0;
    padding: 1rem;
    color: #000000;
    /* border: 1px solid #888888; */
    font-size: 1.4rem;
    text-align: justify;
}

.infos > p {
    margin: 0 0 1rem 0;
}

.infos > p:last-child {
    margin: 0;
}

.accordion {
	font-size : 1.6rem;
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}
.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/*
 /$$$$$$$$                    /$$
| $$_____/                   | $$
| $$     /$$$$$$   /$$$$$$  /$$$$$$    /$$$$$$   /$$$$$$
| $$$$$ /$$__  $$ /$$__  $$|_  $$_/   /$$__  $$ /$$__  $$
| $$__/| $$  \ $$| $$  \ $$  | $$    | $$$$$$$$| $$  \__/
| $$   | $$  | $$| $$  | $$  | $$ /$$| $$_____/| $$
| $$   |  $$$$$$/|  $$$$$$/  |  $$$$/|  $$$$$$$| $$
|__/    \______/  \______/    \___/   \_______/|__/
*/

.mainFooter {
    background-color: var(--themeColor);
    color: #ffffff;
    padding: 1rem;
    text-align: center;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.mainFooter p {
    margin: 0;
    font-size: 1.4rem;
}

.footerLink {
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    font-size: 1.4rem;
    text-decoration: none;
    display: inline-block;
    border-bottom: 0.1rem solid var(--themeColor);
    outline: none;
    -webkit-transition: border-color 0.2s;
    transition: border-color 0.2s;
}

.footerLink:hover,
.footerLink:focus {
    border-bottom: 1px solid #ffffff;
}

.footerLogo {
    width: 3rem;
    margin: 1.5rem auto;
}

@media (min-width: 790px) {

    .mainFooter {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    .footer1 {
        text-align: left;
    }

    .footer2 {
        text-align: right;
    }

    .footerLogo {
        margin: 0;
    }
}

/*
 /$$$$$$$                     /$$
| $$__  $$                   |__/
| $$  \ $$ /$$$$$$   /$$$$$$  /$$ /$$$$$$$
| $$$$$$$//$$__  $$ /$$__  $$| $$| $$__  $$
| $$____/| $$  \ $$| $$  \ $$| $$| $$  \ $$
| $$     | $$  | $$| $$  | $$| $$| $$  | $$
| $$     |  $$$$$$/| $$$$$$$/| $$| $$  | $$
|__/      \______/ | $$____/ |__/|__/  |__/
                   | $$
                   | $$
                   |__/
*/

.popinButton::after {
    content: "?";
    cursor: pointer;
    display: inline-block;
    text-align: center;
    font-size: 1.4rem;
    width: 1.4rem;
    height: 1.4rem;
    line-height: 1.4rem;
    border-radius: 1rem;
    border: 2px solid var(--themeColor);
    color: var(--themeColor);
    margin-bottom: 0.2rem;
}

.popinController {
    opacity: 0;
    height: 0.1rem;
}

.popin1Overlay,
.popin2Overlay {
    position: fixed;
    top: 0;
    left: -9999rem;
    width: 100%;
    bottom: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.75);
    opacity: 0;
    transition: opacity 0.2s;
    overflow: auto;
}

#popin1Controller:checked ~ .popin1Overlay,
#popin2Controller:checked ~ .popin2Overlay {
    left: 0;
    opacity: 1;
}

.popinContainer {
    margin: 2rem 1rem 1rem 1rem;
    padding: 4rem;
    background-color: #ffffff;
    border-radius: var(--bigRadius);
    text-align: left;
    position: relative;
}

.popinContainer li {
    margin-bottom: 1rem;
}

@media (min-width: 580px) {

    .popinContainer {
        margin: 2rem auto 1rem auto;
        max-width: 40rem;
    }
}

@media (min-width: 790px) {

    .popinContainer {
        margin: 4rem auto 2rem auto;
        max-width: 68rem;
    }
}

.popinCloser {
    position: absolute;
    top: 2rem;
    right: 2rem;
    cursor: pointer;
}