/* variables*/
:root {
    --primaire: #0075BF;
    --secondaire: #E6AE34;
    --typo: #333333;
    --vert: #469C4D;
    --rouge: #E83C41;
    --blanc: #FFFFFF;
    --bleu-fonce: #005D97;
    --bleu-clair: #C1E7FA;
    --fond: #EDF4F7;
    --degrade-gauche: #E83C55;
    --degrade-droite: #F8AC20;
}

/* ---------- Page ---------------------------------- */

* {
    box-sizing: border-box;
    margin: 0;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    font-family: Roboto;
}

[hidden] {
    display: none!important;
}

html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--fond);
    overflow: hidden;
}

.region-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
}

.region-sidebar {
    background-color: var(--primaire);
    color: var(--blanc) !important;
}

.region-sidebar-entry {
    display: block;
    padding: 1.5625rem;
}

.region-sidebar-entry.region-active,
.region-sidebar-entry:hover {
    background-color: var(--bleu-fonce);
}

div.region-sidebar>a {
    text-decoration: none;
    text-transform: uppercase;
    color: var(--blanc) !important;
}

.region-body-content {
    display: flex;
    flex-direction: column;
    flex:1;
    align-items: center;
    padding: 1.25rem 0.625rem;

    overflow: auto;
}

.region-bottom-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 1.875rem;
}

.region-bottom-links {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .region-bottom-buttons {
        flex-direction: column;
    }

    .region-bottom-buttons>button:not(:last-child),
    .region-bottom-buttons>input:not(:last-child) {
        margin-bottom: 1rem;
    }

    .region-bottom-links {
        margin-top: 1.875rem;
    }
}

@media (min-width: 768px) {    
    #region-form-register,
    #region-form-reinitialiser-mot-de-passe,
    #region-form-maj-mot-de-passe,
    #region-form-informations-personnelles,
    #region-form-modifier-mot-de-passe,
    #region-form-terms {
        margin-right: 4rem;
        margin-left: 4rem;
        width: 40rem;
    }
}

/* ---------- Header -------------------------------- */

.region-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    height: 6.875rem;
    padding: 1.25rem 1rem;
    background-color: var(--primaire);
}

#region-logo {
    height: 5rem;
}

@media (max-width: 768px) {
    .region-header {
        justify-content: space-between;
    }

    #region-contacter {
        width: 4.6875rem;
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        text-decoration: none;
    }

    #region-contacter>span {
        display: none;
    }
}

@media (min-width: 768px) {
    #region-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    #region-contacter>i {
        display: none;
    }
}

/* ---------- Carte --------------------------------- */

.region-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1rem;
    background-color: var(--blanc);
}

.region-card > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    align-items: center;
}

.region-card-header {
    margin-top: 1.25rem;
    margin-bottom: 1.875rem;
}

.region-card-header>h1 {
    text-align: center;
}

.region-card-header>h1:after {
    left: 50%;
    margin-left: -40px;
}

.region-card-container-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0.9375rem;
    color:var(--primaire);
    background-color: var(--bleu-clair);
}

.region-card-container-info > div {
    display: flex;
    flex-direction: row;
    flex:1;
}

.region-card-container-footer {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 0.625rem;
}

.region-liens-site {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.region-liens-site>a {
    font-weight: normal;
    font-size: 1rem;
    line-height: 1.5rem;
    margin-bottom: 1.875rem;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .region-card-container-info {
        flex-direction: column;
    }
    
    .region-liens-site {
        flex-direction: column;
    }
}

@media (min-width: 768px) {
    .region-card-container-info > div:first-of-type {
        flex-direction: row-reverse;
        margin-right: 1.875rem;
    }

    .region-liens-site>a:not(:last-of-type) {
        margin-right: 1.875rem;
    }
    
    .region-form-header {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-bottom: 1.875rem;
    }
}

/* ---------- Titres -------------------------------- */

h1 {
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--primaire);
    margin-bottom: 0.625rem;
    position: relative;
}

h1:after {
    position: absolute;
    content: '';
    height: 5px;
    bottom: -10px;
    left: 0;
    width: 80px;
    background: var(--secondaire);
}

h2 {
    font-weight: 900;
    font-size: 1.125rem;
    line-height: 1.5rem;
    color: var(--primaire);
    margin-bottom: 0.313rem;
    position: relative;
}

