#shop-app {
    --font-texts: 'Manrope',Arial,Helvetica,sans-serif;
    --bloc-margin: 1rem;
    --big-bloc-margin: 40px;
    --order-margin: 190px;     
    --shop-color-dg: #00943d;
    --shop-color-lg: #6cb41e;
    --shop-color-gr1: #4f646c;
    --shop-color-gr2: #b3c2c9;
    --shop-color-gr3: #ddd;
    --shop-color-red: #e7000e;
    --shop-color-warning: #e2f4cd;
    --splitbar-nav-bg-on: var(--shop-color-dg);
    --splitbar-nav-bg-off: #fff;
    --splitbar-nav-txt-off: #000;
    --splitbar-nav-txt-on: #fff;
    
    /* Forms */
    --form-filter-bg: var(--shop-color-gr3);
    --form-filter-txt: #000;
    --form-fields-border: var(--shop-color-gr2);
    --form-controls-bg: #eee;

    --form-button-bg: var(--shop-color-lg);
    --form-button-hover: var(--shop-color-dg);
    --form-button-fg: #fff;
    --form-flags-bg: var(--form-fields-border);   
    --form-reqdot: var(--shop-color-dg);
}

/* Variables CSS extraites */
.editform-page {
--font-txt: var(--font-texts);
--color-bg: #fff;
--color-light-bg: var(--shop-color-lg);
--color-border: var(--shop-color-gr1);
--color-txt: #000;
--color-txt-inv: #fff;
--color-thema-1: var(--shop-color-dg);
--color-field-bg: #f4f4f4;
--color-field-txt: #333;
--color-reqdot: var(--color-thema-1);
--color-container-bg: var(--color-light-bg);
--color-container-border: var(--color-border);
--color-areafield-border: var(--color-field-bg);
--color-button-bg: var(--color-thema-1);
--color-button-txt: var(--color-txt-inv);
--color-areafield-bg: var(--color-field-bg);
--color-areafield-border: var(--color-border);
--color-areafield-txt: var(--color-field-txt);
--color-close-button: var(--color-thema-1);
--color-help-icon: var(--color-thema-1);
--color-icon-in-button: var(--color-txt-inv);
--color-icon-button: var(--color-thema-1);
--color-radio-border: var(--color-border);
--color-radio-dot: var(--color-thema-1);
--color-radio-bg: var(--color-field-bg);
--color-checkbox-vu: var(--color-thema-1);
--color-checkbox-border: var(--color-border);
--color-checkbox-bg: var(--color-field-bg);
--color-list-bg: var(--color-light-bg);
--color-list-border: var(--color-border);
--color-step-off-bg: var(--color-light-bg);
--color-step-off-txt: var(--color-txt);
--color-step-on-bg: var(--color-thema-1);
--color-step-on-txt: var(--color-txt-inv);
}

.fu-modal {
    --font-texts: 'Manrope',Arial,Helvetica,sans-serif;
    --form-button-bg: #6cb41e;
    --form-button-hover: #00943d;
    --form-button-fg: #fff;
    --form-button-bg-cancel: #666
}

#shop-toolbar .ident { line-height: 1.3em; cursor: pointer; }
#shop-toolbar .awaitpro { font-size: 0.85rem; font-weight: bold; }


#shop-app {
    font-family: 'Manrope',Arial,Helvetica,sans-serif!important;
    padding-bottom: 50px;
}

#shop-app .order-width { max-width: 944px; }
#shop-app .order-margin { margin-left: var(--order-margin); }
#shop-app .order-info { margin-bottom: 2rem; }
#shop-app .order-info .title { text-transform: uppercase; margin-bottom: 0.3rem; }
#shop-app .tooltip-image { display: block; margin: 0 auto; }

/*#shop-app h1, #shop-app h2, #shop-app h3, #shop-app h4 {  font-family: inherit!important; }*/

