.form-error.text-danger ul{
    list-style-type: none;
    padding: 0;
}

.companyNameRef{
    position: absolute;
    text-indent: -9999px;
}

.noWave .header-style-2 .main-bar:after,
.noWave .bg-line-top:before,
.noWave .dlab-bnr-inr:before,
.noWave .bg-line-bottom:after{
    background-image: none;
}

.site-header.center .navbar-nav > li.cartMenuItem {
    float: right;
}

.header-nav .nav > li > a {
    text-transform: initial;
}

.header-nav .nav > li .sub-menu {
    border: 0;
    border-radius: 0;
}

.header-nav .nav > li .sub-menu.cartSubmenu {
    padding: 5px;
    max-width: 400px;
    right: 0;
    left: auto;
    width: 400px;
}
.header-nav .nav > li .sub-menu.cartSubmenu li td{
    font-size: 13px;
}
.header-nav .nav > li .sub-menu.cartSubmenu li a{
    font-size: 13px;
    text-transform: none;
}
.header-nav .nav > li .sub-menu.cartSubmenu li small{
    font-size: 70%;
}
.header-nav .nav > li .sub-menu.cartSubmenu img {
    max-width: 50px;
}
.cartSubmenu .cartOverflow{
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}
.cartSubmenu .cartProducts td{
    vertical-align: middle;
}

#categSelector .service-box1{
    cursor: pointer;
}

.owl-nav.disabled{
    display: none;
}
.service-box1:after{
    content: none;
}

.footer-bottom{
    padding: 10px 0;
}

.widget_services .list-2 li a {
    text-transform: initial;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LE LOGO NE PEUT PLUS SORTIR DE L'EN-TÊTE

   Il rétrécissait au défilement : une classe `shopLogoSmall` ramenait sa largeur
   de 120 à 85 px dès le cinquième pixel de scroll, avec une transition d'une
   seconde. Ce dispositif existait pour une boutique précise, dont le logo
   dépassait un peu du bandeau.

   Le contournement était bancal pour un socle multi-boutiques : le débordement
   dépend du logo TÉLÉVERSÉ, dont on ne sait rien. `.logo-header img` pose
   `height: auto`, donc un logo carré occupe 120 px de haut alors que le bandeau
   n'en offre qu'une centaine. Rétrécir au défilement ne réglait pas ça — le logo
   débordait toujours en haut de page, là où le visiteur arrive.

   On borne donc la HAUTEUR, ce qui traite la cause : quelles que soient les
   dimensions du fichier, le logo tient dans le bandeau, et il y tient dès le
   premier affichage. `object-fit: contain` l'inscrit dans ce cadre sans le
   déformer — sans quoi une hauteur bornée écraserait un logo haut.

   Plus de JavaScript au défilement, donc, et plus de classe à ajouter.
   ───────────────────────────────────────────────────────────────────────────── */
#shopLogo {
    max-height: 80px;
    object-fit: contain;
    /* Pas d'`object-position: left` ici, contrairement à ce que j'avais posé : cet
       en-tête est de type « center », le logo est centré entre les deux moitiés du
       menu. Le caler à gauche de son cadre le décentrait par rapport au bandeau,
       ce qui allait à l'encontre de la mise en page du thème. Le centrage par
       défaut d'`object-fit` est le bon. */
}