h2:after {
    position: absolute;
    content: '';
    height: 2px;
    bottom: -5px;
    left: 0;
    width: 40px;
    background: var(--secondaire);
}

h3 {
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.5rem;
    color: var(--primaire);
}

h4 {
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.5rem;
    color: var(--typo);
}

h5 {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--primaire);
    text-transform: uppercase;
}

h6 {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--primaire);
}

/* ---------- Paragraphes --------------------------- */

h1+p {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--typo);
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
}

h2+p {
    font-size: 1.125rem;
    line-height: 1.5rem;
    color: var(--typo);
    margin-top: 1.25rem;
    margin-bottom: 1.875rem;
}

p.region-categorie-date {
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--primaire);
}

p.region-mentions-legales {
    font-size: 0.75rem;
    line-height: 1.5rem;
    color: var(--typo);
    margin-bottom: 1.875rem;
}

/* ---------- Liens --------------------------------- */

a {
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.3125rem;
    color: var(--primaire);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a.region-external:after {
    content: ' \f08e';
    /* https://astronautweb.co/snippet/font-awesome/ */
    font-family: FontAwesome;
}

p a {
    font-size: 1rem;
    line-height: 1.3125rem;
    font-weight: normal;
    text-decoration: underline;
}

p a:hover {
    color: var(--rouge);
    text-decoration: underline;
}

/* ---------- Boutons ------------------------------- */

#region-contacter>span {
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.3125rem;
}

.region-bouton {
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.3125rem;
    padding: 0.9375rem 1.5625rem 0.9375rem 1.5625rem;
    border: none;
    text-transform: uppercase;
    background-color: var(--secondaire);
    color: var(--typo);
    cursor: pointer;
}

.region-bouton>span:visible+i:visible {
    margin-left: 0.9374rem;
}

.region-bouton:hover {
    border: none;
    background: none;
    background-color: var(--rouge);
    color: var(--blanc);
}

.region-bouton-degrade {
    background: linear-gradient(to right, var(--degrade-gauche), var(--degrade-droite));
    color: var(--blanc);
}

.region-bouton-secondaire {
    background-color: var(--primaire);
    color: var(--blanc);
}

.region-bouton-tertiaire {
    border: 2px solid var(--primaire);
    background-color: var(--blanc);
    color: var(--primaire);
    padding: calc(0.9375rem - 2px) calc(1.5625rem - 2px) calc(0.9375rem - 2px) calc(1.5625rem - 2px);
}

.region-bouton-tertiaire:hover {
    border: 2px solid var(--rouge);
}

@media (max-width: 768px) {
    .region-bouton {
        width: 100%;
        padding: 0.9375rem;
    }
}

/* ---------- Inputs -------------------------------- */

input:not([type='submit'], [type='button']),
select {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--typo);
    background-color: var(--bleu-clair);
    border: none;
    padding: 0.625rem;
}

input[type='checkbox']+label,
input[type='radio']+label {
    margin-left: 0.625rem;
}

input::placeholder {
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5rem;
}

input[type='text']+label {
    font-weight: normal; /* Nécessaire */
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--typo);
}

input:not([type='checkbox'], [type='radio'], [type='submit'], [type='button']),
select {
    height: 2.5rem;
}

input[type='checkbox']+label {
    font-weight: normal; /* Nécessaire */
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--primaire);
}

input[type='radio']+label {
    font-weight: normal; /* Nécessaire */
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--primaire);
}

@media (max-width: 768px) {
    input:not([type='submit'], [type='button']),
    select {
        width: 100%;
    }
}

input:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 50%;
}

/* ---------- Labels -------------------------------- */

label {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--primaire);
}

.region-required:after {
    content: '*';
    color: var(--rouge);
}

/* ---------- FormGroup ----------------------------- */

.region-form-group,
.region-form-group-vertical {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.625rem;
}

.region-form-group-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex:1;
}

.region-form-group-vertical > .region-form-group-content {
    flex-direction: column;
}

.region-form-group-validation {
    display: flex;
    flex-direction: row-reverse;
    color: var(--rouge);
}

.region-form-group-input {
    flex: 3;
}