#shop-app h1 { margin-bottom: 0.5em; }
#shop-app h2 { margin-bottom: 0.5em; color: var(--shop-color-dg); }
#shop-app h3 { margin-bottom: 0.5em; line-height: 1.5em; }
#shop-app h4 { margin-bottom: 0.5em; color: var(--shop-color-dg)!important; }
#shop-app .bloc { margin-bottom: var(--bloc-margin); }
#shop-app .v-buttons { display: flex; flex-direction: column; gap: 15px; }
#shop-app .v-buttons-centered { justify-content: stretch; display: flex; flex-direction: column; gap: 15px;  text-align: center;  }
#shop-app .h-buttons { display: flex; gap: 15px; }
#shop-app .button-right { display: flex; justify-content: flex-end; }
#shop-app .h-flex { display: flex; gap: 15px; align-items: center; }
#shop-app .no-gap { gap: 0; }
#shop-app .texte p { margin-bottom: 1rem; }
#shop-app .texte ul { margin-left: 1.5rem; margin-bottom: var(--bloc-margin); }
#shop-app .texte ul li { margin-bottom: 0.5rem; }
#shop-app .texte ul li::marker { color: var(--shop-color-lg); }
#shop-app .error { color: var(--shop-color-red); }

#shop-app .back-button { display: inline-flex; gap: 5px; align-items: center; cursor: default; font-size: 1rem; text-decoration: none; padding: 0.5rem 1rem 0.5rem 0rem; cursor: default; margin-left: -4px; }
#shop-app .back-button .icon { transition: all 0.4s; }
#shop-app .back-button:hover .icon { transform: translateX(-3px); }
#shop-app .button { display: inline-block; background-color: var(--shop-color-lg); color: #fff!important; text-decoration: none; border-radius: 1.5rem; font-size: 1rem; line-height: 1.5rem; padding: 0.5rem 1rem; cursor: default; }
#shop-app .button:hover { background-color: var(--shop-color-dg); }
#shop-app .button.button-small { padding: 0 1rem; border-radius: 1rem; }

#shop-app .button-row { display: flex; justify-content: space-between; align-items: center; }

#shop-app .square-button { display: inline-block; background-color: var(--shop-color-lg); color: #fff!important; border: 0 none; text-decoration: none; font-size: 1rem; line-height: 1rem; padding: 0.2rem 0.3rem; cursor: default; font-weight: 600; text-transform: uppercase; }

#shop-app .icon { width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; background-position: center; }
#shop-app .icon.big { width: 40px; height: 40px; }

#shop-app .picto-text { display: inline-flex; gap: 4px; align-items: center; margin-right: 8px; }
#shop-app .pictos-text { display: inline-flex; gap: 4px; align-items: top; margin-right: 8px; }
#shop-app .pictos-text .picto { margin-top: 2px; }

#shop-app .picto { width: 24px; height: 24px; display: inline-block; vertical-align: center; background-repeat: no-repeat; background-size: contain; background-position: center; }

#shop-app .picto-temperature { background-image: url(pictos/temperature.svg); }

#shop-app .icon-info { background-image: url(icons/info.svg); }
#shop-app .icon-dim-info { }

#shop-app .check-option { display: flex; gap: 15px; cursor: default; user-select: none; align-items: center; }
#shop-app .check-option .checkbox-bg { border: 2px solid #ccc; border-radius: 5px; flex: 0 0 16px; }
#shop-app .check-option.on .checkbox-vu { visibility: visible; }
#shop-app .check-option.on .checkbox-vu .icon { }
#shop-app .check-option .checkbox-vu { width: 24px; height: 24px; visibility: hidden; box-sizing: border-box;  }

#shop-app .collapse-title { display: flex; gap: 10px; align-items: center; cursor: default; }
#shop-app .collapse-box { /* display: none; */ }
#shop-app .collapse-title .icon { transform: scale(1); transition: transform 0.4s; }
#shop-app .collapse-title h4 {
    background-color: var(--shop-color-lg); color: white!important; padding: 0 8px; font-size: 1rem!important; display: inline-block; 
}

#shop-app .diminfo { display: flex; align-items: top; gap: 3px; cursor: help; }
#shop-app .diminfo .icon { position: relative; top: 5px; }
#shop-app .diminfo .long { display: none; background-color: var(--shop-color-dg); color: white; font-size: 1rem; line-height: 1.3rem; padding: 0.8rem 1rem; }

/* Account */

#shop-app hr { margin: 3rem 0; opacity: 0.5; }

#shop-app .form-area { max-width: 600px; margin: 0 auto; }
#shop-app .message { margin-bottom: var(--big-bloc-margin); }
#shop-app .message a { color: var(--shop-color-dg)!important; }
#shop-app .orders-list .order-item {  display: flex; gap: 10px; align-items: flex-start; }
#shop-app .orders-list .order-item > div { flex: 1 1 20%; }
#shop-app .orders-list .order-item > a { margin-left: auto; }
#shop-app .orders-list .order-item .button { text-align: center; }