/* ─────────────────────────────────────────────────────────────────────────────
   CENTRAGE VERTICAL DU LOGO À PARTIR DE 768 px

   Il est collé en HAUT du bandeau, alors que le menu, la recherche et le panier
   sont centrés — le décalage se voit immédiatement, et d'autant plus que l'écran
   est large : mesuré au rendu, le bandeau fait 57 px de haut à 800 px de large et
   90 px à 1400, quand le logo reste à la même hauteur dans les deux cas.

   La cause : le thème sort le logo du flux pour le centrer HORIZONTALEMENT entre
   les deux moitiés du menu, et cette règle ne porte aucune media query — elle
   s'applique donc dès 768 px :

       .site-header.center .logo-header {
           position: absolute; left: 50%; transform: translate(-50%);
       }

   Un seul axe est traité. Sans `top`, un élément absolu conserve sa position
   STATIQUE en vertical, c'est-à-dire le haut du flux — d'où le logo en haut.

   On ajoute donc `top: 50%` et un décalage sur les DEUX axes. Le contexte de
   positionnement est `.main-bar .container`, qui porte `position: relative` ; le
   bandeau n'ayant pas de remplissage vertical, sa hauteur et celle du conteneur
   se confondent, et 50 % se rapporte bien au bandeau.

   ── LA BORNE EST 768 px, ET J'AVAIS ÉCRIT 992 ──

   Ma version précédente affirmait qu'« en dessous de 992 px, le thème remet
   `.logo-header` dans le flux ». C'est FAUX, et la correction se lit dans le
   thème : le seul endroit qui rétablisse `position: relative` est le bloc
   `@media only screen and (max-width: 767px)` de `style.css`. Entre 768 et
   991 px, le logo était donc absolu ET sans centrage vertical — une bande de
   224 px que ma media query laissait derrière elle.

   Deux leçons pour la prochaine fois : la borne d'un correctif se lit dans la
   règle qu'on corrige, pas dans le point de rupture qu'on a en tête (992 est
   celui de `navbar-expand-lg`, qui n'a rien à voir) ; et ce défaut se voyait au
   premier rendu de la page, ce que je n'avais pas fait.

   ── Pourquoi les préfixes ──

   Le thème déclare les quatre variantes de `transform`. Ne surcharger que la
   propriété standard laisserait un moteur qui honore encore sa variante préfixée
   appliquer l'ancien décalage à un seul axe, et le logo resterait décentré
   verticalement chez lui seul — un défaut qu'on ne verrait jamais en
   développement.
   ───────────────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 768px) {
    .site-header.center .logo-header {
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        /* Le thème posait `padding: 10px 0`. Ce remplissage étant symétrique, il ne
           décalait PAS le centrage — mais il ajoutait 20 px à la hauteur de
           l'élément : 80 px de logo + 20 = 100 px, pour un bandeau d'environ
           103 px. On le retire pour garder de la marge, sans quoi un logo à la
           hauteur maximale toucherait presque les bords. */
        padding: 0;

        /* ── LA HAUTEUR SUIT LE LOGO, ELLE NE LUI EST PLUS IMPOSÉE ──
           Le thème donne à `.logo-header` une hauteur fixe — cinq valeurs selon la
           largeur d'écran, de 50 à 90 px, remplissage compris. Quand elle DÉPASSE
           celle du bandeau, `top: 50%` puis `translateY(-50%)` fait forcément
           déborder l'élément des deux côtés, de la moitié de l'écart.

           Mesuré le 31/08/2026 sur `/fr/methodes-de-livraison`, à 1700 px :
           `.logo-header` calculé à 106 px pour un bandeau de 64 — le logo sortait
           donc de 21 px PAR LE HAUT, à l'endroit où le client valide sa commande.
           Sur `/fr/panier` le bandeau fait 101 px : l'écart tombait à 2,5 px et le
           défaut passait inaperçu. Même cause, deux symptômes — c'est pourquoi il a
           survécu au premier correctif de centrage, qui n'avait été vérifié que sur
           la vitrine.

           `height: auto` fait suivre la hauteur au contenu. Le logo étant déjà borné
           à 80 px par `#shopLogo`, l'élément ne peut plus dépasser un bandeau de 64. */
        height: auto;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   L'EN-TÊTE DU TUNNEL N'A PAS DE MENU, DONC RIEN À CENTRER ENTRE

   `emptyBase.html.twig` sert la livraison, les adresses et le paiement. Son bandeau
   ne porte QUE le logo. Or le thème sort `.logo-header` du flux — `position:
   absolute; left: 50%` — pour le centrer entre les deux moitiés du menu. Sans menu :

     · plus aucun enfant dans le flux, donc `.main-bar .container` s'effondre ;
     · `top: 50%` se rapporte à ce conteneur, vaut donc ~0, et `translateY(-50%)`
       tire le logo à MOITIÉ AU-DESSUS du bandeau.

   Mesuré le 31/08/2026 à 1700 px sur `/fr/methodes-de-livraison` : logo à
   `top: -21` pour 41 de haut, bandeau de 41. Le client validait sa commande avec un
   logo coupé en deux.

   ── DEUX FOIS OÙ J'AI CRU CE DIAGNOSTIC RÉFUTÉ ──

   D'abord en mesurant `/fr/panier`, sain — mais le panier étend `base`, pas
   `emptyBase`. Puis `/fr/inscription-panier`, sain lui aussi — mais avec un panier
   VIDE cette page redirige, et je mesurais la page d'arrivée, en `base`.

   La leçon : vérifier l'URL FINALE avant de croire une mesure, et ne pas supposer
   qu'une page partage une mise en page sans l'avoir lue. Deux réfutations fausses
   ont failli faire abandonner la bonne cause.

   Le logo revient donc dans le flux ici, centré par `margin: auto`. La hauteur du
   bandeau redevient celle de son contenu.
   ───────────────────────────────────────────────────────────────────────────── */
