/* CSS appliqué à toute la page */
*{
    /* border: 1px dashed blue; */
    box-sizing: border-box;
    /* border: 1px dashed white;
    background-color: rgba(0,0,0,0.1); */
}

/* CSS appliqué au body */
body {
    font-family: Inter, Roboto, Arial, Helvetica, sans-serif;
    background-color: #F8FAFC;
    margin: 0;
}

/* CSS appliqué au header */
header {
    background-color: #334155;
    color: #F8FAFC;
    max-width: 1200px;
    margin: auto;
}

header a {
    color: white ;
}

.headerBox {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
}

.logo {
    align-self: center;
    height: 150px;
    width: 150px;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.headerCentralUnit {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    margin-right:5px;
}

.languageBox {
    display: flex;
    align-items: center;
    height: 60px;
    color: #F8FAFC;
    padding: 20px;
    margin-top: 5px;
}

.buttonLanguage {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

.tagLanguage {
    width: 18px;
    height: 18px;
    color: #F8FAFC;
    font-size: 18px;
    font-weight: 100;
}

.triangle {
  width: 10px;
  height: 10px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  color: #F8FAFC;

}

.searchBlock {
    display: flex;
    flex-grow: 2;
    height: 60px;
    width: 40%;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: 5px;
}

.searchForm {
    display: flex;
    align-items: center;
    width: 100%;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.searchBar {
    flex: 1;
    border-radius : 40px;
    border: none;
    /* padding-left: 12px; : a pour effet de coller le bouton connexion */
    height: 30px;
    width: 100%;
}

.searchButton {
    display: inline;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    cursor: pointer;
}

.searchIcon {
    width: 25px;
    height: 25px;
}

.createAccount {
    height: 60px;
    width: 120px;
    align-content: center;
    text-align: center;
    order: 4;
    font-size: 18px;
    font-weight: 100;
    background-color: #334155;
    color: #F8FAFC;
    text-decoration: none;
    border: none;
    margin-top: 5px;
}
.createAccount:hover {
    height: 60px;
    width: 120px;
    align-content: center;
    order: 4;
    font-size: 18px;
    background-color: #F8FAFC;
    color: #334155;
}

.menu {
    display: flex;
    align-content: center;
    align-items: center;
    order: 5;
    border-color: #F8FAFC;
    height: 60px;
    padding: 20px;
}

.menu ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 10px;
}

/* .menu li {

} */

.menuLink {
  text-decoration: none;
  padding: 15px;
  font-size: 18px;
  font-weight: 100;
}

.menuLink:hover {
    background-color: #F8FAFC;
    color: #334155;
}

.CTA1 {
    align-self: center;
    text-align: center;
    align-content: center;
    order:3;
    height: 150px;
    width: 150px;
    background-color: #D1FAE5;
    color: #334155;
    text-decoration: none;
    border-radius: 5%;
    border-color: #000000;
    font-weight: 600;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.CTA1:hover {
    text-decoration: underline;
    background-color: #059364;
    color: #F8FAFC;
}

/* Main */

main {
    max-width: 1200px;
    margin: auto;
    min-height: 80vh;
    background-color: #FFFFFF;
}

.hookSection {
    display:flex;
    flex-direction: column;
}

h1 {
    color: #1E293B;
    text-align: center;
    font-size: 24px;
    padding-top: 20px;
}

hr {
    width: 90%;
    color:#334155;    
}

.slogan {
    color: #475569; 
    font-size: 30px;
    text-align: center;
    font-weight: 800;   
}

.CTA2 {
    align-self: center;
    text-align: center;
    align-content: center;
    height: 80px;
    width: 300px;
    background-color: #D1FAE5;
    color: #334155;
    text-decoration: none;
    border-radius: 5%;
    border-color: #334155;
    font-weight: 600;
    margin-bottom: 10px;
}

.CTA2:hover {
    text-decoration: underline;
    background-color: #059364;
    color: #F8FAFC;
}

.descriptionSection {
    background-color: #F1F5F9;
    color: #1E293B;
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.descriptionParagraph1 {
    text-align: center;
    color: #334155;
    font-size: 24px;
}

.descriptionParagraph2 {
    text-align: center;
    color: #334155;
    font-size: 26px;
    font-weight: 800;
}

.optionsList {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
    gap: 24px;
    padding-top: 20px;
    padding-left: 200px;
    padding-right: 200px;
}

.cardsOptions {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background-color:   #FFFFFF;
    color: #334155;
    font-weight: 600;
    border-color: #334155;
    border-radius: 5px;
    box-shadow: #E2E8F0;
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    padding: 20px;
    overflow: hidden;
    outline-offset: -6px; 
}

    /* Détacher la bordure de la card */
.cardsOptions::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 3px;
    border: 1px solid #334155;
    pointer-events: none;
}

/* Footer */

footer {
    background-color: #334155;
    color: #F8FAFC;
    max-width: 1200px;
    margin: auto;
}

.footerBox {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: space-evenly;
    padding-top: 20px;
}

.aboutBox {
    display:flex;
    justify-content: flex-start;
    flex-direction: column;
    border-color: #F8FAFC;
    width: 200px;
}

.aboutBox span {
    text-decoration: underline;
    font-size: 18px;
}

.aboutLink {
  text-decoration: none;
  color: #F8FAFC;
  font-size: 16px;
  font-weight: 100;
}

.aboutLink:hover {
    text-decoration: underline;
    color: #F8FAFC;
}

.logoFooter {
    height: 100px;
    width: 100px;
    /* padding-top: 10px; */
    margin-top: 10px;
    border-radius: 5px;
}

.socialMedia {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 20px;
    padding-bottom: 20px;
}

.buttonSocialMedia {
    height: 24px;
}

.infoBox {
    display:flex;
    justify-content: flex-start;
    flex-direction: column;
}

.infoBoxLink {
    text-decoration: none;
    color: #F8FAFC;
    font-size: 16px;
    font-weight: 100;
}

.infoBoxLink:hover {
    text-decoration: underline;
    color: #F8FAFC;
}

.infoBox span {
    text-decoration: underline;
    font-size: 18px;
}

.copyrightBox {
    text-align: center;
    border-top: 1px solid white;
    padding: 10px;
    margin: 10px;
}

/* CSS Page Contact */

.contactSection {
    background-color: #FFFFFF;
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.h1Contact {
    display: block;
    color: #475569; 
    font-size: 30px;
    text-align: center;
    font-weight: 800; 
}

.pageParagraphBox {
    padding-bottom: 20px;
}
.contactP {
    display: block;
    font-size: 18px;
}

.contactFormSection {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.formCard {
    max-width: 770px;
}

label {
    font-size: 18px;
}

.inputFields {
    font-size: 17px;
}

.userNameBlock {
    padding-bottom: 10px;
}
.idBlock {
    padding-bottom: 10px;
}

.rowId {
    display: inline;
}

.rowPass {
    padding-bottom: 10px;
}

.messageLabel {
    display: block;
    padding-bottom: 10px;
}

.required {
    color: crimson;
}

.cityAndCodeBlock {
    padding-top: 10px;
    padding-bottom: 10px;
}

#userName, #firstName, #name, #email, #password1, #password2, #phone, #address, #city, #postalCode, #country, #message {
    width: 300px;
}

.addressBlock {
    display: inline;
    gap: 20px;
}

#subject {
    font-size: 17px;
}

#message {
    width: 770px;
}

.emailBlock, .phoneBlock, .rowAddress, .rowCountry, .subjectBlock, .messageBlock, .submitFormButton {
    padding-top: 10px;
    padding-bottom: 10px;
}

.submitFormButton {
    display: flex;
    justify-content: center;
}
.submitButton {
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    margin-bottom: 30px;
    background-color: #475569;
    color:  #F8FAFC;
    border-radius: 5px;
    border-color: #475569;
}

.submitButton:hover {
    background-color: #059364;
    color: #F8FAFC;
    border-color: #475569;
    /* Couleur alternative : 
    background-color: #F1F5F9;
    color: #1E293B; */    
}

/* CSS de Page Wishlist */

.h1Wishlist {
    display: block;
    color: #475569; 
    font-size: 30px;
    text-align: center;
    font-weight: 800; 
}

.wishlistBanner {
  width: 100%;
  max-width: 1200px;
  height: 400px;
  object-fit: cover;
  object-position: center;
}

.wishlistDescriptionSection {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 40px 60px 40px 60px;
}

.wishlistDescriptionParagraph {
    color: #475569;
}

.personalDataSection {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    background-color: #F1F5F9;
    color: #1E293B;
    border: 1px solid #1E293B;
    margin: 0px 10px 0px 10px;
    /* margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 20px; */
}

.eventDataParagraph {
    color: #475569;
}

.wishlistSeparation {
    color: #1E293B;
}

.idDataSection {
    color: #475569;
}

.wishlistProductsSection {
    display: flex;
    /* flex-wrap: wrap; */
    flex-direction: column;
    background-color: #FFFFFF;
}

.filterBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
    gap: 20px;
}

/* .filterParagraph {
    display: inline;
    color: #334155;
    border: 1px solid #334155;
    padding: 20px 60px 20px 60px;
} */

#filterCategory {
    display: inline;
    text-align: justify;
    height: 60px;
    background-color: #FFFFFF;
    color: #334155;
    font-size: 16px;
    border: 1px solid #334155;
    padding: 20px 60px 20px 60px; 
    margin-top: 10px;  
}