#shop-app .address-box { border-bottom: 1px solid #000; gap: 40px; padding: 1rem; margin-bottom: 1rem; display: flex; align-items: stretch; }
#shop-app .address-box .v-buttons { height: 100%; }
#shop-app .addresses-list .def-addr-bts { margin-top: 15px; display: flex; justify-content: space-between; gap: 15px; }
#shop-app .addresses-list .def-addr-bts a.button { background-color: #ccc; }
#shop-app .addresses-list .def-addr-bts a.button.on { background-color: var(--shop-color-lg); }
#shop-app .addresses-list .def-addr-bts a.button:hover { background-color: var(--shop-color-dg); }

/* Catalogue */

#shop-app .search .search-type { color: var(--shop-color-dg); text-transform: uppercase; font-size: 1rem; font-weight: bold; }
#shop-app #name-search { margin: 0.4em 0 0.6em 0; }
#shop-app .search .search-info { font-size: 0.9rem; line-height: 1.2em; margin-bottom: 0.5rem; }

#shop-app .catalogue { display: flex; gap: 49px; }
#shop-app .catalogue .search .area-control { background-color: #ddd; border: 0 none; display: block;  padding: 6px; width: 100%; box-sizing: border-box; font-size: 0.9rem; }
#shop-app .catalogue .left { flex: 0 0 262px; font-family: var(--font-texts); }
#shop-app .catalogue.shop-index .left { margin-top: -9px; }
#shop-app .catalogue.shop-results .left { margin-top: 99px; }
#shop-app .catalogue .search { margin-bottom: 20px; }
#shop-app .catalogue .search .boxtitle { font-size: 1.1rem; }
#shop-app .catalogue .search fieldset { border: 0 none; font-size: 1rem; padding-bottom: 0.5rem; margin-bottom: 0.5rem;  user-select: none; }
#shop-app .catalogue .search select { display: block; padding: 4px; width: 100%; }
#shop-app .catalogue .search label.checkbox { display: flex; gap: 0.3rem; align-items: flex-start; line-height: 1.4em; }
#shop-app .catalogue .search label.checkbox input { margin-top: 4px; }
#shop-app .catalogue .search .fs-4-col { display: grid; grid-template-columns: repeat(4, 1fr); }
#shop-app .catalogue .search .fs-3-col { display: grid; grid-template-columns: repeat(3, 1fr); }
#shop-app .catalogue .search .fs-1-col { display: flex; flex-direction: column; gap: 5px; }
#shop-app .catalogue .search .fs-wrap { display: flex; flex-wrap: wrap; gap: 1rem; }
#shop-app .catalogue .search .h-buttons { margin-top: 0.5rem; }
#shop-app .catalogue .search .criteria { border-bottom: 1px solid #000; padding-bottom: 0.2rem; margin-bottom: 0.6rem; }
#shop-app .catalogue .search .criteria .collapse-title { cursor: default; user-select: none; }
#shop-app .catalogue .search .criteria .collapse-box { display: none; }
#shop-app .catalogue .search .criteria .boxtitle { font-size: 1rem; }
#shop-app .catalogue .search .criteria .collapse-title .icon { transform: scale(-1); }
#shop-app .catalogue .search .criteria.open .collapse-box { display: block; }
#shop-app .catalogue .search .criteria.open .collapse-title .icon { transform: scale(1); }