.site-header.header-tunnel .logo-header {
    position: relative;
    left: auto;
    top: auto;
    /* Les quatre variantes : le thème les déclare toutes, et n'en surcharger qu'une
       laisserait un moteur appliquer l'ancien décalage sur un seul axe. */
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    /* ── `float: none` EST CE QUI REND `margin: auto` OPÉRANT ──
       Le thème pose `float: left` sur `.logo-header`. Un élément FLOTTANT ignore
       `margin: auto` : le logo restait donc collé à gauche, sorti du centre de 535 px
       à 1700 de large. `text-align: center` n'y changeait rien non plus — l'élément
       fait 170 px de large, ce n'est pas son contenu qui est décalé, c'est lui.

       Mesuré le 31/08/2026 après injection : écart au centre de 535 / 375 / 295 px à
       1700 / 1000 / 800, ramené à 0 aux trois largeurs. `display: table` explique que
       `margin: auto` suffise ensuite. */
    float: none;
    margin: 0 auto;
    /* De l'air autour du logo : sans lui, la hauteur du bandeau colle exactement à
       celle du logo, qui touche alors les deux bords. */
    padding: 12px 0;
}

.section-title {
    display: inline-block;
}
.shopProductBanner.overlay-black-middle:after {
    opacity: 0;
}
.shopProductBanner.dlab-bnr-inr{
    background-position-y: 93%;
}

/* carousel */
.carousel-inner img {
    width: 100%;
    height: 100%
}

#custCarousel .carousel-indicators {
    position: static;
    margin-top: 20px
}

#custCarousel .carousel-indicators > li {
    width: 100px
}

#custCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5
}

#custCarousel .carousel-indicators li.active img {
    opacity: 1
}

#custCarousel .carousel-indicators li:hover img {
    opacity: 0.75
}

#custCarousel .carousel-item img {
    max-width: 400px;
    width: 80%
}

.carousel-item img {
    width: 80%
}

#custCarousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23555' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

#custCarousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23555' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}
/* end carousel */

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #187073;
    border-color: #187073;
}
#userOrdersTable td{
    vertical-align: middle;
}
.cartProducts td.product-item-name{
    max-width: 250px;
}

.cartBreadcrumb.dlab-bnr-inr{
    height: 90px;
}
.cartBreadcrumb.dlab-bnr-inr .breadcrumb-row{
    background-color: #135759;
}
.cartBreadcrumb.overlay-black-light::after, .cartBreadcrumb.overlay-black-middle::after, .cartBreadcrumb.overlay-black-dark::after {
    background: #fff;
    border: 1px solid #ebedf2;
}
.deliveryChoice {
    cursor: pointer;
}
.cartBreadcrumb .breadcrumb-row a.active {
    font-weight: 900;
}
.bootstrap-select .btn:active, .bootstrap-select .btn:hover, .bootstrap-select .btn:focus, .bootstrap-select .active > .btn{
    color: #999;
}
.bootstrap-select .dropdown-toggle{
    color: #495057;
}

.fly-box-ho.selectedChoice, .fly-box.selectedChoice, .icon-bx-wraper.selectedChoice .fly-box, .icon-bx-wraper.selectedChoice .fly-box-ho {
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
    -o-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}
