html {background-color: white;overflow: scroll;
scrollbar-gutter: stable both-edges;}
body {height: 100%;margin: 0px;padding: 0px;
font-family: Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
      /* Platform-specific reset */
      -webkit-overflow-scrolling: touch;
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -ms-overflow-style: scrollbar;
      font-synthesis-weight: none;}
#content{flex-grow: 1;align-items:flex-start;}
hr.tiret{border-bottom:1px solid #dee2e6;}
h2,h3,p,footer{margin:8px;}
h1{font-size:1.6rem;}
h1.titreh1{margin:0;pading:0;font-size:22px;letter-spacing:-1px;font-weight:600;line-height:16px;}
.titreh1{margin:0;pading:0;font-size:20px;letter-spacing:-1px;font-weight:600;line-height:18px;}
h1.titresite{font-family: "Red Hat Display", sans-serif;font-optical-sizing: auto;letter-spacing:-1px;font-weight:800;line-height:20px;}
h2.titreh2{pading:0;font-size:20px;letter-spacing:-1px;font-weight:600;line-height:14px;}
.titre2{margin-top:10px;font-size:2rem;font-family: "Red Hat Display", sans-serif;font-optical-sizing: auto;letter-spacing:-1px;font-weight:800;display: inline-block;
background: linear-gradient(to left, rgb(236,100,36), rgb(241,172,0));background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
h2.titre3{pading:0;font-size:20px;letter-spacing:-1px;font-weight:600;line-height:14px;}
.arrondi{margin:2px 0 2px;border-radius : 20px !important;color:#969696 !important;font-weight:200 !important;border-color:#35A3BA !important;}

.arrondi:hover{background-color:#FEFBF1 !important;color:#35A3BA !important;}
.reveal{opacity:0;transform: translateY(+30px);}
.reveal-visible{opacity:1;transform: translateY(0px);transition: 1s cubic-bezier(.5, 0, 0, 1);}
.bordbas{color:#B6B6B6;margin-top:6px;border-bottom:1px solid #E2E1E2;padding-left:8px;}
hr.divider{margin: 0; padding : 0;color:#D1D2CC;}
hr.hrseparation{border: 0;height: 4px;background: linear-gradient(to right, transparent, #EC6B27, transparent);}
*{box-sizing: border-box;}

/* ZONES */
.topmobile{display: grid;grid-template-columns: 40px 1fr 40px;padding-left:10px;padding-right:10px;}
.cadre{display: grid;grid-template-columns: 100%;justify-content: center;}
.cote {display: none;width: 100%;height: 100vh;overflow: auto;position: sticky;top: 0px;}
.centre{border-left:1px solid #D5DBE2;border-right:1px solid #D5DBE2;margin-top:-10px;background-color:#FDFDFD;}
.centre,
.cote {
  background-color: white;
  border-radius: 10px;
  color: #222;
}
@media screen and (min-width: 1300px){
.topmobile {display: none;}
.cadre{display: grid;grid-template-columns: 20% 60% 20%;}
.centre{border-left:1px solid #D5DBE2;border-right:1px solid #D5DBE2;background-color:#FDFDFD}
.cote {display:  inline;justify-content:end;text-align:right;margin-right:10px;}
.panierdroite{border-top: 1px solid #e7eaec;text-align:start;padding:8px;}
}
@media screen and (min-width: 800px) and (max-width: 1300px){
.cadre{display: grid;grid-template-columns: 100%;justify-content: center;margin:0 60px 0 60px}
}
#topstick{position: sticky;left: 0;right: 0;top: 0;background-color: rgb(255,255,255);height: 54px;z-index:999;transition: top 0.3s;transition-delay: 0.2s;}
#topstick.hidden {top: -54px;}
.cartes{display:grid;grid-template-columns:1fr 1fr;justify-content: center; justify-items: stretch;grid-gap: min(2vmax, 32px);}
@media screen and (min-width: 500px) and (max-width: 606px){
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));justify-content: center; justify-items: stretch;gap:2px}
}
@media screen and (min-width: 391px){
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(192px,1fr));justify-content: center; justify-items: stretch;gap:2px}
}
a.boutonlink {text-decoration:none;padding:4px 8px 4px 8px;color:#4F4F60;font-weight:500;letter-spacing:-0.8px;border-radius: 10px! important;}
a.boutonlink.actif{color:#fff;background:#841563}
a:hover.boutonlink {background:#EDE2FC;border-radius:6%}

/* HEADER */
.grille{display: grid;grid-template-columns: 45px 1fr 100px;align-items:center;padding-bottom:4px;border-bottom:1px solid #E7EAEC;}

.boxi {clear: both;margin-bottom: 0px;margin-top: 0;margin-bottom:0;padding: 0;}
.boxi a{color:#000;background-color:#fff;margin-right:2px;border:1px solid #E7EAEC;}
.boxi a:hover{color:black;background-color:#FBFDFF;border-bottom:3px solid red;}
.boxi-title {background-color: #ffffff;border-bottom: 1px solid #e7eaec;color: inherit;margin-bottom: 0;padding: 4px 90px 4px 4px;min-height: 48px;position: relative;clear: both;}
.boxi-tools {display: block;float: none;position: absolute;top: 0px;right: 15px;padding: 0;text-align: right}
.boxi-fleche {display: block;margin-top: -10px;position: absolute;top: 15px;right: 15px;padding: 0;text-align: right;}
ul.accueil {display: none;}
@media only screen and ( max-width: 1300px ) /*40em 640px */
{
.grille{display: grid;grid-template-columns: 45px 1fr 100px;align-items:center;padding-bottom:4px;border-bottom:1px solid #E7EAEC;}
ul.accueil {display: flex;align-items: flex-end ;text-decoration:none;padding:0 0 6px;margin:8px 6px 6px 4px;border-bottom:1px solid #EBEEF1;position:relative;}
ul.accueil li {list-style: none;}
ul.accueil li:first-child{margin-left:10px}
ul.accueil li a{font-size:1.1rem;color:grey}
ul.accueil li:last-child{position:absolute;right:10px;}
}
.boxi-title-member{background-color: #ffffff;border-bottom: 1px solid #e7eaec;color: inherit;margin-bottom: 0;padding: 4px 6px 4px 0px;min-height: 48px;position: relative;clear: both;}
.parentflex {display: flex;flex-direction: row;}
.bouton a {color: rgba(74, 74, 74, 0.717);float: left;padding: 4px 8px;text-decoration: none;transition: background-color .3s;border:1px solid rgb(245, 240, 240);border-radius:8px;position: relative;}
.bouton a.active {background-color: #5091CF;color: white;}
.bouton a:hover:not(.active) {color:#222222;background-color: #ECEFF2;}
.bouton a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #EC6424;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.bouton a:hover::after,
.bouton a.active::after {transform: scaleX(1);}



ul.nav-accueil {display: flex;justify-content: flex-start;text-decoration:none;padding:0 0 2px;margin:8px 0 6px 0;border-bottom:1px solid #CACACA;position:relative;}
ul.nav-accueil li:not(:last-child){padding-top:3px;}
ul.nav-accueil li:not(:last-child)::after{content:'';font-weight:300;}
ul.nav-accueil li:first-child{}
ul.nav-accueil li:last-child{right:4px;padding-top:3px;top:-10px;position:absolute}
ul.nav-accueil li:last-child:after{content:'';line-height:18px;width:0px;height:3px;background:black;border-radius:10px;position:absolute;bottom:3px;right:0%;transform: transleteZ(0);transition:.3s}
ul.nav-accueil li.listnumber span.prof {padding-top:12px;}
ul.nav-accueil li:last-child a{font-size:1.1rem;color:grey}
ul.nav-accueil li{list-style:none;font-size:1.1rem;letter-spacing:-0.4px;font-weight:500;position:relative;padding:10px 7px 8px 10px;line-height:18px;}
ul.nav-accueil li a{color:#222222}
ul.nav-accueil li:hover{background-color:rgba(213, 219, 226, 0.27);border-radius:8px;}
ul.nav-accueil li a:hover{color:#EC6424;}
.nav-select{border-bottom:5px solid #EC6424;padding-bottom:7px;}
li.listnumber:after{content:'';line-height:18px;width:0px;height:3px;background:#EC6424;border-radius:10px;position:absolute;bottom:-3px;right:0%;transform: transleteZ(0);transition:.3s}
ul.nav-accueil li:hover:after{width:100%;left:0%;}

.link-actif {border-top: 3px solid #333;color: #333;font-weight: bold;}
ul.nav-accueil li.link-actif a {border-top: 3px solid #333;color: #333;font-weight: bold;}

.nouveau-actifnouveau {border-top: 3px solid #333;color: #333;font-weight: bold;}
.promo-actifpromo {border-top: 3px solid #333;color: #333;font-weight: bold;}

a.reactif{font-weight:600;line-height:18px;border-bottom:5px solid #EC6424;padding-bottom:7px;}
.nouveaunouveau{font-weight:600;line-height:18px;border-bottom:5px solid #EC6424;padding-bottom:7px;}
.promopromo{font-weight:600;line-height:18px;border-bottom:5px solid #EC6424;padding-bottom:7px;}
.scrollhorizontal{display:flex;justify-content: start;overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;scroll-behavior: smooth;
}
.scrollhorizontal::-webkit-scrollbar {width: 10px; /* Largeur de la barre de défilement */}
/* Style de la poignée de la barre de défilement */
.scrollhorizontal::-webkit-scrollbar-thumb {background-color: #AECAEB; /* Couleur de la poignée */border-radius: 5px; /* Bordure arrondie pour la poignée */}
/* Style de la piste de la barre de défilement */
.scrollhorizontal::-webkit-scrollbar-track  {background-color: #f1f1f1; /* Couleur de la piste */}

.profil_layout {display: none;}
@media only screen and ( min-width: 1300px ) /*40em 640px */
{
.profil_layout {display: flex;align-items: flex-end ;text-decoration:none;padding:0 0 6px;margin:8px 0 6px 0;border-bottom:1px solid #EBEEF1;position:relative;}
.profil_layout li {list-style: none;}
.profil_layout li:first-child{margin-left:10px}
.profil_layout li a{font-size:1.1rem;color:grey}
.profil_layout li:last-child{position:absolute;right:10px;}
}
.dropdown__profil {width: 19rem;top: 3.10rem;left: 1rem;padding: 1rem;position: absolute;border:1px solid #C8CACE;border-radius: 0.75rem;background: #FCFCFC;
    box-shadow: 
        rgba(149, 157, 165, 0.2) 
        0px 8px 24px;
    display: flex;flex-direction: column;color: #EB652B;gap: 0.25rem;
    animation: fadeOutAnimation 
    ease-in-out 0.3s forwards;z-index:99;}
.dropdown__profil--fade-in {
    animation: fadeInAnimation 
    ease-in-out 0.3s forwards;}
.hideprofil {opacity: 0;visibility: hidden;
    animation: fadeOutAnimation 
    ease-in-out 0.3s forwards;}
.dropdown__profil--fade-in {
    animation: fadeInAnimation 
    ease-in-out 0.3s forwards;}
	
.dropdown__wrapper {width: 19rem;top: 3.10rem;right: 1rem;padding: 1rem;position: absolute;border:1px solid #C8CACE;border-radius: 0.75rem;background: #FCFCFC;
    box-shadow: 
        rgba(149, 157, 165, 0.2) 
        0px 8px 24px;
    display: flex;flex-direction: column;color: #EB652B;gap: 0.25rem;
    animation: fadeOutAnimation 
    ease-in-out 0.3s forwards;z-index:9999;}
.dropdown__wrapper--fade-in {
    animation: fadeInAnimation 
    ease-in-out 0.3s forwards;}
.hide {opacity: 0;visibility: hidden;
    animation: fadeOutAnimation 
    ease-in-out 0.3s forwards;}
.dropdown__wrapper--fade-in {
    animation: fadeInAnimation 
    ease-in-out 0.3s forwards;}
.menuface {background-color:#F1F3F5;height:100%;padding:20px;border-radius:12px;}
.profile__wrapper {position: relative;display: flex;align-items: center;gap: 1rem;border-bottom:1px solid #F0F2F7}
.profile__avatar {display: block;width: 3.125rem;height: 3.125rem;cursor: pointer;object-fit: cover;border-radius: 50%;}
.profile__info {display: flex;flex-direction: column;gap: 0.25rem;margin-top:3px;padding-top:3px;}
.profile__name {font-size: 1.15rem;margin-bottom:0px;padding-bottom:0px;line-height:0.9rem;}
.profile__email {margin-top:0px;padding-top:0px;font-size: 0.95rem;}
.menu-list{padding:4px;}
.menu-list ul {text-align:left;list-style-type: none;margin:0;padding:0;}
li.menu-list-li {padding:8px}
li:hover.menu-list-li {background-color:#F0AB01;border-radius:12px;}
li:hover.menu-list-li a{color:#fff;}


.prof{float: left;}

/* FORM */
.inputcontainer img {background-color:transparent;width:44px;}
.inputgroupe {display:flex;border:2px solid #F5AE2B;border-radius:22px;max-width:250px;}
.inputgroupe:hover{background:#FBEABF;}
.inputgroupe input {font-size:16px;flex-basis:90%;border:none;outline:none;}
.inputgroupe .numeroform{margin:10px;font-weight:700;color:#F48F00}
input.search{color: #EB5A29;margin:2px 0 2px;border-radius : 20px;color:#280000;font-weight:600;border-color:#35A3BA;}
input.search::placeholder {color: #EB5A29;font-weight:500;opacity: 50;transition: opacity 150ms ease-out;}
input.search:focus::placeholder{color: #EB5A29;font-size:1.2em;font-weight:100;}
input.search:focus::value{color: #EB5A29;font-size:1em;font-weight:700;}
.clear-button {position: absolute;right: 10px;top: 22px;transform: translateY(-50%);cursor: pointer;display: none;}
button.boutoninput{background:transparent;text-align:right;border-style: none;height: 44px;padding:0px;z-index: 9;}
.boutoninput:hover{background:#D2E9FF;border-radius:20px;}
button.boutoninput2{background:transparent;text-align:right;border-style: none;height: 44px;padding:0px;z-index: 9;margin-right:38px;}

/* BOUTON */
a:link {text-decoration: none;}
a.noir{color:#222222}
a:hover.noir{color:#F36734}
.btlogin{background-color:#F5FAFE;margin:2px 0 2px;border-radius : 25px;font-weight:600;border-color:#35A3BA;}
a.btlogin{color:#005BAE}
.btlogin:hover{color:#005BAE;background-color:#FFF;border-color:#005BAE;}
.btinscription{background-color:#229BFF;margin:2px 0 2px;border-radius : 25px;font-weight:600;border-color:#35A3BA;}
.btinscription:hover{color:#005BAE;background-color:#FFF;border-color:#005BAE;}
.btinscription:active{background-color:#E9F0FF;}
a.btinscription{color:#fff;}
a.boutonlink2{background-color:#F8F9FA;letter-spacing:-2px;font-weight:800;border:1px solid #D5DBE2}
.boutonlink2:hover{background-color:#F8F9FA;color:#000;border:1px solid #D5DBE2;}
.boutonlink2:focus{color:#000;border:1px solid #D5DBE2;background-color:red;}
.btprixtri{background-color:#DDDDDD;}
a.nombreclic{color:#999A9D;font-size:1.2rem;font-weight:700;padding:8px 14px 4px 14px;border-radius: 12px;background: #f8f7f7;
box-shadow:  5px 5px 6px #e4e3e3,
-5px -5px 6px #ffffff;}
a:hover.nombreclic{border-radius: 12px;color:#222222;background: #f8f7f7;box-shadow: inset 5px 5px 6px #e4e3e3,
inset -5px -5px 6px #ffffff;}
a:active.nombreclic{color:grey}	

/* NAVBAR */
/* NAVBAR Mobile */
a.menuburger{font-weight:bold;font-size:30px;color:black;cursor:pointer;background-color:white;}
a:hover.menuburger{color:#ED5927;}
.search-mobile{position: relative;display: inline-block;max-width:360px;}
.input-mobile input {padding-right: 40px;border-radius : 20px;background-color:#F1F3F5;}
.input-mobile button {position: absolute;top: 0;right: 2px;border: none;background-color: transparent;cursor: pointer;}
button.boutoninputmobile{background:transparent;text-align:right;border-style: none;height: 44px;padding:0px;z-index: 9;margin-top:2px}
input.search{color: #EB5A29;margin:2px 0 2px;border-radius : 20px;color:#280000;font-weight:600;border-color:#35A3BA;}
input.search::placeholder {color: #EB5A29;font-weight:500;opacity: 50;transition: opacity 150ms ease-out;}
input.search:focus::placeholder{color: #EB5A29;font-size:1.2em;font-weight:100;}
input.search:focus::value{color: #EB5A29;font-size:1em;font-weight:700;}
.inputgroupelight{display:flex;}

a.burger-liste-a{text-decoration:none;font-size:1.3em;color:#000000;}
a:hover.burger-liste-a{color:#EE6C47;}

/* Coeur */
a.badgecoeur {color:#ACC9E9;}
a:hover.badgecoeur {cursor:pointer;color:#ED5927;}
.shopping-bag {width: 32px;position: relative;isolation: isolate;}
.shopping-bag svg {z-index: 2;position: relative;}
.shopping-bag__target {position: absolute;bottom: -5px;right: -8px;backface-visibility: hidden;z-index: 1;width: 20px;height: 20px;border-radius: 100%;}
.shopping-bag__target > * {position: relative;}
.shopping-bag__counter {aspect-ratio: 1;background-color: #EB652B;font-size: 12px;display: flex;justify-content: center;align-items: center;text-align: center;border-radius: 100%;position: absolute;bottom: 0px;right: -8px;z-index: 4;}
.shopping-bag__counter span {width: 3ch;color: #fff;}

.animrotate:hover{animation: spin 0.5s linear;}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* GAUCHE COTE */
a.boutoncote {font-size:1.2rem;text-decoration:none;padding:8px;color:#43474B;font-weight:600;letter-spacing:-0.5px;line-height:22px;border-radius: 10px! important;}
a.boutoncote.btactif{color:#fff;font-weight:700;background:#73BFFF}
a:hover.boutoncote {background:rgba(249,150,60,0.21);border-radius:6%}
a:focus.boutoncote {background:rgba(249,150,60,0.21);border-radius:6%}

/* CONTENT */
#divtoApply + .articles{column-gap: 25px;}
.articles{display:flex;flex-direction:column;background-color: #ffffff;padding: .8em;position: relative;box-shadow: 0 1px 3px rgba(0,0,0,0.01), 0 1px 2px rgba(0,0,0,0.02);max-width:240px;border-right: 1px solid #EAEAEA;border-bottom:4px solid #EAEAEA;border-collapse:collapse;padding-right: 25px;}
.articles:hover{background-color: #FDFDFD;border-radius: 6px;box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);border-bottom:4px solid #222222;}
.articles img {max-height: 240px;max-width:100%;width: auto;margin:auto;}

/* CARD */
.carte-image{height: 100%;width: 100%;border-radius: .5rem;transition: .3s ease;}
.carte-image img {max-height: 240px;max-width:100%;width: auto;}
.carte-image:hover {transform: translateY(-3%);box-shadow: rgba(65, 69, 104, 0.18) 0px 13px 47px -5px, rgba(180, 71, 71, 0.3) 0px 8px 16px -8px;}
.carte-body{padding:8px}
.cartehoriz .carte-body{flex:1;}
.product{color:#222222;font-size: .9em;font-weight:300;font-smooth: auto;padding-bottom: 2px;line-height:1.2em;}
.brand{letter-spacing:-1px;font-weight: 900;font-size: 1.1em;line-height: 1;margin-bottom:3px;}
a.clicicone{color:#5E6D7A;padding:3px;}
a:hover.clicicone{background-color:rgba(160, 206, 252, 0.39);color:#333A42;opacity:0.5;border-radius:20px;padding:3px;}
.descriptionproduit{line-height:16px;}
.price{font-smooth: auto;font-weight: 900;font-size: 1.1em;line-height: 1;letter-spacing:-1px;}
.product__button {padding: 0;border-radius: 50%;border-width: 5px;border-color: #F1AC00; border-style: solid;color: white;background-color: #EC6424;
    font-size: 20px;display: block;height: 20px;width: 20px;text-align: center;}
.product__button:hover,
.product__button:active {background-color: #F1AC00;color:#fff;}
.product__button svg {width: 1.1rem;z-index: 2;position: relative;}
.product__button i {z-index: 2;position: relative;}
.product__button:active i {bottom:10px;right:6px}
/* bouton coeur lors du clic */
.animajout {animation: glissement 1s;}
@keyframes glissement {
 from {background-color:#6ABDFF;font-weight:800;}
  to {background-color: transparent;}
}
.animajout{background-color:#F1AC00! important;outline: thick double #32a1ce;border-radius: 100%;color:white! important}
.animajout i {color:white! important}

/* ID */
h1.h1nom{font-size:24px;line-height:24px;margin-bottom:10px;}
a.nomproduitid {text-decoration:none;font-weight:300;letter-spacing:-1px;color:#000;}
a:hover.nomproduitid {color:#F26C00;max-width:600px;}
.imgcoindrond{border-radius : 8px}
.imgzoom{transition: transform 250ms;}
.imgzoom:hover {transform: translateX(-10px);}
.marqueproduit{font-weight:700;margin-top:-10px;font-size:16px;}
.idprix{margin:8px 0 24px}
.priceid{font-smooth: auto;font-weight: 900;font-size: 1.4em;line-height: 1;letter-spacing:-1px;}
.poucentagegris{color:#fff;font-weight:600;letter-spacing:-1px;background-color:#419924;border:2px solid #419924;border-radius:20px;padding:2px 4px 2px 2px;}
.prixbarre{text-decoration:line-through;}
a.boutonvoirproduit{text-decoration:none;font-size: 16px;background-color:#DB4400;color:#fff;padding:16px;max-height:48px;border:5px solid f36735;cursor:pointer;border-radius:40px;box-shadow: 2px 2px 6px rgba(0,0,0,0.4);transition:all 0.3s ease 0s;;}
a:hover.boutonvoirproduit{background-color:#f90;color:#fff;}
a.addbouton {text-decoration:none;font-size: 30px;font-weight:800;color:#222222;padding:6px 14px 4px 14px;background-color:#FFF;max-height:38px;border:5px solid f36735;cursor:pointer;border-radius:40px;box-shadow: 2px 2px 6px rgba(0,0,0,0.4);transition:all 0.3s ease 0s;}
a:hover.addbouton {cursor:pointer;color:#fff;background-color:#EC652A;}
a.addbouton.addproduit{color:white;background-color:#F0AB00;}
.productdesciption{max-width:600px;line-height:18px;margin-top:36px;padding:0 4px 0 4px}
.caracteristiques{margin-top:30px;}
ul.listegauche{list-style: none;margin-left:2px;padding-left:2px;}
ul.listegauche li label{display:inline-block; width:40%;}
ul.listegauche li span{display:inline-block; width:60%;}
li.listegaucheli{font-size:1em;line-height:10px;border-bottom:1px solid #D3D3D3;padding:6px;margin-left:2px;}
li.listegaucheli:hover{background:#F9F9F9}
li.listegaucheli label{color:#969696;font-weight:lighter;}
.produitmaj{font-size:0.9rem;line-height:14px;color:#737373;}
a.lelink{display:block;text-decoration:none;padding:3px 0 3px;color:#404040;font-weight:400;line-height:14px;}
a.lelinkmobile{display:block;text-decoration:none;padding:3px 0 3px 10px;color:#4F4F4F;font-weight:300;line-height:20px;}
a:hover.lelink{border-right:1px solid #E8E8E8;border-radius:6px;color:#F26935;}
.partager{color:#222222;font-size:1.4em;letter-spacing:-1px;font-weight:700;line-height:12px;}
.proposition{background-image: url('https://www.tritooshop.com/icon/sac70.jpg');background-repeat: no-repeat;background-position: right 20px top 1px;background-size: 32px 32px;}
a.voirpropositions{color:black;font-size:1.2em;padding:6px 10px 6px 10px;border:2px solid #222222;border-radius:10px;line-height:16px;}
a:hover.voirpropositions{background-color:#F1A802;color:white;border:2px solid #EC6424;}
a:focus.voirpropositions{background-color:#EC6424;}
.ballzz {color:white;text-align:center;padding-top:11px;animation-fill-mode: forwards;width:50px;height:50px;background-color:#2098d1;border-radius: 50%;
position: absolute;top: 100px;right: 5%;}
.ball{color:white;text-align:center;padding-top:11px;width:50px;height:50px;background-color:#2098d1;border-radius: 50%;margin:50px;position: absolute;top: 100px;left: 70%;z-index:99999}
@media only screen and ( max-width: 1320px ) /*40em 640px */
{
.ball{color:white;text-align:center;padding-top:11px;width:50px;height:50px;background-color:#2098d1;border-radius: 50%;margin:50px;position: absolute;top: 100px;right: 5%;z-index:99999}
}
.vuia{font-weight:700;letter-spacing:-1px;}

/* FOOTER */
footer{height: 200px;bottom: 0; left: 0; right: 0;border-top:1px solid #E7EAEC;grid-area: footer;text-align:center;padding:20px 12px 12px 12px;}
.btnanim{transition: transform 250ms;}
.btnanim:hover {transform: translateY(-10px);}
a.footlink{text-decoration:none;color:#6a6868;}
.foot{font-size:0.8em;color:#6a6868;}

/* ANIM BAG */
@view-transition {
navigation: auto;}

@supports (view-transition-name: none) {
  ::view-transition-group(cart-dot) {
    animation-duration: 0.6s;
    animation-timing-function: ease-in;
  }

  ::view-transition-old(cart-counter) {
    animation: toDown 0.15s cubic-bezier(0.4, 0, 1, 1) both;
  }

  ::view-transition-new(cart-counter) {
    animation: fromUp 0.15s cubic-bezier(0, 0, 0.2, 1) 0.15s both;
  }
}

@keyframes toDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(4px);
    opacity: 0;
  }
}

@keyframes fromUp {
  from {
    transform: translateY(-3px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;}
}

@supports not (view-transition-name: none) {
  .banner {position: fixed;bottom: 0;left: 0;width: 100%;background-color: #fae588;text-align: center;z-index: 5;}
  .banner__inner {padding: 1rem 2rem;max-width: 720px;margin: 0 auto;}
  .banner {display: block !important;}
}
.product__dot {width: 100%;
  aspect-ratio: 1;background-color: #E46216;border-radius: 100%;position: absolute;z-index: -1;}

/* HOME */
.boutiquebox {display: grid;grid-template-columns: 120px 1fr 40px;position: relative;z-index:9}
.boutiqueboxcontent:nth-child(n+2) {display: grid;place-content: center;height: 48px;margin-top:10px;line-height:14px;font-size: 1.1rem;font-weight: bold;border-left: 1px solid #D3D9DE;border-top: 1px solid #D3D9DE;border-bottom: 1px solid #D3D9DE;border-radius:12px;}

.boutiquebox::after {content: '';position: absolute;top: 2px; bottom: 2px;left: calc(
    25% +
    var(--padding) / 2 -
    1px);
border-left:2px dashedhsl(210deg 8% 50%);}

.bt-select {width: 28px;height: 28px;background: white;color:#222222! important;border-radius: 50%;display: flex;cursor: pointer;transition: all 0.3s ease;transform: scale(0.9);}
.bt-select-product {border-width: 0;cursor: pointer;display: inline-flex;border-radius: 100%;
outline: thick double #AEC5DD;line-height: 0;justify-content: center;align-items: center;font-size:0.9rem;
padding:0.2rem 0.3rem 0.3rem 0.3rem;color:#222222! important;position: absolute;bottom: 0rem;right: 0rem;}
.bt-select-product:hover,
.bt-select-product:active {background-color: #F1AC00;color:#fff;}
.bt-select-product svg {width: 1.1rem;z-index: 2;position: relative;}
.bt-select-product i {z-index: 2;position: relative;}
a.ajoutpanier{color:#222222! important;padding:3px;}
a:hover.ajoutpanier{background-color:rgba(160, 206, 252, 0.39);color:#333A42;opacity:0.5;border-radius:20px;padding:3px;}

.visual{max-width:1200px;margin: auto;text-align:center;padding-top:3px}
a:hover.logoboutique img{border:2px solid grey;-webkit-box-shadow: 0 7px 5px rgba(0,0,0, .7);-moz-box-shadow: 0 7px 5px rgba(0, 0, 0, 0.7);box-shadow: 0 7px 5px rgba(0, 0, 0, 0.7);-webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);z-index: -1;}
a.logoboutique img{margin-top:4px;padding:6px 6px;border:2px solid #E7EAEC;border-radius: 1em;box-shadow: box-shadow: rgba(0,0,0,0.1) 0px 0px 3px 0px;;transition: all 0.3s ease 0s;}
a:active.logoboutique img{border:3px solid #1E7AD7;border-radius;12px;opacity:0.8; transition-timing-function: ease;transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);}
a.bt-fleche {color:black;}
a:hover.bt-fleche {color:#F47B4E;}

.bouton-coeur {width: 28px;height: 28px;background: transparent;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all 0.3s ease;transform: scale(0.9);}
.bouton-coeur:hover,
.bouton-coeur:active {}
.bouton-coeur svg {width: 1.1rem;z-index: 2;position: relative;}
.bouton-coeur i {z-index: 2;position: relative;}
.icone-coeur:hover .bouton-coeur {transform: scale(1);box-shadow: 0 0 0 4px rgba(238, 67, 57, 0.2);}
.icone-coeur:hover .bouton-coeur svg {animation: coeurbattant 1.5s infinite;}
@keyframes coeurbattant {
  0% {transform: scale(1);}
  50% {transform: scale(1.2);}
  100% {transform: scale(1);}}

/* CARD */
.rayonarticle{display:flex;margin-bottom:20px;}
.rayonarticle img {max-height: 300px;max-width:100%;width: auto;margin:auto;}
.rayoncard {
  --rayoncard-bg: #ffffff;
  --rayoncard-accent: #7c3aed;
  --rayoncard-text: #1e293b;
  --rayoncard-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
width: 110px;height: 190px;padding-bottom:8px;background: var(--rayoncard-bg);border-radius: 20px;position: relative;
overflow: hidden;transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);box-shadow: var(--rayoncard-shadow);border: 1px solid rgba(255, 255, 255, 0.2);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;}
.rayoncard__image {width: 100%;height: 100%;background: linear-gradient(45deg, #ffffff, #F4FAFF);border-radius: 12px;transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);position: relative;overflow: hidden;}
.rayoncard:hover .rayoncard__image {transform: translateY(-5px) scale(1.03);box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);}

/* CHERCHE */
.breadfiltre {display: inline-block;}
.breadfiltre a {color: rgba(74, 74, 74, 0.717);float: left;padding: 4px 8px;text-decoration: none;transition: background-color .3s;border:1px solid rgb(245, 240, 240);border-radius:8px;}
.breadfiltre a.active {background-color: #5091CF;color: white;}
.breadfiltre a:hover:not(.active) {background-color: #ddd;}
.cache{display:none;}
.scrolly {display:inline;max-height: 1200px;scroll-behavior: auto;overflow: -moz-scrollbars-none; overflow-y: auto;overflow-x: hidden;scrollbar-width: none;}
.boutongris{color:#C0C0C0;background-color:#F9F9F9;font-weight:bold;border-radius:25px;border-color:#C0C0C0;}
.boutongris:hover{background-color:#FFFFFF;color:#454545;border-color:black;}
ul.burger-liste{ list-style-type:none;padding: 0;margin: 0;}
.storetype{font-size:1.2em;font-weight:700;letter-spacing:-1px;}
a.lienlistbrand{letter-spacing:-1px;color:#000;line-height:10px;}
a:hover.lienlistbrand{color:#F16938;}
.boxi-fleche {display: block;margin-top: -10px;position: absolute;top: 15px;right: 15px;padding: 0;text-align: right;}


/* PAGINATION */
.nbpage{margin:8px 0 10px 18px;}
.pagination {display: inline-block;vertical-align:top;margin:0 8px 10px 8px}
.pagination a {font-size:1.2rem;letter-spacing:-1px;color: rgba(74, 74, 74, 0.717);float: left;padding: 4px 8px;text-decoration: none;transition: background-color .3s;border:1px solid rgb(245, 240, 240);border-radius:8px;}
a.next{font-weight:700! important;}
.activepage {color:#F26935! important;border:1px solid #F26935! important}
.pagination a:hover:not(.activepage) {background-color:#E56104;color:white;}
a.activepage {color:#E56104;border:1px solid #E56104}
a:hover.activepage {}

/* BOUTIQUE */
li.burger-liste-btn{width: 98%;padding:8px;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #dee2e6;line-height:16px;}
li.burger-liste-btn:hover{background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:8px}
.listlogo{margin:0 8px 0 4px;}
.listlogo img{width:70px;}
.storetype{font-size:1.2em;font-weight:700;letter-spacing:-1px;}
.badgetxt {font-size:0.6rem;color:grey;}
.newnb {color:white;font-size:1.1rem;font-weight:700;padding:4px 8px 4px 8px;border-radius:6px;background-color:green}
.promonb {color:white;font-size:1.1rem;font-weight:700;padding:4px 8px 4px 8px;border-radius:6px;background-color:red}
.nouveaucard {
  --nouveaucard-bg: #ffffff;
  --nouveaucard-accent: #368FF1;
  --nouveaucard-text: #1e293b;
  --nouveaucard-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
width: 190px;height: 314px;background: var(--nouveaucard-bg);border-radius: 20px;position: relative;overflow: hidden;transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: var(--nouveaucard-shadow);border: 1px solid rgba(255, 255, 255, 0.2);font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;}
.nouveaucard__shine {position: absolute;inset: 0;background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 60%);
opacity: 0;transition: opacity 0.3s ease;}
.nouveaucard__glow {position: absolute;inset: -10px;background: radial-gradient(
    circle at 50% 0%,
    rgba(54, 143, 241, 0.3) 0%,
    rgba(54, 143, 241, 0) 70%);
opacity: 0;transition: opacity 0.5s ease;}
.nouveaucard__content {padding: 1.25em;height: 100%;display: flex;flex-direction: column;gap: 0.75em;position: relative;z-index: 2;}
.nouveaucard__badge {position: absolute;top: 12px;right: 12px;background: #10b981;color: white;padding: 0.25em 0.5em;border-radius: 999px;font-size: 0.7em;font-weight: 600;transform: scale(0.8);opacity: 0;transition: all 0.4s ease 0.1s;}
.nouveaucard__image {width: 160px;height: 100%;background: linear-gradient(45deg, #F3F3F3, #FFFFFF);border-radius: 12px;transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);position: relative;overflow: hidden;}
.nouveaucard__image::after {position: absolute;inset: 0;background: radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 30%
),
repeating-linear-gradient(
      45deg,
      rgba(139, 92, 246, 0.1) 0px,
      rgba(139, 92, 246, 0.1) 2px,
      transparent 2px,
      transparent 4px
);
opacity: 0.5;}
.nouveaucard__text {display: flex;flex-direction: column;gap: 0.25em;}
.nouveaucard__title {color: var(--nouveaucard-text);font-size: 1.1em;margin: 0;font-weight: 700;transition: all 0.3s ease;}
.nouveaucard__description {color: var(--nouveaucard-text);font-size: 0.75em;margin: 0;opacity: 0.7;transition: all 0.3s ease;}
.nouveaucard__footer {display: flex;justify-content: space-between;align-items: center;margin-top: auto;}
.nouveaucard__price {color: var(--nouveaucard-text);font-weight: 700;font-size: 1em;transition: all 0.3s ease;}
.nouveaucard__button {width: 28px;height: 28px;background: var(--nouveaucard-accent);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: white;cursor: pointer;transition: all 0.3s ease;transform: scale(0.9);}
/* Hover Effects */
.nouveaucard:hover {transform: translateY(-10px);
box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
border-color: rgba(124, 58, 237, 0.2);}
.nouveaucard:hover .nouveaucard__shine {opacity: 1;animation: nouveaucardshine 3s infinite;}
.nouveaucard:hover .nouveaucard__glow {opacity: 1;}
.nouveaucard:hover .nouveaucard__badge {transform: scale(1);opacity: 1;z-index: 1;}
.nouveaucard:hover .nouveaucard__image {transform: translateY(-5px) scale(1.03);box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);}
.nouveaucard:hover .nouveaucard__title {color: var(--nouveaucard-accent);transform: translateX(2px);}
.nouveaucard:hover .nouveaucard__description {opacity: 1;transform: translateX(2px);}
.nouveaucard:hover .nouveaucard__price {color: var(--nouveaucard-accent);transform: translateX(2px);}
.nouveaucard:hover .nouveaucard__button {transform: scale(1);box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);}
.nouveaucard:hover .nouveaucard__button svg {animation: nouveaucardpulse 1.5s infinite;}
/* Active State */
.nouveaucard:active {transform: translateY(-5px) scale(0.98);}
/* Animations */
@keyframes nouveaucardshine {
0% {background-position: -100% 0;}
100% {background-position: 200% 0;}}
@keyframes nouveaucardpulse {
0% {transform: scale(1);}
50% {transform: scale(1.2);}
100% {transform: scale(1);}}
.promocard {
  --promocard-bg: #ffffff;
  --promocard-accent: #F03745;
  --promocard-text: #1e293b;
  --promocard-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
width: 190px;height: 314px;background: var(--promocard-bg);border-radius: 20px;position: relative;overflow: hidden;transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: var(--promocard-shadow);border: 1px solid rgba(255, 255, 255, 0.2);font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;}
.promocard__shine {position: absolute;inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 60%
);opacity: 0;transition: opacity 0.3s ease;}
.promocard__glow {position: absolute;inset: -10px;
background: radial-gradient(
    circle at 50% 0%,
    rgba(181, 30, 37, 0.3) 0%,
    rgba(181, 30, 37, 0) 70%
);opacity: 0;transition: opacity 0.5s ease;}
.promocard__content {padding: 0.75em;height: 100%;display: flex;flex-direction: column;gap: 0.75em;position: relative;z-index: 2;}
.promocard__badge {position: absolute;top: 12px;right: 12px;background: #BC1F0E;color: white;padding: 0.25em 0.5em;border-radius: 999px;font-size: 0.7em;font-weight: 600;transform: scale(1.1);opacity: 1;z-index:1;transition: all 0.4s ease 0.1s;}
.promocard__image {width: 100%;height: 160px;background: linear-gradient(45deg, #FFFFFF, #F8F4FF);border-radius: 12px;transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);position: relative;overflow: hidden;}
.promocard__image::after {position: absolute;inset: 0;
background: radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 30%),
repeating-linear-gradient(
      45deg,
      rgba(241, 112, 97, 0.1) 0px,
      rgba(241, 112, 97, 0.1) 2px,
      transparent 2px,
      transparent 4px);opacity: 0.5;}
.promocard__text {display: flex;flex-direction: column;gap: 0.25em;}
.promocard__title {color: var(--promocard-text);font-size: 1.1em;margin: 0;font-weight: 700;line-height:1.1rem;transition: all 0.3s ease;}
.promocard__description {color: var(--promocard-text);font-size: 0.75em;margin: 0;opacity: 0.7;line-height:1rem;transition: all 0.3s ease;}
.promocard__footer {display: flex;justify-content: space-between;align-items: center;margin-top: auto;}
.promocard__price {color: var(--promocard-text);font-weight: 700;font-size: 1em;line-height:1rem;transition: all 0.3s ease;}
.promocard__button {width: 28px;height: 28px;background: transparent;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: white;cursor: pointer;transition: all 0.3s ease;transform: scale(0.9);}
/* Hover Effects */
.promocard:hover {transform: translateY(-10px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
border-color: rgba(124, 58, 237, 0.2);}
.promocard:hover .promocard__shine {opacity: 1;animation: cardpromoshine 3s infinite;}
.promocard:hover .promocard__glow {opacity: 1;}
.promocard:hover .promocard__badge {transform: scale(1);opacity: 0.7;z-index: 1;}
.promocard:hover .promocard__image {transform: translateY(-5px) scale(1.03);box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);}
.promocard:hover .promocard__title {color: var(--promocard-accent);transform: translateX(2px);}
.promocard:hover .promocard__description {opacity: 1;transform: translateX(2px);}
.promocard:hover .promocard__price {color: var(--promocard-accent);transform: translateX(2px);}
.promocard:hover .promocard__button {transform: scale(1);box-shadow: 0 0 0 4px rgba(238, 67, 57, 0.2);}
.promocard:hover .promocard__button svg {animation: cardpromoshinepulse 1.5s infinite;}
/* Active State */
.promocard:active {transform: translateY(-5px) scale(0.98);}
/* Animations */
@keyframes cardpromoshine {
  0% {background-position: -100% 0;}
  100% {background-position: 200% 0;}}
@keyframes cardpromoshinepulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.2);}
  100% {transform: scale(1);}}
.prixraye{font-size:0.9rem;font-weight:300;color:#000;text-decoration:line-through;}
/* Boutiques rayons */
.rayoncard__content {position:relative;padding: 0.55em;height: 100%;display: flex;flex-direction: column;gap: 0.75em;z-index: 2;}
.rayoncard__badge {position: relative;top: 12px;right: 12px;background: #10b981;color: white;line-height:0.8rem;padding: 0.25em 0.5em;border-radius: 999px;font-size: 0.7em;font-weight: 600;transform: scale(0.8);opacity: 0;transition: all 0.4s ease 0.1s;}
.rayoncard__text {display: flex;flex-direction: column;gap: 0.25em;}
.rayoncard__description {color: var(--rayoncard-text);font-size: 0.8em;margin: 0;font-weight: 600;line-height:0.9rem;opacity: 0.9;transition: all 0.3s ease;}
/*
.carte-rayon {position:relative;width: 170px;height: 240px;background: var(--nouveaucard-bg);border-radius: 20px;border:2px solid red;margin:auto}
.carte_img {margin-left: auto;margin-right: auto;width: 140px;background: linear-gradient(45deg, #F3F3F3, #FFFFFF);border-radius: 12px;transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);position: relative;overflow: hidden;}
.carte_img::after {position: absolute;inset: 0;background: radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 30%
),
repeating-linear-gradient(
      45deg,
      rgba(139, 92, 246, 0.1) 0px,
      rgba(139, 92, 246, 0.1) 2px,
      transparent 2px,
      transparent 4px
);}
.carte_img:hover {}
.carte_img img {}
.carte_img:hover img {opacity: 0.6;}
.carte_img img {display:block;opacity:1;}
.carte_date{position:absolute;top:10px;right:30px;width:24px;height:20px;padding-top:4px;color:white;fnt-weight:bold;text-align:center;line-height:13px;background-color:#FE611A;border-radius:50%;}
*/

/* SHOP */
.badgnb{font-size:0.9rem;color:grey;}
.tous{position:absolute}
.badgnb{position:relative;top:6px;}

/* PANIER */
.jeremplis{margin-top:30px;}
.boutonaction{font-size:1.2rem;background: linear-gradient(45deg, #EC6424, #F1AC00);color:white;font-weight:600;border: 3px solid #F1AC00;padding: 4px 12px 4px 12px;border-radius : 25px;}
.boutonaction:hover{color:#FFFFFF;background: linear-gradient(45deg, #F1AC00, #EC6424)}
.boutonaction:focus{border:1px solid black}
a.love{color:#A9C8E7;cursor:pointer;}
a:hover.love{color:#F76300;}
.actiontitre{font-size:1.1rem;margin:6px 0 10px 20px;}
.formulaire{max-width:500px;}


input.addinput{max-width:300px;border:1px solid #BFCBD7;border-radius:10px;background-color:#EFF2F5;}
input.addinput:hover{border:1px solid #222222;}
input.addinput:focus{background-color:#fff;}
input.addinput:focus::placeholder{color:#728CA7}
button.addbutton{font-size:0.8rem;color:#0E1422;font-weight:600;border:1px solid #C0CBD8;border-radius:10px;}

.follow{background: linear-gradient(45deg, #EC6424, #F1AC00);color:white;font-weight:600;border: 3px solid #F1AC00;padding: 4px 12px 4px 12px;border-radius : 25px;}
.follow:hover{color:#FFFFFF;background: linear-gradient(45deg, #EC6424, #F1AC00);border-color:#fff;}
.follow:active{color:#FFFFFF;background: linear-gradient(45deg, #F1AC00, #EC6424)}
a.follow{color:#005BAE;}
.idsajoutes{margin:0px;padding:0px;}
td.small{vertical-align:middle}
td.petit{column-width: 40px;}

tr:hover.trsurvol{
  border:1px solid #C0CBD8;border-radius:10px;

  th:hover, td:hover {
    background: #EFF2F5;
  }
}


#message {color:#DD5F00;padding-bottom:4px;}

/* INSCRIPTION */
.sinscrire{font-size:1.4em;letter-spacing:-1px;vertical-align: middle;color:#5591D2;line-height:18px;}
.tunnel li+li::before {content: "";flex: 1;display: block; /* IE10 fix */border-bottom: 2px solid #F2806E;}
.tunnel .is-current ~ li::before {border-bottom-style: dotted;}
.larglimite400{max-width:400px;margin:0 10px 0 14px}
.tunnel::before,
/* ol is flex-container */
.tunnel {counter-reset: progress; padding-left: 0;display: flex;}
/* li is flex-item and flex-container */
.tunnel li {display: flex;align-items: center;list-style-type: none;counter-increment: progress}
/* everyone flexible except first */
.tunnel li+li {flex: 1 0 auto;}
/* hide further steps */
.tunnel .is-current ~ li {opacity: .3;}
/* show counter numbers */
.tunnel li::after {content: counter(progress);display: inline-block;box-sizing: border-box; width: 2em; height: 2em;line-height: 2em; background: #F2806E;border-radius: 50%; text-align: center;color: #fff;}
li.listerror{list-style:none;color:#EC7E6A;font-size:1.1rem;}
.inputmargebas{margin-bottom:30px;}
.labelinscription{color:#5D6E7A;margin-bottom:10px;letter-spacing:2px}
.punchline-title{color:#222222;text-align:center;margin-top:30px;line-height:2.2rem;font-family: "Red Hat Display", sans-serif;font-size: 2rem;font-optical-sizing: auto;letter-spacing:-1px;}
.justepourvous{font-weight:900;margin-top:10px;line-height:1.6rem;font-family: verdana;letter-spacing:-1px;font-size: 1.6rem;font-optical-sizing: auto;}
.punchline-title2{text-align:center;margin-top:10px;line-height:1.2rem;font-family: "Red Hat Display", sans-serif;font-size: 1.2rem;font-optical-sizing: auto;}

/* UTIL */
.rouge{color:#F26935;font-weight:bold;}
.orangefonce{color:#F26935;font-weight:800;}
.orangefonce:hover{color:#F5AE2B;}
.bleuciel{color:#ACC9E9;margin-bottom:10px;line-height:12px;}

/* PROMO */
.carte-footer-promo{ width: 100%;
 display: flex;
 justify-content: space-start;
 align-items: center;
 padding-top: 6px;
 border-top: 1px solid #ddd;}
.pricepromo{color:#EC6424;}
.carte-footer-ligneprixpromo{line-height:18px;}

/* SHOPPING-LST */
.ecartmoins{font-weight:700;letter-spacing:-1px;padding:2px 3px 2px 3px;color:white;background-color:#5EA42B;border-radius:8px;}
a.infotext{color:black}
a:hover.infotext{color:#EC6424}
tr.tablesurvol{position: relative;}
a.infotext span {display: none;}
img.infobulleimg{max-width:200px;background-color:white;padding:6px;border:2px solid #C8C8C8;border-radius:8px;z-index:10}
a:hover.infotext span {display: block;z-index: 100;left: 0px;margin: 12px;position: absolute;}
a.ico-deleterr{cursor: pointer;display: inline-flex;border-radius: 100%;outline: thick double #AEC5DD;color:#5E6D7A;padding:3px;}

.cardy{display: grid;border-bottom:1px solid #DEE2E6;padding:4px 0 10px 0}
.iconeenligne{display: inline;padding:0 10px}
.ico-delete {border-width: 0;cursor: pointer;display: inline-flex;border-radius: 100%;
outline: thick double #AEC5DD;line-height: 0;justify-content: center;align-items: center;font-size:0.9rem;
padding:0.4rem 0.3rem 0.3rem 0.3rem;color: #32a1ce;}
.ico-delete:hover,
.ico-delete:active {background-color: #F1AC00;color:#fff;}
.ico-delete svg {width: 1.1rem;z-index: 2;position: relative;}
.ico-delete i {z-index: 2;position: relative;}
.prix{margin:4px 0 8px}
.enleve{opacity: 0;}


/* LISTSHOPPING */
a.bt-admin {color:#222222; padding:8px;border : 1px solid #C0CBD8;border-radius:8px}
a.bt-admin:hover {color:#222222;background-color:#EFF2F5;}
.btadmin{background: #FFDF8C;color:#222222;font-weight:600;border: 3px solid #F1AC00;padding: 4px 12px 4px 12px;border-radius : 25px;}
.btadmin:hover{color:#FFFFFF;background: linear-gradient(45deg, #EC6424, #F1AC00);border-color:#fff;}
.btadmin:active{color:#FFFFFF;background: linear-gradient(45deg, #F1AC00, #EC6424)}
a.btadmin{color:#005BAE;}

/* GUIDE */

#guid-grille {display: grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:repeat(1fr, 9);grid-column-gap:8px;grid-row-gap: 8px}
#guid-grille > .guid-enfant {border: 1px solid #E7EAEC;border-radius:8px;}
.guid-enfant.span3 {grid-column: span 3;}
.guid-padding {padding:8px}

.guid-carcateristique {font-size:1.1rem;font-weight:bold;padding:8px 4px 4px 8px;line-height:1rem;}


.guid-card-caracteristique {
  --guidcardcaract-bg: #ffffff;
  --guidcardcaract-accent: #368FF1;
  --guidcardcaract-text: #1e293b;
  --guidcardcaract-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
width: 96%;height: 92%;background: var(--guidcardcaract-bg);border-radius: 20px;position: relative;overflow: hidden;transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: var(--guidcardcaract-shadow);border: 1px solid rgba(255, 255, 255, 0.2);font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;}
.guid-card-caracteristique__shine {position: absolute;inset: 0;background: linear-gradient(120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 60%);opacity: 0;transition: opacity 0.3s ease;}
	.guid-card-caracteristique__glow {position: absolute;inset: -10px;background: radial-gradient(
    circle at 50% 0%,
    rgba(54, 143, 241, 0.3) 0%,
    rgba(54, 143, 241, 0) 70%);opacity: 0;transition: opacity 0.5s ease;}
	.guid-card-caracteristique__content {padding: 1.25em;height: 100%;display: flex;flex-direction: column;gap: 0.75em;position: relative;z-index: 2;}	.guid-card-caracteristique__badge {position: absolute;top: 12px;right: 12px;background: #10b981;color: white;padding: 0.25em 0.5em;border-radius: 999px;font-size: 0.7em;font-weight: 600;transform: scale(0.8);opacity: 0;transition: all 0.4s ease 0.1s;}
.guid-card-caracteristique__badge {position: absolute;top: 12px;right: 12px;background: #10b981;color: white;padding: 0.25em 0.5em;border-radius: 999px;font-size: 0.7em;font-weight: 600;transform: scale(0.8);opacity: 0;transition: all 0.4s ease 0.1s;}
.guid-card-caracteristique__image {width: 160px;height: 100%;background: linear-gradient(45deg, #F3F3F3, #FFFFFF);border-radius: 12px;transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);position: relative;overflow: hidden;}
.guid-card-caracteristique__image::after {position: absolute;inset: 0;background: radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 30%
),
repeating-linear-gradient(
      45deg,
      rgba(139, 92, 246, 0.1) 0px,
      rgba(139, 92, 246, 0.1) 2px,
      transparent 2px,
      transparent 4px
);
opacity: 0.5;}
.guid-card-caracteristique__text {display: flex;flex-direction: column;gap: 0.25em;}
.guid-card-caracteristique__title {color: var(--guidcardcaract-text);font-size: 1.1em;margin: 0;font-weight: 700;transition: all 0.3s ease;}
.guid-card-caracteristique__description {color: var(--guidcardcaract-text);font-size: 0.75em;margin: 0;opacity: 0.7;transition: all 0.3s ease;}
.guid-card-caracteristique__footer {display: flex;justify-content: space-between;align-items: center;margin-top: auto;}
.guid-card-caracteristique__price {color: var(--guidcardcaract-text);font-weight: 700;font-size: 1em;transition: all 0.3s ease;}
.guid-card-caracteristique__button {width: 28px;height: 28px;background: var(--guidcardcaract-accent);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: white;cursor: pointer;transition: all 0.3s ease;transform: scale(0.9);}

.guid-card-caracteristique:hover {transform: translateY(-10px);
box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);border-color: rgba(124, 58, 237, 0.2);}
.guid-card-caracteristique:hover .guid-card-caracteristique__shine {opacity: 1;animation: nouveaucardshine 3s infinite;}
.guid-card-caracteristique:hover .guid-card-caracteristique__glow {opacity: 1;}
.guid-card-caracteristique:hover .guid-card-caracteristique__badge {transform: scale(1);opacity: 1;z-index: 1;}
.guid-card-caracteristique:hover .guid-card-caracteristique__image {transform: translateY(-5px) scale(1.03);box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);}
.guid-card-caracteristique:hover .guid-card-caracteristique__title {color: var(--guidcardcaract-accent);transform: translateX(2px);}
.guid-card-caracteristique:hover .guid-card-caracteristique__description {opacity: 1;transform: translateX(2px);}
.guid-card-caracteristique:hover .guid-card-caracteristique__price {color: var(--guidcardcaract-accent);transform: translateX(2px);}
.guid-card-caracteristique:hover .guid-card-caracteristique__button {transform: scale(1);box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);}
.guid-card-caracteristique:hover .guid-card-caracteristique__button svg {animation: nouveaucardpulse 1.5s infinite;}


#guide {display: grid;margin:6px;grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr);grid-template-rows: 280px max(420px, 1fr) 1fr 1fr 500px 1fr 1fr 1fr 1fr 1fr;grid-column-gap:8px;grid-row-gap:8px}
#guide > div {border: 1px solid #E7EAEC;border-radius:8px;padding:8px 6px 4px 6px}
.guideboutique {margin-top:24px;grid-row-start:4;grid-column-start:1;grid-column-end:span 3;}
.guidefabricant {grid-row-start:5;grid-column-start:1;grid-column-end:4;}
.guide-argument{font-size:1.2rem;font-weight:700;letter-spacing:-1px;line-height:18px;margin-bottom:6px}
ul.guidecardlist{list-style: none;margin:0;padding:0;font-size:1.1rem;letter-spacing:-1px;}
img.cardguidimg{max-height:200px;}
p.guidepara{font-size:0.9rem;color:grey;line-height:12px;}
.guidecardvoir{margin-top:4px;max-width:96px;border:1px solid #A8B4BB;border-radius:8px;text-align:center;box-shadow:  4px 4px 8px 0px #b1b1b140}
a.aguidecardvoir{font-size:0.9rem;color:grey;}
a:hover.aguidecardvoir{color:#000;}
.guidecardvoir:hover{background-color:#F4F9FD;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.guidecardvoir:active{border:1px solid #222222;}
.guidecardtype{font-size:1.3rem;font-weight:700;line-height:16px}
.guidecardchiffre{font-size:1.5rem;font-weight:800;letter-spacing:-2px;}
.guidecardtext{line-height:16px;}
.guidecardtypetitre {font-size:1.1rem;font-weight:700;letter-spacing:-1px;line-height:16px;margin:10px 0 14px;}
.guidecardtypetitrespan{color:#EB652A;}
.guidecardhorizontal{width: 97%;margin: 0 0 -0.938em 0; /* 30px */
-webkit-column-count: 2;-webkit-column-gap: 0.2345em; /* 30px */
-webkit-column-fill: auto;-moz-column-count: 2;/*-moz-column-gap: 0.2345em; /* 30px -moz-column-fill: auto;*/
column-count: 2;column-gap: 0.1em; /* 30px column-fill: auto;*/
border:2px solid #FDEBE3;border-radius:8px;padding:3px;}
			@media only screen and ( max-width: 540px ) /*40em 640px */
{
.guidecardhorizontal{-webkit-column-count: 1;-webkit-column-gap: 0.4345em; /* 15px */-moz-column-count: 1;-moz-column-gap: 0.4345em; /* 15px */column-count: 1;column-gap: 0.4345em; /* 15px */}
}
.guidenomfabricant{font-weight:700}
p.guideparamarque{color:#5A6A74;font-weight:300;line-height:16px;margin:2px 8px 6px 4px}

.guide-bouton{background: linear-gradient(45deg, #EC6424, #F1AC00);color:#FFFFFF;font-weight:600;border-color:#fff;padding: 4px 12px 4px 12px;border-radius : 25px;}
.guide-bouton:hover{color:#FFFFFF;background: linear-gradient(45deg, #F1AC00, #EC6424);border-color:#222222;}
.guide-bouton:active{color:#FFFFFF;background: linear-gradient(45deg, #F1AC00, #EC6424)}
a.guide-bouton{color:#FFFFFF;}





#grid {
  display: grid;
  height: 100px;
  grid-template: repeat(4, 1fr) / 50px 100px;
}

#item1 {
  background-color: lime;
  grid-area: 2 / 2 / auto / span 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}
.parent {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: 1fr;grid-column-gap: 0px;grid-row-gap: 0px;max-height:200px;}
.photo {border:3px solid black;max-height:200px;}

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {grid-column-start: 4
}

.top { display: grid;grid-template-columns: 1fr 1fr 1fr;height:200px;margin:10px;padding:12px;border: 2px solid #E7EAEC; border-radius:8px}
.top-titre {font-size:1.2rem;font-weight:700;letter-spacing:-1px;padding:6px 0 2px 6px;}
.top-text {line-height:16px;margin:0px;padding:0px 4px 8px 6px;}

.top-argument {font-size:1.4rem;font-weight:800;}
ul.top-ul{font-size:1.2rem;font-weight:900;letter-spacing:-1px;color:#4B7E4E;list-style-type: none;margin: 0;padding: 0;text-align:left}
	
/* MESSAGE */
.fdalert{line-height:14px;padding:12px;}


.lesboxes{display: grid;grid-template-columns:repeat(3, 1fr);grid-column-gap:4px;grid-row-gap:6px}
.boxe {border:1px solid #E7EAEC;border-radius:8px;height:100%;position: relative;overflow: hidden;transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);}
.boxe {--boxe-text: white;}
.subboxe {display: grid;
        grid-template-columns: 1fr;
        grid-row: auto;
        grid-column-gap: 24px;
        grid-row-gap: 24px;
        padding: 8px;}
@media only screen and ( min-width: 1000px ) /*40em 640px */
{
	.subboxe {display: grid;
        grid-template-columns: 1fr 1fr;
        grid-row: auto auto;
        grid-column-gap: 24px;
        grid-row-gap: 24px;
        padding: 20px;}
}
.boxebadge {position: absolute;top: 12px;right: 12px;background: #10b981;color: white;padding: 0.25em 0.5em;border-radius: 999px;font-size: 0.7em;font-weight: 600;transform: scale(0.8);opacity: 0;transition: all 0.4s ease 0.1s;}
.boxeimage {height:50%;}
.boxetxt {height:50%;padding:8px;line-height:16px;bottom:6px;}
.boxetxtmarque{margin:2px 0 2px;font-weight:600}
.boxetxtprix {font-size:1.1rem;font-weight:800;letter-spacing:-1px;}
.boxetxtprix::after {content:"€";color:#49555C;font-size:0.9rem;font-weight:500;margin-left:1px}
.boxetxtvoir {}
.boxetxtvoir img{width:60px}
.boxetxtvoir::before {}
.boxetxtfoot{position:absolute;right:16px;bottom:16px;}
.boxetxtbutton {width: 28px;height: 28px;background: var(--boxe-text);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: white;cursor: pointer;transition: all 0.3s ease;transform: scale(0.9);}

.boxe:hover {transform: translateY(-10px);box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);border-color: rgba(124, 58, 237, 0.2);}
.boxe:hover .boxebadge {transform: scale(1);opacity: 1;z-index: 1;}
.boxe:hover .boxetxtbutton {transform: scale(1);box-shadow: 0 0 0 4px rgba(174, 202, 235, 0.4);}
.boxe:hover .boxetxtbutton svg {animation: nouveaucardpulse 1.5s infinite;}
.boxe:hover .boxetxtvoir::before {content:"voir";color:grey;}