#shop-app .catalogue .results { flex: 1 1 100%; }
#sections #shop-app .catalogue .results h1 { font-size: 1.5rem!important; margin-bottom: 25px!important; font-weight: 600!important; font-family: var(--font-texts)!important; color: var(--shop-color-dg); text-transform: uppercase; }
.ui-menu-item.name { border-bottom: 1px solid #ccc; }
.ui-menu-item.name .latin { font-weight: bold; font-size: 0.8rem; }
.ui-menu-item.name .commun { font-weight: normal; font-style: italic; font-size: 0.8rem; }

#shop-app .catalogue .promo-area { margin-bottom: 20px; }
#shop-app .catalogue .promo-area .title { font-size: 0.95rem; color: #000; font-weight: 500; line-height: 1.3em; }
#shop-app .catalogue .promo-area .desc { font-size: 0.85rem; color: var(--shop-color-dg); line-height: 1.5em; }

/* List de groupes */

#shop-app .catalogue .groups { flex: 1 1 100%; max-width: 100%; display: flex; gap: 24px; margin-bottom: var(--bloc-margin); flex-wrap: wrap; }
#shop-app .catalogue .groups a.group { overflow: hidden; flex: 0 1 259px; aspect-ratio: 1; min-width: 200px; display: block; position: relative; background-size: cover; background-repeat: no-repeat; }
#shop-app .catalogue .groups a.group .box { position: absolute; top: 0; left: 0; width: 100%; bottom: 0; display: flex; align-items: center; justify-content: center; }
#shop-app .catalogue .groups a.group .imgbox { transition: transform 0.4s; position: absolute; top: 0; left: 0; width: 100%; bottom: 0; background-size: cover; background-repeat: no-repeat; }
#shop-app .catalogue .groups a.group:hover .imgbox { transform: scale(1.05); }
#shop-app .catalogue .groups a.group .box .caption { transition: background-color 0.4s; background-color: var(--shop-color-dg); font-size: clamp(0.85rem, 2.5vw, 1rem); color: white; text-transform: uppercase; padding: 10px; line-height: 1.3em; font-weight: 600; box-sizing: border-box; width: 80%; text-align: center; }
#shop-app .catalogue .groups a.group:hover .caption { background-color: var(--shop-color-lg);  }

#shop-app .fu-split-bar .records { font-size: 1rem; opacity: 0.7; }

/* Liste de plantes */

#shop-app .plantes { flex: 1 1 100%; max-width: 100%; display: flex; gap: 24px; margin-bottom: 50px; flex-wrap: wrap; }
#shop-app .plante { flex: 0 1 259px; min-width: 200px; }
#shop-app .likes .plante { flex: 0 1 266px; }

#shop-app .plante a { text-decoration: none; }
#shop-app .plante .box { display: block; position: relative; aspect-ratio: 1/1; overflow: hidden; }
#shop-app .plante .imgbox { transition: transform 0.4s; position: absolute; top: 0; left: 0; width: 100%; bottom: 0; background-size: cover; background-repeat: no-repeat; }
#shop-app .plante:hover .imgbox { transform: scale(1.05); }
#shop-app .plante .names { padding: 8px 8px 0 8px; margin-bottom: -4px; }
#shop-app .plante .names h2 { margin: 0 0 0 0!important; font-size: clamp(0.85rem, 2.5vw, 1.1rem)!important; text-align: center; font-family: var(--font-texts)!important; font-weight: 600!important; }
/*#shop-app .plante .shade h2 a { text-decoration: none; color: var(--shop-color-dg)!important; font-family: var(--font-texts)!important; }*/
#shop-app .plante .names h3 { text-decoration: none; margin: 0!important; letter-spacing: 0!important; font-size: clamp(0.85rem, 2.5vw, 1rem)!important; color: #000!important; text-decoration: none;  text-transform: none!important; text-align: center; font-family: var(--font-texts)!important; font-weight: normal!important; }
#shop-app .plante .like { position: absolute; right: 10px; top: 10px; }

/* Cart */

#shop-app .cart { margin-top: 3rem; }
#shop-app .cart .cart-item { display: flex; gap: 30px; width: 100%; 
    display: grid;
    grid-template-columns: 160px 1fr 1fr;
    grid-template-areas:
    "photo name       qte-total"
    "photo references qte-total"
    "free  border border";
    gap: 10px;
    margin-bottom: 2rem;
}
#shop-app .cart .cart-item .photo { grid-area: photo; }
#shop-app .cart .cart-item .image { width: 100%; aspect-ratio: 1/1; overflow: hidden; /*background-size: cover; background-repeat: no-repeat; background-position: center;*/ }

#shop-app .cart .cart-item .border { grid-area: border; margin-left: 20px; margin-top: 1rem; border-top: 1px solid var(--shop-color-lg); height: 1px; }

#shop-app .cart .cart-item .name { grid-area: name; margin-left: 20px; }
#shop-app .cart .cart-item .name1 { color: var(--shop-color-dg); font-size: 1.8rem; margin-bottom: 0.1rem; }
#shop-app .cart .cart-item .name2 { font-size: 1.2rem; margin-bottom: 1rem; }