.cardShadow{
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
}
.btn.btn-hover-success:active, .btn.btn-hover-success:hover, .btn.btn-hover-success:focus, .active > .btn.btn-hover-success{
    background-color: #3a773a;
}
#cartRegisterLogin .tab-content>.tab-pane.active{
    display: flex!important;
}

html#tunnelLayout{
    height: 100%;
}
/*html#shopLayout{
    height: 100%;
}*/
body.bodyTunnel{
    min-height: 100%;
    margin: 0;
    position: relative;
    padding: 0 0 70px;
}
/*body.bodyShop{
    min-height: 100%;
    margin: 0;
    position: relative;
    padding: 0 0 394px;
}*/
#footerTunnel{
    position: absolute;
    bottom: 0;
    width: 100%;
}
/*#footerShop{
    position: absolute;
    bottom: 0;
    width: 100%;
}*/
.productsDeliveryMethods{
    max-width: 32px;
}
.userMenu a:hover, .userMenu a:active, .userMenu a:active, .userMenu a.active{
    color: #187073;
}

.productTypes.blog-post.blog-grid.blog-rounded:hover a {
    color: #187073;
}

.productTypes.blog-post.blog-grid.blog-rounded:hover img {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -moz-transform: scale(1.1);
}
.modal-open .xdsoft_noselect{
    z-index: 10000000;
}
.subscribe-box .form-control.forceSelect{
    padding: 0;
    border: 0;
}
.subscribe-box .form-control.forceInput, .subscribe-box .form-control.forceTextarea{
    border-color: #777;
    border-width: 1px;
}
.subscribe-box .form-control.forceTextarea{
    height: 100px;
}
#numberModal{
    max-width: 100%;
}
#numberModal .modal-dialog{
    max-width: 90%;
}

.twitter-typeahead{
    width: 100%;
}
.kt-quick-search__input.tt-hint{
    height: 42px!important;
    line-height: 42px!important;
    width: 100%!important;
    left: -1px!important;
}
.kt-quick-search__input.tt-input{
    width: 100%!important;;
    border-width: 1px!important;;
    border-color: #DDD!important;;
    border-top: 0!important;;
    border-left: 0!important;;
    border-right: 0!important;;
    height: 42px!important;;
    line-height: 42px!important;;
}
.kt-quick-search__input.tt-input:focus{
    outline: none;
}
.tt-menu{
    margin-top: 20px!important;
    position: static!important;
}

.tt-suggestion a{
    display: block!important;
    transition: 0.2s ease-in-out!important;
}
.tt-suggestion a:hover{
     background-color: #f0f0f9!important;
     color: #187073!important;
}
.tt-suggestion a:hover .search-desc {
    color: #187073!important;
}
.tt-suggestion.tt-cursor a{
    background-color: #f0f0f9!important;
    color: #187073!important;
}

.tt-suggestion {
    border-bottom: 1px dashed #ebedf2!important;
}
.tt-suggestion:last-child {
     border-bottom: none!important;
}
.tt-suggestion:last-child p {
    margin: 0!important;
}
.badgeSearch{
    background-color: #187073;
    color: #FFF;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.65rem;
}

select.forceRequiredSelect{
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    z-index: -2;
    position: absolute;
    display: inline-block!important;
}

