@font-face {
    font-family: "Aracne Condensed";
    src: url("../font/ARACNE-CONDENSED_regular.ttf");
}

@font-face {
    font-family: "Josette Font";
    src: url("../font/JosetteFont.ttf");
}

html {
    height: 100%
}


#dev-forme-content {
    width: 325px !important;
    height: 514px;
}

#dev-forme-content svg {
    width: 325px !important;
    height: 514px;
}

.motifs {
    background-color: grey !important;
}

.fond {
    background-color: green !important;
}

* {
    font-family: "Open Sans";
}

.windowConfirmEmail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* Couleur de fond semi-transparente */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    /* Assurez-vous qu'elle est au-dessus des autres éléments */
}

.windowConfirmEmail-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

#windowConfirmEmail-content-text {
    background-color: white;
    color: black;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 20px;
    max-width: 500px;
    text-align: center;
    border: 1px solid dimgrey
}

.display-notif {
    position: fixed;
    width: 100%;
    height: auto;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 50px;
}

.alert-error {
    width: auto;
    background-image: url("../images/bg-text-erreur-atelier.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 20px;
    font-family: "Josette Font", serif;
    font-size: 20px;
    text-align: center;
}

.alert-info {
    width: auto;
    background-image: url("../images/bg-text-info-atelier.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 20px;
    font-family: "Josette Font", serif;
    font-size: 20px;
    text-align: center;
}

.alert-success {
    width: auto;
    background-image: url("../images/bg-text-success-atelier.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 20px;
    font-family: "Josette Font", serif;
    font-size: 20px;
    text-align: center;
}

.temporary {
    animation: fadeout 8s;
}

body {
    height: 100%;
}

.dev-d-flex {
    display: flex
}

.dev-font-size {
    font-size: .8em
}

.dev-h-50px {
    height: 50px
}

.logo-image {
    height: 140px;
    width: auto;
    object-fit: contain;
    margin: 0;
}

.logo-panier-vide {
    height: 50px;
    width: auto;
    object-fit: contain
}

.logo-panier-plein {
    height: 50px;
    width: auto;
    object-fit: contain
}

.dev-text-bold-uppercase {
    font-weight: bolder;
    text-transform: uppercase
}

.h-50px {
    height: 50px
}

.link-header a {
    text-decoration: none;
    color: #fff
}

.text-align {
    text-align: center
}

.logo-contact-account a {
    margin-right: 10px;
    margin-left: 10px
}

.logo-contact-account a img {
    height: 30px;
    object-fit: contain
}

.h-100px {
    height: 100px
}

.dev-col-content-account {
    border: 1px solid #d3d3d3
}

.dev-light-border {
    border: 1px solid #d3d3d3
}

.dev-light-border-bottom {
    border-bottom: 1px solid #d3d3d3
}

.dev-light-border p {
    margin: 0
}

.w-12 {
    width: 12%
}

.dropdownmenu ul,
.dropdownmenu li {
    margin: 0;
    padding: 0;
}

.dropdownmenu ul {
    list-style: none;
}

.dropdownmenu li {
    float: left;
    position: relative;
    width: auto;
}

#submenu {
    left: 10px;
    background: green;
    opacity: 0;
    position: absolute;
    top: 90px;
    width: 64px;
    visibility: hidden;
    z-index: 1;
    padding: 10px;
}

li:hover ul#submenu {
    left: 10px;
    background: white;
    border-bottom: 1px solid #00c2b6;
    border-left: 1px solid #00c2b6;
    border-right: 1px solid #00c2b6;
    border-radius: 0px 0px 10px 10px;
    opacity: 1;
    position: absolute;
    top: 90px;
    width: 64px;
    visibility: visible;
    z-index: 1;
    padding: 10px;
}

#submenu li {
    float: none;
    width: 100%;
}

.dev-font-family-raleway {
    font-family: Raleway, serif
}

.dev-font-family-open {
    font-family: "Open Sans"
}

img {
    width: 40px;
    object-fit: contain
}

.header__icon:not(.header__icon--summary) {
    display: flex;
    align-items: center;
    justify-content: center
}

.header__icon {
    color: #fff
}

.header__icon::after {
    content: none
}

.header__icon:hover .icon {
    transform: scale(1.07)
}

.header__icon .icon {
    height: 2rem;
    width: 2rem;
    fill: none;
    vertical-align: middle
}

.header__icon,
.header__icon--cart .icon {
    height: 4.4rem;
    width: 4.4rem;
    padding: 0
}

.header__icon--cart {
    position: relative;
    margin-right: -1.2rem
}

h5 {
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    margin-top: 20px
}

.h-130px {
    height: 130px
}

#Atelier {
    background-image: url('../images/background.png');
    filter: invert(100%);
    height: auto;
}

.font-aracne {
    font-family: "Aracne Condensed", serif !important;
}

.color-blue {
    color: #00c2b6
}

.bg-color-blue {
    background-color: #29b3ae !important;
}