#shop-app .cart .cart-item .references { grid-area: references; margin-left: 20px; }
/*#shop-app .cart .cart-item .infos { width: 100%; padding-bottom: 3rem; border-bottom: 1px solid #000; margin-bottom: 2rem; display: flex; justify-content: space-between; gap: 15px;  }*/

#shop-app .cart .cart-item .qte-total { grid-area: qte-total; display: flex; flex-direction: column; align-items: flex-end; }
#shop-app .cart .cart-item .qte-total .total-price { font-weight: bold; font-size: 1.5rem; margin-bottom: 1rem; }
#shop-app .cart .cart-item .qte-total .total-price-strike { text-decoration: line-through; }
#shop-app .cart .cart-item .qte-total .delete { display: flex; gap: 5px; margin-top: auto; cursor: default; }
#shop-app .cart .cart-item .unit-price { font-size: 1rem; margin-bottom: 0.5rem; }
#shop-app .cart .cart-item .qualdim { display: flex; gap: 15px; margin-bottom: 0.5rem; flex-wrap: wrap; }
#shop-app .cart .cart-item .quant-selector { margin-bottom: 1rem; }

/* Order Summary */
#shop-app .summary { margin-left: var(--order-margin); margin-bottom: 40px; }
#shop-app .summary .row { display: flex; justify-content: space-between; }
#shop-app .summary .summary-group { margin-bottom: 10px; }
#shop-app .summary .row.total .caption { color: var(--shop-color-dg); font-size: 1.3rem; }
#shop-app .summary .row.total .value { font-size: 1.3rem; font-weight: bold; }

#shop-app .quant-selector { display: flex; }
#shop-app .quant-selector input.qte { width: 2.7rem; padding: 4px; font-size: 1.2rem; text-align: center; margin: 0 -1px; z-index: 1; height: 36px; box-sizing: border-box; border-radius: 0; border: 1px solid var(--shop-color-gr3); }
#shop-app .quant-selector .incdec { border: 1px solid var(--shop-color-gr3); width: 22px; height: 36px; box-sizing: border-box; background-color: #fff; display: flex; align-items: center; justify-content: center; fill: var(--shop-color-lg); }
#shop-app .quant-selector .incdec svg { display: block; width: 10px; height: 10px; }
#shop-app .quant-selector .incdec:hover { background-color: var(--shop-color-lg); fill: white; }


/* Checkout Review */

#shop-app .review .order-margin { margin-left: var(--order-margin); }
#shop-app .review .fu-form button { margin-left: auto; display: block; }
#shop-app .review .address-type .button { padding: 0 16px; font-size: 0.85rem; }

#shop-app .checkout-addresses { display: flex; gap: 30px; margin-bottom: 3rem; justify-content: space-between; flex-wrap: wrap; }
#shop-app .checkout-addresses .button { margin: 0.5rem 0; }
#shop-app .checkout-addresses .address-type-title { text-transform: uppercase; font-weight: bold; margin-bottom: 0.3rem; }

/* Article */

#shop-app .article .groupnav { display: flex; justify-content: space-between; margin-bottom: 2rem; align-items: center; font-size: 1.1rem; }
#shop-app .article .groupnav .nav { display: flex; gap: 15px; align-items: center; }
#shop-app .article .groupnav .arrows { display: flex; gap: 5px; align-items: center; }
#shop-app .article .groupnav .arrows a { display: block; position: relative; }
#shop-app .article .groupnav .arrows a.left { padding: 20px 20px 20px 10px; margin: -20px -20px -20px -10px; }
#shop-app .article .groupnav .arrows a.right { padding: 20px 10px 20px 20px; margin: -20px -10px -20px -20px; }
#shop-app .article .groupnav.bottom { margin-top: 50px; }
#shop-app .article .columns { display: flex; gap: 100px; }
#shop-app .article .col1 { flex: 1 1 40%; }
#shop-app .article .col2 { flex: 1 1 40%; }

#shop-app .article .header { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
#shop-app .article .header.no-desc { margin-bottom: 0; border-bottom: 1px solid red; }

#sections #shop-app .article .header h1 { line-height: 1.3em!important; }

#shop-app .qualities .qualdesc { font-size: 1rem; margin-bottom: 0.7rem; }
#shop-app .qualities .unavailable { color: var(--shop-color-red); }

