@import "normalize.css";
@import "fonts.css";
@import "variables.css";

/* ---------- Main ---------- */
* {
    box-sizing: border-box;
}
body {
    background: url(../images/fond.jpg) no-repeat center/cover;
    font-family: 'Nunito Sans';
    line-height: 1.2;
    font-weight: 400;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;    
    letter-spacing: -0.04em;
}
#main-content {
    background-color: white;
    border-radius: 15px;
    width: 85%;
    min-width: 290px;
    max-width: 1100px;
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.27);
    color: var(--color--text);
    container-type: inline-size;
    padding: 3.5em min(1.75em,5%) 2.18em min(1.75em,5%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 1.5em;
}
.inner-content {
    width: min(690px, 95%);
}
.sidebar {
    width: min(225px, 29%);
    flex-grow: 1;
}
.flex-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    width: 100%;
    justify-content: center;
}
.sidebar + .inner-content {
    width: calc(71% - 2em);
    h2 {
        color: var(--color--main);
    }
}
#main-content:not([class^="ecran"]) {    
    width: max(600px, calc(75% - 2em));
    .sidebar + .inner-content {
        text-align: left;
    }
}

/* ---------- Typography ---------- */

/* Titles */
h1, .h1, h2, .h2, h3, h4 {
    font-weight: 800;
    font-size: clamp( var(--font-size--min, 1rem), 1.5vw + 0.7rem, var(--font-size--max, 1.8rem) ); 
}
h1, .h1 {
    --font-size--min: var(--font-size--h1--min,1.125rem);
    --font-size--max: var(--font-size--h1--max,1.813rem);
    margin-top: 0;
    letter-spacing: -0.04em;
}
h1:has(+ .h1) {
    margin-bottom: 0.5em;
}
h1 + .h1 {
    margin-top: 0.1em;
}
h2, .h2 {
    --font-size--min: var(--font-size--h2--min,1.0625rem);
    --font-size--max: var(--font-size--h2--max,1.375rem);
}
h3, .h3, h4, .h4 {
    --font-size--min: var(--font-size--small-plus,0.9rem);
    --font-size--max: var(--font-size--h2--min,1.0625rem);
}
h4, .h4 {
    color: var(--color--main);
}

/* Mises en exergue */
:is(span, strong, p, h2, h3, h4) {
    &.color {
        color: var(--color--main);
    }
    &.regular {
        font-weight: 400;
    }
}

p {
    word-break: break-word;
}

sup {
    font-size: 0.6em;
}

/* Links */
a {
    text-decoration: none;
    color: var(--color--main);
}

/* Alignements */
.text-center {
    text-align: center;
}

/* Img */
img {
    max-width: 100%;
}

