.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;
}

/* Un lien trop long pour la demi-colonne des « Accès rapides » prend la ligne entière.
   « Renoncer au contrat ici », dont le libellé est fixé par la loi, débordait sur le
   lien voisin : on ne raccourcit pas le libellé, on lui donne la place. */
.list-2 li.lien-pleine-largeur {
    width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   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: var(--shop-primary, #187073);
    border-color: var(--shop-primary, #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: var(--shop-primary-dark, #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: var(--shop-primary, #187073);
}

.productTypes.blog-post.blog-grid.blog-rounded:hover a {
    color: var(--shop-primary, #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: var(--shop-primary, #187073)!important;
}
.tt-suggestion a:hover .search-desc {
    color: var(--shop-primary, #187073)!important;
}
.tt-suggestion.tt-cursor a{
    background-color: #f0f0f9!important;
    color: var(--shop-primary, #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: var(--shop-primary, #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;
}
/* L'état du bouton de paiement, dans les deux thèmes (05/11/2026) : public/assets/shop/js/bouton-paiement.js. */
.bouton-paiement-roue{
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .6em;
    vertical-align: -.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: bouton-paiement-tour .8s linear infinite;
}
@keyframes bouton-paiement-tour{
    to{ transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
    .bouton-paiement-roue{ animation-duration: 2.4s; }
}
.bouton-paiement-attente{
    cursor: progress;
    pointer-events: none;
}
.bouton-paiement-accepte,
.bouton-paiement-accepte:hover,
.bouton-paiement-accepte:focus{
    pointer-events: none;
    background-color: #2f7d4f !important;
    border-color: #2f7d4f !important;
    color: #fff !important;
}
.bouton-paiement-note{
    margin-top: 8px;
    font-size: 13px;
    text-align: center;
    color: #5f5e5a;
}
body.paiement-en-cours #paymentContainer a,
body.paiement-en-cours #paymentContainer .product-item-size,
body.paiement-en-cours #klarna-button:not(.bouton-paiement-actif),
body.paiement-en-cours #card-button:not(.bouton-paiement-actif),
body.paiement-en-cours #already-known-card-button:not(.bouton-paiement-actif),
body.paiement-en-cours #express-checkout-element:not(.bouton-paiement-actif){
    pointer-events: none;
    opacity: .45;
}
#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;
    }
}
/* ═══════════════════════════════════════════════════════════════════════════
   Espace client (07/11/2026, maquette A choisie par Amory) : le menu du compte,
   les cartes des commandes et des devis, la page d'une commande. Les deux thèmes.
   Gabarits : shop/includes/userMenu, shop/user/orders, quotes, order, _carte_commande.
   ═══════════════════════════════════════════════════════════════════════════ */
.section-full.content-inner.compte-page {
    padding-top: 24px;
}
/* La carte de profil (07/11/2026, version A) : le cadre des cartes de commande, les initiales et le
   bonjour en tête, une icône par entrée, l'entrée active sur un fond doux à la couleur de la boutique. */
.compte-menu {
    padding: 14px;
    border: 1px solid var(--shop-border, rgba(0, 0, 0, .12));
    border-radius: var(--shop-radius-carte, 16px);
    background: #fff;
}
.compte-menu__profil {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 6px 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--shop-border, rgba(0, 0, 0, .08));
}
.compte-menu__initiales {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    background: color-mix(in srgb, var(--shop-primary, #187073) 14%, #fff);
    color: var(--shop-primary, #187073);
    color: color-mix(in srgb, var(--shop-primary, #187073) 80%, #000);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
}
.compte-menu__qui {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.compte-menu__bonjour {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--shop-ink, #16181b);
}
.compte-menu__courriel {
    overflow: hidden;
    font-size: 13px;
    color: var(--shop-ink-muted, #5f6368);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.compte-menu__liste {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.compte-menu__liste a,
.compte-menu__deconnexion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--shop-ink-muted, #5f6368);
    font-size: 15px;
    line-height: 1.3;
}
.compte-menu__icone {
    flex: none;
}
.compte-menu__liste a:hover,
.compte-menu__deconnexion:hover {
    background: rgba(0, 0, 0, .04);
    color: var(--shop-ink, #16181b);
}
.compte-menu__liste a.active {
    background: rgba(0, 0, 0, .06);
    background: color-mix(in srgb, var(--shop-primary, #187073) 11%, #fff);
    color: var(--shop-ink, #16181b);
    font-weight: 600;
}
.compte-menu__liste a.active .compte-menu__icone {
    color: var(--shop-primary, #187073);
}
.compte-menu__deconnexion {
    margin-top: 8px;
    border-top: 1px solid var(--shop-border, rgba(0, 0, 0, .08));
    border-radius: 0 0 10px 10px;
    padding-top: 14px;
}
@media (max-width: 767px) {
    /* Au téléphone : plus de carte, seulement la rangée de pastilles qui défile. */
    .compte-menu {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }
    .compte-menu__profil,
    .compte-menu__deconnexion,
    .compte-menu__icone {
        display: none;
    }
    .compte-menu__liste {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .compte-menu__liste::-webkit-scrollbar {
        display: none;
    }
    .compte-menu__liste a {
        padding: 7px 14px;
        border: 1px solid rgba(0, 0, 0, .16);
        border-radius: 999px;
        font-size: 14px;
        white-space: nowrap;
    }
    .compte-menu__liste a.active {
        border-color: var(--shop-primary, #187073);
        background: var(--shop-primary, #187073);
        color: #fff;
        font-weight: 600;
    }
}

.compte-contenu {
    max-width: 720px;
    color: var(--shop-ink, #16181b);
}
.compte-section {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--shop-ink-muted, #5f6368);
}
.compte-carte + .compte-section {
    margin-top: 28px;
}
.compte-carte {
    display: block;
    margin-bottom: 12px;
    padding: 16px 18px;
    border: 1px solid var(--shop-border, #e7e5e1);
    border-radius: var(--shop-radius-carte, 16px);
    background: #fff;
    color: var(--shop-ink, #16181b);
}
a.compte-carte:hover,
a.compte-carte:focus {
    border-color: var(--shop-primary, #187073);
    color: var(--shop-ink, #16181b);
    text-decoration: none;
}
.compte-carte__haut,
.compte-carte__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    font-size: 14px;
}
.compte-carte__haut {
    color: var(--shop-ink-muted, #5f6368);
}
.compte-carte__mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.compte-carte__jour {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 4px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
}
.compte-carte__articles {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: var(--shop-ink-muted, #5f6368);
}
.compte-carte__bas {
    margin-top: 12px;
}
.compte-carte__voir {
    font-weight: 600;
    color: var(--shop-primary, #187073);
}
.compte-icone {
    flex: none;
    vertical-align: -3px;
}
.compte-pastille {
    padding: 2px 10px;
    border-radius: 999px;
    background: #f1efe8;
    color: #444441;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.compte-pastille--payee,
.compte-pastille--aRegler {
    background: #e6f1fb;
    color: #0c447c;
}
.compte-pastille--enPreparation {
    background: #faeeda;
    color: #633806;
}
.compte-pastille--prete,
.compte-pastille--expediee {
    background: #e1f5ee;
    color: #085041;
}
.compte-pastille--remboursee,
.compte-pastille--partiellementRemboursee,
.compte-pastille--depasse {
    background: #fcebeb;
    color: #791f1f;
}
.compte-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 14px;
}
.compte-pagination a {
    font-weight: 600;
    color: var(--shop-primary, #187073);
}
.compte-pagination > span:last-child {
    text-align: right;
}
.compte-pagination__position {
    color: var(--shop-ink-muted, #5f6368);
}
.compte-vide {
    padding: 36px 20px;
    border: 1px solid var(--shop-border, #e7e5e1);
    border-radius: var(--shop-radius-carte, 16px);
    text-align: center;
}
.compte-vide__titre {
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--shop-ink, #16181b);
}

/* La page d'une commande */
.compte-retour {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 14px;
    color: var(--shop-ink-muted, #5f6368);
}
.compte-commande__titre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}
.compte-commande__titre h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
}
.compte-discret {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--shop-ink-muted, #5f6368);
}
.compte-droite {
    text-align: right;
}
.compte-etapes {
    display: flex;
    gap: 6px;
    margin: 18px 0;
    padding: 0;
    list-style: none;
    counter-reset: etape;
}
.compte-etape {
    flex: 1 1 0;
    padding-top: 8px;
    border-top: 4px solid rgba(0, 0, 0, .1);
    font-size: 13px;
    line-height: 1.3;
    color: var(--shop-ink-muted, #5f6368);
}
.compte-etape--faite {
    border-top-color: #1d9e75;
    color: #085041;
}
.compte-etape--enCours {
    border-top-color: var(--shop-primary, #187073);
    color: var(--shop-ink, #16181b);
    font-weight: 700;
}
.compte-encadre {
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: var(--shop-radius-carte, 16px);
    background: rgba(0, 0, 0, .04);
}
.compte-encadre p {
    margin: 0;
}
.compte-encadre__mode {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--shop-ink-muted, #5f6368);
}
.compte-encadre__jour {
    margin: 4px 0 2px !important;
    font-size: 18px;
    font-weight: 600;
    color: var(--shop-ink, #16181b);
}
.compte-encadre__suivi {
    margin-top: 6px !important;
    font-size: 14px;
}
.compte-note {
    margin: 0 0 16px;
}
.compte-note p {
    margin: 0;
}
.compte-lignes {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.compte-lignes li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    font-size: 15px;
}
.compte-ligne__nom small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--shop-ink-muted, #5f6368);
}
.compte-ligne__prix {
    flex: none;
    font-variant-numeric: tabular-nums;
}
.compte-lignes li.compte-lignes__total {
    border-bottom: 0;
    font-size: 18px;
    font-weight: 700;
}
.compte-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 20px 0 8px;
}
.compte-retractation {
    font-size: 14px;
    color: var(--shop-ink-muted, #5f6368);
    text-decoration: underline;
}
.compte-adresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    font-size: 14px;
    color: var(--shop-ink-muted, #5f6368);
}
.compte-adresses p {
    margin: 0;
    line-height: 1.6;
}
.compte-adresses__titre {
    margin-bottom: 4px !important;
    font-weight: 600;
    color: var(--shop-ink, #16181b);
}

/* ═══════════════════════════════════════════════════════════════════════════
   La page de connexion en une carte (07/11/2026, version A) : shop/user/login.html.twig.
   ═══════════════════════════════════════════════════════════════════════════ */
.section-full.content-inner.connexion-page {
    padding-top: 24px;
}
.connexion-carte {
    max-width: 440px;
    margin: 0 auto;
    padding: 28px 28px 24px;
    border: 1px solid var(--shop-border, #e7e5e1);
    border-radius: var(--shop-radius-carte, 16px);
    background: #fff;
    color: var(--shop-ink, #16181b);
}
.connexion-titre {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
}
.connexion-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}
.connexion-actions a {
    font-size: 14px;
    color: var(--shop-primary, #187073);
}
.connexion-nouveau {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    text-align: center;
}
.connexion-nouveau p {
    margin: 0 0 10px;
    color: var(--shop-ink-muted, #5f6368);
}
.btn.connexion-creer {
    border: 1px solid var(--shop-primary, #187073);
    background: transparent;
    color: var(--shop-primary, #187073);
}
.btn.connexion-creer:hover {
    background: var(--shop-primary, #187073);
    color: #fff;
}
/* Le tunnel (07/11/2026) : une phrase sous le titre, et « Créer un compte » à côté de « Commander sans
   compte » quand la boutique l'accepte. */
.connexion-intro {
    margin: 0 0 18px;
    color: var(--shop-ink-muted, #5f6368);
}
.connexion-nouveau .btn.connexion-creer {
    margin: 4px;
}

/* La date de la fiche produit (07/11/2026) : le premier jour en clair, la précision en dessous. */
.disponibiliteFiche__date {
    font-weight: 600;
    color: var(--shop-ink, #16181b);
}
.disponibiliteFiche__plusTard {
    font-size: .9em;
    color: var(--shop-ink-muted, #5f6368);
}
@media (max-width: 575px) {
    .connexion-carte {
        padding: 22px 18px 20px;
    }
    .connexion-actions .btn {
        width: 100%;
    }
    .connexion-actions a {
        margin: 0 auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES CADRES DE LA BOUTIQUE (07/11/2026, Amory : « uniformise les border et radius »)
   ═══════════════════════════════════════════════════════════════════════════

   Une seule bordure et un seul arrondi pour tous les cadres : un filet de 1 px du gris du thème
   (`--shop-border`) et l'arrondi des cadres (`--shop-radius-carte` : 16 px dans le thème 2, 14 px
   dans le thème 1, voir ShopTheme). C'est l'allure de la carte de connexion, choisie le 07/11.

   Chacun avait le sien : « Mes informations » et l'inscription un filet foncé et 4 px (`.border-1`,
   sans couleur, prenait celle du texte ; `.shop-account .border-1` un gris #777), les listes vides
   des pointillés et 12 px, le tunnel des angles droits, la fenêtre d'estimation 20 px.

   Les encadrés du gabarit d'origine (`.p-a30.border-1`, `.radius-sm`) : compte, inscription,
   contact, mot de passe. Le tunnel a sa règle dans vitrine.css, le thème 1 la sienne dans
   classique.css : toutes lisent le même jeton. */
.page-content .p-a30.border-1,
.page-content .border-1.radius-sm,
.page-content .contact-area {
    border: 1px solid var(--shop-border, #e7e5e1);
    border-radius: var(--shop-radius-carte, 16px);
}

/* Le cadre des coordonnées porte aussi `.border` de Bootstrap, dont le gris s'impose (!important). */
.page-content .contact-area.border {
    border-color: var(--shop-border, #e7e5e1) !important;
}

.page-content .p-a30.radius-sm,
.page-content .radius-sm#carte-boutique {
    border-radius: var(--shop-radius-carte, 16px);
}

/* La déclaration de rétractation, et les filtres repliés de la liste des produits (téléphone). */
.page-content .border.p-4,
details.border.rounded {
    border: 1px solid var(--shop-border, #e7e5e1) !important;
    border-radius: var(--shop-radius-carte, 16px) !important;
}

/* Les fenêtres : le gabarit d'origine leur mettait des angles droits (style.css, « set-radius »). */
.modal-content {
    border: 0;
    border-radius: var(--shop-radius-carte, 16px);
    overflow: hidden;
}

/* La FAQ : chaque question est un cadre, ouvert sur sa réponse. */
.faq-style2 .acod-head a {
    border-color: var(--shop-border, #e7e5e1);
    border-radius: var(--shop-radius-carte, 16px) var(--shop-radius-carte, 16px) 0 0;
}

.faq-style2 .acod-head a.collapsed {
    border-radius: var(--shop-radius-carte, 16px);
}

.faq-style2 .acod-body {
    border-color: var(--shop-border, #e7e5e1);
    border-radius: 0 0 var(--shop-radius-carte, 16px) var(--shop-radius-carte, 16px);
}

/* LES ALERTES DE LA BOUTIQUE (07/11/2026) : l'arrondi des cadres. Le gabarit d'origine les mettait à
   angles droits (style.css, « set-radius »), seuls blocs carrés au milieu de cadres arrondis. Leurs
   couleurs restent celles de Bootstrap : un fond et un filet clairs de la couleur du message. Le panier
   et le récapitulatif du thème 2 ont leur propre règle, dans vitrine.css. */
.alert {
    border-radius: var(--shop-radius-carte, 16px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Page de paiement (07/11/2026, version A choisie par Amory : « comme le panier »).
   La commande en lignes à gauche ; à droite la carte « À payer », reprise du récapitulatif du
   panier vitrine (.v-recap), qui accueille le paiement. Les deux thèmes : le tunnel partage la
   coque vitrine, le classique y ajoute sa feuille. Gabarit : shop/cart/checkout.html.twig.
   Le balisage du paiement (#paymentContainer, Klarna, Apple Pay) n'a pas changé : ses styles
   restent ceux de vitrine.css.
   ═══════════════════════════════════════════════════════════════════════════ */
.section-full.content-inner.paiement-page {
    padding-top: 24px;
}
.paiement-page .paiement-titre {
    margin: 0 0 16px;
    font-family: var(--shop-font-heading, inherit);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--shop-ink, #16181b);
}
.paiement-lignes {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--shop-border, rgba(0, 0, 0, .1));
}
.paiement-ligne {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--shop-border, rgba(0, 0, 0, .1));
}
.paiement-ligne__photo {
    flex: none;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
    background: var(--shop-surface-alt, #f4f5f7);
}
.paiement-ligne__photo--logo {
    object-fit: contain;
    padding: 8px;
}
.paiement-ligne__corps {
    flex: 1;
    min-width: 0;
}
.paiement-ligne__nom {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--shop-ink, #16181b);
}
.paiement-ligne__detail {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--shop-ink-muted, #5f6368);
    overflow-wrap: anywhere;
}
.paiement-ligne__quantite {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--shop-ink-muted, #5f6368);
}
.paiement-ligne__prix {
    flex: none;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.paiement-ligne__prix strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--shop-ink, #16181b);
}
.paiement-ligne__prix small {
    display: block;
    font-size: 12px;
    color: var(--shop-ink-muted, #5f6368);
}
.paiement-mode {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid var(--shop-border, rgba(0, 0, 0, .12));
    border-radius: var(--shop-radius-carte, 16px);
}
.paiement-mode .compte-icone {
    flex: none;
    margin-top: 1px;
    color: var(--shop-primary, #187073);
}
.paiement-mode p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--shop-ink-muted, #5f6368);
}
.paiement-mode .paiement-mode__nom {
    font-weight: 600;
    color: var(--shop-ink, #16181b);
}
.paiement-note {
    margin-top: 20px;
}
.paiement-note label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--shop-ink, #16181b);
}
.paiement-note textarea {
    min-height: 96px;
}

/* La carte « À payer » : le fond, les montants et le total du récapitulatif du panier. */
.paiement-recap {
    padding: clamp(20px, 3vw, 28px);
    border-radius: var(--shop-radius-carte, 16px);
    background: var(--shop-surface-alt, #f4f5f7);
}
.paiement-recap__code {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #dfe1e4;
}
.paiement-recap__code .form-group {
    margin: 0 !important;
}
.paiement-page .paiement-recap__code h4 {
    margin: 0 0 10px;
    font-family: var(--shop-font-body, inherit);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--shop-ink, #16181b);
}
.paiement-recap__code .text-center {
    text-align: left !important;
}
.paiement-recap__code .text-center + .text-center {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}
.paiement-recap__code .alert {
    margin: 10px 0 0 !important;
}
.paiement-recap__montants {
    margin: 0;
    font-size: 15px;
}
.paiement-recap__montants > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 5px 0;
}
.paiement-recap__montants dt {
    font-weight: 400;
    color: var(--shop-ink-muted, #5f6368);
}
.paiement-recap__montants dd {
    margin: 0;
    text-align: right;
    color: var(--shop-ink, #16181b);
    font-variant-numeric: tabular-nums;
}
.paiement-recap__montants dd small {
    display: block;
    font-size: 12px;
    color: var(--shop-ink-muted, #5f6368);
}
.paiement-recap__montants .paiement-recap__total {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid #dfe1e4;
}
.paiement-recap__total dt {
    font-weight: 600;
    color: var(--shop-ink, #16181b);
}
.paiement-recap__total dd {
    font-size: 24px;
    font-weight: 700;
    white-space: nowrap;
}
.paiement-recap__paiement {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #dfe1e4;
}
.paiement-page .paiement-sous-titre {
    margin: 0 0 16px;
    font-family: var(--shop-font-heading, inherit);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--shop-ink, #16181b);
}
.paiement-page .paiement-mentions {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    color: var(--shop-ink-muted, #5f6368);
}
.paiement-carte-enregistree {
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--shop-border, rgba(0, 0, 0, .12));
    border-radius: 12px;
    background: var(--shop-surface, #fff);
    font-size: 14px;
    line-height: 1.6;
}
.paiement-mention {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--shop-ink-muted, #5f6368);
}
@media (max-width: 575px) {
    .paiement-ligne {
        gap: 12px;
    }
    .paiement-ligne__photo {
        width: 56px;
        height: 56px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Paiement réussi (07/11/2026, version A choisie par Amory : « merci, et la carte de la
   commande »). Une colonne centrée : la coche à la couleur de la boutique, le merci, la carte
   de « Mes commandes » (.compte-carte, section « Espace client »), deux boutons. Les deux
   thèmes. Gabarit : shop/paymentSuccess.html.twig.
   ═══════════════════════════════════════════════════════════════════════════ */
.section-full.content-inner.paiement-reussi {
    padding-top: 24px;
}
.paiement-reussi__corps {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}
.paiement-reussi__coche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    background: color-mix(in srgb, var(--shop-primary, #187073) 14%, #fff);
    color: var(--shop-primary, #187073);
}
.paiement-reussi .paiement-reussi__titre {
    margin: 0 0 8px;
    font-family: var(--shop-font-heading, inherit);
    font-size: clamp(24px, 4vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--shop-ink, #16181b);
}
.paiement-reussi__texte {
    max-width: 440px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
    color: var(--shop-ink-muted, #5f6368);
    overflow-wrap: anywhere;
}
.paiement-reussi__carte {
    margin-top: 24px;
    text-align: left;
}
.paiement-reussi__carte .compte-carte {
    margin-bottom: 0;
}
.paiement-reussi__boutons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}
.paiement-reussi__principal,
.paiement-reussi__secondaire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border: 1.5px solid transparent;
    border-radius: var(--shop-radius, 8px);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}
.paiement-reussi__principal,
.paiement-reussi__principal:visited,
.paiement-reussi__principal:hover,
.paiement-reussi__principal:focus {
    border-color: var(--shop-primary, #187073);
    background: var(--shop-primary, #187073);
    color: var(--shop-primary-contrast, #fff);
}
.paiement-reussi__principal:hover,
.paiement-reussi__principal:focus {
    filter: brightness(.94);
}
.paiement-reussi__secondaire,
.paiement-reussi__secondaire:visited {
    border-color: #d6d4cf;
    background: #fff;
    color: var(--shop-ink, #16181b);
}
.paiement-reussi__secondaire:hover,
.paiement-reussi__secondaire:focus {
    border-color: var(--shop-ink, #16181b);
    color: var(--shop-ink, #16181b);
}
/* La commande que le webhook de Stripe n'a pas encore marquée payée : on dit ce qu'on sait. */
.compte-pastille--recu {
    background: #e6f1fb;
    color: #0c447c;
}
@media (max-width: 575px) {
    .paiement-reussi__boutons a {
        width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Ma fidélité (08/11/2026, carte à tampons choisie par Amory) : templates/shop/user/fidelite.html.twig,
   les deux thèmes. Dix tampons, le dernier est la récompense ; à la couleur de la boutique.
   ───────────────────────────────────────────────────────────────────────────── */
.fidelite-carte { padding: 20px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px; background: #fff; margin-bottom: 28px; }
.fidelite-carte .compte-section { margin-top: 0; }
.fidelite-carte__regle { color: #6b6b6b; margin-bottom: 16px; }
.fidelite-tampons { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; max-width: 420px; }
.fidelite-tampon { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 2px dashed rgba(0, 0, 0, .18); color: rgba(0, 0, 0, .35); font-weight: 700; font-size: 15px; }
.fidelite-tampon--plein { border: 2px solid var(--shop-primary, #187073); background: var(--shop-primary, #187073); color: #fff; }
.fidelite-tampon--cadeau { border-style: solid; border-color: var(--shop-primary, #187073); color: var(--shop-primary, #187073); }
.fidelite-tampon--cadeau.fidelite-tampon--plein { color: #fff; }
.fidelite-carte__solde { margin: 0; }
.fidelite-carte__attente { margin: 6px 0 0; color: #6b6b6b; font-size: 14px; }
.fidelite-recompense { border: 2px dashed var(--shop-primary, #187073); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; text-align: center; }
.fidelite-recompense p { margin: 0; }
.fidelite-recompense__valeur { font-weight: 700; font-size: 17px; }
.fidelite-recompense__code span { display: inline-block; margin: 10px 0; padding: 6px 14px; border-radius: 8px; background: rgba(0, 0, 0, .05); font-family: Courier, monospace; font-size: 20px; font-weight: 700; letter-spacing: 2px; user-select: all; }
.fidelite-recompense__conditions, .fidelite-recompense__aide { color: #6b6b6b; font-size: 14px; }
.fidelite-recompense__aide { margin-top: 6px !important; }
.fidelite-historique { list-style: none; padding: 0; margin: 0; }
.fidelite-historique__ligne { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.fidelite-historique__date { color: #6b6b6b; font-size: 14px; min-width: 88px; }
.fidelite-historique__libelle { flex: 1; min-width: 0; }
.fidelite-historique__attente { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; background: rgba(0, 0, 0, .06); font-size: 12px; color: #6b6b6b; }
.fidelite-historique__points { font-weight: 700; color: var(--shop-primary, #187073); }
.fidelite-historique__points--moins { color: #6b6b6b; }
/* Le client venu sans compte : choisir un mot de passe pour retrouver sa carte (08/11/2026). */
.fidelite-invitation { padding: 16px 18px; margin-bottom: 20px; border-radius: 12px; background: rgba(0, 0, 0, .04); background: color-mix(in srgb, var(--shop-primary, #187073) 8%, #fff); }
.fidelite-invitation p { margin: 0 0 10px; }
/* « +38 points » sur « Paiement réussi » (shop/paymentSuccess.html.twig). */
.paiement-reussi__fidelite { display: flex; gap: 14px; align-items: flex-start; margin-top: 20px; padding: 16px 18px; border-radius: 12px; text-align: left; background: rgba(0, 0, 0, .04); background: color-mix(in srgb, var(--shop-primary, #187073) 8%, #fff); }
.paiement-reussi__fidelite-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--shop-primary, #187073); color: var(--shop-primary-contrast, #fff); }
.paiement-reussi__fidelite p { margin: 0; }
.paiement-reussi__fidelite-points { font-weight: 700; font-size: 16px; color: var(--shop-ink, #16181b); }
.paiement-reussi__fidelite-texte { margin-top: 4px !important; font-size: 14px; line-height: 1.5; color: var(--shop-ink-muted, #5f6368); }
.paiement-reussi__fidelite-form { margin-top: 10px; }
.paiement-reussi__fidelite-form button { min-height: 40px; font-size: 15px; cursor: pointer; }
/* Le bouton « Utiliser ma récompense » du panier (shop/cart/_code_promo.html.twig). */
.fidelite-panier { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(0, 0, 0, .15); }
.fidelite-panier p { margin: 0 0 8px; font-size: 14px; }