#shop-app .article .description { padding-bottom: 12px; margin-bottom: 12px; padding-top: 24px; border-top: 1px solid #000;}
#shop-app .article .description .collapse-box { margin-bottom: -10px; }
#shop-app .article .quality { margin-bottom: 20px; border-top: 1px solid #000; padding-top: 24px; }
#shop-app .article .quality .collapse-box { margin: 0 25px; }

#sections #shop-app .article h1 { font-size: 1.7rem!important; line-height: 1.1em!important; margin-bottom: 0.3em!important; font-weight: normal!important; color: var(--shop-color-dg)!important; font-family: var(--font-texts)!important; }
#sections #shop-app .article h2 { font-size: 1.1rem!important; font-weight: normal!important; color: #000; font-family: var(--font-texts)!important; font-weight: 300!important;  }
#sections #shop-app .article h4 { font-size: 1.1rem!important; margin-bottom: 0.7rem; font-weight: bold!important }
#shop-app .article .boxtitle { display: inline-block; background-color: var(--shop-color-lg); padding: 0px 6px; color: white!important; }
#shop-app .article .description .collapse-title { margin-bottom: 0; }
#shop-app .article .collapse-title { margin-bottom: 12px; }
#shop-app .article table.desc { border-collapse: collapse; margin-top: 0.8rem; }
#shop-app .article table.desc th { color: var(--shop-color-dg); text-align: left; font-size: 1rem; vertical-align: top; font-weight: normal; padding: 4px 20px 4px 0; white-space: nowrap; }
#shop-app .article table.desc td { font-size: 1rem; vertical-align: top; font-weight: normal; padding: 4px 0; }
#shop-app .article .lh-compact { line-height: 1.5em; }
#shop-app .qualities table.prices { width: 100%; }
#shop-app .qualities table.prices { border-collapse: collapse; }
#shop-app .qualities table.prices { font-size: 1rem; }
#shop-app .qualities table.prices thead th { color: #000; font-weight: bold; font-size: 0.9rem; padding-bottom: 4px; }
#shop-app .qualities table.prices th.cn1 { text-align: left; padding-left: 10px; }
#shop-app .qualities table.prices th.cn2 { text-align: center; }
#shop-app .qualities table.prices th.cn3 { text-align: right; padding-right: 10px; }
#shop-app .qualities table.prices td.price { text-align: center; }
#shop-app .qualities table.prices td.cartactions { text-align: right; }

#shop-app .qualities table.prices thead { border-bottom: 1px solid black; text-transform: uppercase; padding-bottom: 50px; }
#shop-app .qualities table.prices tbody tr:first-child td { padding-top: 12px; }

#shop-app .qualities table.prices tbody td { padding: 0.4rem 0.5rem; }
#shop-app .qualities table.prices .addtocart-box { display: inline-flex; gap: 15px; }
#shop-app .qualities table.prices .addtocart { position: relative; cursor: default; }
#shop-app .qualities table.prices .icon-add-to-cart { transition: all 0.2s; }
#shop-app .qualities table.prices .icon-add-to-cart:hover { transform: scale(1.1); }
#shop-app .qualities table.prices .addtocart .added { transform: scale(0); position: absolute; top: -12px; right: -12px; background-color: var(--shop-color-red); color: #fff; width: 36px; height: 36px; line-height: 36px; font-size: 16px; font-weight: bold; text-align: center; border-radius: 50%; transition: all 0.3s; }
#shop-app .qualities table.prices .addtocart.on .added { transform: scale(0.9); }

/*
#shop-app .qualities table.prices .addtocart-box .addtocart { position: relative; }
#shop-app .qualities table.prices .addtocart-box .addtocart .counter { position: absolute; top: 0; right: 0; background-color: red; }
#shop-app .qualities table.prices .addtocart-box .addtocart:hover .icon { transform: scale(1.2); }
#shop-app .qualities table.prices .addtocart-box .icon { transform: scale(1); transition: transform 0.2s; }
*/