#sortItems {
    display: inline;
    height: 60px;
    background-color: #FFFFFF;
    color: #334155;
    font-size: 16px;
    border: 1px solid #334155;
    padding: 20px 60px 20px 60px;
    margin-top: 10px;     
}

.filterLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}   

.sortItemsLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;        
}

/* TODO Régler le problème de style d'alignement de la box */
.wishlistProductsSectionCardBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.productCard {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    max-width: 100%;
    background-color: #F1F5F9;
    color: #1E293B;
    border: 1px solid #1E293B;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
}

.productCardImage {
    display: flex;
    align-items: center;
    width: 125px;
}

.productCardImage img {
    width: 100%;
    /* Recadre l'image pour remplir le carré       */
    object-fit: cover;
    object-position: left;
    border-radius: 5px;
    box-shadow:1px 1px 1px 1px #1E293B;
    background-color: #FFFFFF;
    padding: 1px;
}

.productCardDetails {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

}

.productCardDetailsNameAndCat {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* padding: 10px 0px 0px 0px; */
}

.productCardDetailsName {
    display: inline-block;
    font-size: 18px;
    width: 500px;
    text-decoration: underline;
    color: #1E293B;
    /* height: 20px; */

}

.productCardDetailsCategory {
    margin: 0;
    text-align:center;
    background-color: #FFFFFF;
    font-size: 17px;
    border-radius: 5px;
    border: 1px solid #1E293B;
    padding: 10px 10px 10px 10px;
    margin-left: 5px;
    /* height: 20px; */
}