.legendBlockedDate{
    height: 25px;
    width: 31px;
    display: inline-flex;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    background: linear-gradient(to top left, rgba(255,0,0,0.2) 0%, rgba(255,0,0,0.2) calc(50% - 0.8px), #FF0000, rgba(255,0,0,0.2) calc(50% + 0.8px), rgba(255,0,0,0.2) 100%)!important;
}
.legendBlockedDateText{
    display: inline-flex;
    color: #666;
    font-size: 12px;
}
.legendBlockedDateAvailable{
    height: 25px;
    width: 31px;
    display: inline-flex;
    background-color: #97f397;
    border: 1px solid #ddd;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_date:not(.xdsoft_disabled){
    background-color: #97f397;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_date:not(.xdsoft_disabled){
    background-color: #47a547;
}
td.xdsoft_date.xdsoft_date.xdsoft_disabled.false\,, td.xdsoft_date.xdsoft_date.xdsoft_disabled.false\,:hover {
    background: linear-gradient(to top left, rgba(255,0,0,0.2) 0%, rgba(255,0,0,0.2) calc(50% - 0.8px), rgba(255,0,0,1) 50%, rgba(255,0,0,0.2) calc(50% + 0.8px), rgba(255,0,0,0.2) 100%)!important;
}
td.xdsoft_date.xdsoft_day_of_week0.xdsoft_date.xdsoft_disabled.xdsoft_current.xdsoft_today.xdsoft_weekend.false\, {
    background-color: #3af!important;
}
div.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_disabled.false\,:hover{
    background: linear-gradient(to top left, rgba(255,0,0,0.2) 0%, rgba(255,0,0,0.2) calc(50% - 0.8px), rgba(255,0,0,1) 50%, rgba(255,0,0,0.2) calc(50% + 0.8px), rgba(255,0,0,0.2) 100%)!important;
}
.cartProducts th, .cartProducts td{
    font-size: 13px;
}
.quantity.btn-quantity.max-w50{
    margin: 0 auto;
}
input.quantityCustom.form-control{
    text-align: center;
    padding: 5px;
}
.bootstrap-select .dropdown-menu > li > a{
    white-space: initial;
}

/* STRIPE */
#paymentContainer{
    max-width: 600px;
    margin: 0 auto;
}

#cardholder-name{
    box-sizing: border-box;
    height: 40px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
#cardholder-name::placeholder{
    color: #aab7c4;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
#loading-area{
    flex-direction: column;
}
#loading-area.paymentInProgress{
    opacity: 0.8;
}
#loading-area .loaderText{
    font-weight: 600;
}
#existing-card-errors, #card-errors{
    color: #a23e3e;
    text-align: left;
    margin-top: 15px;
    font-weight: 600;
    font-size: 20px;
}
.StripeElement {
    box-sizing: border-box;

    height: 40px;

    padding: 10px 12px;

    border: 1px solid transparent;
    border-radius: 4px;
    background-color: white;

    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
    width: 100%;
}

.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
    border-color: #fa755a;
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * L'EXPRESS CHECKOUT ELEMENT N'EST PAS UN CHAMP DE SAISIE
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * Stripe pose la classe `StripeElement` sur TOUT conteneur qu'il monte, y compris celui des
 * boutons Apple Pay / Google Pay. Celui-ci héritait donc du style du champ carte : fond blanc
 * derrière les boutons, ombre portée, et surtout `height: 40px` alors que les boutons font 48.
 *
 * La règle partagée n'est PAS modifiée — elle habille les champs carte de deux pages, et la
 * toucher pour un cas particulier casserait les autres. On neutralise seulement ce qui n'a pas
 * de sens sur un conteneur de boutons, et uniquement pour lui : l'identifiant suffit à passer
 * devant la classe en spécificité.
 */
#express-checkout-element,
#express-checkout-element.StripeElement,
#express-checkout-element.StripeElement--focus {
    height: auto;
    padding: 0;
    border: 0;
    background-color: transparent;
    box-shadow: none;
}

/* END STRIPE */

.bootstrap-select.btn-group .dropdown-menu {
    z-index: 999999;
}

@media screen and (max-width: 1200px) {
    #footerShop{
        background-size: 1680px!important;
    }
}
@media screen and (max-width: 1170px) {
    .header-nav .nav > li > a {
        font-size: 14px;
        padding: 30px 5px;
    }
}
@media screen and (max-width: 1023px) {
    #numberModal .modal-dialog{
        width: 100%;
        max-width: 90%;
        margin: 0 auto;
    }
}
@media screen and (max-width: 992px) {
    .header-nav .nav > li .sub-menu.cartSubmenu{
        max-width: 100%;
    }
}
@media screen and (max-width: 576px) {
    .btn-quantity{
        width: 50px;
    }
    #numberModal.subscribe-box .modal-header .close{
        top: 0;
    }
    #numberModal.subscribe-box .modal-header .modal-title {
        font-size: 22px;
    }
    #numberModal button[name="addOtherCake"] {
        padding: 12px 8px;
    }
}