:root {

    --ci-radius: 28px;
    --ci-transition: .35s cubic-bezier(.4,0,.2,1);

    --ci-white: #ffffff;
    --ci-muted: rgba(255,255,255,.65);

    --ci-border: rgba(255,255,255,.18);

    --ci-bg-card: rgba(255,255,255,.06);

    --ci-shadow:
        0 25px 80px rgba(0,0,0,.35);

}



.ci-choice small {font-size: 16px;}

/* CONTAINER */

.ci-form-container {

    width:100%;
    max-width:900px;

    margin:auto;

    color:white;

    font-family:inherit;

}





/* ETAPES */

.ci-step {

    display:none;

    opacity:0;

    transform:translateX(60px);

}


.ci-step.active {

    display:block;

}

.ci-step.active:not(.from-left) {

    animation:
    ciEnterRight .65s ease-in-out forwards;

}


.ci-step.active.from-left {

    animation:
    ciEnterLeft .65s ease-in-out forwards;

}


.ci-step.leaving.to-left {

    display:block;

    animation:
    ciLeaveLeft .45s ease-in-out forwards;

}


.ci-step.leaving.to-right {

    display:block;

    animation:
    ciLeaveRight .45s ease-in-out forwards;

}




@keyframes ciEnterRight {

    from {

        opacity:0;

        transform:translateX(80px);

    }

    to {

        opacity:1;

        transform:translateX(0);

    }

}



@keyframes ciEnterLeft {

    from {

        opacity:0;

        transform:translateX(-80px);

    }

    to {

        opacity:1;

        transform:translateX(0);

    }

}



@keyframes ciLeaveLeft {

    from {

        opacity:1;

        transform:translateX(0);

    }

    to {

        opacity:0;

        transform:translateX(-80px);

    }

}



@keyframes ciLeaveRight {

    from {

        opacity:1;

        transform:translateX(0);

    }

    to {

        opacity:0;

        transform:translateX(80px);

    }

}



/* TITRES */


.ci-form-container h1 {

    font-size:clamp(32px,5vw,52px);

    line-height:1.05;

    margin-bottom:18px;

    letter-spacing:-1px;

}



.ci-intro {

    color:var(--ci-muted);

    margin-bottom:50px;

    font-size:18px;

}








/* PROGRESSION */


.ci-progress {

    position:relative;

    display:flex;

    justify-content:space-between;

    margin-bottom:70px;

}



.ci-progress-track {

    position:absolute;

    top:19px;

    left:10%;

    width:80%;

    height:2px;

    background:
    rgba(255,255,255,.15);

}



.ci-progress-track span {

    display:block;

    height:100%;

    width:0;

    background:white;

    transition:.8s ease;

}





.ci-progress-step {

    position:relative;

    z-index:2;

    text-align:center;

}



.ci-progress-step strong {

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#202020;

    border:1px solid rgba(255,255,255,.2);

    color:white;

    transition:.3s;

}



.ci-progress-step.active strong {

    background:white;

    color:#111;

    transform:scale(1.07);

}



.ci-progress-step small {

    display:block;

    margin-top:12px;

    color:var(--ci-muted);

}









/* CARTES SUJETS */

.ci-choice-grid {

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;

}


.ci-choice {

    --c1:#444;
    --c2:#666;

    position:relative;

    overflow:hidden;

    min-height:230px;

    padding:35px;

    border-radius:var(--ci-radius);

    border:0;

    background:
    linear-gradient(
        135deg,
        color-mix(in srgb, var(--c1) 0%, transparent),
        color-mix(in srgb, var(--c2) 0%, transparent)
    );

    color:white;

    text-align:center;

    cursor:pointer;

    transition:
        background .45s ease,
        transform .45s ease,
        box-shadow .45s ease;
	
	border: 1px solid #333333;

}


.ci-choice:hover,
.ci-choice.selected {

    background:
    linear-gradient(
        135deg,
        var(--c1),
        var(--c2)
    );

    transform:scale(1.05);

    box-shadow:var(--ci-shadow);
	border: 0px;

}


.ci-choice span {

    display:block;

    font-size:28px;

    font-weight:700;

    letter-spacing:-.5px;

}


.ci-choice small {

    display:block;

    margin-top:18px;

    color:var(--ci-muted);

}



/* COULEURS */

.ci-choice[data-theme="devis"] {

    --c1:#e16e40 	;
    --c2:#b21969;

}

.ci-choice[data-theme="renseignement"] {

    --c1:#4997c2;
    --c2:#153c55;

}

.ci-choice[data-theme="collaboration"] {

    --c1:#fcb450;
    --c2:#e5463a;

}

.ci-choice[data-theme="recrutement"] {

    --c1:#67c7a0;
    --c2:#276b46;

}

















/* CHAMPS */


.ci-field {

    margin-bottom:35px;

}



.ci-field label {

    display:block;

    margin-bottom:12px;

    font-weight:600;

}



textarea,
input {

    width:100%;

    padding:20px !important;
	margin-top: 25 px !important;

    background:#1e1e1e !important;

    border:0 !important;

    border-radius:24px !important;

    color:white;

    font-size:16px;

    outline:none;

    transition:.35s ease;

}