.color-pink {
    color: #F54594;
}

.bg-color-pink {
    background-color: #F54594 !important;
}

.bg-light-grey {
    background-color: #f6f6f6 !important;
}

#AtelierContent {
    margin-top: 90px;
    margin-bottom: 90px;
}

#AtelierContent-button-validateCreation {
    background-color: transparent;
    color: #00c2b6;
    border: 1px solid #00c2b6;
    border-radius: 5px;
    padding: 20px 30px;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 20px
}

#AtelierSvg {
    margin-top: 90px;
}

.little-square {
    width: 30px;
    height: 30px;
}

.hovertext {
    position: relative;
    border-bottom: 1px dotted black;
}

.hovertext:before {
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    width: max-content;
    background-color: white;
    color: black;
    text-align: center;
    border-radius: 5px;
    padding: 5px 5px;
    transition: opacity ease-in-out;
    position: absolute;
    z-index: 1;
    left: 20px;
    /*top: 110%;*/
    width: 200px;
}

.hovertext:hover:before {
    opacity: 1;
    visibility: visible;
}

#vosCreations-Images:hover #loopZoom {
    opacity: 1 !important;
}

#rangeSize {
    -webkit-appearance: none;
    /* Enlève le style par défaut sur les navigateurs WebKit */
    appearance: none;
    width: 100%;
    /* Ajuste la largeur selon tes besoins */
    height: 15px;
    /* Ajuste la hauteur selon l'image */
    background: url('../images/barre-input-range-size-3.png') no-repeat center;
    background-size: cover;
    /* Ajuste pour s'assurer que l'image couvre entièrement la largeur */
    outline: none;
    /* Enlève la bordure lors du focus */
    -webkit-tap-highlight-color: transparent;
    /* Supprime la surbrillance sur iOS */
}

#rangeSize::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: url("../images/curseur-input-range-size.svg");
    background-size: contain;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Supprime la surbrillance sur iOS */
    border: none;
}

#rangeSize::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: url("../images/curseur-input-range-size.svg");
    -webkit-tap-highlight-color: transparent;
    background-size: contain;
    cursor: pointer;
    border: none;
}

#rangeSize::-ms-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: url("../images/curseur-input-range-size.svg");
    -webkit-tap-highlight-color: transparent;
    background-size: contain;
    cursor: pointer;
    border: none;
}

#vos-creations-header {
    background-image: url('../images/background.png');
    filter: invert(100%);
    height: 300px;
}

#josette-en-tete-background {
    background-image: url('../images/bordure-josette-en-tete.svg');
    background-size: 100% 150px;
    background-repeat: no-repeat;
    background-position: 0px -20px;
    margin-top: -20px;
}

.creation-button {
    background-color: transparent;
    color: #F54594;
    border: 1px solid #F54594;
    border-radius: 5px;
    padding: 10px 40px;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 20px;
}

.col-2_5 {
    flex: 0 0 auto;
    width: 25% !important;
}

.dev-footer a {
    text-decoration: none;
    color: black;
}

.dev-text-bold-uppercase {
    font-weight: bolder;
    text-transform: uppercase;
}

.dev-d-flex {
    display: flex;
}

.dev-font-size {
    font-size: 0.8em;
}

.mb-100px {
    margin-bottom: 100px;
}

.mt-100px {
    margin-top: 100px;
}

.dev-h-50px {
    height: 50px;
}

.message-top-nav-scroll-left {
    width: 100%;
    height: 40px;
    background: #34B6B0;
    color: white;
}

.message-top-nav-scroll-left a {
    width: 100%;
    height: 100%;
    text-decoration: underline white;
    color: white;
}

.message-top-nav-scroll-left p {
    width: 100%;
    height: 100%;
    font-size: 20px;
    line-height: 30px;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    color: white;
}