#shop-app .article .pictures { position: relative; }
#shop-app .article .pictures .thumbs { display: flex; margin-top: 22px; gap: 22px; flex-wrap: wrap; margin-bottom: var(--bloc-margin); }
#shop-app .article .pictures .thumbs a { display: block; width: 100px; height: 100px; background-size: cover; background-position: center; }
#shop-app .article .pictures .photo a { display: block; }
#shop-app .article .pictures img { width: 100%; height: auto; display: block; }
#shop-app .article .pictures .missing-image { opacity: 0.4; }

/* Fx */ 

#shop-app .rotation-y-loop {
	animation: rotation-y-loop 2s linear infinite;
	transform-style: preserve-3d;
	backface-visibility: visible;
	will-change: transform;
}

@keyframes rotation-y-loop {
	from {
		transform: rotateY(0deg);
	}
	to {
		transform: rotateY(360deg);
	}
}

/* Split Bar */

.fu-split-bar { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-bottom: var(--bloc-margin); flex-wrap: wrap; }
.fu-split-bar .nav { display: flex; gap: 8px; align-items: center; cursor: default; user-select: none; }
.fu-split-bar .link:hover { opacity: 0.8; }
.fu-split-bar .link.on { background-color: var(--splitbar-nav-on)!important; }
.fu-split-bar .link.text-link { background-color: var(--splitbar-nav-bg-off)!important; color: var(--splitbar-nav-txt-off)!important; border-radius: 0px; padding: 0 0.2rem; line-height: 2rem; display: inline-block; box-sizing: border-box; min-width: 2rem; text-align: center; text-decoration: none; }
.fu-split-bar .link.on.text-link { background-color: var(--splitbar-nav-bg-on)!important; color: var(--splitbar-nav-txt-on)!important; }
.fu-split-bar .link.icon-link i.icon { font-size: 2rem; }
.fu-split-bar .link.icon-link i.icon::before { display: block; }
    
/* Modal */

.fu-modal { z-index: 500; font-family: var(--font-texts); position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; }
.fu-modal-content { max-width: 500px; min-width: 300px; font-size: 1.2rem; background-color: #fff; border: 2px solid #ccc; padding: 22px; border-radius: 11px }
.fu-modal .fu-buttons { display: flex; justify-content: center; margin-top: 2em; }
.fu-modal .fu-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.2rem; }
.fu-modal .fu-block { font-size: 1em; line-height: 1.5rem; margin-bottom: 1rem; min-height: 50px; max-height: 500px; overflow-y: auto; box-sizing: border-box; }

.fu-button { background-color: var(--form-button-bg); color: var(--form-button-fg); border: none; font-weight: normal; border-radius: 1.5rem; padding: 0.5rem 1rem; font-size: 1rem; line-height: 1.5rem; text-align: center; min-width: 80px; user-select: none; cursor: default; }
.fu-button:hover { background-color: var(--form-button-hover); }
.fu-button.fu-cancel { background-color: var(--form-button-bg-cancel); }

/*.fu-button:hover { opacity: 0.9; }*/

/* Forms */

.fu-form .fu-field { margin-bottom: 1em; }
.fu-form .fu-area-control { font-size: 1rem; border: 0px solid var(--form-fields-border); border-radius: var(--radius-sm); padding: 12px; margin: 0; box-sizing: border-box; width: 100%; background-color: var(--form-controls-bg); }
.fu-form .fu-buttons { display: flex; gap: 15px; justify-content: space-between; align-items: center; margin-top: 40px; }

.fu-form .fu-control.fu-multilungual { display: flex; flex-direction: column; gap: 5px; }
.fu-form .fu-control.fu-multilungual .fu-language-row { display: flex; width: 100%; }
.fu-form .fu-control.fu-multilungual .fu-language-flag { background-color: var(--form-flags-bg); border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); text-transform: uppercase; width: 2rem; font-size: 0.8rem; text-align: center; padding: 4px 0; }
.fu-form .fu-control.fu-multilungual .fu-area-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.fu-form .fu-control.fu-multilungual .fu-language-control { width: 100%; }

.fu-form .fu-control label.fu-choice input { margin-right: 0.3rem; }

.fu-form .fu-radios { display: flex; gap: 1rem; }

.fu-form .fu-reqdot { color: var(--form-reqdot); margin-left: 0.3rem; }