@media (min-width: 768px) {
    .region-form-group > .region-form-group-content > .region-form-group-label {
        display: flex;
        flex-direction: row;
        flex: 1;
        margin-right: 1.875rem;
        align-items: center;
        justify-content: end;
    }
    
    .region-form-group-content > .region-form-group-label > label {
        text-align: right;
    }

    .region-form-group-content > .region-form-group-input > * {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .region-form-group-content {
        flex-direction: column;
    }
}

/* ---------- Separator ----------------------------- */

.region-separator {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1.563rem 0 1.563rem;
}

.region-separator>div {
    background-color: var(--bleu-clair);
    width: 2px;
    height: 100%;
}

.region-separator>span {
    margin: 0.563rem auto 0.563rem auto;
}

.region-separator.region-horizontal {
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    width: 100%;
    margin: 1.563rem 0 1.563rem 0;
}

.region-separator.region-horizontal>div {
    width: 100%;
    height: 2px;
}

@media (max-width: 768px) {
    .region-separator {
        flex-direction: row;
        align-items: center;
        margin-top: 1.875rem 0 1.875rem 0;
    }

    .region-separator>div {
        background-color: var(--bleu-clair);
        width: 100%;
        height: 2px;
    }

    .region-separator>span {
        margin: auto 0.563rem auto 0.563rem;
    }
}

/* ---------- Login --------------------------------- */

#region-form-login {
    flex: 1;
}

.region-login-page {
    display: flex;
    flex-direction: row;
}

.region-login-page>div:not(.region-separator) {
    flex: 1;
    display: flex;
    justify-content: center;
}

.region-login-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.region-login-footer > a {
    text-align: end;
}

@media (max-width: 768px) {
    .region-login-page {
        display: flex;
        flex-direction: column;
    }

    .region-login-page>div:not(.region-separator) {
        padding: 0;
    }
}

/* ---------- Register ------------------------------ */

.region-register {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.region-register>form {
    width: 100%;
    margin-top: 1.875rem;
}

.region-register>form>.region-form-group,
.region-register>form>.region-form-group-vertical {
    display:flex;
    flex-direction: column;
    justify-content: end;
}

/* ---------- Messages d'erreur --------------------- */

.region-erreur {
    display: flex;
    flex-direction: row;
    padding: 0.625rem;
    margin-bottom: 1.25rem;
}

/*  TODO:hci Revoir les popups de messages d'info/erreur... quand on aura une réponse  */
.region-success {
    background-color: #92D400;
}

.region-warning {
    background-color: #F0AB00;
}

.region-error {
    background-color: #C9190B;
}

.region-info {
}

.region-erreur-icon {    
    margin-right: 1rem;
}

.region-erreur-icon > span {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---------- Plugin AutoComplete ------------------- */

div.autoComplete_wrapper {
    display: flex;
}

div.autoComplete_wrapper>input {
    flex: 1;
}

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

.region-france-connect {
    display: flex;
    flex-direction: column;
}

.region-france-connect > *{
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Checkbox ------------------------------ */

 .region-checkbox {
     display: block;
     position: relative;
     padding-left: 1.25rem;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 .region-checkbox input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
 }

 .checkmark {
     position: absolute;
     top: 0;
     left: 0;
     height: 1.25rem;
     width: 1.25rem;
     background-color: var(--bleu-clair);
 }

 .checkmark:after {
     content: "";
     position: absolute;
     display: none;
 }

 .region-checkbox input:checked~.checkmark:after {
     display: block;
 }

 .region-checkbox .checkmark:after {
     left: 0.25rem;
     top: 0.25rem;
     width: 0.75rem;
     height: 0.75rem;
     background-color: var(--primaire);
 }

 .region-checkbox > label {
    margin-left: 0.625rem;
    cursor: pointer;
 }

.region-checkbox>input:focus+.checkmark {
    outline: auto;
}

.region-checkbox>input:disabled+.checkmark {
    cursor: not-allowed;
}

/* ---------- Liste --------------------------------- */

ol>li{
    margin-bottom: 1rem;
}

/* ---------- Table --------------------------------- */

.region-table {
    font-weight: 300;
    color: var(--primaire);
    border-spacing: 0;
}

.region-table tbody tr {
    background-color: var(--bleu-clair);
}

.region-table tbody tr:nth-child(even) {
    background-color: var(--fond);
}

.region-table thead td {
    padding-left: 1rem;
    padding-right: 1rem;
}

.region-table tbody td {
    padding: 1rem;
}

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