.vos-creations-header-image-droite {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-image {
    height: 140px;
    width: auto;
    object-fit: contain;
}

.logo-panier-vide {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.logo-panier-plein {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.dev-footer a {
    text-decoration: none;
    color: black;
}

.dev-text-bold-uppercase {
    font-weight: bolder;
    text-transform: uppercase;
}

.collection-image {
    height: 65px;
    object-fit: contain;
}

.h-50px {
    height: 50px;
}

.link-header a {
    text-decoration: none;
    color: white;
}

.text-align {
    text-align: center;
}

.numberDayMekong {
    background-color: #27B4B0;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 50px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: bold;
    color: white;
}

.numberDayMekongDescription {
    display: flex;
}

.numberDayMekongDescriptionLeft {
    border-bottom: black 1px solid;
    border-left: black 1px solid;
}

.numberDayMekongDescriptionRight {
    border-bottom: black 1px solid;
    border-right: black 1px solid;
}

.logo-contact-account a {
    margin-right: 10px;
    margin-left: 10px;
}

.logo-contact-account a img {
    height: 30px;
    object-fit: contain;
}

.list-footer {
    list-style: none;
    padding: 0;
}

.logo-image-footer {
    height: 130px;
    width: 100px;
    object-fit: contain;
    margin-bottom: 15px;
    margin-top: 15px;
    filter: grayscale(100%);
}

.logo-image-footer:hover {
    filter: grayscale(0%);
}

.dev-placement-bloc-register-login {
    width: 100%;
    display: flex;
    justify-content: center;
}

.dev-formulaire {
    width: 500px;
    height: 100%;
    padding: 40px;
    border: 1px solid lightgrey;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 100px 50px;
}

.dev-label {
    display: flex;
    flex-direction: column;
    border: 1px solid lightgrey;
    border-radius: 10px;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.dev-label input {
    -webkit-appearance: none;
    border: none;
}

.dev-label label {
    font-size: 0.7em;
}

.dev-formulaire-submit {
    width: 200px;
    height: 50px;
    color: white;
    background-color: black;
    text-align: center;
    border: 0px solid black;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h-100px {
    height: 100px;
}

.dev-link-deconnect {
    width: 130px;
    height: 40px;
    font-size: smaller;
    color: white;
    background-color: black;
    text-align: center;
    border: 0px solid black;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dev-formulaire-submit-validate-panier {
    width: 100%;
    height: 50px;
    color: white;
    background-color: black;
    text-align: center;
    border: 0px solid black;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dev-formulaire-voir-ma-commande {
    width: 200px;
    height: 50px;
    color: white;
    background-color: black;
    text-align: center;
    border: 0px solid black;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dev-button-404 {
    width: 200px;
    height: 50px;
    color: white;
    background-color: black;
    text-align: center;
    border: 0px solid black;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dev-cart-update {
    width: 50%;
    height: 40px;
    color: white;
    background-color: black;
    text-align: center;
    border: 0px solid black;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dev-form-div-button {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dev-button-list-account {
    width: 100%;
    height: 60px;
    background-color: white;
    border: 1px solid lightgrey;
}

.dev-color-selected-cyan {
    color: #27B4B0;
}

.dev-col-content-account {
    border: 1px solid lightgrey;
}

.dev-light-border {
    border: 1px solid lightgrey;
}

.dev-light-border-bottom {
    border-bottom: 1px solid lightgrey;
}

.dev-light-border-top {
    border-top: 1px solid lightgrey;
}

.dev-light-border p {
    margin: 0;
}

.dev-price-blue-green {
    font-size: larger;
    color: #27B4B0;
    font-weight: bolder;
}

.dev-status-blue-green {
    font-size: larger;
    color: #27B4B0;
    font-weight: bolder;
}

.dev-shipping-price-blue-green {
    color: #27B4B0;
}

.w-12 {
    width: 12%;
}

td,
th {
    border-bottom: 1px solid lightgrey;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4rem;
}


/*
.dev-checkout-box {
    background-color: white;
    position: fixed;
    right: 2.5%;
    height: 500px;
    border-radius: 10px;
}
*/

.dev-checkout-box {
    background-color: white;
    position: sticky;
    top: 100px;
    height: 100%;
    border-radius: 10px;
    margin-bottom: 200px;
}

.dev-header-responsive-mobile {
    display: none;
}

.dev-productAttributes {
    margin-bottom: 20px;
    margin-top: 20px;
}

.dev-imageAttribut {
    width: 50px;
    object-fit: contain;
}

.dev-recherche-filter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dev-recherche-filter form {
    margin-bottom: 25px;
    display: flex;
}

.dev-recherche-filter form input {
    height: 45px;
    font-size: 20px;
    padding-left: 10px;
    border: 1px solid black;
    border-radius: 10px 0px 0px 10px;
}

.dev-recherche-filter form button {
    height: 45px;
    color: white;
    background-color: black;
    border: 1px solid black;
    border-radius: 0px 10px 10px 0px;
}

.dev-account-total-command-price {
    width: 25%;
}

.dev-display-resume-order {
    padding: 5em;
}

.dev-cart-empty {
    padding: 20px;
    border: 1px solid #A9D5DE;
    background-color: #F8FFFF;
    margin-bottom: 25px;
}

.dev-cart-empty div img {
    border: 1px solid #A9D5DE;
    border-radius: 60px;
    width: 60px;
    height: 60px;
    margin-right: 25px;
    padding: 10px;
}

.dev-account-category {
    width: 100%;
    height: 60px;
    border: 1px solid lightgrey;
    margin-bottom: 20px;
}

.dev-account-category:hover {
    box-shadow: inset 0 -5px 0 #27B4B0;
    color: #27B4B0;
    cursor: pointer;
}

.dev-account-disconnect a {
    color: #27B4B0;
}

.dev-font-family-raleway {
    font-family: Raleway, Serif;
}

.dev-font-family-open {
    font-family: "Open Sans";
}

.dev-account-button-loyalty {
    width: 150px;
    height: 50px;
    background-color: #27B4B0;
    border: 1px solid #27B4B0;
    border-radius: 40px;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.dev-account-button-loyalty:hover {
    background-color: #27B4B0C0;
    border: 1px solid #27B4B0C0;
}

.product-description {
    font-family: "Open Sans";
    width: 100%;
    padding: 0;
}

.product-description p {
    margin: 0;
    padding: 0;
    text-align: start;
    margin-bottom: 20px;
    margin-top: 20px;
    font-size: larger;
    line-height: 1.3em;
}

.dev-description-content {
    margin-bottom: 60px;
    width: 100%;
}

img {
    width: 40px;
    object-fit: contain;
}

.dev-block-one-attribute-description {
    border-bottom: 1px solid lightgrey;
    margin-top: 20px;
}

.dev-description-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.dev-description-title-image-and-title {
    display: flex;
    align-items: center;
    height: 50px;
}

.dev-description-title-image-and-title h4 {
    font-family: "Raleway";
    text-transform: uppercase;
    font-weight: 600;
    font-size: medium;
}

.arrow-down {
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 15px solid #27B4B0;
}

.arrow-up {
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 15px solid #27B4B0;
}

.cart-count-bubble:empty {
    display: none;
}

.cart-count-bubble {
    position: absolute;
    background-color: #34B6B0;
    font-weight: bolder;
    color: white;
    height: 1.7rem;
    width: 1.7rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    bottom: 0rem;
    right: 0rem;
    line-height: calc(1 + 0.1 / var(--font-body-scale));
}

.header__icon:not(.header__icon--summary),
.header__icon span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__icon {
    color: white
}

.header__icon span {
    height: 100%;
}

.header__icon::after {
    content: none;
}

.header__icon:hover .icon,
.modal__close-button:hover .icon {
    transform: scale(1.07);
}

.header__icon .icon {
    height: 2rem;
    width: 2rem;
    fill: none;
    vertical-align: middle;
}

.header__icon,
.header__icon--cart .icon {
    height: 4.4rem;
    width: 4.4rem;
    padding: 0;
}

.header__icon--cart {
    position: relative;
    margin-right: -1.2rem;
}

.display-responsive {
    display: none;
}

#test {
    width: 100%;
    height: auto;
    background-color: #EEF4FA;
}

.hero-banner {
    width: 100%;
}

.home-content {
    margin-top: 100px;
    padding-bottom: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-content form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.form-input {
    width: 400px;
    margin-bottom: 20px;
    height: 50px;
}

.home-content form select {
    width: 400px;
    margin-bottom: 20px;
    height: 50px;
    background-color: white;
    border: 1px solid grey;
    border-radius: 2px;
}

.image-form {
    width: 200px;
    height: auto;
}

.checkbox-newsletter {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
    margin-top: 15px;
    align-items: center;
    justify-content: center;
}

.checkbox-newsletter input {
    width: auto;
    margin-bottom: 0;
    height: auto;
}

.checkbox-newsletter label {
    padding-left: 10px;
}

#input-submit {
    width: 400px;
    height: 50px;
    background-color: red;
    color: white;
    font-weight: bold;
    border: none;
    margin-top: 20px;
}

.part-reglement {
    width: 800px;
    margin: auto
}

h5 {
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    margin-top: 20px;
}

#contentFormCreation {
    display: block;
    height: auto;
    width: 800px;
    position: absolute;
    z-index: 8020;
    background-color: white;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%)
}

.block-affichage-creations {
    margin-top: 50px;
    margin-bottom: 20px;
}

.opacity-on-hover:hover {
    opacity: 0.5;
}

.displayZoomImage {
    display: block;
    height: auto;
    width: 800px;
    position: fixed;
    z-index: 8020;
    background-color: white;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.intro {
    text-align: center;
    margin-top: 20px;
    width: 50%;
    background-image: url("../images/bg-text-intro-atelier.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 15px;
}

@media screen and (max-width: 992px) {
    .alert-error {
        width: 90%;
    }
    .alert-info {
        width: 90%;
    }
    .alert-success {
        width: 90%;
    }
    .part-reglement {
        width: 100%;
        margin: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
    .message-top-nav-scroll-left {
        height: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .dev-header-responsive-mobile {
        display: block;
    }
    .dev-header-responsive-mobile div div a {
        margin: 0;
    }
    .dev-responsive-display-none {
        display: none;
    }
    .dev-responsive-display-flex-column {
        display: flex;
        flex-wrap: wrap;
    }
    .responsive-child-cart:nth-child(1) {
        width: 100%;
    }
    /*.responsive-child-cart:nth-child(1) img {
        border: 1px solid lightgrey;
    }*/
    .responsive-child-cart:nth-child(1) p {
        margin: unset;
    }
    .responsive-child-cart:nth-child(2) {}
    .responsive-child-cart:nth-child(3) {
        width: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .responsive-child-cart:nth-child(4) {
        width: 15%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .responsive-child-cart:nth-child(5) {
        width: 5%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .w-12 {
        width: 24%;
    }
    td,
    th {
        border-bottom: 0px;
    }
    tr {
        border: 1px solid lightgrey;
        margin-bottom: 40px;
        height: 250px;
    }
    .dev-header {
        display: none;
    }
    .logo-panier-vide {
        height: 40px;
        object-fit: contain;
    }
    .logo-panier-plein {
        height: 40px;
        object-fit: contain;
    }
    .dev-image-panier {
        height: 40px;
        object-fit: contain;
    }
    .dev-catalogue-nav-responsive {
        background-color: #27B4B0;
        height: 40px;
        width: 100%;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dev-nav-link-responsive-child:nth-child(1) {
        width: 50%;
    }
    .dev-nav-link-responsive-child:nth-child(2) {
        width: 50%;
    }
    .dev-nav-link-responsive-child:nth-child(3) {
        width: 50%;
    }
    .dev-nav-link-responsive-child:nth-child(4) {
        width: 50%;
    }
    .dev-nav-link-responsive-child:nth-child(5) {
        width: 50%;
    }
    .dev-nav-link-responsive-child:nth-child(6) {
        width: 50%;
    }
    .dev-nav-link-responsive-child:nth-child(7) {
        width: 50%;
    }
    .dev-nav-link-responsive-child:nth-child(8) {
        width: 50%;
    }
    .dev-nav-link-responsive-child:nth-child(9) {
        width: 50%;
    }
    .dev-nav-link-responsive-child a {
        border-radius: 10px;
        padding-bottom: 10px;
        padding-top: 10px;
        text-decoration: none;
        color: black;
        text-transform: uppercase;
        font-weight: bolder;
    }
    .dev-header-responsive-link-list {
        margin-top: 15px;
        margin-bottom: 20px;
    }
    .dev-header-responsive-link-list a {
        text-decoration: none;
        color: grey;
    }
    .dev-placement-bloc-register-login {
        width: 100%;
        flex-direction: column;
    }
    .dev-responsive-register-nth:nth-of-type(1) {
        order: 2;
        margin-top: 50px;
    }
    .dev-responsive-register-nth:nth-of-type(1) .dev-label {
        width: 80%;
    }
    .dev-responsive-register-nth:nth-of-type(2) {
        order: 1;
        margin-bottom: 0;
        margin-top: 20px;
        text-align: center;
    }
    .dev-formulaire {
        width: 300px;
    }
    .dev-formulaire form {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .dev-label {
        width: 80%;
    }
    .dev-account-address {
        flex-direction: column;
    }
    .dev-account-total-command-price {
        width: 60%;
    }
    .dev-display-resume-order {
        padding: 0 0 10px;
        margin: 0;
    }
    .dev-formulaire-voir-ma-commande {
        width: 60px;
        height: 30px;
        font-size: small;
        color: white;
        background-color: black;
        text-align: center;
        border: 0px solid black;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dev-link-deconnect {
        margin: auto auto 15px;
    }
    .dev-account-big-tab {
        margin: auto;
    }
    .display-responsive {
        display: flex;
    }
    .display-desktop {
        display: none !important;
    }
    .vos-creations-header-image-droite {
        display: none;
    }
    .cart-count-bubble {
        bottom: 0.3rem;
        right: 0rem;
    }
    .dev-header-responsive-mobile a {
        text-decoration: none;
        color: black;
    }
    .home-content {
        width: 100%;
        margin: auto;
        flex-direction: column;
        margin-top: 0;
    }
    .image-form {
        margin: 0;
    }
    .form-input {
        width: 300px;
    }
    .home-content form select {
        width: 300px;
    }
    .image-form {
        width: 200px;
    }
    #input-submit {
        width: 300px;
    }
    .checkbox-newsletter {
        width: 300px;
    }
    h5 {
        padding-left: 15px;
        padding-right: 15px;
        text-align: center;
        margin-top: 20px;
    }
    /*I want to put the fisrt child of #content-atelier-design on second position and second child on first position*/
    .content-atelier-design:nth-child(1) {
        order: 2;
    }
    .content-atelier-design:nth-child(2) {
        order: 1;
    }
    #contentFormCreation {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    #display-josette-before-valid-form {
        width: auto;
        height: auto;
    }
    #display-josette-before-valid-form svg {
        width: 120px;
        height: 200px;
    }
    #contentFormCreation-Content {
        display: flex;
        flex-direction: column;
    }
    .col-2_5 {
        flex: 0 0 auto;
        width: 100% !important;
    }
    .block-affichage-creations {
        margin: 20px 0;
    }
    .displayZoomImage {
        display: flex;
        flex-direction: column;
        width: 100%;
        font-size: 0.8em;
    }
    .displayZoomImage-Content {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .displayZoomImage div {
        padding: 0;
        margin: 0;
    }
    .displayZoomImage div svg {
        width: 60px !important;
        height: 100px !important;
    }
    .imageForZoom {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    #descriptionAtelier {
        display: flex;
        flex-direction: column;
    }
    #dev-forme-content {
        width: 163px !important;
        height: 257px;
        margin-bottom: 50px;
    }
    #dev-forme-content svg {
        width: 163px !important;
        height: 257px;
    }
}

.customLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* Couleur de fond semi-transparente */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    /* Assurez-vous qu'elle est au-dessus des autres éléments */
}

.custom-loader-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.loader-1 {
    width: 48px;
    height: 48px;
    border: 5px solid hotpink;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: flex;
    box-sizing: border-box;
    animation: rotation-1 1s linear infinite;
}

@keyframes rotation-1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loader-2 {
    width: 32px;
    height: 90px;
    display: block;
    margin: 20px auto;
    position: relative;
    border-radius: 50% 50% 0 0;
    border-bottom: 10px solid #FF3D00;
    background-color: #FFF;
    background-image: radial-gradient(ellipse at center, #FFF 34%, #FF3D00 35%, #FF3D00 54%, #FFF 55%), linear-gradient(#FF3D00 10px, transparent 0);
    background-size: 28px 28px;
    background-position: center 20px, center 2px;
    background-repeat: no-repeat;
    box-sizing: border-box;
    animation: animloaderBack-2 1s linear infinite alternate;
}

.loader-2::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0px 15px #FF3D00 inset;
    top: 67px;
}

.loader-2::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 34px;
    height: 34px;
    top: 112%;
    background: radial-gradient(ellipse at center, #ffdf00 8%, rgba(249, 62, 0, 0.6) 24%, rgba(0, 0, 0, 0) 100%);
    border-radius: 50% 50% 0;
    background-repeat: no-repeat;
    background-position: -44px -44px;
    background-size: 100px 100px;
    box-shadow: 4px 4px 12px 0px rgba(255, 61, 0, 0.5);
    box-sizing: border-box;
    animation: animloader-2 1s linear infinite alternate;
}

@keyframes animloaderBack-2 {
    0%,
    30%,
    70% {
        transform: translateY(0px);
    }
    20%,
    40%,
    100% {
        transform: translateY(-5px);
    }
}

@keyframes animloader-2 {
    0% {
        box-shadow: 4px 4px 12px 2px rgba(255, 61, 0, 0.75);
        width: 34px;
        height: 34px;
        background-position: -44px -44px;
        background-size: 100px 100px;
    }
    100% {
        box-shadow: 2px 2px 8px 0px rgba(255, 61, 0, 0.5);
        width: 30px;
        height: 28px;
        background-position: -36px -36px;
        background-size: 80px 80px;
    }
}

.loader-3 {
    width: 120px;
    height: 150px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-image: linear-gradient(#ddd 50%, #bbb 51%), linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd), radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%), radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%), radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%);
    background-position: 0 20px, 45px 0, 8px 6px, 55px 3px, 75px 3px, 95px 3px;
    background-size: 100% 4px, 1px 23px, 30px 8px, 15px 15px, 15px 15px, 15px 15px;
    position: relative;
    border-radius: 6%;
    animation: shake-3 3s ease-in-out infinite;
    transform-origin: 60px 180px;
}

.loader-3:before {
    content: "";
    position: absolute;
    left: 5px;
    top: 100%;
    width: 7px;
    height: 5px;
    background: #aaa;
    border-radius: 0 0 4px 4px;
    box-shadow: 102px 0 #aaa;
}

.loader-3:after {
    content: "";
    position: absolute;
    width: 95px;
    height: 95px;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 20px;
    background-color: #bbdefb;
    background-image: linear-gradient(to right, #0004 0%, #0004 49%, #0000 50%, #0000 100%), linear-gradient(135deg, #64b5f6 50%, #607d8b 51%);
    background-size: 30px 100%, 90px 80px;
    border-radius: 50%;
    background-repeat: repeat, no-repeat;
    background-position: 0 0;
    box-sizing: border-box;
    border: 10px solid #DDD;
    box-shadow: 0 0 0 4px #999 inset, 0 0 6px 6px #0004 inset;
    animation: spin-3 3s ease-in-out infinite;
}

@keyframes spin-3 {
    0% {
        transform: rotate(0deg)
    }
    50% {
        transform: rotate(360deg)
    }
    75% {
        transform: rotate(750deg)
    }
    100% {
        transform: rotate(1800deg)
    }
}

@keyframes shake-3 {
    65%,
    80%,
    88%,
    96% {
        transform: rotate(0.5deg)
    }
    50%,
    75%,
    84%,
    92% {
        transform: rotate(-0.5deg)
    }
    0%,
    50%,
    100% {
        transform: rotate(0)
    }
}

.loader-4 {
    height: 150px;
    width: 100px;
    border-radius: 55px 55px 10px 10px;
    position: relative;
    background: #FF3D00;
    background-image: linear-gradient(0deg, #f63a99 25%, #30dcf6 25%, #30dcf6 25%, #30dcf6 50%, #f2d200 50%, #f2d200 50%, #f2d200 75%, #70ca5c 75%);
    background-position: 0px 0px;
    background-size: auto 175px;
    background-repeat: repeat-y;
    animation: colorShift-4 6s linear infinite;
}

.loader-4:before {
    content: '';
    position: absolute;
    left: 10px;
    bottom: 15px;
    width: 15px;
    height: 100px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.5);
}

.loader-4:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 0);
    box-shadow: 0 15px 2px rgba(0, 0, 0, 0.25) inset;
    width: 32px;
    height: 45px;
    background: #E09C5F;
    border-radius: 0 0 12px 12px;
}

@keyframes colorShift-4 {
    to {
        background-position: 0 175px
    }
}

.loader-5 {
    width: 160px;
    height: 185px;
    position: relative;
    background: #fff;
    border-radius: 100px 100px 0 0;
}

.loader-5:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 125px;
    left: 50%;
    top: 25px;
    transform: translateX(-50%);
    background-image: radial-gradient(circle, #000 48%, transparent 55%), radial-gradient(circle, #000 48%, transparent 55%), radial-gradient(circle, #fff 30%, transparent 45%), radial-gradient(circle, #000 48%, transparent 51%), linear-gradient(#000 20px, transparent 0), linear-gradient(#cfecf9 60px, transparent 0), radial-gradient(circle, #cfecf9 50%, transparent 51%), radial-gradient(circle, #cfecf9 50%, transparent 51%);
    background-repeat: no-repeat;
    background-size: 16px 16px, 16px 16px, 10px 10px, 42px 42px, 12px 3px, 50px 25px, 70px 70px, 70px 70px;
    background-position: 25px 10px, 55px 10px, 36px 44px, 50% 30px, 50% 85px, 50% 50px, 50% 22px, 50% 45px;
    animation: faceLift-5 3s linear infinite alternate;
}

.loader-5:before {
    content: "";
    position: absolute;
    width: 140%;
    height: 125px;
    left: -20%;
    top: 0;
    background-image: radial-gradient(circle, #fff 48%, transparent 50%), radial-gradient(circle, #fff 48%, transparent 50%);
    background-repeat: no-repeat;
    background-size: 65px 65px;
    background-position: 0px 12px, 145px 12px;
    animation: earLift-5 3s linear infinite alternate;
}

@keyframes faceLift-5 {
    0% {
        transform: translateX(-60%);
    }
    100% {
        transform: translateX(-30%);
    }
}

@keyframes earLift-5 {
    0% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0px);
    }
}

.loader-6 {
    position: relative;
    width: 120px;
    height: 14px;
    border-radius: 0 0 15px 15px;
    background-color: #3e494d;
    box-shadow: 0 -1px 4px #5d6063 inset;
    animation: panex-6 0.5s linear alternate infinite;
    transform-origin: 170px 0;
    z-index: 10;
    perspective: 300px;
}

.loader-6::before {
    content: '';
    position: absolute;
    left: calc(100% - 2px);
    top: 0;
    z-index: -2;
    height: 10px;
    width: 70px;
    border-radius: 0 4px 4px 0;
    background-repeat: no-repeat;
    background-image: linear-gradient(#6c4924, #4b2d21), linear-gradient(#4d5457 24px, transparent 0), linear-gradient(#9f9e9e 24px, transparent 0);
    background-size: 50px 10px, 4px 8px, 24px 4px;
    background-position: right center, 17px center, 0px center;
}

.loader-6::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -2;
    transform: translate(-50%, -20px) rotate3d(75, -2, 3, 78deg);
    width: 55px;
    height: 53px;
    background: #fff;
    background-image: radial-gradient(circle 3px, #fff6 90%, transparent 10%), radial-gradient(circle 12px, #ffc400 90%, transparent 10%), radial-gradient(circle 12px, #ffae00 100%, transparent 0);
    background-repeat: no-repeat;
    background-position: -4px -6px, -2px -2px, -1px -1px;
    box-shadow: -2px -3px #0002 inset, 0 0 4px #0003 inset;
    border-radius: 47% 36% 50% 50% / 49% 45% 42% 44%;
    animation: eggRst-6 1s ease-out infinite;
}

@keyframes eggRst-6 {
    0%,
    100% {
        transform: translate(-50%, -20px) rotate3d(90, 0, 0, 90deg);
        opacity: 0;
    }
    10%,
    90% {
        transform: translate(-50%, -30px) rotate3d(90, 0, 0, 90deg);
        opacity: 1;
    }
    25% {
        transform: translate(-50%, -40px) rotate3d(85, 17, 2, 70deg)
    }
    75% {
        transform: translate(-50%, -40px) rotate3d(75, -3, 2, 70deg)
    }
    50% {
        transform: translate(-55%, -50px) rotate3d(75, -8, 3, 50deg)
    }
}

@keyframes panex-6 {
    0% {
        transform: rotate(-5deg)
    }
    100% {
        transform: rotate(10deg)
    }
}

.main-content-background {
    background-image: url('../images/background.png');
    /* filter: invert(100%); */
    height: auto;
}

.main-content {
    filter: invert(100%);
}

.creation-first-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 30px;
}

.creation-first-step-title {
    margin-top: 15px;
    text-align: center;
}

.creation-first-step-subtitle {
    margin-bottom: 15px;
    text-align: center;
}

.creation-first-step-container {
    width: 350px;
    display: flex;
    flex-wrap: wrap;
    /* Permet de passer à la ligne suivante si nécessaire */
    justify-content: space-between;
    /* Espace égal entre les éléments */
    gap: 10px;
    /* Espace entre les éléments, ajustez selon vos besoins */
    margin-bottom: 20px;
}

.creation-first-step-motifs-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 30%;
    box-sizing: border-box;
    margin-bottom: 10px;
    position: relative;
}

.creation-first-step-icon-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}


/*.color-image {*/


/*    border: 5px solid black;*/


/*}*/

.hidden {
    display: none;
    /* Masque les éléments quand cette classe est appliquée */
}

.creation-first-step-button {
    width: 100%;
    height: 50px;
    background-color: #27B4B0;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}


/*.creation-second-step {*/


/*    width: 50% ;*/


/*    margin: auto;*/


/*    display: flex;*/


/*    flex-direction: column;*/


/*    align-items: center;*/


/*    justify-content: center;*/


/*}*/

.creation-second-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 30px;
}

.creation-second-step-content {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 750px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#displayJosetteSecondStepHere {
    width: 325px !important;
    height: 514px !important;
}

#displayJosetteSecondStepHere svg {
    width: 325px !important;
    height: 514px !important;
}

.creation-second-step-sizing-choice {
    width: 50%;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 100px;
}

.creation-second-step-container {
    position: relative;
}

.color-palette {
    position: absolute;
    /*bottom: 65px; !* Ajustez cette valeur pour placer le conteneur où vous le souhaitez *!*/
    /*left: 325px; !* Ajustez cette valeur pour placer le conteneur où vous le souhaitez *!*/
    bottom: 100px;
    /* Ajustez cette valeur pour placer le conteneur où vous le souhaitez */
    left: 0;
    /* Ajustez cette valeur pour placer le conteneur où vous le souhaitez */
    background-color: white;
    /* Fond blanc pour contraster avec les couleurs */
    padding: 10px;
    /* Un peu de padding pour l'espacement */
    border: 1px solid #ddd;
    /* Bordure légère */
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /* Crée 8 colonnes de largeur égale */
    gap: 5px;
    /* Espacement entre les couleurs */
    z-index: 1000;
    /* Pour s'assurer qu'il est au-dessus d'autres éléments */
}

.little-square {
    cursor: pointer;
    /* Changer le curseur pour indiquer que c'est cliquable */
    border: 1px solid #999999;
}

#background-color {
    cursor: pointer;
    /* Indique que cet élément est cliquable */
}

#motif-color {
    cursor: pointer;
    /* Indique que cet élément est cliquable */
}

#details-color {
    cursor: pointer;
    /* Indique que cet élément est cliquable */
}

#displayFormValidation {
    /*background-color: #29b3ae;*/
    background-image: url("../images/rectangle-pas-droit-vert-josette.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: white;
    font-family: Raleway, Serif;
    border: none;
    padding: 10px 20px;
    font-size: 20px;
    /*border-radius: 15px;*/
    margin-top: 40px;
}

#participant_form_submit {
    background-image: url("../images/rectangle-pas-droit-vert-josette-2.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.creation-second-step {
    width: 50%;
    margin: auto;
}

.formValidation {
    width: 50%;
    margin: auto;
    display: flex;
    align-content: center;
    justify-content: center;
}

@media screen and (max-width: 992px) {
    .formValidation {
        width: 100%;
        display: flex;
        align-content: center;
        justify-content: center;
    }
    .creation-second-step {
        width: 100%;
    }
    .creation-second-step-content {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .hovertext {
        position: relative;
        border-bottom: 1px dotted black;
    }
    .hovertext:before {
        content: attr(data-hover);
        visibility: hidden;
        opacity: 0;
        width: max-content;
        background-color: white;
        color: black;
        text-align: center;
        border-radius: 5px;
        padding: 5px 5px;
        transition: opacity ease-in-out;
        position: absolute;
        z-index: 1;
        left: -150px;
        top: 25px;
        /*top: 110%;*/
        width: 200px;
    }
    .hovertext:hover:before {
        opacity: 1;
        visibility: visible;
    }
    .creation-second-step-sizing-choice {
        width: 50%;
        margin: auto;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .intro {
        width: 90%;
    }
}

.josetteFont {
    font-family: "Josette Font", serif;
}

.btn:disabled {
    border: none
}