/* ****************************************************** */
/* *********************** FONTS ************************ */
/* ****************************************************** */
@charset "UTF-8";
@import url('bootstrap-icons.css');
@import url('https://fonts.googleapis.com/css2?family=Caesar+Dressing&display=swap');
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
/* ***** PALETTE ***** */
:root {
    --creme-light: #F8CCAE;  /* Créme 1 */
    --creme: #f4a670; /* Créme 2 */
    --creme-dark: #6b462d;   /* Créme 3 */
    --creme-gradient: linear-gradient(360deg,rgba(248, 204, 174, 1) 0%, rgba(244, 166, 112, 1) 100%);
    --violet:  #763ff9;
    --violet-dark: #6000ea;
    --violet-gradient: linear-gradient(0deg,rgba(164, 125, 255, 1) 0%, rgba(96, 0, 234, 1) 100%);
    --mixte-gradient: linear-gradient(180deg,rgba(252, 157, 157, 1) 0%, rgba(156, 0, 234, 1) 100%);
    --light: #f5f5f5;
    --grey: #b7b7b7;
    --grey-light: #E3E3E3;
    --grey-dark: #373737;
    --grey-gradient: linear-gradient(180deg,rgba(230, 230, 230, 1) 0%, rgba(196, 196, 196, 1) 100%);
    --dark: #808080;
    --white: #FFFFFF;
    --red: #d90c0c;
}
.or1 {background-color: #FFF4ED;}
.or2 {background-color: #FFE5D3;}
.or5 {background-color: #f5a670;}
/* ***** Font ***** */
.a1310ad1 {font-family: 'Montserrat';}
.a132303d {font-family: 'Kanit';}
.a1323011 {font-family: "Exo 2", sans-serif;}
.a1323022 {font-family: "Caesar Dressing", system-ui;}
.a1323021 {font-family: "UnifrakturMaguntia", cursive;}
/* ******************************** Carré ******************************** */
span.violet {background-color: var(--violet); color: white; padding: 0.3rem 0.5rem; border-radius: 4px;}
span.creme {background-color: var(--creme); color: var(--creme-dark); padding: 0.3rem 0.5rem; border-radius: 4px;}

/* ******************************** FORM ******************************** */
form { display: flex; flex-direction: column; gap: 0.75rem;}
form:not(#a1310aaa, #filterForm, #formSearch, #modalUploadProd, #formAddProd) {max-width: 600px;margin: auto;padding:1rem;}
form > * { width: 100%; box-sizing: border-box; }
input:not([type="radio"]), textarea, select { display: block; width: 100%; box-sizing: border-box; margin: 0; box-shadow: rgba(0,0,0,0.15) 0px 2px 8px; border: none; outline: none; background-color: #fff;font-size: 1rem; }
input[type="submit"] { cursor: pointer; background-color: #763ff9; color: #fff; border-radius: 4px; padding: 0.5rem 1rem; font-size: 1rem; border: none; transition: background 0.2s; }
input[type="date"]::-webkit-calendar-picker-indicator { background-color: #b4c6d5; border-radius: 4px; cursor: pointer; }
input[type="hidden"] { display: none; }
.form-check-label { opacity: 1; }
input:-webkit-autofill { background-color: inherit; }
li, i, span i, a img, button, img, .bi, .p-liste p {
  -webkit-user-select: none; /* Chrome, Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Edge */
  user-select: none;
  -webkit-user-drag: none;
}
a, li, i, span i, a img, button, img {caret-color: transparent;}
.form-select:hover{cursor: pointer;}
.f-label input:after{content : "*";}
.f-label {font-family: Roboto, Oxygen, Ubuntu, sans-serif;}
.f-item:not(.f-contact .f-item, #formAddProd) {display: flex;margin: auto;justify-content:center;flex-direction: column;max-width: 400px;padding: 0 .5rem;position: relative;}
.f-contact .f-item {display: flex;flex-direction: column;padding: 0 .5rem;position: relative;width:100%;max-width:600px;}
.f-select {min-height: 45px;border: 1px solid #b4c6d5;}
.f-field:placeholder-shown~.f-label,  .f-select:invalid~.f-label, .f-textarea:placeholder-shown~.f-label {font-size: 1rem;transform: translate3d(0, .5rem, 0);}
.f-field:focus~.f-label,  .f-label, .f-textarea:focus~.f-label {
    color: #6b7680;
    cursor: text;
    display: flex;
    font-size: .8125rem;
    font-weight: 500;
    left: 1.2rem;
    letter-spacing: .02rem;
    line-height: 1.2;
    margin: auto;
    overflow: hidden;
    padding-top: .3125rem;
    padding-left: 0.5rem;
    pointer-events: none;
    position: absolute;
    right: 1.5625rem;
    text-overflow: ellipsis;
    top: 0;
    transform: translate3d(0, 1px, 0);
    transition: all .125s ease-in-out;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
}
.f-field {
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    border: 1px solid #b4c6d5;
    border-radius: 50px;
    color: #000;
    font-size: 1rem;
    min-height: 3rem;
    padding: 1rem 1rem 0;
    position: relative;
    transition: all .2s ease-in-out;
    width: 100%;
}
.f-textarea {
  background: #fff;
  border: 1px solid #b4c6d5;
  border-radius: .4375rem;
  font-size: 1rem;
  height: 9rem;
  margin: 0;
  min-height: 3.75rem;
  padding: 1.5rem .8125rem 0;
  resize: vertical;
  width: 100%;
}
/* Box upload */
.f-upload {background: #fff;min-height: 1rem;border: 1px solid #b4c6d5;border-radius: .4375rem;margin: auto;}
/* password */
.f-oeil{position: absolute;top: 0;right:4rem;height: 100%;width: 1.2em;z-index: 10;}
.f-generator{position: absolute;top: 0;right:1.2rem;color:red;height: 100%;width: 1.5em;z-index: 10;}
.f-d-pass img:hover{transform: scale(1.2);}
.checklist {list-style: none;}
.f-pass:focus ~ .password-checklist {opacity: 1;transform: translateY(0);}
.password-input-box {position: relative;width: 300px;height: 40px;}
.password-checklist {position: absolute;top: calc(100% + 10px);padding: 20px 30px;background: #fff;border-radius: 5px;text-align: left;
  opacity: 0;pointer-events: none;transform: translateY(20px);transition: 0.5s ease;z-index:10;box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;}
/* file page contact */
#d_file {display: none;height: 80px;border: 1px dashed #5e5e5e;border-radius: 4px;max-width:400px;margin:1rem auto;padding: 1rem;}
.formGuest {margin: 8rem auto;}
/* panier form promo */
#f-inputpromo {display: none;}
/* ******************************** CAPTCHA ******************************** */
/* captcha contact/register */
#a1320032, #a13202dd {display: none;}
#a1320032 {margin: auto;max-width: 400px;}
.a1320133 {margin: auto;}
/* BG */
#a13201d1 {padding: 2rem 0 0.5rem 0;border-radius: 12px;
background: linear-gradient(320deg, rgba(219, 217, 217, 1) 0%, rgba(219, 217, 217, 1) 15%, rgba(232, 232, 232, 1) 15%, rgba(232, 232, 232, 1) 30%,
rgba(199, 199, 199, 1) 30%, rgba(199, 199, 199, 1) 45%, rgba(219, 217, 217, 1) 45%, rgba(219, 217, 217, 1) 60%, rgba(232, 232, 232, 1) 60%,
rgba(232, 232, 232, 1) 75%, rgba(199, 199, 199, 1) 75%, rgba(199, 199, 199, 1) 90%, rgba(219, 217, 217, 1) 90%);}
/* ******************************** TOOLTIP ******************************** */
.toop {position: absolute;right: 1rem;}
.tooltip {position: relative;display: inline-block;border-bottom: 1px dotted black;}
.tooltip .tooltiptext {visibility: hidden;width: 120px;background-color: black;color: #fff;
  text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;}
.tooltip:hover .tooltiptext {visibility: visible;}
/* ******************************** FONT ******************************** */
/* h1 */
h1 span.bg {background: var(--violet-dark);border-radius: 4px;color:white;padding: 0.5rem;}

.a1320aa0 h2 span:(.propa), .a1320aa0 h1 span{background-color: var(--violet-dark);color:white;padding: 0.3rem 0.5rem;border-radius: 4px;}
/* titre prodd accueil */
.txtTitle {text-transform: ;font-weight: 600;color: #565656;font-size: 0.9rem;}
.text-justify  { text-align: justify !important; }
.text b{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.min {font-size: 0.7rem;}
.mini {font-size: 0.8rem;}
.norm {font-size:1rem;}
.moyen {font-size: 1.2rem;}
.max {font-size: 1.5rem;}
.big {font-size: 3rem;}
.fontNormal {font-family: "Montserrat", sans-serif;}
.fontInter {font-family: "Inter", sans-serif;}
.fontKanit {font-family: "Kanit", sans-serif;}
.fontfractur {font-family: "UnifrakturCook", serif;}
.txtSelect {-webkit-user-select: text;-ms-user-select: text;-moz-user-select: text;user-select: text;}
.txtlong{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.ls2 {letter-spacing: 2px;}
/* titre menu hc */
.h2hc {font-size: 1.5rem;font-weight: 600;line-height: 1.5;margin-bottom: 0.5rem;text-transform: capitalize;transition: color 0.3s ease 0s;}
/* END FONT */
/* Btn */
.scaBtn {transition: transform 0.3s ease, box-shadow 0.3s ease;}
.scaBtn:hover {transform: scale(1.02);box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* ombre */}
button, .pille {border-radius: 50px;}
button[data-type="noBtn"] {outline: none;border: 0;}
button[data-type="noBtn"]:hover {color:red;}
select, option {cursor: pointer;}
/* btn violet => hover orange => secondaire */
.btn01 {margin: auto;display:inline-block;background: #763ff9;color: #fff;padding: 0.5rem 1.5rem;border: none;border-radius: 6px;font-weight: 600;cursor: pointer;transition: background 0.3s ease;}
.btn01:hover {background: #f4a670;color: white;}
/* btn orange => hover violet => primaire & submit */
.btn02 {margin: auto;display:inline-block;background: #f4a670;color: #fff;padding: 0.5rem 1.5rem;border: none;border-radius: 6px;font-weight: 600;cursor: pointer;transition: background 0.3s ease;}
.btn02:hover {background: #763ff9;color: white;}
.btn02.active {background: #763ff9; /* violet actif */}
/* btn blanc => hover orange => autre */
.btn03 {margin: auto;display:inline-block;background: #fff;color: #7e7e7e;padding: 0.5rem 1.5rem;border: 1px solid #7e7e7e;border-radius: 6px;font-weight: 600;cursor: pointer;transition: background 0.3s ease;}
.btn03:hover {background: #f4a670;color: white;border:1px solid #fff;}
/* btn marron => hover creme */
.btn04 {display:inline-block;background: var(--creme-dark);color:var(--white);
border-radius: 6px;font-weight: 600;cursor: pointer;transition: background 0.3s ease;}
.btn04:hover {background: #f4a670;color: white;}
.btn05 {display:inline-block;background: var(--creme-light);color:var(--white);
border-radius: 6px;font-weight: 600;cursor: pointer;transition: background 0.3s ease;}
.btn05:hover {background: var(--creme-dark);color: white;}
/* BTN move dyna ico */
/* check rond */
.a1310ad5::after {font-family:'Bootstrap-icons';content: "\F26B";}
/* eye */
.a1310ad7::after{font-family:'Bootstrap-icons';content: "\F341";}
/* archive */
.a1310ad8::after{font-family:'Bootstrap-icons';content: "\F10D";}
/* letter @ */
.a132daad::after{font-family:'Bootstrap-icons';content: "\F84C";}
/* Q search loupe */
.a1323102::after{font-family:'Bootstrap-icons';content: "\F52A";}
/* En savoir plus accueil => eyes */
.a132d3d3::after{font-family:'Bootstrap-icons';content: "\F341";font-size: 20px;}
.btn-addPanier, .btnAlertProd, .btn-wishlist {border:none;background: none;}
.btn-wishlist, .btn-addPanier, .btn-view {color:#5a5a5a;}
.item-in, .item-in:hover {color:red;}
.btn-wishlist .out {display: none;}
.btn:focus {outline: 0;box-shadow: 0 0 0 0;}
/* add panier wlist */
.addPanier, .delOneProd {cursor: pointer;}
.item-add {color:#198755;}
/* add panier */
.a1320216 span:not(.btn-wishlist) {display: inline-block;background-color: #afafaf;width: 40px;height: 40px;border-radius: 50%;padding: 10px;}
.a1322222 .i-panier {font-size: 20px;line-height: 1;}
.a1322222 .bi-cart-check-fill {color:white;}
.a1322222:hover, #a1320d23 .card:hover {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
/* BTN rond move ico */
.a1310a21, .a1310a21:active { outline-style: none; overflow: hidden;
background-color: #763ff9; color: #fff; border-radius: 50px; border:none;
position:relative ; height: 50px; width: 120px;}
.a1310a21 span {position: relative;top: 0;transition: all .3s;}
.a1310a21::after {position: absolute;left: 50%;transform: translatex(-50%);top: 50px;transition: all .3s;font-size: 25px;}
.a1310a21:hover {background-color: #763ff9;color:white;}
.a1310a21:hover span {top: -40px;}
.a1310a21:hover::after {top: 5px;}
/* btn moyen paie */
.p-mode-bt {height: 100px;}
/* navigation */
/* .blocknav .option:hover {background-color: #6000ea;border-radius: 50px;}
.blocknav .option a:hover {color:white;} */
/* filtre prod */
.currentFiltre {background-color: #763ff9;}
/* état par défaut : gris */
/* état actif = violet */
.carte .item-add:not(.btn-wishlist) {display: inline-block;background-color: #8a2be2;width: 40px;height: 40px;border-radius: 50%;padding: 10px;}
.carte span:not(.btn-wishlist, .a132126a, .a132122a) {display: inline-block;background-color: #afafaf;width: 40px;height: 40px;border-radius: 50%;padding: 10px;}
.carte:hover span:not(.btn-wishlist, .a132126a, .a132122a) {display: inline-block;background-color: #8a2be2;width: 40px;height: 40px;border-radius: 50%;padding: 10px;}
.a132126a {align-content: center;width: 40px;height: 40px;padding: 0;font-weight: bold;border-radius: 50%;}

/* list Filtre Prod */
#filterForm {}
.filter-bar {display: flex;gap: 12px;align-items: center;}
.filter-select, .perPage, .dir-btn {height: 42px;max-width: 300px;padding: 0 12px;border: 1px solid #ddd;border-radius: 10px;background: #fff;
font-size: 16px;align-self: center;line-height: 1.2;box-sizing: border-box;outline: none;}
/* Badge */
.badgeNbr {
  position: absolute;
  top: 5px;
  right: -20px;
  transform: translate(50%, -50%); /* badge centré sur le coin */
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 20px;       /* largeur minimale */
  height: 20px;          /* hauteur fixe */
  padding: 0 6px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background-color: #dc3545;
  border-radius: 50%;
  line-height: 1;
  pointer-events: none;
  transition: all 0.2s ease; /* pour un changement fluide */
}