/* Buttons */
/* Le :not(.ink-reaction) permet de ne pas cibler les .btn de la page attente-signature-2 */
.btn:not(.ink-reaction) {
    display: inline-block;
    border-radius: 5px;
    border: 1.5px solid var(--color--main, #148289);
    font-weight: 400;
    padding: 0.3em 1.6em;
    font-size: clamp( var(--font-size--btn--min,1rem), 1.5vw + 1rem, var(--font-size--btn--max,1.375rem) ); 
    &.full {
        background-color: var(--color--main, #148289);
        color: var(--color--white, #fff);
        &:hover, &:focus {
            background-color: var(--color--main--hover);
        }
    }
    &.outline {
        background-color: var(--color--white, #fff);
        color: var(--color--main, #148289);
        &:hover, &:focus {
            color: var(--color--main--hover);
        }
    }
    &.download, &.upload {
        &::before {
            display: inline-block;
            vertical-align: middle;
            width: 1.2em;
            margin-right: 0.5em;
        }
    }
    &.download {
        &::before {
            content: url('../images/download.svg');
        }
    }
    &.upload {
        font-size: 1.1em;
        padding-inline: 1em;
        text-wrap-mode: nowrap;
        &::before {
            content: url('../images/upload.svg');
            /* --color--main */
            filter: invert(30%) sepia(70%) saturate(4731%) hue-rotate(326deg) brightness(89%) contrast(92%);
        }
        &:hover, &:focus {
            &::before {
                /* color--main--hover */
                filter: invert(27%) sepia(36%) saturate(5948%) hue-rotate(324deg) brightness(101%) contrast(87%);
            }
        }
    }
    &.pay {
        background-color: var(--color--main);        
        color: var(--color--white, #fff);
        width: 100%;
        text-align: center;
        font-size: 1rem;
        border: 0;
        padding: 0.75em 1.6em;
        margin-block: 1.5em;
        &:hover, &:focus {
            background-color: var(--color--main--hover);
        }
    }
    &.phone {
        border-radius: 2rem;
        padding-inline: 1em;
        img {
            margin-right: 0.5em;
            vertical-align: middle;
        }
    }
}
button.btn {
    cursor: pointer;
}
.button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 3.25rem;
    row-gap: 1em;
}

/* ---------- Navs ---------- */
nav {
    ul {
        list-style-type: none;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;     
        letter-spacing: -0.017em;   
        li {
            text-align: left;
            &::before {
                content: " ";
                display: inline-block;
                vertical-align: middle;
            }
        }
    }
}

/* Avancement */
.avancement {
    margin-bottom: 1em;
    ul {
        column-gap: 2em;
        row-gap: 1em;
        li {
            &::before {
                margin-right: 0.82em;
            }
            &.active {
                &::before {
                    width: 1.18em;
                    height: 0.6em;
                    background: url('../images/coche.svg') no-repeat center/contain;
                }
            }
            &.to-come {
                &::before {
                    width: 1.31em;
                    height: 1px;
                    background-color: var(--color--disabled);
                }
            }
            &.done {                
                &::before {
                    width: 0.875em;
                    height: 0.625em;
                    background: url('../images/done.svg') no-repeat center/contain;
                }
            }
        }
    }
}
@media (max-width: 640px) {
    .avancement {
        margin-bottom: 2em;
        li {
            flex-basis: 100%;
        }
    }
}

/* Avancement dossier */
:is(.done, .to-do, .ongoing, .error) {
    &::before {
        content: " ";
    }
}
i.ico {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    &::before {
        display: block;
    }
}
.done {
    &::before {
        background: url('../images/done-700.svg') no-repeat center/contain;
        width: 1.2em;
        height: 1.2em;
    }
}   
.ongoing {   
    &::before {
        background: url('../images/ongoing.svg') no-repeat center/contain;
        width: 1.35em;
        height: 1.35em;
    }
} 
.to-do {
    &::before {
        background: url('../images/pending.svg') no-repeat center/contain;
        width: 1.35em;
        height: 1.35em;
    }
}  
.error {
    &::before {
        background: url('../images/error.svg') no-repeat center/contain;
        width: 1em;
        height: 1em;
    }
}

.avancement-dossier {
    background-color: var(--color--light-blue);
    border: 1px dashed var(--color--main);
    border-radius: 5px;
    padding: 0.5em 1em;
    p {
        max-width: 100%;
        padding-left: 2.3em;
        text-align: left;
        color: var(--color--gray);
        font-size: var(--font-size--small);
        position: relative;
        &::before {
            position: absolute;
            left: -0.05em;
            top: 50%;
            transform: translateY(-50%);
        }
        strong {
            color: var(--color--text);
            font-size: var(--font-size--small-plus);
        }
        &.ongoing {
            strong {
                color: var(--color--main); 
            }
        }
    }  
}

/* Recherche et Détails prix */
.statut-recherche, .details-prix {
    ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5em;
        li {            
            &.done {
                &::before {
                    width: 0.875em;
                    height: 0.625em;
                    background: url('../images/done-700.svg') no-repeat center/contain;
                    margin-right: 0.75em;
                }
            }
        }
    }
}
.details-prix {
    li.done {
        display: flex;
        align-items: center;
    }
}

/* Recherche */
.statut-recherche {
    width: fit-content;
    justify-self: center;
    margin-top: 1.25em;
    ul {
        li {            
            &.searching {
                &::before {
                    width: 0.781em;
                    height: 0.781em;
                    background: url('../images/loading.svg') no-repeat center/contain;
                    margin-right: 0.844em;
                }
            }
            &.error {                
                &::before {
                    width: 0.6em;
                    height: 0.6em;
                    background: url('../images/error.svg') no-repeat center/contain;
                    margin-right: 1.025em;
                }
            }
        }
    }
}

/* ---------- Upload Area ---------- */
.upload-area {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* min-width: 200px;
    min-height: 100px;
    margin-left: 8px; */
    input[type=file] {
        opacity: 0;
        z-index: 100;
        position: absolute;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
}

#progress-zone {
    width: 85%;
    max-width: 360px;
    margin: 1.5em auto;
    #progress-bar {
        display: block;
    }    
    progress[value] {
        height: 12px;
    }
    progress[value]::-webkit-progress-bar {
        border-radius: 6px;
    }
    progress[value]::-webkit-progress-value { 
        border-radius: 6px;
    }
}

/* ---------- Encadré ---------- */

.encadre {
    margin-inline: auto;
    background-color: var(--color--light-blue);
    border: 1px dashed var(--color--main);
    border-radius: 5px;
    width: 645px;
    max-width: 100%;
    padding: 1.56em;
    font-size: 1.1875em;
    margin-bottom: 1.875rem;
    text-align: center;
    p {
        margin: 0.5em;
    }
    .indications {
        color: var(--color--gray);
        font-size: 0.81rem;
        letter-spacing: -0.05em;
    }
    & > *:first-child {
        margin-top: 0;
    }
    & > *:last-child {
        margin-bottom: 0;
    }
    &.static {
        border: 1px solid var(--color--main);
        text-align: left;
        width: 100%;
        .indications {
            color: var(--color--text);
        }
    }
    &.small {
        padding: 0.85em;
        font-size: 1em;
        .indications {
            font-size: 0.8em;
        }
        img {
            max-width: 100px;
            height: auto;
        }
    }
}

/* ---------- Sidebar ---------- */
.sidebar {
    h2, p {
        text-align: left;
    }
    .btn {
        font-size: var(--font-size--btn--min);
        margin-block-start: 0.5em;
    }

    /* Etapes terminées - avancement */
    .etapes-terminees {
        font-size: var(--font-size--small-plus);
        margin-block: 1.5em;
        p {
            margin-bottom: 0.2em;
        }
    }
    progress[value] {
        height: 8px;
    }
    progress[value]::-webkit-progress-bar {
        border-radius: 4px;
    }
    progress[value]::-webkit-progress-value { 
        border-radius: 4px;
    }
}

/* ---------- Progress bar ---------- */

progress[value] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
}
progress[value]::-webkit-progress-bar {
    background-color: var(--color--disabled);
}
progress[value]::-webkit-progress-value { 
    background-color: var(--color--main);
}

/* ---------- Ecrans ---------- */

/* Ecran 1 : début */
.ecran1 {
    padding: 6em 2em 2.18em 2em;
    #copyright {
        margin-top: 4rem;
    }
    h1, .h1 {
        --font-size--max: var(--font-size--h1-intro--max,1.813rem);
    }
    h1 {
        margin-top: 1.37em;
    }
}

/* Paiement */
.ecran11, .ecran12 {
    #copyright {
        margin-top: 2em;
    }
}
.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    --gap: 2em;
    gap: var(--gap);
    margin-top: 2em;
    & > div {        
        border-radius: 6.5px;
        /* flex-basis: 47.5%; */
        flex-basis: calc(60% - var(--gap));
        min-width: 250px;
        flex-grow: 1;
    }
    .recap-prix {
        background-color: var(--color--light-blue, #EDF9F8);
        padding: 1.55em 1.55em 3.125em;
        display: flex;
        flex-direction: column;
        align-items: center;
        .inner-content {
            width: fit-content;
            justify-items: flex-start;
        }
        .prix, .prix-barre {
            font-weight: 700;
            margin-top: 0;
            margin-bottom: -0.4em;
            sup {
                font-weight: 400;
            }
        }
        .prix {
            font-size: var(--font-size--price);
            color: var(--color--main);
        }
        .prix-barre {
            font-size: calc( var(--font-size--price) / 2);
            color: var(--color--text);
            position: relative;
            &::after {
                content: " ";
                width: 72px;
                height: 1px;
                background-color: var(--color--text);
                position: absolute;
                transform: rotate(-10deg);
                top: 40%;
                left: -5px;
            }
        }
        .asterisque {
            font-size: var(--font-size--small);
        }
        .rappel-asterisque {
            font-size: var(--font-size--small-plus, 0.9em);
            font-weight: 800;
            margin-top: 1.4em;
            padding-left: 1.625em;
        }
    }
    .paiement {
        flex-basis: 40%;
        border: 1.5px solid var(--color--disabled, #E0E3E6);
        padding: 3.75em 2.18em;
        font-size: var(--font-size--small, 0.8em);
        & > p {
            display: flex;
            justify-content: space-between;
            margin: 0.6em 0;
        }
        .add-code {
            display: block;
            text-align: center;
            margin-bottom: 1em;
        }
        .group {
            span + span {
                margin-inline-start: 0.5em;
            }
        }
        .tarif-barre {
            font-size: var(--font-size--x-small);
            color: var(--color--gray);
            position: relative;
            text-decoration: line-through;
        }
    }
}

/* Paiement accepté */
.succes {
    background-color: var(--color--light-blue);
    border-radius: 5px;
    padding: 2.2em 1.2em 1.2em;
    margin-top: 4.68rem;
    .emoji {
        margin: -5.5rem auto 0.8em auto;
        display: block;
    }
    .bravo {
        font-weight: 800;
        font-size: var(--font-size--large);
        margin: 0;
    }
    .bravo + p {
        margin-top: 0;
    }
    a {
        text-decoration: underline;
    }
}
.tel {
    margin-bottom: 4rem;
    h2 {
        color: var(--color--phone);
        font-size: var(--font-size--medium);
        margin-bottom: 0.5em;
    }
    .horaires {
        font-size: var(--font-size--small);
    }
}

/* Forms */
form, .dynamic-content {    
    p {
        font-size: var(--font-size--small-plus);
    }
    .libelle {
        margin-block: 3px;
        font-size: var(--font-size--small-plus);
        font-weight: 700;
    }
    .row, .sub-row {
        display: flex;
        align-items: center;
        .libelle, label {
            flex-basis: 125px;
            flex-grow: 0;
            flex-shrink: 0;
        }
    }    
    .sub-row {
        .champ {
            width: 100%;
            margin: 3px;
            align-self: start;
            & > * {
                flex-basis: 100%;
                width: 100%;
                margin: 0;
            }
        }
        &:has(.form-control-line) {
            flex-wrap: nowrap;
            .full {
                width: 100%;
            }
            select.full {
                min-width: calc(100% - 6px);
            }
            .form-control-line {
                flex-basis: 100%;
            }
        }
        &:has(:is(input, div.champ):nth-child(2)) {
            & > * {
                flex-basis: calc(50% - 6px);
            }
        }
        &:has(:is(input, div.champ):nth-child(3)) {
            & > * {
                flex-basis: calc(33.33% - 6px);
            }
        }
        &:has(:is(input, div.champ):nth-child(4)) {
            &:has(label) {
                & > *:not(label) {
                    flex-basis: 33%;
                    flex-grow: 1;
                    flex-shrink: 0;
                }
                label {
                    flex-basis: 45px;
                }
                input + label {
                    margin-left: 10px;
                }
            }
        }
        .form-group {
            display: flex;
            align-items: center;
            column-gap: 10px;
            div input, & > div {
                width: calc(100% - 6px);
            }
            & + .form-group {
                padding-inline-start: 10px;
            }            
            input + div:has(.iti) {
                margin: 3px;
                .iti--allow-dropdown {
                    width: 100%;
                    input {
                        width: 100%;
                    }
                } 
            }
        }
    }
    .row {
        &.space-between {
            justify-content: space-between;
            align-items: center;
            .text {
                flex-grow: 1;
            }
        }
    }
}
form {
    fieldset {
        margin-bottom: 1em;
        padding: 0.35em 0 0.625em;
        border: 0;
    }
    legend {
        color: var(--color--main);
    }
    .mandatory {
        font-size: var(--font-size--small);
    }
    .form-content {
        background-color: var(--color--light-blue);
        padding: 10px;
        border-radius: 5px;  
        font-size: var(--font-size--small);
    }
    &.simple-form {
        font-size: var(--font-size--small);
    }
    .sub-row {            
        input, select {
            flex-grow: 1;
        }
    }
    .row, .sub-row {
        .libelle, label {
            flex-basis: 110px;
        }
    }
    .champs {
        flex-grow: 1;
    }
    .representants-legaux {
        .row:has(.champs) {
            padding-block-start: 0.3em;
            padding-block-end: 0.75em;
            &:not(:last-child) {
                border-bottom: var(--color--main) 1px solid;
                margin-block-end: 0.75em;
            }
        }
    }
    select {
        padding: 5px 7px;
    }
    input {
        border: 1px solid;
        width: 140px;
        padding: 7px;
    }
    textarea {
        width: 100%;
        padding: 7px;
        border: 1px solid;
        min-height: 5em;
    }
    input, select, textarea {
        margin: 3px;
        border-radius: 3px;
    } 
    input[type="submit"] {
        cursor: pointer;
        width: auto;
        display: block;
        margin-inline: auto;
    }
}
#form-facturation {
    .row {
        margin-block: 0.5em;
    }
    .champ:has(#facturation--cp) {
        flex-basis: 180px;
        & + .champ {
            flex-grow: 1;
        }
    }
    .libelle {
        text-align: left;
    }
}
#wizards_signataires_form {
    .sub-row:has(.control-label) {
        flex-wrap: wrap;
        .form-group {
            flex-wrap: wrap;
            width: 100%;
            select {
                width: 100%;
            }
        }
        & + .sub-row {
            margin-block-start: 0.8em;
        }
    }
    label.control-label {
        flex-basis: 100% !important;
    }
    .row {
        .libelle.long {
            flex-basis: 100%;
        }
    }
    .form-group-telephone, .form-group-email {
        flex-basis: 50%;
        .col-sm-8 {
            width: 100%;
        }
    }
}
@media (max-width: 1289px) {
    .sidebar + .inner-content { 
        width: 100%;
    }
    .avancement-dossier {
        p {
            width: 230px;
            margin-inline: auto;
        }
    }
    form, .dynamic-content {
        .row, .sub-row {
            flex-wrap: wrap;
            .libelle.long {
                flex-grow: 1;
            }
        }
    }
}
@media (max-width: 900px) {
    #wizards_signataires_form {
        .row {
            .form-group {
                flex-basis: 100%;
                div.col-sm-8 {
                    width: 100%;
                    select {
                        margin-inline: 0;
                    }
                }
            }
            .champs {
                .sub-row {
                    row-gap: 0.5em;
                }
            }
        }
    }
}
@media (max-width: 680px) {
    form, .dynamic-content {
        .sub-row {
            &:has(:is(input, div):nth-child(4)) {
                &:has(label) {
                    & > *:not(label) {
                        flex-basis: calc(100% - 58px)
                    }
                    input + label {
                        margin-left: 0px;
                    }
                }
            }
        }
    }
    #form-facturation {        
        .libelle, .champ { 
            flex-basis: 100%;
        }
        .libelle {
            margin-inline: 3px;
        }
    }
}