.productCardDetailsShopAndDetails {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.productCardDetailsShop {
    margin: 0;
    font-size: 17px;
    color: #1E293B;
}

.productCardDetailsDescription {
    max-width : 600px;
    text-align: justify;
    font-size: 18px;
    color: #1E293B;
}

.productCardDetailsModifyAndMove {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
}

.productCardDetailsModifyAndMove button {
    background-color: #FFFFFF;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #1E293B;
    padding: 10px 10px 10px 10px;
}
.productCardDetailsModifyAndMove button:hover {
    text-decoration: underline;
}
/*
.productCardDetailsMoveButton {

} */

.productCardNumbers {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.productCardNumbersDelete {
    display: flex;
    justify-content: center;
    align-self: flex-start;
    align-self: center;
}

.productCardNumbersDeleteButton {
    background-color: #FFFFFF;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #1E293B;
    padding: 10px 10px 10px 10px;
}

.productCardNumbersDeleteButton:hover {
    text-decoration: underline;
}

.productCardNumbersPriorityAndPrice {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    width: 270px;
    gap: 10px;
}

.productCardNumbersPriorityLabel {
    /* CSS pour rendre Priority invisible */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.productCardNumbersPriority {
    height: 40px;
    width: 180px;
    background-color: #FFFFFF;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #1E293B;
    padding: 10px 5px 10px 5px;
}

.productCardNumbersPrice {
    background-color: #FFFFFF;
    font-size: 16px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #1E293B;
    padding: 10px 5px 10px 5px;

}

.productCardNumbersNumberAndBuy {
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap: 10px;
}

.productCardNumbersNumber {
    width: 180px;
    border-radius: 5px;
    border: 1px solid #1E293B;   
}

.productCardNumbersNumberLabel {
    /* CSS pour rendre Label invisible */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.productCardNumbersBuy {
    background-color: #059364;
    color: #F8FAFC;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #1E293B;
    padding: 10px 5px 10px 5px;   
}

.productCardDrag {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.dragIcons {
    height:20px;
}

/* Responsive pour mobile */
@media screen and (max-width: 645px) {

    /* Header mobile */

.headerBox {
    flex-direction: column;
}

.headerCentralUnit {
    flex-direction: column;
    align-items: center;
}

.languageBox {
    height: 15px;
}

.searchBlock {
    width: 70%;
}

    /* Main mobile */

.optionsList {
    padding-left: 80px;
    padding-right: 80px;
}

    /* Footer mobile */

.footerBox {
    flex-direction: column;
    align-items: center;
}

.footerBox ul{
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding-left: 20px;
    text-align: left;
}

.aboutBox span {
    text-align: center;
}

.infoBox span {
    text-align: center;
}

.aboutBox,
.infoBox {
    width: 260px;
    text-align: left;
}

.aboutBoxList {
    padding-top: 20px;
    padding-bottom: 20px;
}

.infoBoxList {
    padding-top: 20px;
    padding-bottom: 20px;
}

    /* CSS page contact Mobile */

.idBlock {
    padding-bottom: 0px;
}


.rowId {
    display: block;
}

label {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 18px;
}

.cityAndCodeBlock {
    padding: 0px;
}

#message {
    width: 300px;
}

.emailBlock, .phoneBlock, .rowAddress, .subjectBlock, .messageBlock, .submitFormButton {
    padding-top: 0px;
    padding-bottom: 0px;
}

.submitButton {
    margin-top: 10px;
}

    /* CSS Page Wishlist Mobile */

.wishlistDescriptionSection {
    padding: 40px 30px 40px 30px;
}
.personalDataSection {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: #F1F5F9;
    color: #1E293B;
}

.eventDataParagraph {
    padding: 0px 20px 0px 20px;
}

.wishlistSeparation {
    color: #F1F5F9;
}

.idDataParagraph {
    padding: 0px 20px 0px 20px;
}

.filterBox {
    justify-content: center;
    gap: 10px;
}

.filterParagraph {
    padding: 20px 40px 20px 40px;
}

.productCard {
    padding: 25px 10px 25px 10px;;
}

.productCardImage {
    width:100% ;
    justify-content: center;
    /* margin-top: 10px; */
}

.productCardDetailsName {
    width: 100%;
    margin-top: 10px;
}

.productCardDetailsName a {
    height: 19px;
}

.productCardDetailsDescription {
    width : 100%;
}

.productCardDetailsModifyAndMove {
    justify-content: center;
    padding: 10px 0px 40px 0px;
}

.productCardDrag {
    border : 1px solid #1E293B;
    padding : 0px 5px 0px 5px;
}

    /* Mode sombre mobile */

.dark .wishlistSeparation {
    color: #29323f;
}

.dark .productCardDrag {
    border : 1px solid #FFFFFF;
}

}

/* Responsive layout intermédiaire */
@media (min-width: 646px) and (max-width: 1190px) {

.headerBox {
    flex-direction: column;
    align-items: center;
}

.headerCentralUnit {
    justify-content: center;
}

/* CSS Page Contact layout intermédiaire */

.rowId {
    display: block;
}

label {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 18px;
}

.inputFields {
    padding-bottom: 10px;
}

.cityAndCodeBlock {
    padding: 0px;
}

#message {
    width: 300px;
}

.emailBlock, .phoneBlock, .rowAddress, .subjectBlock, .messageBlock, .submitFormButton {
    padding-top: 0px;
    padding-bottom: 0px;
}

.submitButton {
    margin-top: 10px;
}

.productCardNumbers {
    margin-top: 15px;
}

.productCardDetailsModifyAndMove {
    padding: 10px 0px 40px 0px;
}

}

/* Mode sombre */

.dark body {
    background-color: #020617;
}

.dark header {
    /* background-color: #111827; */
    /* background-color:#283144;
    background-color:#475569;
    background-color:#334155; */
    background-color: #1f273a;
    border : 1px solid #F8FAFC;
    /* border-color: #F8FAFC; */
}

.dark header a {
    color: #F1F5F9;
}

.dark .createAccount {
    background-color: #1f273a;
}

.dark .createAccount:hover {
    background-color: #F1F5F9;
    color: #1f273a;
}

.dark .menu {
    border-color: #CBD5E1;
}

.dark .menuLink:hover {
    background-color: #F1F5F9; 
    color: #1f273a;
}

.dark .CTA1 {
    background-color: #064E3B;
    color: #F1F5F9 ;
    border-color: #1f273a;
}

.dark .CTA1:hover {
    background-color: #10B981;
    color: #1f273a;
}

.dark main {
    /* background-color: #0B0F1A; */
    background-color: #111827;
    border : 1px solid #F8FAFC;
}

.dark h1 {
    color: #CBD5E1;
}

.dark hr {
    color: #334155;
}

.dark .slogan {
    color: #94A3B8;
}

.dark .CTA2 {
    background-color: #064E3B;
    color: #F1F5F9 ;
    border-color: #1f273a
}

.dark .CTA2:hover {
    background-color: #10B981;
    color: #1f273a;
}

.dark .descriptionSection {
    /* background-color: #1E293B; */
    background-color: #29323f;
    color: #29323b;
}

.dark .descriptionParagraph1 {
    color: #CBD5E1;
}

.dark .descriptionParagraph2 {
    color: #CBD5E1;
}

.dark .cardsOptions {
    background-color: #0B0F1A;
    color: #F1F5F9;
    box-shadow: #0B0F1A;
    border-color: #29323f
}

.dark .cardsOptions::before {
    border: 1px solid #29323f;
}

.dark footer {
    background-color: #1f273a;
}

.dark .aboutBox {
    border-color: #CBD5E1;
}

.dark .copyrightBox {
    border-top: 1px solid #F1F5F9;
}

.dark .contactSection {
    background-color: #29323f;
    color:#F1F5F9;
}

.dark .contactFormSection {
    background-color: #29323f;
    color:#F1F5F9;    
}

.dark .h1Contact {
    color: #94A3B8;
}

.dark .submitButton {
    background-color: #F1F5F9;
    color: #29323f;
    border-color: #29323f;
}

.dark .submitButton:hover {
    background-color: #10B981;
    color:#F1F5F9;
    border-color: #29323f;
}

.dark .h1Wishlist {
    color: #94A3B8;
}

.dark .wishlistDescriptionParagraph {
    color: #94A3B8;
}

.dark .personalDataSection{
    background-color: #29323f;
    color: #F1F5F9;
    border: 1px solid #F1F5F9;
}

.dark .eventDataParagraph {
    color: #94A3B8;
}

.dark .wishlistSeparation {
    color: #CBD5E1;
}

.dark .idDataSection {
    color: #94A3B8;
}

.dark .wishlistProductsSection {
    background-color: #0B0F1A;
}

.dark #filterCategory{
    background-color: #0B0F1A;
    color: #CBD5E1;
    /* border: 1px solid #29323f; */
    border: 1px solid #F1F5F9;
}

.dark #sortItems{
    background-color: #0B0F1A;
    color: #CBD5E1;
    /* border: 1px solid #29323f; */
    border: 1px solid #F1F5F9;
}

.dark .productCard {
    background-color: #29323f;
    color: #F1F5F9;
    border: 1px solid #F1F5F9;
    /* border: 1px solid #1E293B; */
}

.dark .productCardImage img {
    box-shadow:1px 1px 1px 1px #0B0F1A;
    background-color: #29323f;
}

.dark .productCardDetailsName {
    color: #F1F5F9;
}

.dark .productCardDetailsCategory {
    background-color: #29323f;
    border: 1px solid #FFFFFF;
}

.dark .productCardDetailsShop {
    color: #CBD5E1;
}

.dark .productCardDetailsDescription {
    color: #94A3B8;
}

.dark .productCardDetailsModifyAndMove button {
    background-color: #29323f;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
}

.dark .productCardNumbersDeleteButton {
    background-color: #29323f;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
}

.dark .productCardNumbersPriority {
    background-color: #29323f;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
}

.dark .productCardNumbersPrice {
    background-color: #29323f;
    border: 1px solid #FFFFFF;    
}

.dark .productCardNumbersNumber {
    border: 1px solid #FFFFFF;     
}

.dark .productCardNumbersBuy {
    background-color: #10B981;
    color: #F1F5F9;
    border: 1px solid #FFFFFF;
}

.dark .productCardDrag {
    border : 1px solid #FFFFFF;
}

.dark .dragIcons {
    fill: #FFFFFF;
}













/* Proposition palette 2

Fond principal        #F8FAFC   (gris très clair)
Fond section secondaire #F1F5F9
Fond cartes           #FFFFFF
Bordures              #E2E8F0

Texte principal       #1E293B
Texte secondaire      #475569
Texte section 2ndaire   #1E293B

Fond header           #334155   (gris bleuté foncé)
Texte header          #F8FAFC

Fond bouton           #475569   (gris bleuté)
Texte                 #F8FAFC
Contraste             7.4:1 ✅ WCAG AAA

Fond bouton           #64748B   (gris bleuté moyen)
Texte                 #FFFFFF
Contraste             4.9:1 ✅ WCAG AA

Header CTA hover : #334155
Body CTA hover   : #475569

Header CTA alternatif : #D1FAE5
Texte : #334155

*/

/* Propositions couleurs 1 */
/* Bleu principal        #2563EB
Bleu clair (hover)    #3B82F6
Gris très clair (fond)#F9FAFB
Gris clair (cartes)   #E5E7EB
Gris foncé (texte)    #1F2937
Vert action (succès)  #22C55E */

/* Bouton hover CTA :
    background-color: #04724D;
    background-color: #3A846B;
    background-color: #508976;
    background-color: #72BBA3; */

/* Fond général        → Gris très clair
Header / navbar     → Bleu principal
Cartes produits     → Blanc
Texte principal     → Gris foncé
Boutons principaux  → Bleu principal
Boutons secondaires → Gris clair
Actions positives   → Vert */

/* Palettes complètes */

/* --Palette mode clair-- 

- Fonds : 7 couleurs différentes
Fond body : #F8FAFC
Fond main : #FFFFFF
Fond header : #334155
Fond footer : #334155
Fond contactSection : #FFFFFF
Fond descriptionSection : #F1F5F9
Fond productCard : #F1F5F9
Fond menuLink:hover #F8FAFC : 
Fond bouton 1 :
Fond bouton 2 :
Fond bouton hover :
Fond bouton CTA : #D1FAE5
Fond bouton CTA hover : #059364
Fond bouton createAccount : #334155
Fond bouton createAccound:hover : #F8FAFC
Fond cardsOptions : #FFFFFF
Fond contactSection : #FFFFFF
Fond submitButton : #475569
Fond submitButton:hover : #059364
Fond personalDataSection : #F1F5F9
Fond wishlitProductsSection : #FFFFFF
Fond filterCategory : #FFFFFF
Fond sortItems : #FFFFFF
Fond productCardImage img : #FFFFFF
Fond productCardsCategory : #FFFFFF
Fond productCardDetailsModifyAndMove button : #FFFFFF
Fond productCardNumbersDeleteButton : #FFFFFF
Fond productCardNumbersPriority : #FFFFFF
Fond productCardNumbersPrice : #FFFFFF
Fond productCardNumbersBuy : #059364
Fond personalDataSection : #F1F5F9


- Textes : 5 couleurs différentes
Texte principal :
Texte secondaire :
Texte tertiaire :
Texte header : #F8FAFC
Texte header a : white
Texte languageBox : #F8FAFC
Texte tagLanguage : #F8FAFC
Triangle : #F8FAFC
Texte menu:hover : #334155
Texte bouton createAccount : #F8FAFC
Texte bouton createAccount:hover : #334155
Texte bouton CTA : #334155
Texte bouton CTA:hover : #F8FAFC
Texte footer : #F8FAFC
Texte h1 : #1E293B
Texte slogan :#475569
Texte descriptionSection : #1E293B
Texte descriptionParagraph : #334155
Texte descriptionParagraph2 : #334155
Texte cardsOptions : #334155
Texte aboutLink & aboutLink:hover : #F8FAFC
Texte infoBoxLink& infoBoxLink:hover #F8FAFC
Texte h1Contact : #475569
Texte required : crimson
Texte submitButton : #F8FAFC
Texte submitButton:hover : #F8FAFC
Texte h1Wishlist : #475569
Texte wishlistDescriptionParagraph : #475569
Texte personalDataSection : #1E293B
Texte eventDataParagraph : #475569
Texte wishlistSeparation : #1E293B
Texte idDataSection : #475569
Texte filterCategory : #334155
Texte sortItems : #334155
Texte productCard : #1E293B
Texte productCardDetailsName : #1E293B
Texte productCardDetailsShop : #1E293B
Texte productCardDetailsDescription : #1E293B
Texte productCardNumbersBuy : #F8FAFC
Texte personalDataSection : #1E293B
 

- Bordures et éléments : 8 couleurs différentes
Bordure menu : #F8FAFC
Bordure CTA : #000000
Border aboutBox #F8FAFC : 
Bordure CTA2 : #334155
Bordure cardsOptions : #334155
Hr : #334155
Box-shadow cardsOptions : #E2E8F0
Bordure cardsOptions::before : #334155
Bordure copyrightBox : white
Bordure submitButton : #475569
Bordure submitButton:hover : #475569
Bordure personalDataSection : #1E293B
Bordure filterCategory : #334155
Bordure sortItems : #334155
Bordure productCard : #1E293B
Box-shadow productCardImage img : #1E293B
Bordure productCardDetailsCategory : #1E293B
Bordure productCardDetailsModifyAndMove button : #1E293B
Bordure productCardNumbersDeleteButton : #1E293B
Bordure productCardNumbersPriority : #1E293B
Bordure productCardNumbersPrice : #1E293B
Bordure productCardNumbersNumber : #1E293B
Bordure productCardNumbersBuy : #1E293B
wishlistSeparation : #F1F5F9
Bordure productCardDrag : #1E293B


--Palette mode sombre--

- Fonds : 7 couleurs différentes
Body : #020617
Main : #0B0F1A
Header : #111827
Footer : #111827
ContactSection : #0B0F1A
DescriptionSection : #29323f
ProductCard : #29323f
Menu:hover #F8FAFC → #29323f
Bouton 1 : #111827
Bouton 2 : #1E293B
Bouton hover : #334155
Bouton CTA : #064E3B
Bouton CTA hover : #10B981
Bouton createAccount : #111827
Bouton createAccount:hover : #F1F5F9
CardsOptions : #0B0F1A
SubmitButton : #29323f
SubmitButton:hover : #10B981
PersonalDataSection : #29323f
WishlistProductsSection : #0B0F1A
FilterCategory : #0B0F1A
SortItems : #0B0F1A
ProductCardImage img : #29323f
ProductCardsCategory : #29323f
productCardDetailsModifyAndMove button : #29323f
productCardNumbersDeleteButton : #29323f
productCardNumbersPriority : #29323f
productCardNumbersPrice : #F1F5F9
productCardNumbersBuy : #10B981
PersonalDataSection : #29323f


-Textes 5 couleurs différentes

Texte principal : #F1F5F9
Texte secondaire : #CBD5E1
Texte tertiaire / descriptions : #94A3B8
Texte header : #F8FAFC
Texte header a : #F1F5F9
Texte languageBox : #F8FAFC
Texte tagLanguage : #F8FAFC
Triangle : #F8FAFC
Texte menu:hover : #F1F5F9
Texte bouton createAccount : #F8FAFC
Texte bouton createAccount:hover : #111827
Texte bouton CTA : #F1F5F9
Texte bouton CTA:hover : #111827
Texte footer : #F8FAFC
Texte h1 : #CBD5E1
Texte slogan : #94A3B8
Texte descriptionSection : #F1F5F9
Texte descriptionParagraph : #CBD5E1
Texte descriptionParagraph2 : #CBD5E1
Texte cardsOptions : #F1F5F9
Texte aboutLink & aboutLink:hover : #F8FAFC
Texte infoBoxLink & infoBoxLink:hover : #F8FAFC
Texte h1Contact : #94A3B8
Texte required : #EF4444
Texte submitButton : #F1F5F9
Texte submitButton:hover : #F1F5F9
Texte h1Wishlist : #94A3B8
Texte wishlistDescriptionParagraph : #94A3B8
Texte personalDataSection : #F1F5F9
Texte eventDataParagraph : #94A3B8
Texte wishlistSeparation : #CBD5E1
Texte idDataSection : #94A3B8
Texte filterCategory : #CBD5E1
Texte sortItems : #CBD5E1
Texte productCard : #F1F5F9
Texte productCardDetailsName : #F1F5F9
Texte productCardDetailsShop : #CBD5E1
Texte productCardDetailsDescription : #94A3B8
Texte productCardNumbersBuy : #F1F5F9
Texte personalDataSection : #F1F5F9

- Bordures et éléments : 8 couleurs

Bordure menu : #CBD5E1
Bordure CTA : #111827
Border aboutBox : #CBD5E1
Bordure CTA2 : #111827
Bordure cardsOptions : #29323f
Hr : #334155
Box-shadow cardsOptions : #0B0F1A
Bordure cardsOptions::before : #29323f
Bordure copyrightBox : #F1F5F9
Bordure submitButton : #29323f
Bordure submitButton:hover : #29323f
Bordure personalDataSection : #29323f
Bordure filterCategory : #29323f
Bordure sortItems : #29323f
Bordure productCard : #29323f
Box-shadow productCardImage img : #0B0F1A
Bordure productCardDetailsCategory : #29323f
Bordure productCardDetailsModifyAndMove button : #29323f
Bordure productCardNumbersDeleteButton : #29323f
Bordure productCardNumbersPriority : #29323f
Bordure productCardNumbersPrice : #29323f
Bordure productCardNumbersNumber : #29323f
Bordure productCardNumbersBuy : #29323f
WishlistSeparation : #29323f
Bordure productCardDrag : #29323f
*/