header{
    background-image: url("/ressources/photo/circle--background--solution.png");
    background-size: cover;
    background-position: center;    
    height: fit-content;
    position: relative;
    overflow: hidden;
    padding: 2.5rem 5rem;
}

.header_content {display: flex; gap: 5rem; width: clamp(600px, 100%, 1200px); margin: 10rem auto 5rem auto;}

.header_text {display: flex; flex-direction: column; flex: 1 0 0; gap: .75rem;}
.header_text .tag {display: flex; padding: .5rem 1rem; justify-content: center; align-items: center; border-radius: 40px; background: var(--white);border: .5px solid var(--gris--40); width: fit-content;}
.header_text .tag span {color: var(--gris--60);}
.header_text .tag svg {margin-right: .75rem;}
.header_text h2 {font-size: 3rem; font-weight: 500;}
.header_text p {color: var(--gris--60);}
.header_text img {width: 100%;border-radius: 2.5rem; margin-top: 1.5rem;}

.header_content form {
    display: flex;
    padding: 3.25rem 2.5rem;
    flex-direction: column;
    gap: 2.5rem;
    flex: 1 0 0;
    border-radius: 1.25rem;
    background: #FFF;
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.12);
    height: fit-content;
}

.contact_info {display: flex; flex-direction: column; gap: 1rem;}

.form_list {list-style: none; display: flex; flex-direction: column; gap: 1.25rem;}
.form_element {display: flex; flex-direction: column; gap: .5rem;}

form input {border-radius: 0.5rem; border: 1px solid var(--gris--40); background: #FFF;}
form button {align-self: flex-end;}
form textarea {border-radius: 0.5rem; border: 1px solid var(--gris--40); background: #FFF; padding: 1.25rem;}

form select{
    background-image: url("/ressources/icn/arrow-drop-down-line-black-40.svg"); 
    background-position: right .25rem center; 
    background-repeat: no-repeat; 
    background-size: 2.75rem ;
    opacity: 1; 
    justify-content: space-between; 
    width: auto;
    border-radius: .5rem; 
    border: 1px solid rgba(0, 0, 0, 0.40); 
    padding: .75rem 1.25rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #FFF;
}  
select:not(:valid) {
    color: var(--black--40);
}

form input:focus-visible{outline:none;} 
form input:focus{box-shadow: 0 0 3pt 2pt #3374FF;}
form textarea:focus{box-shadow: 0 0 3pt 2pt #3374FF;}
form textarea:focus-visible{outline:none;}
form select:focus-visible{outline:none;} 
form select:focus{box-shadow: 0 0 3pt 2pt #3374FF;}
form input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;-moz-appearance:textfield;appearance: text;}
.label_error label{color: #C73200;}
.label_error input{border: 1px solid #C73200;}
.label_error_tel::after{content:"Numero de telephone incorrect";color: #C73200;}
.label_error_mail::after{content:"email incorrect";color: #C73200;}
form div:first-child p {width: calc(100% - 2rem);}
form button {align-self: flex-end;}
.segmented {border: 1px solid rgba(0, 0, 0, .2);border-radius: 20rem;height: 2rem;width: fit-content; display: inline-flex;position: relative;}
.segmented_label {padding: 0 20px 0 20px;color: rgba(0, 0, 0, .4);position: relative;z-index: 1;cursor: pointer;font-size: 1.25rem;font-weight: 400;line-height: 168%;}
.segmented_label::before {content: '';background-color: #3374FF;position: absolute;width: 100%;height: calc(100%);top: 0;left: 0;border-radius: 2rem;z-index: -1;box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.2);transform: scale(0, 0);}
.segmented__element:checked + .segmented_label {color: white;}
.segmented__element:checked + .segmented_label::before {opacity: 1;animation: activeGrow ease-in-out 0.2s forwards;}
.segmented__element {display:none;}
@keyframes activeGrow{0% {transform: scale(0);}75% {transform: scale(1.2);	}100% {transform: scale(1.08);}}

/* Responsive ----------------------------------------*/
/* For-big-desktop-up */
@media (min-width: 1801px) {
}
/* For-desktop-up */
@media (max-width: 1800px) {
}
/* For-tablet-landscape-up */
@media (max-width: 1200px) {
}
/* For-tablet-portrait-up */
@media (max-width: 900px) {
        header {padding: 2.5rem 2.5rem 7.5rem 2.5rem; min-height: auto;}
}
/* For-phone-only  */
@media (max-width: 600px) {
    .header_content {flex-direction: column; width: auto; text-align: center;}
    .header_content form {text-align: start;}
    .header_content button {align-self: flex-start;}
    .header_text {align-items: center;}
}