/* Style spécifique aux boutons de la page attente-signatures 2 */
.dynamic-content {
    /* Texte "libellé" */
    td .col-md-12 {
        padding-block: 0.5em;
        font-size: var(--font-size--small-plus);
        font-weight: 700;
        /* Infos signataire */
        &:has(.glyphicon-envelope) {
            font-weight: 400;
        }
    }
    
}
a.ink-reaction {
    font-size: var(--font-size--small-plus);
    text-wrap-mode: nowrap;
    /* Boutons "voir" */
    &.btn-primary {
        display: inline-block;
        border-radius: 5px;
        border: 1.5px solid var(--color--main, #148289);
        font-weight: 400;
        padding: 0.3em 1em;
    }
    /* Boutons "en attente de signature" */
    &.btn-warning {  
        color: var(--color--text);
        i::before {
            content: " ";
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
            /* ico to-do */
            background: url(../images/pending.svg) no-repeat center / contain;
            width: 1.35em;
            height: 1.35em;
        }
    }
}
@media screen and (max-width: 599px) {
    /* Tableau responsive */
    .dynamic-content {
        table {
            tr, td {
                display: block;
            }      
            h4 {
                margin-block-end: 0.5em;
            }
            tr:has(h4) {
                padding-block: 1em;
            }
        }
    } 
}

/* Validation des formulaires */
.error-message {
    color: red;
    font-size: 0.9em;
    display: block;
    margin-top: 0.3em !important;
    text-align: left;
}
input.invalid {
    border: 1px solid red;
}

/* ---------- Footer ---------- */

#copyright {
    font-size: var(--font-size--x-small, 0.6rem);
    font-weight: 400;
    text-align: left;
    align-self: flex-end;
    p {
        padding-left: 2.7em;
        margin-bottom: -0.1em;    
        letter-spacing: -0.05em;
    }
}
@media (min-width: 1200px) {
    #main-content:not(.ecran1, .ecran11, .ecran12) {
        #copyright {
            margin-top: -2rem;
        }
    }
}