.fu-form .fu-field .error { background-color: #a00; color: white!important; margin-top: 10px; padding: 5px 10px; position: relative; border-radius: 8px; display: inline-block; }
.fu-form .fu-field .error .mark { width: 12px; height: 12px; position: absolute; background-color: inherit; top: -6px; left: 20px; transform: rotate(45deg); }

/* File upload control */
.fu-form .filezone { display: flex; flex-direction: column; gap: 10px; }
.fu-form .filezone .thumbs { display: flex; gap: 15px; flex-wrap: wrap; }
.fu-form .filezone .thumbs .thumb { 
    position: relative; background-color: #ddd; background-size: contain; background-repeat: no-repeat; background-position: center;
    width: 96px; height: 96px;  box-sizing: border-box; 
}
.fu-form .filezone .thumbs .thumb .svg-button { display: block; width: 24px; height: 24px; }
.fu-form .filezone .dropzone { padding: 0.2em; border: 2px dotted var(--form-fields-border); border-radius: 7px; text-align: center; background-color: var(--form-controls-bg); }
.fu-form .filezone .dropzone:hover { background-color: var(--light-over); cursor: pointer; }
.fu-form .filezone input[type=file] { display: none!important; }
.fu-form .filezone .fileinfo { padding: 0.5em 0; border-bottom: 1px solid #ccc; box-sizing: border-box; height: 30px; }
.fu-form .filezone .fileinfo * { box-sizing: border-box; }
.fu-form .filezone .fileinfo .abort { margin-left: 0.5em; padding: 3px 1em; color: #900; transition: all 0.5s; cursor: default; }
.fu-form .filezone .fileinfo .abort:hover { background-color: #900; color: #fff; border-radius: 5px; }
.fu-form .filezone .fileinfo .progbox > * { display: inline-block; }
.fu-form .filezone .fileinfo .progbox { float: right; padding-left: 1em; }

@media screen and (max-width: 800px) {
    #shop-app .hide-on-mobile { display: none; }
    #shop-app .catalogue { flex-direction: column; }
    #shop-app .catalogue .groups { gap: 10px; }
    #shop-app .catalogue .groups a.group { flex: 0 1 48%; min-width: 150px; }
    #shop-app .plantes { flex: 1 1 100%; max-width: 100%; display: flex; gap: 10px; }
    #shop-app .plante { flex: 0 1 48%; min-width: 150px; overflow: hidden; }
    #shop-app .article .quality .collapse-box { margin: 0;  }
    #shop-app .article .columns { display: flex; gap: 20px; flex-direction: column-reverse; }
    #shop-app .article .groupnav { flex-direction: column; align-items: stretch; justify-content: stretch; gap: 12px; }
    #shop-app .article .groupnav .nav { justify-content: space-between; }
    
    #shop-app .order-margin { margin-left: 0!important; }
    #shop-app .checkout-addresses { flex-direction: column; gap: 30px; }

    #shop-app .cart .cart-item {
        grid-template-columns: 96px 2fr 1fr;
        grid-template-areas:
        "photo name name"
        "references references qte-total"
        "border border border";
        gap: 10px;
    }
    
    #shop-app .cart .cart-item .name { grid-area: name; margin-left: 10px; }
    #shop-app .cart .cart-item .name2 { margin-bottom: 0; }
    #shop-app .cart .cart-item .border { margin-left: 0px; }
    #shop-app .cart .cart-item .references { grid-area: references; margin-left: 0px; }
    #shop-app .cart .cart-item .qualdim { flex-direction: column; gap: 0; }
    #shop-app .cart .cart-item .qte-total .total-price { font-size: 1.3rem; margin-bottom: 1rem; text-align: right; }
    #shop-app .cart .cart-item .qte-total { margin-top: 0.5rem; }
    #shop-app .cart .cart-item .quant-selector { margin-bottom: 0.5rem; }
    #shop-app .summary { margin-left: 0; }

    #shop-app .address-box { flex-direction: column; }
    #shop-app .addresses-list .address-area { flex-direction: column; gap: 0; }

    #shop-app .catalogue .promo-area { display: none; }
    
}

@media print {
    #topex { display: none; }
    #footer { display: none; }
    #footer2 { display: none; }
    #sections .section_container .container { box-sizing: border-box; width: 100%!important; }
    #shop-app .back-button { display: none; }
    #shop-app .order-width { box-sizing: border-box; width: 100%; max-width: 100cm!important; }
    #shop-app .order-margin { margin-left: 0; }
    #shop-app .cart-item { break-inside: avoid; page-break-inside: avoid; }
}