textarea:focus,
input:focus {

    background:#3d3d3d;

    box-shadow:
    0 0 0 2px rgba(255,255,255,.12);

}



textarea {

    min-height:220px;

    resize:vertical;

}



textarea::placeholder,
input::placeholder {

    color:rgba(255,255,255,.45);

}






textarea.error {

    border-color:#ff6b6b;

}



.ci-error {

    display:none;

    color:#FF9800 !important;

    margin-top:10px;

}



.ci-error.visible {

    display:block;

}








/* UPLOAD */


.ci-upload {

    min-height:190px;
	margin-top: 30px;

    border:

    2px dashed rgba(255,255,255,.3);


    border-radius:28px;


    padding:40px;


    display:flex;


    flex-direction:column;


    align-items:center;


    justify-content:center;


    text-align:center;


    cursor:pointer;


    transition:.35s;


}



.ci-upload:hover,
.ci-upload.dragover {

    border-color:white;

    background:
    rgba(255,255,255,.08);

}





.ci-upload {

    position:relative;

}


.ci-upload input {

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    opacity:0;

    cursor:pointer;

}



.ci-upload-icon {

    font-size:38px;

    margin-bottom:15px;

}



.ci-upload-content p {

    margin:0;

}



.ci-upload-content small {

    display:block;

    margin-top:10px;

    color:var(--ci-muted);

}





/* LISTE FICHIERS */


.ci-file-list {

    width:100%;

    margin-top:25px;
	    position:relative;

    z-index:5;

}



.ci-file {

    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:12px 16px;


    margin-top:25px;


    border-radius:14px;


    background:
    rgba(255,255,255,.08);


}



.ci-file-remove {

    position:relative;

    z-index:10;
    width:26px;

    height:26px;


    padding:0;


    border-radius:50%;


    background:
    rgba(255,255,255,.15);


    color:white;


    border:0;


    cursor:pointer;

}



.ci-file-remove:hover {

    background:white;

    color:black;

}









/* ACTIONS */


.ci-actions {

    display:flex;

    justify-content:space-between;

    margin-top:45px;

}



.ci-actions button {

    padding:16px 35px;


    border-radius:50px;


    border:1px solid rgba(255,255,255,.2);


    background:white;


    color:#111;


    cursor:pointer;


    transition:.3s;

}



.ci-actions button:hover {

    transform:translateY(0px);
	transform: scale(1.07);

}











.ci-actions button[type="submit"] {

    padding:16px 35px;

    border-radius:50px;

    border:0;

    background: linear-gradient(90deg,rgba(255, 110, 64, 1) 0%, rgba(178, 25, 105, 1) 100%) !important;

	/*font-size: 1.1em !important;*/
	text-transform: uppercase !important;
    color:#fff;

    cursor:pointer;

    transition:.3s;

}



.ci-actions button[type="submit"]:hover {

    transform:translateY(0px);
	transform: scale(1.07);

}


.ci-attach-toggle {

    background:transparent;

    color:white;

    border:1px solid rgba(255,255,255,.25);

    padding:14px 28px;

    border-radius:50px;

    cursor:pointer;

    transition:.3s;

}


.ci-attach-toggle:hover {

    background:white;

    color:#111;

}



.ci-upload-wrapper.open .ci-upload {

    display:flex;

    animation:
    ciUploadIn .35s ease;

}



.ci-upload-wrapper:not(.open) .ci-upload {

    display:none;

}



@keyframes ciUploadIn {

    from {

        opacity:0;

        transform:translateY(-15px);

    }


    to {

        opacity:1;

        transform:none;

    }

}


.ci-grid-fields {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}




.ci-required-star {

    color:#fff;

    opacity:.7;

    margin-left:4px;

}


input.error,
textarea.error {

    box-shadow:
    0 0 0 2px rgba(255,100,100,.5);

}

@keyframes ciShake {

    0% {
        transform:translateX(0);
    }

    20% {
        transform:translateX(-8px);
    }

    40% {
        transform:translateX(8px);
    }

    60% {
        transform:translateX(-5px);
    }

    80% {
        transform:translateX(5px);
    }

    100% {
        transform:translateX(0);
    }

}



.ci-shake {

    animation:
    ciShake .35s ease-in-out;

}




.precisions {
    font-size: 0.8em;
    font-weight: 100;
    font-family: Arial, sans-serif;
    color: #555555;
    margin-top: 50px;
    text-align: justify;
}



.ci-hidden-input {

    position:absolute;
    left:-9999px;
    opacity:0;
    height:0;

}



/* MOBILE */


@media(max-width:700px){


    .ci-choice-grid {

        grid-template-columns:1fr;

    }



    .ci-progress {

        margin-bottom:45px;

    }



    .ci-progress-step small {

        display:none;

    }



    .ci-actions {

        gap:15px;

    }



    .ci-actions button {

        flex:1;

    }
	
	.ci-grid-fields {

        grid-template-columns:1fr;

    }


}


.ci-extra-field {
    position:absolute !important;
    left:-9999px !important;
    top:-9999px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}