/*
 * Ajustements Vitamiel sur le thème Melipona.
 *
 * Écrit à part de `style.css` : une mise à jour du thème acheté ne doit pas
 * emporter ce fichier, et ce fichier ne redéfinit du thème que ce qui doit
 * l'être pour nos contenus réels.
 */

/* ------------------------------------------------------------- couleurs ----

   Nos règles étaient écrites avec `var(--pq-themes-color, #F5A623)`, un nom que
   le thème n'expose pas : la valeur de repli s'appliquait partout, et notre
   ambre différait de celui du thème (#FFB606) sur toute la vitrine. On aligne
   ici les deux noms plutôt que de réécrire les vingt-quatre usages : si le
   thème change son accent, le nôtre suit. */
:root {
    --pq-themes-color: var(--primary-color, #FFB606);
    --pq-dark-color: var(--dark-color, #000000);
}

/* ------------------------------------------------------------ en-tête ---- */

/* Sans logo téléversé, le nom de la boutique tient la place. */
.pq-logo-text {
    font-size: 26px;
    font-weight: 700;
    color: var(--pq-themes-color, #F5A623);
    letter-spacing: -.01em;
}

/* Logo téléversé. Le thème ne fixe que la hauteur : sans `width: auto`, un
   logo large est étiré à la largeur de son conteneur sur certains navigateurs.
   La hauteur diminue sur mobile, où la barre elle-même se resserre. */
header#pq-header .pq-bottom-header .navbar .navbar-brand img.logo {
    height: 54px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

@media (max-width: 991.98px) {
    header#pq-header .pq-bottom-header .navbar .navbar-brand img.logo {
        height: 44px;
        max-width: 170px;
    }
}

@media (max-width: 400px) {
    header#pq-header .pq-bottom-header .navbar .navbar-brand img.logo {
        height: 38px;
        max-width: 140px;
    }
}

.pq-menu-search-block {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* Cible tactile de 44 px : en dessous, le panier se rate au pouce. Le lien
   était en `inline` et, l'icône du thème n'existant pas, il mesurait 0 px de
   large — le panier n'était tout simplement pas cliquable depuis l'en-tête. */
.pq-cart-block .pq-cart-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 21px;
    color: #1c1c1c;
    transition: color .25s ease;
}

.pq-cart-block .pq-cart-icon:hover { color: var(--pq-themes-color, #FFB606); }

.pq-cart-count {
    position: absolute;
    top: -8px;
    inset-inline-end: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--pq-themes-color, #F5A623);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* La barre supérieure porte un argument de vente à gauche : sans lien, elle
   doit rester lisible et non cliquable. */
.pq-contact-list li span {
    color: rgba(255, 255, 255, .85);
}

/* ------------------------------------------------------------- WhatsApp -- */

/* Bouton flottant : le canal de commande le plus utilisé en Tunisie. Placé à
   gauche pour ne pas recouvrir le « retour en haut » du thème. */
.pq-whatsapp-float {
    position: fixed;
    z-index: 999;
    inset-inline-start: 24px;
    bottom: 24px;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 27px;
    box-shadow: 0 10px 24px -8px rgba(37, 211, 102, .8);
    transition: transform .25s ease;
}

.pq-whatsapp-float:hover {
    color: #fff;
    transform: scale(1.08);
}

/* --------------------------------------------------------------- divers -- */

/* Messages de session (commande passée, erreur de formulaire) : le thème n'a
   pas de style pour eux, ils tombaient sur celui de Bootstrap par défaut. */
main > .container > .alert {
    border: 0;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 15px;
}

main > .container > .alert-success {
    background: #E8F6EE;
    color: #1F7A4C;
}

main > .container > .alert-danger {
    background: #FBEAEA;
    color: #AD1A19;
}

/* ==========================================================================
   Nos blocs propres
   ==========================================================================
   Repris de la feuille Zummi : ce sont des blocs que nous avons écrits, pas des
   correctifs du thème précédent. Les palettes suivent désormais Melipona —
   ambre #F5A623 en couleur principale, brun foncé pour le texte.
   ------------------------------------------------------------------------ */
/* ==========================================================================
   Bannière miel — composition en deux temps
   ==========================================================================

   Fond crème à gauche pour le texte, panneau incurvé coloré à droite pour le
   produit. Le pot chevauche la courbe : c'est ce débordement qui donne sa
   profondeur à la composition, et c'est pour cela que le visuel doit être
   détouré.

   Tout est dessiné en CSS et en SVG — aucune image de décor à télécharger, et
   les couleurs suivent le réglage du bloc.
   ------------------------------------------------------------------------ */

.hh {
    position: relative;
    overflow: hidden;
    background: #FDF6EC;
    padding-block: clamp(48px, 7vw, 96px);
}

/* Le panneau : un grand disque décalé, dont seule la partie gauche est
   incurvée à l'écran. Un `border-radius` sur un rectangle donnerait un angle
   arrondi, pas cette courbe continue. */
.hh__panel {
    position: absolute;
    inset: 0 -18% 0 42%;
    background: var(--hh-panel);
    border-start-start-radius: 50% 60%;
    border-end-start-radius: 50% 60%;
    /* Indispensable : sans lui, la photo posée à l interieur deborde de l arrondi
       et le panneau redevient un rectangle. */
    overflow: hidden;
}

.hh__comb {
    position: absolute;
    inset: 0;
    opacity: .16;
    /* Trame d'alvéoles obtenue par superposition de deux dégradés : plus légère
       qu'une image, et nette à toutes les résolutions. */
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2297%22%20viewBox%3D%220%200%2056%2097%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M14%201h28l13%2024-13%2024H14L1%2025z%22%2F%3E%3Cpath%20d%3D%22M14%2049h28l13%2024-13%2024H14L1%2073z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: 56px 97px;
}

.hh__inner { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ texte */

.hh__eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pq-themes-color, #F5A623);
    margin-bottom: 14px;
}

.hh__title {
    margin: 0 0 22px;
    line-height: .96;
    font-weight: 800;
}

.hh__title span {
    display: block;
    text-transform: uppercase;
}

/* Trois graisses, trois teintes, trois espacements : la ligne accentuée est
   plus large et plus sombre, les deux autres l'encadrent. */
.hh__title-1 {
    font-size: clamp(34px, 5vw, 62px);
    letter-spacing: .22em;
    color: var(--pq-secondary-color, #FFB606);
}

.hh__title-2 {
    font-size: clamp(46px, 7.4vw, 96px);
    letter-spacing: .01em;
    color: #2E1A0C;
}

.hh__title-3 {
    font-size: clamp(30px, 4.4vw, 56px);
    letter-spacing: .26em;
    color: var(--pq-themes-color, #F5A623);
}

.hh__text {
    max-width: 46ch;
    margin: 0 0 30px;
    font-size: 16px;
    line-height: 1.7;
    color: #6B5646;
}

.hh__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 999px;
    background: var(--pq-themes-color, #F5A623);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 10px 24px -10px rgba(173, 26, 25, .7);
}

.hh__btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -12px rgba(173, 26, 25, .8);
}

.hh__btn svg { transition: transform .25s ease; }
.hh__btn:hover svg { transform: translateX(4px); }

/* ----------------------------------------------------------------- visuel */

.hh__media {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hh__product {
    display: block;
    position: relative;
    z-index: 2;
}

.hh__product img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    object-fit: contain;
    background: transparent;
    filter: drop-shadow(0 24px 40px rgba(60, 30, 6, .38));
    animation: hh-float 6s ease-in-out infinite;
}

/* Étiquette de prix accrochée au pot : elle transforme une image décorative en
   entrée de tunnel d'achat. */
.hh__badge {
    position: absolute;
    z-index: 3;
    right: 4%;
    bottom: 12%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 30px -12px rgba(60, 30, 6, .5);
    text-decoration: none;
    animation: hh-float 6s ease-in-out infinite .8s;
}

.hh__badge-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #2E1A0C;
    max-width: 16ch;
}

.hh__badge-price {
    font-size: 17px;
    font-weight: 800;
    color: var(--pq-themes-color, #F5A623);
}

/* ------------------------------------------------------------- flottement */

.hh__float {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.hh__float--1 { top: 8%;  right: 10%; animation: hh-float 7s ease-in-out infinite; }
.hh__float--2 { top: 34%; left: 2%;   animation: hh-float 5.5s ease-in-out infinite 1.2s; }
.hh__float--3 { bottom: 12%; left: 12%; animation: hh-spin 14s linear infinite; }

@keyframes hh-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}

@keyframes hh-spin {
    0%   { transform: rotate(-8deg) translateY(0); }
    50%  { transform: rotate(8deg) translateY(-12px); }
    100% { transform: rotate(-8deg) translateY(0); }
}

/* Une animation permanente devient pénible pour qui y est sensible — et le
   système d'exploitation le dit déjà. */
@media (prefers-reduced-motion: reduce) {
    .hh__product img,
    .hh__badge,
    .hh__float {
        animation: none;
    }
}

/* -------------------------------------------------------------- mobile ---
   Sous 992 px les colonnes s'empilent : le panneau devient une bande basse
   derrière le produit, sinon il couperait le titre en deux. */
@media (max-width: 991.98px) {
    .hh__panel {
        inset: auto -20% -10% -20%;
        height: 62%;
        border-radius: 50% 50% 0 0 / 22% 22% 0 0;
    }

    .hh__content { text-align: center; }
    .hh__text { margin-inline: auto; }
    .hh__media { margin-top: 32px; min-height: 320px; }
    .hh__badge { right: 0; bottom: 4%; }
}

/* ---------------------------------------- photo d'ambiance dans le panneau */

.hh__panel-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* La photo se recadre à droite : le sujet de nos visuels d'ambiance s'y
       trouve, la gauche n'est qu'un fond flou. */
    object-position: 70% center;
    /* Léger zoom permanent : la scène respire au lieu d'être figée. */
    animation: hh-breathe 22s ease-in-out infinite;
}

.hh__panel-veil {
    position: absolute;
    inset: 0;
    /* Un pot doré sur une photo dorée se confond. Le voile creuse l'écart sans
       éteindre la photo. */
    background:
        linear-gradient(105deg, var(--hh-panel) 0%, rgba(0, 0, 0, 0) 62%),
        radial-gradient(70% 60% at 62% 52%, rgba(50, 22, 4, .52) 0%, rgba(50, 22, 4, .12) 100%);
}

@keyframes hh-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
    .hh__panel-photo { animation: none; }
}

/* ==========================================================================
   Apparition au défilement
   ==========================================================================

   Les sections montent de quelques pixels en apparaissant. Piloté par
   `IntersectionObserver` plutôt que par la position de défilement : le
   navigateur fait le calcul lui-même, sans exécuter de code à chaque pixel.

   L'état de départ n'est posé QUE si le script est là (classe sur `html`) :
   sans cette précaution, un échec de chargement laisserait toute la page
   invisible.
   ------------------------------------------------------------------------ */

html.has-reveal .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
}

html.has-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Décalage en cascade pour les éléments d'une même rangée : ils arrivent l'un
   après l'autre plutôt qu'en bloc. */
html.has-reveal .reveal[data-reveal-delay="1"] { transition-delay: .09s; }
html.has-reveal .reveal[data-reveal-delay="2"] { transition-delay: .18s; }
html.has-reveal .reveal[data-reveal-delay="3"] { transition-delay: .27s; }
html.has-reveal .reveal[data-reveal-delay="4"] { transition-delay: .36s; }
html.has-reveal .reveal[data-reveal-delay="5"] { transition-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
    html.has-reveal .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   Bandeau « nos engagements »
   ==========================================================================
   Quatre arguments, une abeille qui traverse. Les icônes sont des tracés SVG :
   elles prennent la couleur du bloc et restent nettes partout.
   ------------------------------------------------------------------------ */

.hs {
    position: relative;
    overflow: hidden;
    padding-block: clamp(44px, 6vw, 82px);
    background:
        radial-gradient(120% 90% at 50% 0, #FFF6E7 0%, #FDF6EC 55%, #F8EEDF 100%);
}

.hs__inner { position: relative; z-index: 2; }

.hs__head { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }

.hs__eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pq-secondary-color, #FFB606);
    margin-bottom: 10px;
}

.hs__title {
    margin: 0;
    font-size: clamp(24px, 3.4vw, 40px);
    color: #2E1A0C;
    text-wrap: balance;
}

/* ------------------------------------------------------------------ cartes */

.hs__card {
    height: 100%;
    padding: 26px 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(173, 26, 25, .09);
    box-shadow: 0 2px 4px rgba(90, 55, 20, .04);
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, border-color .35s ease;
}

.hs__card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 157, 36, .55);
    box-shadow: 0 18px 34px -16px rgba(90, 55, 20, .42);
}

.hs__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--pq-themes-color, #F5A623), var(--pq-secondary-color, #FFB606));
    box-shadow: 0 10px 20px -10px rgba(173, 26, 25, .7);
    /* Le pas de temps décalé vient du gabarit : les quatre icônes ne pulsent
       pas ensemble, ce qui serait mécanique. */
    animation: hs-pulse 4.5s ease-in-out infinite;
    animation-delay: var(--hs-delay, 0ms);
}

.hs__card:hover .hs__icon { animation-play-state: paused; }

.hs__card-title {
    margin: 0 0 8px;
    font-size: 16.5px;
    font-weight: 700;
    color: #2E1A0C;
    line-height: 1.3;
}

.hs__card-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #6B5646;
}

@keyframes hs-pulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-4px) scale(1.04); }
}

/* ----------------------------------------------------------------- abeille */

.hs__bee {
    position: absolute;
    z-index: 1;
    top: 12%;
    left: -160px;
    width: 92px;
    height: auto;
    pointer-events: none;
    opacity: .9;
    /* Deux animations combinées : la traversée horizontale, et un tangage
       vertical plus rapide. Séparées, le vol paraît vivant plutôt que glissé. */
    animation: hs-fly 26s linear infinite, hs-bob 2.4s ease-in-out infinite;
}

@keyframes hs-fly {
    0%   { transform: translateX(0) rotate(6deg); }
    100% { transform: translateX(calc(100vw + 260px)) rotate(6deg); }
}

@keyframes hs-bob {
    0%, 100% { margin-top: 0; }
    50%      { margin-top: -22px; }
}

@media (max-width: 767.98px) {
    .hs__bee { width: 62px; top: 4%; }
    .hs__card { padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .hs__bee,
    .hs__icon {
        animation: none;
    }
    .hs__bee { left: 4%; }
}

/* Décors du thème sans rapport avec le miel — tomates, basilic, ustensiles. */
.cooking-experience__shape-1,
.cooking-experience__shape-2,
.cooking-experience__shape-3,
.cooking-experience__shape-4,
.cooking-experience__shape-5,
.cooking-experience__shape-6,
.cooking-experience__shape-7,
.best-selling__shape-1,
.best-selling__shape-2,
.client-testimonial__shape-1,
.client-testimonial__shape-2,
.client-testimonial__shape-3 {
    display: none;
}

/* Le titre se coupait au milieu d'un mot — « AUTHENTI / QUE ». Le thème force
   une césure agressive pour ses titres courts en anglais ; en français, les
   mots sont plus longs et la coupure devient une faute. */
.cooking-experience__item-text .title,
.cooking-experience__item-text h2,
.cooking-experience__item-text h3 {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    text-wrap: balance;
}


/* Le visuel chevauche volontairement le texte dans ce thème. En anglais les
   titres sont courts et passent ; « AUTHENTIQUE » finissait derrière le pot.
   On rend un peu de largeur au texte plutôt que de réduire le produit. */
.cooking-experience__item-text {
    max-width: 46%;
    position: relative;
    z-index: 2;
}

/* ------------------------------------------------- carrousel de rayons ----
   Le thème ne révèle le nom de la catégorie qu'au survol : élégant sur un écran
   de bureau, invisible sur un téléphone, où il n'y a pas de survol. On affiche
   donc en permanence là où le pointeur est grossier.
   ------------------------------------------------------------------------ */

.pq-category-count {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--pq-themes-color, #F5A623);
    font-weight: 600;
}

@media (hover: none) {
    .pq-service-box.style-4 .pq-service-box-info {
        margin: -130px;
        background-color: #fff;
        left: 8%;
        right: 8%;
    }
}

/* ==========================================================================
   Grille produits
   ==========================================================================
   Le thème ne définit `ul.products` que dans ses pages boutique, via un
   gabarit figé. Nous la réutilisons sur l'accueil et dans nos propres blocs :
   il lui faut donc sa mise en page ici, sans dépendre d'une page particulière.
   ------------------------------------------------------------------------ */

ul.products {
    display: grid;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Le thème répartit ses produits en flottants et fixe `width: 25%` sur chaque
   carte. Dans une grille, ce pourcentage se calcule sur la COLONNE et non sur
   la rangée : les cartes tombaient à 74 px de large et les visuels à 44 px.
   La grille gère déjà la répartition — la largeur doit lui revenir. */
ul.products > li { list-style: none; }

/* La classe est répétée à dessein : le sélecteur du thème compte trois classes
   (`.shop .products .product-item`) et l'emportait sur le nôtre malgré l'ordre
   de chargement. On passe à quatre plutôt que de poser un `!important`, qui
   fermerait la porte à tout ajustement ultérieur. */
ul.products > li.product-item.product-item {
    width: auto;
    max-width: none;
    float: none;
    margin: 0;
    padding: 0;
    min-width: 0; /* sinon un nom long empêche la colonne de se réduire */
}

/* Même raison côté visuel : il doit occuper toute la carte. */
.pq-shop-box,
.pq-shop-box .pq-shop-product-img { width: 100%; }

.pq-products-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pq-products-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pq-products-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1199.98px) {
    .pq-products-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .pq-products-3,
    .pq-products-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    ul.products { grid-template-columns: 1fr !important; gap: 22px; }
}

/* ------------------------------------------------------------ carte produit */

/* Le thème espace ses cartes avec `margin-top: 45px`, prévu pour ses rangées
   Bootstrap. Notre grille gère déjà l'écart par `gap` : la marge s'y ajoutait
   et décalait chaque carte vers le bas. */
/* La carte est une surface à part entière, pas une image posée sur le fond de
   page : c'est ce qui sépare visuellement huit produits alignés et donne au
   survol quelque chose à soulever. */
.pq-shop-box {
    height: 100%;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(120, 90, 40, .10);
    box-shadow: 0 1px 2px rgba(90, 60, 20, .04);
    transition:
        transform .45s var(--pq-ease, cubic-bezier(.2, .7, .3, 1)),
        box-shadow .45s var(--pq-ease, cubic-bezier(.2, .7, .3, 1)),
        border-color .45s ease;
}

/* Le soulèvement reste discret — 4 px. Au-delà, huit cartes qui bondissent au
   passage de la souris donnent une page nerveuse, pas une page soignée. */
.pq-shop-box:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 182, 6, .45);
    box-shadow: 0 18px 34px -20px rgba(90, 60, 20, .45);
}

.pq-shop-product-img {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background: #FAF7F2;
}

/* Le visuel garde toujours la même hauteur : sans cela, un pot haut et un
   sachet large désalignent les prix d'une carte à l'autre. */
.pq-shop-product-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 18px;
    transition: transform .6s var(--pq-ease, cubic-bezier(.2, .7, .3, 1));
}

.pq-shop-box:hover .pq-shop-product-img img { transform: scale(1.06); }

/* Un voile ambré très léger accompagne le survol : il relie la carte à
   l'identité du site sans masquer le produit, qui reste la seule chose que le
   client doit regarder. */
.pq-shop-product-img::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 55%, rgba(255, 182, 6, .12));
    opacity: 0;
    transition: opacity .45s ease;
}

.pq-shop-box:hover .pq-shop-product-img::after { opacity: 1; }

.pq-no-image {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    font-size: 42px;
    color: #DCD3C6;
}

/* --------------------------------------------------------------- pastilles */

.pq-product-badge {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    z-index: 2;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.7;
    /* Chiffres de largeur fixe : « −9 % » et « −25 % » gardent la même
       assise d'une carte à l'autre. */
    font-variant-numeric: tabular-nums;
    box-shadow: 0 6px 14px -8px rgba(90, 60, 20, .8);
}

.pq-badge-sale { background: var(--pq-themes-color, #F5A623); }
.pq-badge-new  { background: #1F7A4C; }

/* La rupture passe à droite : elle peut coexister avec une remise, et deux
   pastilles superposées ne se lisent plus. */
.pq-badge-out {
    inset-inline-start: auto;
    inset-inline-end: 14px;
    background: #8A7C71;
}

/* ------------------------------------------------------------- texte, prix */

/* `.pq-product-detail` porte DEUX rôles dans le thème : le pied d'une carte, et
   l'enveloppe entière de la fiche produit. Tout ce qui suit est donc scopé sous
   `.pq-shop-box` — sans quoi le centrage de la carte s'appliquait à la page
   produit complète. La profondeur du sélecteur reprend aussi celle du thème
   (`.pq-shop-box .pq-product-detail .pq-product-name`), qui gagnait sinon. */
.pq-shop-box .pq-product-detail {
    padding: 18px 16px 20px;
    margin-top: auto;
    text-align: center;
}

.pq-shop-box .pq-product-detail .pq-product-name {
    font-size: 17px;
    line-height: 1.35;
    margin-bottom: 6px;
    /* Deux lignes réservées : les prix s'alignent quelle que soit la longueur
       du nom. */
    min-height: 2.7em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .25s ease;
}

.pq-shop-box a:hover .pq-product-name { color: var(--pq-themes-color, #F5A623); }

.pq-shop-box .pq-product-detail .pq-product-price {
    font-size: 19px;
    font-weight: 700;
    color: var(--pq-themes-color, #F5A623);
}

.pq-shop-box .pq-product-detail .pq-product-price del {
    margin-inline-end: 8px;
    font-size: 15px;
    font-weight: 400;
    color: #8A7C71;
}

/* ------------------------------------------------- bouton « Ajouter au panier »

   Le thème n'habille que `.pq-button-contain a`, car sa démonstration pointe
   vers une page. Nous envoyons un vrai formulaire POST, donc un `<button>` :
   il ressortait sans aucun style, en bouton gris par défaut du navigateur.
   On reprend ici l'habillage du thème pour les deux balises. */
.pq-shop-box .pq-button-contain form { margin: 0; }

.pq-shop-box .pq-button-contain .pq-cart-button {
    display: block;
    width: 100%;
    border: 0;
    padding: 10px 24px;
    font-size: 17px;
    line-height: 2;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    background-color: var(--pq-dark-color, #241C15);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color .4s ease-in-out;
}

.pq-shop-box .pq-button-contain .pq-cart-button:hover {
    background-color: var(--pq-themes-color, #F5A623);
}

/* Le survol ne suffit pas au tactile, où il n'existe pas : sur petit écran le
   bouton reste visible en permanence plutôt que caché sous la carte. */
@media (hover: none), (max-width: 767.98px) {
    .pq-shop-box .pq-button-contain {
        position: static;
        transform: none;
    }
}

/* En rupture, le bouton reste présent mais cesse d'inviter au clic d'achat. */
.pq-shop-box .pq-button-contain .pq-cart-button-muted { background-color: #8A7C71; }

/* ==========================================================================
   Fiche produit
   ==========================================================================
   Le thème ne définit sa fiche que pour son gabarit de démonstration : ni
   galerie, ni formulaire de commande directe, ni indicateur de stock. On
   complète, sans toucher aux classes existantes.
   ------------------------------------------------------------------------ */

.pq-product-img {
    background: #FAF7F2;
    border-radius: 8px;
    overflow: hidden;
}

.pq-product-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 30px;
}

.pq-product-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.pq-product-thumb {
    width: 84px;
    height: 84px;
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 8px;
    background: #FAF7F2;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
}

.pq-product-thumb:hover {
    border-color: var(--pq-themes-color, #F5A623);
    transform: translateY(-2px);
}

.pq-product-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* ----------------------------------------------------- prix et disponibilité */

.pq-product-description .pq-product-price {
    display: block;
    margin-bottom: 10px;
    font-size: 26px;
    font-weight: 700;
    color: var(--pq-themes-color, #F5A623);
}

.pq-product-description .pq-product-price del {
    margin-inline-end: 10px;
    font-size: 19px;
    font-weight: 400;
    color: #9A8E82;
}

.pq-product-stock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-bottom: 16px;
    font-size: 14.5px;
}

.pq-stock-in  { color: #1F7A4C; font-weight: 600; }
.pq-stock-out { color: #C0392B; font-weight: 600; }
.pq-product-ref { color: #9A8E82; }

/* -------------------------------------------------------- commande rapide -- */

/* Encadré et posé sur fond crème : c'est le chemin d'achat principal, il ne
   doit pas se confondre avec le reste du descriptif. */
.pq-quick-order {
    margin: 26px 0;
    padding: 24px;
    border: 1px solid rgba(245, 166, 35, .35);
    border-radius: 12px;
    background: #FEFAF2;
}

.pq-quick-order-title {
    margin-bottom: 18px;
    font-size: 17px;
    line-height: 1.35;
}

.pq-quick-order input,
.pq-quick-order select,
.pq-quick-order textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
}

.pq-quick-order input:focus,
.pq-quick-order select:focus,
.pq-quick-order textarea:focus {
    outline: none;
    border-color: var(--pq-themes-color, #F5A623);
}

.pq-quick-order label { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 500; }

.pq-quick-order button[type="submit"] {
    width: 100%;
    margin-top: 8px;
    padding: 14px 24px;
    border: 0;
    border-radius: 8px;
    background: var(--pq-themes-color, #F5A623);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s ease;
}

.pq-quick-order button[type="submit"]:hover { filter: brightness(1.06); }

/* ------------------------------------------------- panier et variantes ---- */

.pq-variant-picker { margin-bottom: 14px; }
.pq-variant-picker label { display: block; margin-bottom: 5px; font-weight: 500; }

.pq-variant-picker select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
}

form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }

form.cart .quantity {
    display: flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    overflow: hidden;
}

form.cart .quantity button {
    width: 40px;
    height: 100%;
    border: 0;
    background: #F3EDE4;
    font-size: 18px;
    cursor: pointer;
}

form.cart .quantity input {
    width: 58px;
    height: 46px;
    border: 0;
    text-align: center;
    font-weight: 600;
    /* Les flèches natives du champ numérique doublonnent avec nos boutons. */
    -moz-appearance: textfield;
}

form.cart .quantity input::-webkit-outer-spin-button,
form.cart .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.single_add_to_cart_button {
    flex: 1 1 200px;
    padding: 13px 26px;
    border: 1px solid var(--pq-themes-color, #F5A623);
    border-radius: 8px;
    background: transparent;
    color: #1c1c1c;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.single_add_to_cart_button:hover {
    background: var(--pq-themes-color, #F5A623);
    color: #fff;
}

/* --------------------------------------------------------------- divers --- */

.product_meta { margin-top: 22px; font-size: 14.5px; color: #6B5646; }
.product_meta a { color: var(--pq-themes-color, #F5A623); }

.pq-product-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-size: 14.5px;
}

.pq-whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #25D366;
    color: #fff;
    font-weight: 600;
}

.pq-whatsapp-link:hover { color: #fff; filter: brightness(1.05); }

.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ==========================================================================
   Panier et tunnel de commande
   ==========================================================================
   Ces pages n'existent pas dans le thème : Melipona est un modèle vitrine, sans
   boutique fonctionnelle. On les habille avec sa palette et sa typographie
   plutôt que d'inventer un troisième style.
   ------------------------------------------------------------------------ */

.cart-page, .checkout, .checkout-page, .tracking-page { padding-block: 70px; }

/* Tableau du panier */
.cart-table, table.shop_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    overflow: hidden;
}

.cart-table th, table.shop_table th {
    padding: 15px 18px;
    background: #FAF7F2;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: start;
    color: #6B5646;
}

.cart-table td, table.shop_table td {
    padding: 16px 18px;
    border-top: 1px solid rgba(0, 0, 0, .06);
    vertical-align: middle;
}

.cart-table img, table.shop_table img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    background: #FAF7F2;
    border-radius: 8px;
    padding: 6px;
}

/* Récapitulatif : encadré, pour que le total ne se noie pas dans la page. */
.checkout__content, .cart-totals, .checkout__wrapper {
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    background: #FEFAF2;
}

.form-header {
    margin-bottom: 12px;
    font-size: 19px;
    font-weight: 700;
}

/* Champs de formulaire : même traitement que la commande rapide, pour que le
   client retrouve le même objet d'une page à l'autre. */
.checkout input:not([type="checkbox"]):not([type="radio"]),
.checkout select,
.checkout textarea,
.tracking-page input,
.cart-page input[type="text"],
.cart-page input[type="number"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
}

.checkout input:focus, .checkout select:focus, .checkout textarea:focus {
    outline: none;
    border-color: var(--pq-themes-color, #F5A623);
}

/* Boutons d'action : ceux du thème, appliqués à nos formulaires. */
.checkout button[type="submit"],
.cart-page button[type="submit"],
.tracking-page button[type="submit"],
.rr-btn {
    padding: 13px 28px;
    border: 0;
    border-radius: 8px;
    background: var(--pq-themes-color, #FFB606);
    /* Blanc sur ambre donnait 1,9 pour 1, quand le minimum lisible est de 4,5.
       Le texte se devinait plus qu'il ne se lisait, et disparaissait en plein
       soleil — cas courant pour qui suit son colis depuis la rue. Sombre sur le
       meme ambre donne 10 pour 1. */
    color: var(--cmd-ink, #241C15);
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s ease;
}

.checkout button[type="submit"]:hover,
.cart-page button[type="submit"]:hover,
.rr-btn:hover { filter: brightness(1.06); color: var(--cmd-ink, #241C15); }

/* Le total est le chiffre que le client vérifie avant de valider. */
.cart-total-row, .checkout__total {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, .1);
    font-size: 19px;
    font-weight: 700;
}

.cart-total-row strong, .checkout__total strong { color: var(--pq-themes-color, #F5A623); }

/* ==========================================================================
   Bloc promotion
   ========================================================================== */

.pq-promo { padding-block: 80px; }

/* La remise annoncée est calculée sur les prix réels : elle mérite d'être vue. */
.pq-promo-badge {
    display: inline-block;
    margin-inline-start: 12px;
    padding: 4px 16px;
    border-radius: 999px;
    background: var(--pq-themes-color, #F5A623);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    vertical-align: middle;
}

/* ------------------------------------------------------------- décompte --- */

.pq-promo-clock {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 30px 0 44px;
}

.pq-promo-unit {
    min-width: 96px;
    padding: 16px 10px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(245, 166, 35, .3);
    box-shadow: 0 10px 24px -16px rgba(90, 55, 20, .5);
    text-align: center;
}

.pq-promo-value {
    display: block;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--pq-themes-color, #F5A623);
    /* Chiffres de largeur fixe : sans cela le bloc tressaute à chaque seconde. */
    font-variant-numeric: tabular-nums;
}

.pq-promo-label {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6B5646;
}

/* Message de fin : il remplace le décompte, il ne s'y ajoute pas. */
/* État de fin : l'horloge est remplacée par le message du marchand. La classe
   est celle que pose le script du gabarit — l'ancien sélecteur visait un
   attribut que rien n'écrivait, le message s'affichait donc sans mise en forme. */
.pq-promo-over {
    display: block;
    text-align: center;
    font-size: 17px;
    color: #6B5646;
}

.pq-promo-products { margin-top: 10px; }

@media (max-width: 575.98px) {
    .pq-promo-unit { min-width: 72px; padding: 12px 6px; }
    .pq-promo-value { font-size: 26px; }
}

/* ==========================================================================
   Finition : fluidité et animations
   ==========================================================================
   Le thème anime déjà l'entrée de ses sections via WOW.js. Ce qui suit ne
   remplace pas ces animations — il les rend plus régulières et leur ajoute ce
   que le thème n'avait pas prévu : nos grilles de produits.
   ------------------------------------------------------------------------ */

:root {
    /* Une seule courbe pour toute la vitrine. Des durées identiques avec des
       courbes différentes se lisent comme un défaut de finition. */
    --pq-ease: cubic-bezier(.2, .7, .3, 1);
}

/* WOW pose `animated` + le nom de l'animation, mais le repos avant démarrage
   dépend du `fill-mode`. On l'impose : sans lui, un élément retardé apparaît
   d'abord à sa place, puis saute pour s'animer. */
.wow.animated {
    animation-fill-mode: both;
    animation-duration: .8s;
    animation-timing-function: var(--pq-ease);
}

/* Entrée en cascade des cartes produit.
   Le retard est plafonné à la huitième : au-delà, le client a fini de faire
   défiler avant que la dernière carte n'arrive, et l'effet devient une gêne. */
ul.products > li.product-item.animated { animation-delay: 0s; }
ul.products > li.product-item:nth-child(2).animated { animation-delay: .07s; }
ul.products > li.product-item:nth-child(3).animated { animation-delay: .14s; }
ul.products > li.product-item:nth-child(4).animated { animation-delay: .21s; }
ul.products > li.product-item:nth-child(5).animated { animation-delay: .07s; }
ul.products > li.product-item:nth-child(6).animated { animation-delay: .14s; }
ul.products > li.product-item:nth-child(7).animated { animation-delay: .21s; }
ul.products > li.product-item:nth-child(n+8).animated { animation-delay: .28s; }

/* Les visuels produit arrivent souvent après la carte. Sans transition, chaque
   image « claque » à sa place ; avec, la grille se remplit calmement. */
.pq-shop-product-img img {
    opacity: 0;
    animation: pq-image-in .5s var(--pq-ease) forwards;
}

@keyframes pq-image-in {
    to { opacity: 1; }
}

/* --------------------------------------------------------------- décompte */

/* Seule la seconde bat. Faire pulser les quatre cases donnerait un bloc
   clignotant ; une seule suffit à montrer que le compte est réel. */
.pq-promo-unit {
    transition: transform .45s var(--pq-ease), box-shadow .45s var(--pq-ease);
}

.pq-promo-clock:hover .pq-promo-unit {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -18px rgba(90, 55, 20, .6);
}

/* ------------------------------------------------------------ navigation */

/* Le défilement des ancres suit la même douceur que le reste. */
html { scroll-behavior: smooth; }

/* Un focus visible sur tout ce qui se clique : au clavier, un survol seul ne
   dit rien de l'endroit où l'on se trouve. */
.pq-shop-box a:focus-visible,
.pq-shop-box .pq-cart-button:focus-visible,
.pq-promo-products a:focus-visible {
    outline: 2px solid var(--pq-themes-color, #FFB606);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ------------------------------------------------------- mouvement réduit */

/* Tout ce qui précède est du confort. Pour qui a demandé moins de mouvement —
   un réglage souvent posé pour cause de vertiges ou de migraines — la vitrine
   doit rester entièrement lisible, simplement immobile. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .wow.animated,
    ul.products > li.product-item.animated,
    ul.products > li.product-item:nth-child(n).animated {
        animation: none !important;
        animation-delay: 0s !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .pq-shop-product-img img {
        opacity: 1;
        animation: none;
    }

    .pq-shop-box,
    .pq-shop-box:hover,
    .pq-shop-product-img img,
    .pq-shop-box:hover .pq-shop-product-img img,
    .pq-promo-unit,
    .pq-promo-clock:hover .pq-promo-unit {
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   En-tête — panier et WhatsApp hors du menu repliable
   ==========================================================================
   Le balisage place désormais ces deux actions avant le bouton hamburger, pour
   qu'elles restent visibles sur téléphone. Sur grand écran, l'ordre visuel
   d'origine est rétabli : logo, menu, puis actions à droite.
   ------------------------------------------------------------------------ */

header#pq-header .pq-bottom-header .navbar {
    flex-wrap: wrap;
    align-items: center;
}

header#pq-header .pq-bottom-header .navbar .navbar-brand { order: 1; }
header#pq-header .pq-bottom-header .navbar .pq-menu-search-block { order: 2; margin-inline-start: auto; }
header#pq-header .pq-bottom-header .navbar .navbar-toggler { order: 3; }
header#pq-header .pq-bottom-header .navbar .navbar-collapse { order: 4; }

@media (min-width: 992px) {
    header#pq-header .pq-bottom-header .navbar .navbar-collapse { order: 2; }
    header#pq-header .pq-bottom-header .navbar .pq-menu-search-block { order: 3; margin-inline-start: 0; }
}

/* Sous 992 px le libellé du bouton laisse la place à l'icône seule : « Commander
   sur WhatsApp » en toutes lettres pousse le hamburger hors de l'écran sur un
   téléphone étroit. Le libellé reste dans le balisage pour les lecteurs
   d'écran, via l'attribut du lien. */
.pq-header-btn .pq-btn-icon { display: none; }

@media (max-width: 991.98px) {
    header#pq-header .pq-bottom-header .navbar .pq-menu-search-block {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .pq-header-btn .pq-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0 14px;
    }

    .pq-header-btn .pq-btn-icon {
        display: inline-block;
        font-size: 21px;
        line-height: 1;
    }

    .pq-header-btn .pq-button-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    header#pq-header .pq-bottom-header .navbar .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
        margin-inline-start: 4px;
    }
}

/* ==========================================================================
   Capitalisation française
   ==========================================================================
   Le thème applique `text-transform: capitalize` un peu partout : c'est l'usage
   anglais, où chaque mot d'un titre prend une majuscule. En français on ne
   capitalise que le premier mot — « Suivi de commande », pas « Suivi De
   Commande ». Les libellés sont déjà écrits correctement en base ; il suffit
   de laisser le navigateur les afficher tels quels.
   ------------------------------------------------------------------------ */

header#pq-header .pq-bottom-header .navbar .navbar-nav li a,
.pq-section-main-title,
.pq-section-sub-title,
.pq-product-name,
.pq-button-text,
.service-title,
.pq-member-name,
.pq-member-designation,
.breadcrumb,
.breadcrumb a,
footer .menu-item a,
footer h4,
footer h5 {
    text-transform: none;
}

/* ==========================================================================
   Panier
   ==========================================================================
   La page était restée au balisage du thème précédent : contrôles empilés,
   libellés et valeurs sur deux lignes, moitié de l'écran vide. Elle est
   reconstruite ici, en deux colonnes sur grand écran et en fiches empilées
   sur téléphone.
   ------------------------------------------------------------------------ */

.pq-cart { padding-block: clamp(48px, 6vw, 90px); }

.pq-cart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 366px;
    gap: 30px;
    align-items: start;
}

/* Un élément de grille ne descend pas sous la largeur minimale de son contenu
   tant qu'on ne l'y autorise pas. Sans cela, le sélecteur de quantité imposait
   sa largeur à toute la colonne et la page débordait d'un ou deux pixels sur
   les petits téléphones. */
.pq-cart-grid > * { min-width: 0; }

@media (max-width: 991.98px) {
    .pq-cart-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ entête */

.pq-cart-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.pq-cart-heading {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    text-transform: none;
}

.pq-cart-count-inline {
    margin-inline-start: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #8A7C71;
}

.pq-cart-continue {
    font-size: 15px;
    font-weight: 600;
    color: #6B5646;
    transition: color .25s ease;
}

.pq-cart-continue:hover { color: var(--pq-themes-color, #FFB606); }

.pq-cart-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 13px 16px;
    border-radius: 10px;
    background: #FBEAEA;
    color: #AD1A19;
    font-size: 15px;
}

/* ------------------------------------------------------------- les lignes */

.pq-cart-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.pq-cart-line {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto auto 40px;
    align-items: center;
    gap: 18px;
    padding: 16px;
    border: 1px solid rgba(120, 90, 40, .12);
    border-radius: 14px;
    background: #fff;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.pq-cart-line:hover {
    border-color: rgba(255, 182, 6, .45);
    box-shadow: 0 12px 26px -20px rgba(90, 60, 20, .5);
}

/* Une ligne en rupture se signale par sa bordure, pas seulement par son
   texte : la couleur se repère avant la lecture. */
.pq-cart-line.is-out { border-color: rgba(173, 26, 25, .4); }

.pq-cart-thumb {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 10px;
    overflow: hidden;
    background: #FAF7F2;
}

.pq-cart-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    background: transparent;
}

.pq-cart-info { min-width: 0; }

.pq-cart-name {
    margin: 0 0 4px;
    font-size: 17px;
    line-height: 1.35;
    text-transform: none;
}

.pq-cart-name a { color: inherit; transition: color .25s ease; }
.pq-cart-name a:hover { color: var(--pq-themes-color, #FFB606); }

.pq-cart-option,
.pq-cart-unit {
    display: block;
    font-size: 14px;
    color: #8A7C71;
}

.pq-cart-stock-out {
    display: inline-block;
    margin-top: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #AD1A19;
}

/* -------------------------------------------------------------- quantités */

.pq-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(120, 90, 40, .22);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}

.pq-stepper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    color: #6B5646;
    font-size: 12px;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease;
}

.pq-stepper-btn:hover {
    background: var(--pq-themes-color, #FFB606);
    color: #fff;
}

.pq-stepper-input {
    width: 54px;
    height: 42px;
    border: 0;
    border-inline: 1px solid rgba(120, 90, 40, .18);
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #241C15;
    background: transparent;
    font-variant-numeric: tabular-nums;
    /* Les flèches natives doublonnent avec nos boutons et déforment le champ. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.pq-stepper-input::-webkit-outer-spin-button,
.pq-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pq-stepper-input:focus-visible {
    outline: 2px solid var(--pq-themes-color, #FFB606);
    outline-offset: -2px;
}

.pq-stepper-submit {
    display: block;
    margin-top: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(120, 90, 40, .25);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}

/* Masqué seulement quand le script a pris le relais. */
form.is-live .pq-stepper-submit { display: none; }

/* ------------------------------------------------------------ total, retrait */

.pq-cart-total { text-align: end; min-width: 104px; }

.pq-cart-total-label {
    display: none;
    font-size: 13px;
    color: #8A7C71;
}

.pq-cart-total-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--pq-themes-color, #FFB606);
    font-variant-numeric: tabular-nums;
}

.pq-cart-remove { margin: 0; }

/* Le retrait est une action destructrice : discret au repos, franc au survol.
   Un gros bouton orange permanent invitait à vider le panier. */
.pq-cart-remove button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #B3A79A;
    font-size: 16px;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease;
}

.pq-cart-remove button:hover { background: #FBEAEA; color: #AD1A19; }

/* --------------------------------------------------------- code promo etc. */

.pq-cart-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
}

.pq-coupon { display: flex; align-items: center; gap: 10px; margin: 0; }

.pq-coupon input {
    width: 210px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid rgba(120, 90, 40, .22);
    border-radius: 999px;
    font-size: 15px;
    background: #fff;
}

.pq-coupon input:focus-visible {
    outline: 2px solid var(--pq-themes-color, #FFB606);
    outline-offset: 1px;
}

.pq-coupon-submit {
    height: 46px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--pq-dark-color, #241C15);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .3s ease;
}

.pq-coupon-submit:hover { background: var(--pq-themes-color, #FFB606); }

.pq-coupon-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #E8F6EE;
    color: #1F7A4C;
    font-size: 14.5px;
    font-weight: 600;
}

.pq-link-btn {
    border: 0;
    background: none;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    color: #6B5646;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color .25s ease;
}

.pq-link-btn:hover { color: var(--pq-themes-color, #FFB606); }
.pq-link-danger:hover { color: #AD1A19; }

/* ----------------------------------------------------------- récapitulatif */

.pq-cart-aside { position: sticky; top: 110px; }

@media (max-width: 991.98px) {
    .pq-cart-aside { position: static; }
}

.pq-cart-summary {
    padding: 26px;
    border: 1px solid rgba(120, 90, 40, .14);
    border-radius: 16px;
    background: #FDFBF7;
}

.pq-summary-title {
    margin: 0 0 18px;
    font-size: 21px;
    font-weight: 700;
    text-transform: none;
}

.pq-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(120, 90, 40, .12);
    font-size: 15.5px;
    color: #4A4238;
}

.pq-summary-value {
    font-weight: 700;
    color: #241C15;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.pq-summary-note { font-weight: 500; font-size: 14px; color: #8A7C71; }

.pq-summary-row.is-discount .pq-summary-value { color: #1F7A4C; }

.pq-summary-row.is-total {
    border-bottom: 0;
    padding-top: 16px;
    font-size: 17px;
    font-weight: 700;
    color: #241C15;
}

.pq-summary-row.is-total .pq-summary-value {
    font-size: 23px;
    color: var(--pq-themes-color, #FFB606);
}

.pq-summary-cta {
    display: block;
    margin-top: 18px;
    padding: 15px 24px;
    border-radius: 999px;
    background: var(--pq-themes-color, #FFB606);
    color: #241C15;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    transition: transform .3s var(--pq-ease, ease), box-shadow .3s ease, background-color .3s ease;
}

.pq-summary-cta:hover {
    color: #241C15;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -14px rgba(255, 182, 6, .9);
}

.pq-summary-trust {
    list-style: none;
    margin: 20px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(120, 90, 40, .12);
    display: grid;
    gap: 10px;
    font-size: 14.5px;
    color: #6B5646;
}

.pq-summary-trust li { display: flex; align-items: center; gap: 10px; }
.pq-summary-trust i { color: var(--pq-themes-color, #FFB606); width: 18px; text-align: center; }

/* ---------------------------------------------------------- panier vide */

.pq-cart-empty {
    max-width: 460px;
    margin: 0 auto;
    padding: 50px 20px;
    text-align: center;
}

.pq-cart-empty-icon {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #FAF3E4;
    color: var(--pq-themes-color, #FFB606);
    font-size: 34px;
}

.pq-cart-empty h2 { font-size: 24px; margin-bottom: 8px; text-transform: none; }
.pq-cart-empty p { color: #8A7C71; margin-bottom: 22px; }
.pq-cart-empty .pq-summary-cta { display: inline-block; padding-inline: 40px; }

/* ============================== téléphone ============================== */

/* Sous 768 px la ligne se replie en fiche : le visuel et le nom en haut, la
   quantité et le total côte à côte en dessous. Les colonnes d'un tableau ne
   tiennent pas sur 360 px sans réduire le texte sous le lisible. */
@media (max-width: 767.98px) {
    /* Troisième colonne en `auto` : elle porte le bouton de retrait sur la
       première rangée et le sous-total sur la seconde. Figée à 40 px pour le
       bouton, elle faisait déborder le montant de la page. */
    .pq-cart-line {
        grid-template-columns: 78px minmax(0, 1fr) auto;
        grid-template-areas:
            "img info retrait"
            "qty qty total";
        gap: 14px;
    }

    .pq-cart-total { min-width: 0; }
    .pq-cart-remove { justify-self: end; }

    .pq-cart-thumb { grid-area: img; width: 78px; height: 78px; }
    .pq-cart-info  { grid-area: info; }
    .pq-cart-remove { grid-area: retrait; align-self: start; }

    .pq-cart-qty {
        grid-area: qty;
        padding-top: 12px;
        border-top: 1px solid rgba(120, 90, 40, .12);
    }

    .pq-cart-total {
        grid-area: total;
        align-self: center;
        padding-top: 12px;
        border-top: 1px solid rgba(120, 90, 40, .12);
    }

    .pq-cart-total-label { display: block; }

    .pq-cart-actions { flex-direction: column; align-items: stretch; }
    .pq-coupon { width: 100%; }

    /* `min-width: 0` est indispensable : un champ texte refuse par défaut de
       descendre sous sa largeur intrinsèque (une vingtaine de caractères) et
       poussait le bouton « Appliquer » hors de l'écran. */
    .pq-coupon input { width: auto; flex: 1; min-width: 0; }
    .pq-coupon-submit { flex: 0 0 auto; padding-inline: 18px; }
}

/* Les commandes du panier suivent la même règle de casse que le reste. */
.pq-link-btn,
.pq-coupon-submit,
.pq-summary-cta,
.pq-stepper-submit,
.pq-cart-continue { text-transform: none; }

/* ==========================================================================
   « Notre maison » — bloc de confiance
   ==========================================================================
   Trois promesses, toutes visibles en même temps, reliées par un fil ambré qui
   suit le trajet du miel : rucher, mise en pot, contrôle. Le carrousel du thème
   est abandonné ici — il n'en montrait qu'une à la fois.
   ------------------------------------------------------------------------ */

.vm-maison {
    --maison-ground: #FFFDF8;
    --maison-ink: #241C15;
    --maison-soft: #6B5646;
    --maison-amber: var(--pq-themes-color, #FFB606);
    --maison-deep: #B87A00;
    --maison-line: rgba(120, 90, 40, .14);

    position: relative;
    overflow: hidden;
    background: var(--maison-ground);
    padding-block: clamp(56px, 7vw, 104px);
}

/* Trame d'alvéoles très pâle : la matière du sujet, posée si légèrement qu'elle
   se devine plutôt qu'elle ne se voit. Au-delà, elle concurrencerait les photos. */
.vm-maison__comb {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Volontairement au bord du perceptible : à 5 % la trame entrait en
       concurrence avec les photographies, qui sont la vraie preuve. */
    opacity: .032;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2297%22%20viewBox%3D%220%200%2056%2097%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23B87A00%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M14%201h28l13%2024-13%2024H14L1%2025z%22%2F%3E%3Cpath%20d%3D%22M14%2049h28l13%2024-13%2024H14L1%2073z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: 56px 97px;
}

.vm-maison .container { position: relative; z-index: 1; }

.vm-maison__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

@media (max-width: 991.98px) {
    .vm-maison__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ énoncé */

.vm-maison__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    /* Interlettrage large sur le surtitre, resserré sur le titre : deux
       traitements opposés donnent au bloc sa voix propre sans changer de
       police — celles du thème acheté restent en place. */
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--maison-deep);
}

.vm-maison__eyebrow::after {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    margin-top: 10px;
    background: var(--maison-amber);
}

.vm-maison__title {
    margin: 0 0 18px;
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.08;
    letter-spacing: -.015em;
    color: var(--maison-ink);
    text-transform: none;
    text-wrap: balance;
}

.vm-maison__text {
    max-width: 46ch;
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--maison-soft);
}

.vm-maison__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 30px;
    border-radius: 999px;
    background: var(--maison-ink);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    transition:
        background-color .35s var(--pq-ease, ease),
        transform .35s var(--pq-ease, ease),
        box-shadow .35s var(--pq-ease, ease);
}

.vm-maison__btn:hover {
    color: var(--maison-ink);
    background: var(--maison-amber);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -14px rgba(184, 122, 0, .85);
}

.vm-maison__btn svg { transition: transform .35s var(--pq-ease, ease); }
.vm-maison__btn:hover svg { transform: translateX(4px); }

.vm-maison__btn:focus-visible {
    outline: 2px solid var(--maison-deep);
    outline-offset: 3px;
}

/* ------------------------------------------------------------- les preuves */

.vm-maison__proofs {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 26px;
}

/* Le fil : il court derrière les visuels, du premier au dernier, et matérialise
   le trajet. Il s'arrête au centre des vignettes extrêmes plutôt que de courir
   d'un bord à l'autre — un trait qui dépasse ne relie plus rien. */
.vm-maison__proofs::before {
    content: "";
    position: absolute;
    inset-inline-start: 55px;
    top: 55px;
    bottom: 55px;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(184, 122, 0, .15),
        var(--maison-amber) 22%,
        var(--maison-amber) 78%,
        rgba(184, 122, 0, .15));
}

.vm-maison__proof {
    position: relative;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
}

.vm-maison__media {
    position: relative;
    z-index: 1;
    width: 110px;
    height: 110px;
    overflow: hidden;
    background: #F6EFE2;
    /* Arrondi asymétrique : la forme d'une goutte qui tombe, reprise sur les
       trois vignettes pour qu'elles se lisent comme une même série. */
    border-radius: 46% 54% 50% 50% / 54% 46% 54% 46%;
    box-shadow: 0 0 0 5px var(--maison-ground), 0 12px 26px -18px rgba(90, 60, 20, .7);
    transition: transform .5s var(--pq-ease, ease), box-shadow .5s var(--pq-ease, ease);
}

.vm-maison__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
    transition: transform .7s var(--pq-ease, ease);
}

.vm-maison__proof:hover .vm-maison__media {
    transform: translateY(-3px);
    box-shadow: 0 0 0 5px var(--maison-ground), 0 20px 34px -20px rgba(90, 60, 20, .8);
}

.vm-maison__proof:hover .vm-maison__media img { transform: scale(1.07); }

.vm-maison__proof-title {
    margin: 0 0 6px;
    font-size: 19px;
    line-height: 1.3;
    color: var(--maison-ink);
    text-transform: none;
}

.vm-maison__proof-text {
    margin: 0;
    max-width: 42ch;
    font-size: 15px;
    line-height: 1.65;
    color: var(--maison-soft);
}

/* ------------------------------------------------------------- téléphone -- */

@media (max-width: 575.98px) {
    /* Le fil disparaît sous 576 px : les vignettes rétrécissent et l'axe ne
       tombe plus en leur centre. Un fil décalé de quelques pixels se remarque
       plus qu'une absence de fil. */
    .vm-maison__proofs::before { display: none; }

    .vm-maison__proof {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }

    .vm-maison__media { width: 84px; height: 84px; }
    .vm-maison__proof-title { font-size: 17px; }
}

/* --------------------------------------------------------- mouvement réduit */

@media (prefers-reduced-motion: reduce) {
    .vm-maison__btn,
    .vm-maison__btn:hover,
    .vm-maison__btn svg,
    .vm-maison__media,
    .vm-maison__proof:hover .vm-maison__media,
    .vm-maison__media img,
    .vm-maison__proof:hover .vm-maison__media img {
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   Casse française — correctif à la source
   ==========================================================================
   Le premier correctif ne portait que sur quelques classes. La cause réelle est
   plus haute : le thème applique `text-transform: capitalize` à TOUS les titres
   (`h1`–`h6`), et son sélecteur `.pq-section-title .pq-section-main-title`
   l'emportait sur le nôtre. Soixante-neuf éléments restaient en casse anglaise
   — « Trois Étapes, Et Vous Payez À La Réception ».

   On neutralise donc à deux niveaux : l'héritage sur les grandes zones, et les
   titres eux-mêmes avec une spécificité suffisante. Les surtitres qui doivent
   rester en capitales déclarent leur propre `uppercase` et ne sont pas touchés.
   ------------------------------------------------------------------------ */

body main,
body header#pq-header,
body footer { text-transform: none; }

body main :is(h1, h2, h3, h4, h5, h6),
body header#pq-header :is(h1, h2, h3, h4, h5, h6),
body footer :is(h1, h2, h3, h4, h5, h6),
.pq-section-title .pq-section-main-title,
.pq-section-title .pq-section-sub-title { text-transform: none; }

/* Boutons et liens : le thème pose `capitalize` via `[type="submit"]` et via ses
   classes de bouton, deux sélecteurs qui échappaient aux règles ci-dessus. La
   spécificité est portée à `body main [attribut]` pour passer devant. */
body main :is([type="button"], [type="reset"], [type="submit"], button, a, .pq-button, .pq-btn),
body header#pq-header :is(button, a, .pq-button),
body footer :is(button, a, .pq-button) { text-transform: none; }

/* ==========================================================================
   « Comment ça marche » — parcours de commande
   ==========================================================================
   Trois étapes côte à côte, en alvéoles. Le gabarit d'origine les empilait sur
   trois rangées alternées : 1 833 px pour soixante mots.
   ------------------------------------------------------------------------ */

.vm-parcours {
    --parcours-ink: #241C15;
    --parcours-soft: #6B5646;
    --parcours-amber: var(--pq-themes-color, #FFB606);
    --parcours-deep: #B87A00;

    position: relative;
    overflow: hidden;
    padding-block: clamp(56px, 7vw, 100px);
}

.vm-parcours .container { position: relative; z-index: 1; }

/* Le thème redéclare `list-style` sur les listes de contenu avec une spécificité
   supérieure : sans ces deux sélecteurs, les puces natives « 1. 2. 3. »
   s'affichaient EN PLUS de nos pastilles numérotées. */
ol.vm-parcours__list,
ol.vm-parcours__list > li.vm-parcours__step {
    list-style: none;
}

ol.vm-parcours__list > li.vm-parcours__step::marker { content: none; }

.vm-parcours__list {
    margin: 44px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3.5vw, 48px);
}

@media (max-width: 991.98px) {
    .vm-parcours__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639.98px) {
    .vm-parcours__list { grid-template-columns: 1fr; gap: 34px; }
}

.vm-parcours__step {
    text-align: center;
    min-width: 0;
}

/* ------------------------------------------------------------- l'alvéole -- */

.vm-parcours__cell {
    position: relative;
    width: min(230px, 78%);
    margin: 0 auto 22px;
    aspect-ratio: 1 / 1.09;
    background: #F6EFE2;
    /* Hexagone à pointes haut et bas : la forme du thème, à une taille qui
       laisse les trois étapes tenir sur une seule ligne. */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: transform .5s var(--pq-ease, ease);
}

.vm-parcours__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
    transition: transform .7s var(--pq-ease, ease);
}

.vm-parcours__step:hover .vm-parcours__cell { transform: translateY(-4px); }
.vm-parcours__step:hover .vm-parcours__cell img { transform: scale(1.07); }

/* Le numéro chevauche la pointe basse de l'alvéole : posé à l'intérieur il
   masquerait la photo, posé à côté il flotterait sans attache. */
.vm-parcours__num {
    position: absolute;
    inset-inline-start: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--parcours-amber);
    color: var(--parcours-ink);
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* ---------------------------------------------------------------- textes -- */

.vm-parcours__title {
    margin: 0 auto 8px;
    max-width: 20ch;
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.3;
    color: var(--parcours-ink);
    text-transform: none;
    text-wrap: balance;
}

.vm-parcours__text {
    margin: 0 auto;
    max-width: 34ch;
    font-size: 15px;
    line-height: 1.65;
    color: var(--parcours-soft);
}

/* --------------------------------------------------------- mouvement réduit */

@media (prefers-reduced-motion: reduce) {
    .vm-parcours__cell,
    .vm-parcours__step:hover .vm-parcours__cell,
    .vm-parcours__cell img,
    .vm-parcours__step:hover .vm-parcours__cell img {
        transform: none;
        transition: none;
    }

    .vm-parcours__num { transform: translateX(-50%); }
}

/* ==========================================================================
   Carte produit — arguments de vente
   ========================================================================== */

/* L'économie en dinars : le pourcentage attire l'œil de loin, le montant se
   compare au prix affiché juste au-dessus. */
.pq-shop-box .pq-product-detail .pq-product-saving {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #1F7A4C;
    font-variant-numeric: tabular-nums;
}

/* Reste en stock. Discret volontairement : c'est une information, pas un
   compte à rebours clignotant. Le rouge suffit à la faire remarquer. */
.pq-shop-box .pq-product-detail .pq-product-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #FBEAEA;
    color: #AD1A19;
    font-size: 12.5px;
    font-weight: 600;
}

.pq-shop-box .pq-product-detail .pq-product-left i { font-size: 11px; }

/* ==========================================================================
   Avis clients
   ========================================================================== */

.vm-avis {
    --avis-ink: #241C15;
    --avis-soft: #6B5646;
    --avis-amber: var(--pq-themes-color, #FFB606);

    padding-block: clamp(52px, 6.5vw, 92px);
    background: #FDFBF7;
}

.vm-avis__list {
    list-style: none;
    margin: 42px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 30px);
}

@media (max-width: 991.98px) { .vm-avis__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .vm-avis__list { grid-template-columns: 1fr; } }

.vm-avis__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 24px 22px;
    border: 1px solid rgba(120, 90, 40, .12);
    border-radius: 16px;
    background: #fff;
    min-width: 0;
    transition: transform .4s var(--pq-ease, ease), box-shadow .4s var(--pq-ease, ease);
}

.vm-avis__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -24px rgba(90, 60, 20, .6);
}

.vm-avis__stars { display: flex; gap: 3px; color: var(--avis-amber); font-size: 14px; }
.vm-avis__stars .is-off { color: #E2D9C9; }

.vm-avis__text {
    margin: 0;
    flex: 1;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--avis-soft);
    quotes: "«\00a0" "\00a0»";
}

.vm-avis__text::before { content: open-quote; }
.vm-avis__text::after { content: close-quote; }

.vm-avis__who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(120, 90, 40, .12);
}

/* Initiale plutôt qu'une photo : nous n'avons pas le portrait de ces clients,
   et une photo d'illustration transformerait un vrai avis en faux témoignage. */
.vm-avis__initial {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #FAF3E4;
    color: #B87A00;
    font-size: 17px;
    font-weight: 700;
}

.vm-avis__meta { display: flex; flex-direction: column; min-width: 0; }
.vm-avis__meta strong { font-size: 15px; color: var(--avis-ink); }
.vm-avis__city { font-size: 13px; color: #8A7C71; }

.vm-avis__product {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: #E8F6EE;
    color: #1F7A4C;
    font-size: 12.5px;
    font-weight: 600;
}

/* ==========================================================================
   Questions fréquentes
   ========================================================================== */

.vm-faq {
    --faq-ink: #241C15;
    --faq-soft: #6B5646;
    --faq-amber: var(--pq-themes-color, #FFB606);

    padding-block: clamp(52px, 6.5vw, 92px);
}

.vm-faq__list {
    max-width: 820px;
    margin: 40px auto 0;
    display: grid;
    gap: 12px;
}

.vm-faq__item {
    border: 1px solid rgba(120, 90, 40, .14);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.vm-faq__item[open] {
    border-color: rgba(255, 182, 6, .5);
    box-shadow: 0 12px 26px -22px rgba(90, 60, 20, .6);
}

.vm-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    font-size: 16.5px;
    font-weight: 600;
    color: var(--faq-ink);
    list-style: none;
}

/* Le marqueur natif du navigateur est masqué : nous fournissons le nôtre, qui
   pivote et reste lisible dans les deux états. */
.vm-faq__q::-webkit-details-marker { display: none; }
.vm-faq__q::marker { content: none; }

.vm-faq__q:focus-visible {
    outline: 2px solid var(--faq-amber);
    outline-offset: -3px;
}

.vm-faq__sign {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FAF3E4;
    color: #B87A00;
    font-size: 12px;
    transition: transform .3s var(--pq-ease, ease), background-color .3s ease, color .3s ease;
}

.vm-faq__item[open] .vm-faq__sign {
    transform: rotate(45deg);
    background: var(--faq-amber);
    color: #fff;
}

.vm-faq__a {
    padding: 0 22px 20px;
    border-top: 1px solid rgba(120, 90, 40, .1);
}

.vm-faq__a p {
    margin: 16px 0 0;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--faq-soft);
}

@media (max-width: 575.98px) {
    .vm-faq__q { padding: 15px 16px; font-size: 15.5px; }
    .vm-faq__a { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .vm-avis__card,
    .vm-avis__card:hover,
    .vm-faq__sign,
    .vm-faq__item[open] .vm-faq__sign { transform: none; transition: none; }

    .vm-faq__item[open] .vm-faq__sign { transform: rotate(45deg); }
}

/* ==========================================================================
   Catalogue et rayons
   ==========================================================================
   La page était restée au balisage du thème précédent. Deux colonnes : les
   rayons à gauche, collés au défilement, la grille à droite.
   ------------------------------------------------------------------------ */

.vm-catalogue {
    --cat-ink: #241C15;
    --cat-soft: #6B5646;
    --cat-amber: var(--pq-themes-color, #FFB606);
    --cat-deep: #B87A00;
    --cat-line: rgba(120, 90, 40, .14);

    padding-block: clamp(44px, 5.5vw, 84px);
}

.vm-catalogue__grid {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
}

@media (max-width: 991.98px) {
    .vm-catalogue__grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------- colonne rayons */

.vm-catalogue__aside {
    position: sticky;
    top: 110px;
    display: grid;
    gap: 22px;
    min-width: 0;
}

@media (max-width: 991.98px) {
    .vm-catalogue__aside { position: static; }
}

.vm-aside-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cat-deep);
}

/* -------------------------------------------------------------- recherche */

.vm-search {
    position: relative;
    display: grid;
    gap: 10px;
}

.vm-search__icon {
    position: absolute;
    inset-inline-start: 16px;
    top: 15px;
    font-size: 14px;
    color: #B3A79A;
    pointer-events: none;
}

.vm-search input {
    width: 100%;
    height: 46px;
    padding-inline: 40px 16px;
    border: 1px solid var(--cat-line);
    border-radius: 999px;
    background: #fff;
    font-size: 15px;
}

.vm-search input:focus-visible {
    outline: 2px solid var(--cat-amber);
    outline-offset: 1px;
}

.vm-search button {
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--pq-dark-color, #241C15);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .3s ease;
}

.vm-search button:hover { background: var(--cat-amber); color: var(--cat-ink); }

/* ------------------------------------------------------------ liste rayons */

.vm-rayons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.vm-rayons a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 15px;
    color: var(--cat-soft);
    transition: background-color .25s ease, color .25s ease;
}

.vm-rayons a:hover { background: #FAF3E4; color: var(--cat-ink); }

/* Le rayon courant se signale par un fond plein ET un liseré : la couleur seule
   ne suffit pas à qui ne distingue pas l'ambre du beige. */
.vm-rayons a.is-active {
    background: var(--cat-amber);
    color: var(--cat-ink);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--cat-deep);
}

.vm-rayons__count {
    flex-shrink: 0;
    font-size: 12.5px;
    color: #8A7C71;
    font-variant-numeric: tabular-nums;
}

.vm-rayons a.is-active .vm-rayons__count { color: rgba(36, 28, 21, .65); }

/* ---------------------------------------------------------- réassurances -- */

.vm-aside-trust {
    list-style: none;
    margin: 0;
    padding: 18px 16px;
    border: 1px solid var(--cat-line);
    border-radius: 14px;
    background: #FDFBF7;
    display: grid;
    gap: 11px;
    font-size: 14px;
    color: var(--cat-soft);
}

.vm-aside-trust li { display: flex; align-items: center; gap: 10px; }
.vm-aside-trust i { color: var(--cat-amber); width: 18px; text-align: center; }

/* ------------------------------------------------------------ barre du haut */

.vm-catalogue__main { min-width: 0; }

.vm-catalogue__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cat-line);
}

.vm-catalogue__count { margin: 0; font-size: 15px; color: var(--cat-soft); }
.vm-catalogue__count strong { color: var(--cat-ink); font-variant-numeric: tabular-nums; }

.vm-sort { display: flex; align-items: center; gap: 10px; margin: 0; }
.vm-sort label { font-size: 14px; color: #8A7C71; }

.vm-sort select {
    height: 42px;
    padding-inline: 14px 34px;
    border: 1px solid var(--cat-line);
    border-radius: 999px;
    background: #fff;
    font-size: 14.5px;
    color: var(--cat-ink);
    cursor: pointer;
}

.vm-sort select:focus-visible { outline: 2px solid var(--cat-amber); outline-offset: 1px; }

/* -------------------------------------------------------------- pagination */

.vm-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.vm-pagination a,
.vm-pagination span {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding-inline: 12px;
    border: 1px solid var(--cat-line);
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--cat-soft);
    background: #fff;
    font-variant-numeric: tabular-nums;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.vm-pagination a:hover { border-color: var(--cat-amber); color: var(--cat-ink); }

.vm-pagination a.is-current {
    background: var(--cat-amber);
    border-color: var(--cat-amber);
    color: var(--cat-ink);
}

/* Les flèches en bout de course restent visibles mais cessent d'inviter au
   clic : les retirer ferait sauter la rangée à chaque changement de page. */
.vm-pagination .is-off { opacity: .4; cursor: default; }

.vm-pagination a:focus-visible { outline: 2px solid var(--cat-deep); outline-offset: 2px; }

/* --------------------------------------------------------------- page vide */

.vm-catalogue__empty {
    max-width: 460px;
    margin: 40px auto;
    padding: 40px 20px;
    text-align: center;
}

.vm-catalogue__empty-icon {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #FAF3E4;
    color: var(--cat-amber);
    font-size: 32px;
}

.vm-catalogue__empty h2 { font-size: 22px; margin-bottom: 8px; text-transform: none; }
.vm-catalogue__empty p { color: var(--cat-soft); margin-bottom: 22px; }
.vm-catalogue__empty .pq-summary-cta { display: inline-block; padding-inline: 34px; }

/* ==========================================================================
   Page commande
   ==========================================================================
   Le formulaire garde son balisage — il porte la validation, le chargement des
   délégations et le calcul de la livraison. Seul l'habillage manquait : ses
   classes venaient du thème précédent et ne correspondaient plus à rien.
   ------------------------------------------------------------------------ */

/* Ces variables etaient declarees sur `.vm-commande` seul. Le bouton final est
   pourtant reutilise ailleurs — la page de suivi notamment — ou elles
   n'existaient pas : le bouton y perdait son fond ET sa couleur de texte, et
   ressortait en gris clair sur blanc. Il ne ressemblait plus a un bouton.
   Elles vivent donc a la racine, et toute page qui reprend ce balisage herite
   du meme bouton. */
:root {
    --cmd-ink: #241C15;
    --cmd-soft: #6B5646;
    --cmd-amber: var(--pq-themes-color, #FFB606);
    --cmd-deep: #B87A00;
}

.vm-commande {
    --cmd-ink: #241C15;
    --cmd-soft: #6B5646;
    --cmd-amber: var(--pq-themes-color, #FFB606);
    --cmd-deep: #B87A00;
    --cmd-line: rgba(120, 90, 40, .14);

    padding-block: clamp(44px, 5.5vw, 84px);
}

.vm-commande__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: clamp(26px, 3vw, 44px);
    align-items: start;
}

@media (max-width: 991.98px) {
    /* Le récapitulatif passe AVANT le formulaire sur petit écran : le client
       vérifie ce qu'il achète avant de saisir douze champs, pas après. */
    .vm-commande__grid { grid-template-columns: 1fr; }
    .vm-commande__aside { order: -1; }
}

.vm-commande__head { margin-bottom: 24px; }

.vm-commande__title {
    margin: 0 0 8px;
    font-size: clamp(23px, 2.4vw, 29px);
    color: var(--cmd-ink);
    text-transform: none;
}

.vm-commande__lead {
    margin: 0;
    max-width: 56ch;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--cmd-soft);
}

/* ------------------------------------------------------------- formulaire */

.checkout-form__wrap {
    padding: clamp(20px, 2.4vw, 30px);
    border: 1px solid var(--cmd-line);
    border-radius: 16px;
    background: #fff;
}

.checkout-form__group { margin-bottom: 4px; }

.checkout-form__item { margin-bottom: 18px; }

.checkout-form__item label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cmd-ink);
}

.form__control {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--cmd-line);
    border-radius: 10px;
    background: #fff;
    font-size: 15.5px;
    color: var(--cmd-ink);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.form__control::placeholder { color: #B3A79A; }

.form__control:focus {
    outline: 0;
    border-color: var(--cmd-amber);
    box-shadow: 0 0 0 3px rgba(255, 182, 6, .22);
}

textarea.form__control { min-height: 96px; resize: vertical; }

/* Un champ refusé se signale par sa bordure ET par son message : la couleur
   seule est invisible pour un daltonien, et c'est le moment où le client
   abandonne s'il ne comprend pas ce qu'on lui reproche. */
.form__control.is-invalid,
.form__control[aria-invalid="true"] {
    border-color: #AD1A19;
    box-shadow: 0 0 0 3px rgba(173, 26, 25, .15);
}

.checkout-form__item .invalid-feedback,
.checkout-form__item .error {
    display: block;
    margin-top: 6px;
    font-size: 13.5px;
    color: #AD1A19;
}

/* --------------------------------------------------- récapitulatif du form */

.checkout__wrapper.shop-summary {
    padding: 20px 22px;
    border: 1px solid var(--cmd-line);
    border-radius: 14px;
    background: #FDFBF7;
}

.checkout__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--cmd-line);
}

.checkout__item:last-child { border-bottom: 0; }

.checkout__item .title {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--cmd-soft);
    text-transform: none;
}

.checkout__item .price,
.checkout__item span {
    font-weight: 700;
    color: var(--cmd-ink);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.checkout__total {
    padding-top: 14px;
    font-size: 17px;
}

.checkout__total .title { font-weight: 700; color: var(--cmd-ink); }
.checkout__total span { font-size: 21px; color: var(--cmd-amber); }

.shop-hint {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #8A7C71;
}

/* ------------------------------------------------------------ bouton final */

.checkout-proceed .rr-btn,
.checkout-proceed button {
    display: block;
    width: 100%;
    padding: 16px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--cmd-amber);
    color: var(--cmd-ink);
    font-size: 16.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .3s var(--pq-ease, ease), box-shadow .3s ease;
}

.checkout-proceed .rr-btn:hover,
.checkout-proceed button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -14px rgba(255, 182, 6, .95);
}

.checkout-proceed .rr-btn:focus-visible,
.checkout-proceed button:focus-visible {
    outline: 2px solid var(--cmd-deep);
    outline-offset: 3px;
}

/* Le fond animé du thème précédent n'existe plus : sans cette règle il
   apparaissait comme un bloc vide au-dessus du libellé. */
.hover-bg { display: none; }

/* ------------------------------------------------------- colonne résumé -- */

.vm-commande__aside { position: sticky; top: 110px; }

@media (max-width: 991.98px) { .vm-commande__aside { position: static; } }

.vm-commande__summary {
    padding: 24px;
    border: 1px solid var(--cmd-line);
    border-radius: 16px;
    background: #FDFBF7;
}

.vm-summary-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 19px;
    color: var(--cmd-ink);
    text-transform: none;
}

.vm-summary-count { font-size: 14px; font-weight: 500; color: #8A7C71; }

.vm-commande__lines {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: grid;
    gap: 2px;
}

.vm-commande__lines li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--cmd-line);
}

.vm-commande__line-info { min-width: 0; }
.vm-commande__line-name { display: block; font-size: 14.5px; color: var(--cmd-ink); }
.vm-commande__line-opt { display: block; font-size: 12.5px; color: #8A7C71; }
.vm-commande__line-qty { font-size: 13.5px; color: #8A7C71; font-variant-numeric: tabular-nums; }

.vm-commande__line-total {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cmd-ink);
    font-variant-numeric: tabular-nums;
}

.vm-commande__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    font-size: 15px;
    color: var(--cmd-soft);
}

.vm-commande__value { font-weight: 700; color: var(--cmd-ink); font-variant-numeric: tabular-nums; }
.vm-commande__row.is-note { font-size: 13.5px; color: #8A7C71; }

.vm-commande__hint {
    margin: 6px 0 16px;
    font-size: 13px;
    line-height: 1.6;
    color: #8A7C71;
}

.vm-commande__trust {
    list-style: none;
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--cmd-line);
    display: grid;
    gap: 10px;
    font-size: 14px;
    color: var(--cmd-soft);
}

.vm-commande__trust li { display: flex; align-items: flex-start; gap: 10px; }
.vm-commande__trust i { margin-top: 3px; color: var(--cmd-amber); width: 17px; text-align: center; }

.vm-commande__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--cmd-soft);
    transition: color .25s ease;
}

.vm-commande__back:hover { color: var(--cmd-amber); }

@media (prefers-reduced-motion: reduce) {
    .checkout-proceed .rr-btn,
    .checkout-proceed .rr-btn:hover,
    .checkout-proceed button,
    .checkout-proceed button:hover { transform: none; transition: none; }
}

/* ==========================================================================
   En-tête et bannière — la découpe en rayon
   ==========================================================================
   Une seule idée, tenue jusqu'au bout : le bas de l'en-tête n'est pas un trait
   droit mais une rangée d'alvéoles, comme si la page était découpée dans un
   rayon de miel. C'est ce qui lie l'en-tête à la bannière et ce qui rend la
   boutique reconnaissable — le reste du chrome reste volontairement calme.

   La découpe est un masque, pas une image : elle suit la couleur de l'en-tête,
   ne pèse rien, et reste nette à toutes les résolutions.
   ------------------------------------------------------------------------ */

header#pq-header .pq-bottom-header {
    position: relative;
    /* La rangée d'alvéoles déborde sous la barre : sans marge, elle recouvrirait
       les premiers pixels de la bannière. */
    padding-bottom: 14px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2260%22%20height%3D%22100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200h60v86L45%2094v-8L30%2094%2015%2086v8L0%2086z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2260%22%20height%3D%22100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200h60v86L45%2094v-8L30%2094%2015%2086v8L0%2086z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-size: 60px 100%;
    mask-size: 60px 100%;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
}

/* ------------------------------------------------------------ liens du menu */

/* Le lien courant n'est plus souligné d'un trait : il porte une alvéole pleine,
   la même forme que la découpe et que les étapes du parcours. Un vocabulaire,
   répété partout, vaut mieux que trois marqueurs différents. */
header#pq-header .pq-bottom-header .navbar .navbar-nav li a {
    position: relative;
    text-decoration: none;
}

header#pq-header .pq-bottom-header .navbar .navbar-nav li a::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    /* Ancrée sous le lien lui-même, pas sur la hauteur de la rangée : le `li`
       fait 90 px de haut pour un texte de 25 px, et une position calculée sur
       le `li` posait l'alvéole au-dessus du mot. */
    top: 100%;
    margin-top: 5px;
    width: 9px;
    height: 10px;
    transform: translateX(-50%) scale(0);
    transform-origin: center;
    background: var(--pq-themes-color, #FFB606);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: transform .32s var(--pq-ease, cubic-bezier(.2, .7, .3, 1));
}

header#pq-header .pq-bottom-header .navbar .navbar-nav li a:hover::after,
header#pq-header .pq-bottom-header .navbar .navbar-nav li.current-menu-item a::after {
    transform: translateX(-50%) scale(1);
}

/* Le soulignement d'origine du thème ferait doublon avec l'alvéole. */
header#pq-header .pq-bottom-header .navbar .navbar-nav li a::before { display: none; }

@media (max-width: 991.98px) {
    /* Dans le menu déplié, l'alvéole passe à gauche du libellé : centrée sous un
       lien pleine largeur, elle ne désignerait plus rien. */
    header#pq-header .pq-bottom-header .navbar .navbar-nav li a::after {
        inset-inline-start: 0;
        top: 50%;
        margin-top: 0;
        transform: translateY(-50%) scale(0);
    }

    header#pq-header .pq-bottom-header .navbar .navbar-nav li a:hover::after,
    header#pq-header .pq-bottom-header .navbar .navbar-nav li.current-menu-item a::after {
        transform: translateY(-50%) scale(1);
    }

    header#pq-header .pq-bottom-header .navbar .navbar-nav li a { padding-inline-start: 20px; }
}

/* ================================================================ bannière */

/* Un voile ambré monte du bas de la bannière. Il n'assombrit pas la photo : il
   la réchauffe, et il donne au texte du slider un fond stable quelle que soit
   l'image choisie derrière. */
#rev_slider_2_1_wrapper::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 42%;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(180deg,
        rgba(255, 244, 214, 0) 0%,
        rgba(255, 214, 130, .16) 55%,
        rgba(184, 122, 0, .28) 100%);
}

/* Rappel de la trame, très bas, dans la zone calme où se pose le titre. */
#rev_slider_2_1_wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2297%22%20viewBox%3D%220%200%2056%2097%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M14%201h28l13%2024-13%2024H14L1%2025z%22%2F%3E%3Cpath%20d%3D%22M14%2049h28l13%2024-13%2024H14L1%2073z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: 56px 97px;
}

/* Le bouton de la bannière prend le relief des autres appels à l'action. */
#rev_slider_2_1_wrapper .pq-button {
    box-shadow: 0 14px 30px -16px rgba(184, 122, 0, .9);
    transition: transform .35s var(--pq-ease, ease), box-shadow .35s ease;
}

#rev_slider_2_1_wrapper .pq-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -18px rgba(184, 122, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
    header#pq-header .pq-bottom-header .navbar .navbar-nav li a::after,
    #rev_slider_2_1_wrapper .pq-button,
    #rev_slider_2_1_wrapper .pq-button:hover { transition: none; }

    #rev_slider_2_1_wrapper .pq-button:hover { transform: none; }
}

/* ==========================================================================
   Bannière de secours
   ==========================================================================
   Affichée uniquement lorsque le slider Revolution n'a pas pris. Elle reprend
   le premier slide en HTML simple : même image, même message, même bouton.
   ------------------------------------------------------------------------ */

.vm-hero-secours {
    position: relative;
    display: grid;
    align-items: center;
    /* Le theme applique `padding: 130px 0` a toute <section>. Cumule au
       padding du bloc de texte, cela faisait 220 px de vide en haut et en bas :
       une banniere de 805 px sur un ecran de 730, qui repoussait les produits
       sous la ligne de flottaison. Personne ne fait defiler pour decouvrir
       qu'il y a une boutique. */
    padding-block: 0;
    min-height: min(58vh, 520px);
    overflow: hidden;
    background: #FDF6EC;
}

.vm-hero-secours[hidden] { display: none; }

.vm-hero-secours__fond {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* Le voile part de la gauche : c'est là que se pose le texte, et c'est le seul
   endroit où la photo doit céder du contraste. */
.vm-hero-secours__fond::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 250, 240, .92) 0%, rgba(255, 250, 240, .62) 38%, rgba(255, 250, 240, 0) 68%);
}

.vm-hero-secours .container { position: relative; z-index: 1; }

.vm-hero-secours__texte { max-width: 34rem; padding-block: clamp(32px, 4.5vw, 64px); }

.vm-hero-secours__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #B87A00;
}

.vm-hero-secours__titre {
    margin: 0 0 18px;
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1.04;
    letter-spacing: -.02em;
    color: #241C15;
    text-transform: none;
}

.vm-hero-secours__lead {
    margin: 0 0 28px;
    max-width: 44ch;
    font-size: 16.5px;
    line-height: 1.7;
    color: #6B5646;
}

.vm-hero-secours__btn {
    display: inline-block;
    padding: 15px 34px;
    border-radius: 999px;
    background: var(--pq-themes-color, #FFB606);
    color: #241C15;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 14px 30px -16px rgba(184, 122, 0, .9);
    transition: transform .3s var(--pq-ease, ease), box-shadow .3s ease;
}

.vm-hero-secours__btn:hover {
    color: #241C15;
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -18px rgba(184, 122, 0, 1);
}

.vm-hero-secours__btn:focus-visible { outline: 2px solid #B87A00; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .vm-hero-secours__btn, .vm-hero-secours__btn:hover { transform: none; transition: none; }
}

/* ==========================================================================
   Après la commande — remerciement, suivi, pages libres
   ========================================================================== */

.vm-merci,
.vm-suivi,
.vm-page {
    --av-ink: #241C15;
    --av-soft: #6B5646;
    --av-amber: var(--pq-themes-color, #FFB606);
    --av-deep: #B87A00;
    --av-line: rgba(120, 90, 40, .14);

    padding-block: clamp(44px, 5.5vw, 84px);
}

/* ============================================================ remerciement */

.vm-merci__box {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    gap: 26px;
}

.vm-merci__head { text-align: center; }

/* La coche est la première chose lue : elle répond à la seule question que le
   client se pose en arrivant — « est-ce que c'est bien parti ? ». */
.vm-merci__check {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #E8F6EE;
    color: #1F7A4C;
    font-size: 27px;
}

.vm-merci__title {
    margin: 0 0 6px;
    font-size: clamp(26px, 3vw, 34px);
    color: var(--av-ink);
    text-transform: none;
}

.vm-merci__number { margin: 0 0 12px; font-size: 15.5px; color: var(--av-soft); }
.vm-merci__number strong { color: var(--av-ink); font-variant-numeric: tabular-nums; }

.vm-merci__lead {
    margin: 0 auto;
    max-width: 52ch;
    font-size: 16px;
    line-height: 1.7;
    color: var(--av-soft);
}

/* La suite des événements : trois lignes qui disent ce qui va se passer. Sans
   elles, le client rappelle le lendemain pour demander où en est sa commande. */
.vm-merci__suite {
    list-style: none;
    margin: 0;
    padding: 22px;
    border: 1px solid var(--av-line);
    border-radius: 16px;
    background: #FDFBF7;
    display: grid;
    gap: 16px;
    counter-reset: none;
}

.vm-merci__suite li { display: flex; align-items: flex-start; gap: 14px; }

.vm-merci__suite i {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #FAF3E4;
    color: var(--av-deep);
    font-size: 14px;
}

.vm-merci__suite strong { display: block; font-size: 15.5px; color: var(--av-ink); }
.vm-merci__suite span { font-size: 14.5px; line-height: 1.6; color: var(--av-soft); }

.vm-merci__recap,
.vm-merci__livraison {
    padding: 22px 24px;
    border: 1px solid var(--av-line);
    border-radius: 16px;
    background: #fff;
}

.vm-merci__sub {
    margin: 0 0 14px;
    font-size: 17px;
    color: var(--av-ink);
    text-transform: none;
}

.vm-merci__lines { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }

.vm-merci__lines li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--av-line);
}

.vm-merci__line-name { display: block; font-size: 15px; color: var(--av-ink); }
.vm-merci__line-opt { display: block; font-size: 12.5px; color: #8A7C71; }
.vm-merci__line-qty { font-size: 13.5px; color: #8A7C71; font-variant-numeric: tabular-nums; }
.vm-merci__line-total { font-size: 15px; font-weight: 700; color: var(--av-ink); font-variant-numeric: tabular-nums; }

.vm-merci__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    font-size: 15px;
    color: var(--av-soft);
}

.vm-merci__value { font-weight: 700; color: var(--av-ink); font-variant-numeric: tabular-nums; }
.vm-merci__row.is-discount .vm-merci__value { color: #1F7A4C; }

.vm-merci__row.is-total {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--av-line);
    font-size: 16.5px;
    font-weight: 700;
    color: var(--av-ink);
}

.vm-merci__row.is-total .vm-merci__value { font-size: 22px; color: var(--av-amber); }

.vm-merci__who { margin: 0 0 4px; font-size: 15px; color: var(--av-ink); }
.vm-merci__where { margin: 0; font-size: 15px; line-height: 1.6; color: var(--av-soft); }

.vm-merci__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.vm-merci__actions .pq-summary-cta { display: inline-block; padding-inline: 40px; margin-top: 0; }

.vm-merci__link {
    font-size: 15px;
    font-weight: 600;
    color: var(--av-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vm-merci__link:hover { color: var(--av-amber); }

/* =================================================================== suivi */

.vm-suivi__box { max-width: 720px; margin: 0 auto; }

.vm-suivi__titre { margin: 0 0 6px; font-size: 22px; color: var(--av-ink); text-transform: none; }
.vm-suivi__meta { margin: 0 0 22px; font-size: 15px; color: var(--av-soft); }

/* La frise : verticale, une étape par ligne. Les étapes franchies sont pleines,
   l'étape en cours est cerclée, les suivantes restent en pointillé — la forme
   dit où en est le colis avant même qu'on lise les libellés. */
.shop-timeline {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    gap: 0;
}

.shop-timeline li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0 12px 8px;
}

.shop-timeline li:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: 15px;
    top: 34px;
    bottom: -6px;
    width: 2px;
    background: var(--av-line);
}

.shop-timeline li.done:not(:last-child)::before { background: var(--av-amber); }

.shop-timeline__dot {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--av-line);
    background: #fff;
}

.shop-timeline li.done .shop-timeline__dot {
    border-color: var(--av-amber);
    background: var(--av-amber);
}

.shop-timeline li.current .shop-timeline__dot {
    border-color: var(--av-amber);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 182, 6, .25);
}

.shop-timeline__label { font-size: 15.5px; color: var(--av-soft); }
.shop-timeline li.done .shop-timeline__label,
.shop-timeline li.current .shop-timeline__label { color: var(--av-ink); font-weight: 600; }

.shop-timeline__now {
    margin-inline-start: auto;
    padding: 3px 12px;
    border-radius: 999px;
    background: #FAF3E4;
    color: var(--av-deep);
    font-size: 12.5px;
    font-weight: 600;
}

.vm-suivi .alert {
    margin-top: 22px;
    padding: 14px 18px;
    border: 0;
    border-radius: 12px;
    font-size: 15px;
}

.vm-suivi .alert-warning { background: #FDF3E2; color: #8A5A00; }
.vm-suivi .alert-danger { background: #FBEAEA; color: #AD1A19; }

/* ============================================================ pages libres */

.vm-page__corps { max-width: 760px; margin: 0 auto; }

.vm-page__chapo {
    margin: 0 0 26px;
    font-size: 18px;
    line-height: 1.65;
    font-weight: 600;
    color: var(--av-ink);
}

/* Le contenu vient d'un éditeur : on ne maîtrise pas son balisage, seulement
   son rythme. Une largeur de lecture bornée et des marges régulières suffisent
   à rendre lisible n'importe quel texte collé depuis un traitement de texte. */
.vm-page__contenu { font-size: 16.5px; line-height: 1.8; color: var(--av-soft); }

.vm-page__contenu > * + * { margin-top: 1.1em; }

.vm-page__contenu :is(h1, h2, h3, h4) {
    margin-top: 1.9em;
    margin-bottom: .5em;
    color: var(--av-ink);
    line-height: 1.25;
    text-transform: none;
}

.vm-page__contenu h2 { font-size: 24px; }
.vm-page__contenu h3 { font-size: 20px; }

.vm-page__contenu :is(ul, ol) { padding-inline-start: 22px; }
.vm-page__contenu li + li { margin-top: .5em; }

.vm-page__contenu a {
    color: var(--av-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vm-page__contenu a:hover { color: var(--av-amber); }

.vm-page__contenu img { max-width: 100%; height: auto; border-radius: 12px; }

.vm-page__contenu blockquote {
    margin-inline: 0;
    padding: 4px 0 4px 20px;
    border-inline-start: 3px solid var(--av-amber);
    color: var(--av-ink);
}

.vm-page__contenu table { width: 100%; border-collapse: collapse; }
.vm-page__contenu :is(th, td) { padding: 10px 12px; border: 1px solid var(--av-line); text-align: start; }
.vm-page__contenu th { background: #FDFBF7; color: var(--av-ink); }

/* ==========================================================================
   Boutique fermée / page sans section
   ========================================================================== */

.vm-fermee { padding-block: clamp(60px, 8vw, 120px); }

.vm-fermee__box {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

.vm-fermee__icone {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: #FAF3E4;
    color: var(--pq-themes-color, #FFB606);
    font-size: 38px;
}

.vm-fermee__titre {
    margin: 0 0 12px;
    font-size: clamp(26px, 3.2vw, 36px);
    color: #241C15;
    text-transform: none;
}

.vm-fermee__texte {
    margin: 0 auto 26px;
    max-width: 44ch;
    font-size: 16.5px;
    line-height: 1.7;
    color: #6B5646;
}

.vm-fermee__box .pq-summary-cta { display: inline-block; margin-top: 0; padding-inline: 36px; }

.vm-fermee__wa {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    font-size: 15px;
    font-weight: 600;
    color: #1F7A4C;
}

.vm-fermee__wa:hover { color: #145c38; }

/* ==========================================================================
   Avis clients sur la fiche produit
   ========================================================================== */

.vm-avis-produit {
    --av-ink: #241C15;
    --av-soft: #6B5646;
    --av-amber: var(--pq-themes-color, #FFB606);
    --av-line: rgba(120, 90, 40, .14);

    padding-block: clamp(44px, 5.5vw, 80px);
    background: #FDFBF7;
}

.vm-avis-produit__grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: clamp(24px, 3vw, 46px);
    align-items: start;
}

@media (max-width: 767.98px) {
    .vm-avis-produit__grid { grid-template-columns: 1fr; }
}

.vm-avis-produit__titre { margin: 0 0 14px; font-size: 22px; color: var(--av-ink); text-transform: none; }

.vm-avis-produit__note { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.vm-avis-produit__chiffre { font-size: 46px; font-weight: 800; line-height: 1; color: var(--av-ink); }
.vm-avis-produit__sur { font-size: 16px; color: #8A7C71; }

.vm-avis-produit__etoiles { display: inline-flex; gap: 3px; color: var(--av-amber); font-size: 15px; }
.vm-avis-produit__etoiles.is-small { font-size: 13px; }
.vm-avis-produit__etoiles .is-off { color: #E2D9C9; }

.vm-avis-produit__nombre { margin: 8px 0 16px; font-size: 14px; color: #8A7C71; }

.vm-avis-produit__vide { margin: 0; font-size: 15px; line-height: 1.65; color: var(--av-soft); }

/* Répartition des notes : la barre dit d'un coup d'œil si la moyenne repose
   sur un consensus ou sur deux extrêmes qui s'annulent. */
.vm-avis-produit__barres { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }

.vm-avis-produit__barres li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--av-soft);
}

.vm-barre__label { display: inline-flex; align-items: center; gap: 4px; }
.vm-barre__label i { font-size: 10px; color: var(--av-amber); }

.vm-barre__piste { height: 7px; border-radius: 999px; background: #EFE7D8; overflow: hidden; }
.vm-barre__jauge { display: block; height: 100%; border-radius: 999px; background: var(--av-amber); }

.vm-barre__n { text-align: end; font-variant-numeric: tabular-nums; color: #8A7C71; }

/* ------------------------------------------------------------ les avis -- */

.vm-avis-produit__liste { display: grid; gap: 16px; min-width: 0; }

.vm-avis-produit__item {
    padding: 20px 22px;
    border: 1px solid var(--av-line);
    border-radius: 14px;
    background: #fff;
}

.vm-avis-produit__item header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14.5px;
}

.vm-avis-produit__item header strong { color: var(--av-ink); }
.vm-avis-produit__ville { color: #8A7C71; font-size: 13.5px; }
.vm-avis-produit__date { margin-inline-start: auto; color: #B3A79A; font-size: 12.5px; }

.vm-avis-produit__verifie {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #E8F6EE;
    color: #1F7A4C;
    font-size: 12px;
    font-weight: 600;
}

.vm-avis-produit__item p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--av-soft); }

/* La réponse du marchand est visiblement rattachée à l'avis, décalée et
   marquée : sans ça, on ne sait plus qui parle. */
.vm-avis-produit__reponse {
    margin-top: 14px;
    padding: 12px 16px;
    border-inline-start: 3px solid var(--av-amber);
    background: #FDF8EE;
    border-radius: 0 10px 10px 0;
}

.vm-avis-produit__reponse strong { display: block; font-size: 13.5px; color: var(--av-ink); }
.vm-avis-produit__reponse p { margin-top: 4px; font-size: 14.5px; }

/* ---------------------------------------------------------- formulaire -- */

.vm-avis-produit__form {
    border: 1px solid var(--av-line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.vm-avis-produit__form summary {
    padding: 16px 22px;
    cursor: pointer;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--av-ink);
    list-style: none;
}

.vm-avis-produit__form summary::-webkit-details-marker { display: none; }
.vm-avis-produit__form summary::marker { content: none; }

.vm-avis-produit__form summary::after {
    content: "+";
    float: inline-end;
    font-size: 19px;
    color: #B87A00;
    line-height: 1;
}

.vm-avis-produit__form[open] summary::after { content: "−"; }

.vm-avis-produit__form summary:focus-visible { outline: 2px solid var(--av-amber); outline-offset: -3px; }

.vm-avis-produit__form form { padding: 4px 22px 22px; display: grid; gap: 14px; }

.vm-champ { display: grid; gap: 6px; }
.vm-champ label { font-size: 14px; font-weight: 600; color: var(--av-ink); }

.vm-champ :is(input, select, textarea) {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--av-line);
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    color: var(--av-ink);
}

.vm-champ :is(input, select, textarea):focus {
    outline: 0;
    border-color: var(--av-amber);
    box-shadow: 0 0 0 3px rgba(255, 182, 6, .22);
}

.vm-champ small { font-size: 12.5px; color: #8A7C71; }
.vm-champ__erreur { margin: 0; font-size: 13.5px; color: #AD1A19; }

.vm-avis-produit__form button {
    justify-self: start;
    padding: 13px 30px;
    border: 0;
    border-radius: 999px;
    background: var(--av-amber);
    color: #241C15;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .3s var(--pq-ease, ease);
}

.vm-avis-produit__form button:hover { transform: translateY(-2px); }

.vm-avis-produit__mention { margin: 0; font-size: 12.5px; line-height: 1.6; color: #8A7C71; }

@media (prefers-reduced-motion: reduce) {
    .vm-avis-produit__form button,
    .vm-avis-produit__form button:hover { transform: none; transition: none; }
}

/* ==========================================================================
   Produits par rayon — grille filtrable
   ========================================================================== */

.vm-rayons-bloc {
    --rb-ink: #241C15;
    --rb-soft: #6B5646;
    --rb-amber: var(--pq-themes-color, #FFB606);
    --rb-deep: #B87A00;
    --rb-line: rgba(120, 90, 40, .16);

    padding-block: clamp(48px, 6vw, 90px);
}

/* ------------------------------------------------------------- pastilles */

.vm-rayons-bloc__filtres {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 34px 0 30px;
}

.vm-puce {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid var(--rb-line);
    border-radius: 999px;
    background: #fff;
    color: var(--rb-soft);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.vm-puce:hover { border-color: var(--rb-amber); color: var(--rb-ink); }

/* La pastille active se distingue par le FOND et par le poids, pas seulement
   par la couleur : sur un écran mal réglé ou pour un daltonien, un simple
   changement de teinte ambre sur beige ne se voit pas. */
.vm-puce.is-active {
    background: var(--pq-dark-color, #241C15);
    border-color: var(--pq-dark-color, #241C15);
    color: #fff;
}

.vm-puce:focus-visible { outline: 2px solid var(--rb-deep); outline-offset: 2px; }

.vm-puce__n {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding-inline: 6px;
    border-radius: 999px;
    background: #FAF3E4;
    color: var(--rb-deep);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.vm-puce.is-active .vm-puce__n { background: rgba(255, 255, 255, .18); color: #fff; }

/* Sur téléphone, les pastilles défilent horizontalement plutôt que de s'empiler
   sur quatre lignes qui repousseraient les produits hors de l'écran. */
@media (max-width: 767.98px) {
    .vm-rayons-bloc__filtres {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 6px;
        margin-inline: -12px;
        padding-inline: 12px;
        scrollbar-width: none;
    }

    .vm-rayons-bloc__filtres::-webkit-scrollbar { display: none; }
    .vm-puce { padding: 9px 16px; font-size: 14px; }
}

/* ---------------------------------------------------------------- grille */

/* `hidden` sur un élément de grille doit être forcé : la mise en page en grille
   redéfinit `display`, ce qui annule l'attribut natif et laisse les produits
   filtrés visibles. */
.vm-rayons-bloc__grille > .product-item[hidden] { display: none !important; }

.vm-rayons-bloc__pied { margin-top: 36px; text-align: center; }

.vm-rayons-bloc__cta {
    display: inline-block;
    padding: 14px 34px;
    border-radius: 999px;
    background: var(--rb-amber);
    color: var(--rb-ink);
    font-size: 15.5px;
    font-weight: 700;
    transition: transform .3s var(--pq-ease, ease), box-shadow .3s ease;
}

.vm-rayons-bloc__cta:hover {
    color: var(--rb-ink);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -14px rgba(255, 182, 6, .9);
}

.vm-rayons-bloc__cta:focus-visible { outline: 2px solid var(--rb-deep); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .vm-puce,
    .vm-rayons-bloc__cta,
    .vm-rayons-bloc__cta:hover { transform: none; transition: none; }
}

/* ------------------------------------------------------- « Voir la suite » */

.vm-rayons-bloc__plus {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

/* `hidden` doit etre force : la regle `display:flex` ci-dessus l'emporterait
   sinon sur l'attribut natif et laisserait un bouton vide sous la grille. */
.vm-rayons-bloc__plus[hidden] { display: none !important; }

.vm-rayons-bloc__plus-btn {
    padding: 12px 30px;
    border: 1px solid var(--rb-line, rgba(120, 90, 40, .16));
    border-radius: 999px;
    background: #fff;
    color: var(--rb-ink, #241C15);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease;
}

.vm-rayons-bloc__plus-btn:hover {
    border-color: var(--rb-amber, #FFB606);
    background: #FFFBF1;
}

.vm-rayons-bloc__plus-btn:focus-visible {
    outline: 2px solid var(--rb-deep, #B87A00);
    outline-offset: 2px;
}

/* ==========================================================================
   Fiche produit — nom arabe, réassurance, description
   ========================================================================== */

.vm-fiche__nom-ar {
    margin: -6px 0 14px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--pq-themes-color, #FFB606);
    letter-spacing: 0;
}

/* ------------------------------------------------------------ réassurance */

.vm-reassurance {
    display: grid;
    gap: 10px;
    margin: 22px 0;
    padding: 16px 18px;
    list-style: none;
    border: 1px solid rgba(120, 90, 40, .16);
    border-radius: 14px;
    background: #FFFBF1;
}

.vm-reassurance__item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #6B5646;
}

.vm-reassurance__item i {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: var(--pq-themes-color, #FFB606);
    font-size: 15px;
}

.vm-reassurance__item strong {
    display: block;
    color: #241C15;
    font-weight: 700;
}

@media (min-width: 576px) {
    /* Sur trois colonnes le libellé se casse en deux lignes inégales ; deux
       colonnes gardent chaque promesse sur une ligne lisible. */
    .vm-reassurance { grid-template-columns: 1fr 1fr; }
    .vm-reassurance__item:first-child { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ description */

/* La description est un texte suivi : elle a besoin de respirer, pas de la
   compacité d'une fiche technique. Le thème n'en prévoit aucune mise en forme
   — sans ces règles, titres et listes tombent aux réglages du navigateur. */
.vm-description {
    margin: 26px 0;
    color: #4A3D33;
    font-size: 15.5px;
    line-height: 1.75;
}

.vm-description > *:first-child { margin-top: 0; }
.vm-description > *:last-child { margin-bottom: 0; }

.vm-description p { margin: 0 0 14px; }

.vm-description h4 {
    margin: 26px 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: #241C15;
    text-transform: none;
}

/* Le trait d'accent tient lieu de puce de section : il marque le début sans
   ajouter une ligne de plus dans une fiche déjà dense. */
.vm-description h4::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 3px;
    margin-inline-end: 9px;
    border-radius: 2px;
    background: var(--pq-themes-color, #FFB606);
    vertical-align: middle;
}

.vm-description ul {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.vm-description ul li {
    position: relative;
    margin-bottom: 8px;
    padding-inline-start: 26px;
}

.vm-description ul li::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    top: .62em;
    width: 8px;
    height: 8px;
    /* Hexagone : la ruche est la signature de la marque, et une puce ronde
       passerait inaperçue au milieu d'un texte. */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--pq-themes-color, #FFB606);
}

.vm-description strong { color: #241C15; }

/* ---------------------------------------------------- paliers de quantité */

.vm-paliers { margin: 22px 0; }

.vm-paliers__titre {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: #241C15;
}

.vm-paliers__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.vm-palier {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 12px 12px;
    border: 1.5px solid rgba(120, 90, 40, .2);
    border-radius: 14px;
    background: #fff;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.vm-palier:hover,
.vm-palier.is-active {
    border-color: var(--pq-themes-color, #FFB606);
    box-shadow: 0 8px 20px -14px rgba(255, 182, 6, .9);
}

.vm-palier.is-active { background: #FFFBF1; }

.vm-palier:focus-visible { outline: 2px solid #B87A00; outline-offset: 2px; }

/* Le dernier palier est celui qu'on veut vendre : il se distingue par un fond,
   pas par une taille — un bloc plus grand casserait l'alignement de la rangée. */
.vm-palier--phare { border-color: rgba(255, 182, 6, .55); }

.vm-palier__ruban {
    position: absolute;
    top: -9px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--pq-dark-color, #241C15);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
}

.vm-palier__qte {
    font-size: 13px;
    font-weight: 700;
    color: #6B5646;
}

.vm-palier__total {
    font-size: 19px;
    font-weight: 800;
    color: #241C15;
    font-variant-numeric: tabular-nums;
}

.vm-palier__unite {
    font-size: 11.5px;
    color: #8A7565;
    font-variant-numeric: tabular-nums;
}

.vm-palier__gain {
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 700;
    color: #1F8A4C;
}

@media (prefers-reduced-motion: reduce) {
    .vm-palier { transition: none; }
}

/* ==========================================================================
   Conseils — liste et article
   ========================================================================== */

.vm-conseils { padding-block: clamp(48px, 6vw, 90px); }
.vm-conseils--suite { padding-top: 0; }
.vm-conseils__vide { text-align: center; color: #6B5646; }

/* ---------------------------------------------------------------- la une */

.vm-une {
    display: block;
    padding: clamp(26px, 4vw, 44px);
    border-radius: 20px;
    background: linear-gradient(135deg, #241C15 0%, #3A2C1E 100%);
    color: #fff;
    margin-bottom: 28px;
    transition: transform .35s var(--pq-ease, ease), box-shadow .35s ease;
}

.vm-une:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 26px 48px -30px rgba(36, 28, 21, .9);
}

.vm-une__etiquette {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--pq-themes-color, #FFB606);
    color: #241C15;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.vm-une__titre {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.25;
    text-wrap: balance;
}

.vm-une__resume {
    margin: 0 0 14px;
    max-width: 62ch;
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
    line-height: 1.7;
}

.vm-une__meta { font-size: 13px; color: var(--pq-themes-color, #FFB606); font-weight: 600; }

/* -------------------------------------------------------------- la grille */

.vm-conseils__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}

.vm-conseil {
    display: block;
    padding: 26px 24px;
    border: 1px solid rgba(120, 90, 40, .16);
    border-radius: 16px;
    background: #fff;
    transition: transform .3s var(--pq-ease, ease), border-color .3s ease, box-shadow .3s ease;
}

.vm-conseil:hover {
    transform: translateY(-3px);
    border-color: var(--pq-themes-color, #FFB606);
    box-shadow: 0 20px 36px -28px rgba(120, 90, 40, .8);
}

.vm-conseil__titre {
    margin: 0 0 10px;
    font-size: 18.5px;
    line-height: 1.35;
    color: #241C15;
    text-wrap: balance;
}

.vm-conseil__resume {
    margin: 0 0 12px;
    color: #6B5646;
    font-size: 14.5px;
    line-height: 1.65;
}

.vm-conseil__meta { font-size: 12.5px; font-weight: 700; color: #B87A00; }

/* ------------------------------------------------------------- l'article */

.vm-article { padding-block: clamp(40px, 5vw, 72px); }

.vm-article__meta {
    margin: 0 0 18px;
    font-size: 13px;
    color: #8A7565;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Le chapô est la promesse de l'article : plus gros que le corps, il donne en
   deux lignes de quoi décider de lire la suite. */
.vm-article__chapo {
    margin: 0 0 28px;
    padding-inline-start: 18px;
    border-inline-start: 3px solid var(--pq-themes-color, #FFB606);
    font-size: 18px;
    line-height: 1.65;
    color: #4A3D33;
}

.vm-article__corps { font-size: 16.5px; }

/* Les titres de section d'un article respirent plus que ceux d'une fiche
   produit : ils rythment une longue lecture au lieu de séparer des données. */
.vm-article__corps h4 { margin-top: 34px; font-size: 19px; }

.vm-article__cta {
    margin-top: 40px;
    padding: 28px 26px;
    border-radius: 18px;
    background: #FFFBF1;
    border: 1px solid rgba(255, 182, 6, .35);
    text-align: center;
}

.vm-article__cta-titre { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #241C15; }
.vm-article__cta-texte { margin: 0 0 18px; color: #6B5646; font-size: 14.5px; }

.vm-article__bouton {
    display: inline-block;
    padding: 13px 30px;
    border-radius: 999px;
    background: var(--pq-themes-color, #FFB606);
    color: #241C15;
    font-weight: 700;
    transition: transform .3s var(--pq-ease, ease), box-shadow .3s ease;
}

.vm-article__bouton:hover {
    color: #241C15;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -14px rgba(255, 182, 6, .9);
}

@media (prefers-reduced-motion: reduce) {
    .vm-une, .vm-conseil, .vm-article__bouton,
    .vm-une:hover, .vm-conseil:hover, .vm-article__bouton:hover { transform: none; transition: none; }
}

/* ==========================================================================
   Chat de la boutique
   ========================================================================== */

.vm-chat { position: fixed; inset-inline-end: 24px; bottom: 96px; z-index: 1040; }

/* Le bouton WhatsApp occupe déjà le coin bas ; le chat se place au-dessus.
   Deux pastilles superposées au même endroit rendent les deux inutilisables. */

.vm-chat__bulle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--pq-dark-color, #241C15);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 14px 30px -14px rgba(36, 28, 21, .9);
    transition: transform .25s ease, background-color .25s ease;
}

.vm-chat__bulle:hover { transform: translateY(-2px); background: #3A2C1E; }
.vm-chat__bulle i { color: var(--pq-themes-color, #FFB606); font-size: 17px; }
.vm-chat__bulle:focus-visible { outline: 2px solid var(--pq-themes-color, #FFB606); outline-offset: 3px; }

.vm-chat__pastille {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    border-radius: 999px;
    background: #E23D28;
    font-size: 11.5px;
    font-weight: 800;
}

/* ---------------------------------------------------------------- fenêtre */

.vm-chat__fenetre {
    position: absolute;
    inset-inline-end: 0;
    bottom: calc(100% + 12px);
    display: flex;
    flex-direction: column;
    width: min(360px, calc(100vw - 32px));
    height: min(520px, calc(100vh - 180px));
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 60px -24px rgba(36, 28, 21, .55);
    overflow: hidden;
    animation: vm-chat-apparition .28s ease;
}

@keyframes vm-chat-apparition {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.vm-chat__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--pq-dark-color, #241C15);
    color: #fff;
}

.vm-chat__titre { margin: 0; font-size: 15px; font-weight: 700; }
.vm-chat__qui { margin: 2px 0 0; font-size: 12px; color: var(--pq-themes-color, #FFB606); }

.vm-chat__fermer {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .7);
    font-size: 16px;
    cursor: pointer;
}

.vm-chat__fermer:hover { color: #fff; }

.vm-chat__fil {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #FFFBF1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
}

.vm-chat__msg {
    max-width: 82%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.55;
    /* Les sauts de ligne du récapitulatif de commande doivent être conservés :
       sans cela, tout le résumé arrive en un seul pavé illisible. */
    white-space: pre-wrap;
}

.vm-chat__msg--bot,
.vm-chat__msg--agent {
    align-self: flex-start;
    background: #fff;
    border: 1px solid rgba(120, 90, 40, .16);
    color: #4A3D33;
}

/* Le liseré ambre distingue l'humain du robot sans changer la couleur du fond :
   le visiteur voit qui lui parle sans avoir à relire l'en-tête. */
.vm-chat__msg--agent { border-inline-start: 3px solid var(--pq-themes-color, #FFB606); }

.vm-chat__msg--visitor {
    align-self: flex-end;
    background: var(--pq-dark-color, #241C15);
    color: #fff;
}

.vm-chat__heure { display: block; margin-top: 4px; font-size: 10.5px; opacity: .55; }

.vm-chat__choix {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 16px;
    background: #FFFBF1;
}

.vm-chat__choix:not(:empty) { padding-bottom: 12px; }

.vm-chat__choix-btn {
    padding: 8px 14px;
    border: 1px solid var(--pq-themes-color, #FFB606);
    border-radius: 999px;
    background: #fff;
    color: #241C15;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease;
}

.vm-chat__choix-btn:hover { background: var(--pq-themes-color, #FFB606); }

.vm-chat__saisie {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(120, 90, 40, .14);
    background: #fff;
}

.vm-chat__saisie input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid rgba(120, 90, 40, .22);
    border-radius: 999px;
    font-size: 14px;
    outline: none;
}

.vm-chat__saisie input:focus { border-color: var(--pq-themes-color, #FFB606); }

.vm-chat__saisie button {
    flex: 0 0 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--pq-themes-color, #FFB606);
    color: #241C15;
    cursor: pointer;
}

@media (max-width: 575.98px) {
    .vm-chat { inset-inline-end: 16px; bottom: 88px; }
    .vm-chat__bulle-texte { display: none; }
    .vm-chat__bulle { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .vm-chat__bulle, .vm-chat__bulle:hover { transform: none; transition: none; }
    .vm-chat__fenetre { animation: none; }
}

/* Le thème applique un remplissage vertical à TOUTE balise `section` et met les
   boutons en capitales. La fenêtre de chat étant une `section`, elle héritait de
   90 px de vide en haut et en bas — le fil de discussion se retrouvait écrasé
   sur quarante pixels au milieu d'une fenêtre à moitié vide. */
.vm-chat .vm-chat__fenetre {
    padding: 0;
    margin: 0;
}

.vm-chat,
.vm-chat button,
.vm-chat input,
.vm-chat .vm-chat__choix-btn,
.vm-chat .vm-chat__bulle {
    text-transform: none;
}

/* ==========================================================================
   Formulaires de suivi et de contact — lisibilité
   ========================================================================== */

/* Le bouton sortait en BLANC SUR AMBRE : un rapport de contraste de 1,9 pour 1,
   quand le minimum lisible est de 4,5. Le texte se devinait plus qu'il ne se
   lisait, et disparaissait complètement en plein soleil — cas courant pour
   quelqu'un qui suit son colis depuis la rue.

   Le texte sombre sur le même ambre donne 10 pour 1, et c'est déjà la règle
   des autres boutons du site. */
/* Le contour de mise au point reste, lui : sans lui, la navigation au clavier
   ne montre plus ou l'on se trouve. */
.rr-btn:focus-visible {
    outline: 2px solid #B87A00;
    outline-offset: 3px;
}

/* Le contour du champ était à peine visible (12 % de noir) : rien ne disait où
   écrire. On le rend franc, et l'ambre marque le champ actif. */
.form__control {
    border: 1.5px solid rgba(120, 90, 40, .28);
    border-radius: 12px;
    color: #241C15;
    font-size: 16px;
}

.form__control::placeholder { color: #9A8878; }

.form__control:focus {
    border-color: var(--pq-themes-color, #FFB606);
    box-shadow: 0 0 0 3px rgba(255, 182, 6, .18);
    outline: none;
}

.checkout-form__item label,
.checkout-form__label {
    display: block;
    margin-bottom: 7px;
    color: #4A3D33;
    font-size: 14px;
    font-weight: 600;
}

/* ==========================================================================
   Page contact
   ========================================================================== */

.vm-contact { padding-block: clamp(48px, 6vw, 90px); }

.vm-contact__chapo {
    max-width: 60ch;
    margin: 0 auto 32px;
    text-align: center;
    font-size: 17px;
    line-height: 1.7;
    color: #6B5646;
}

/* --------------------------------------------------------- renvoi au suivi */

.vm-contact__suivi {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 760px;
    margin: 0 auto 34px;
    padding: 20px 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, #241C15 0%, #3A2C1E 100%);
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    line-height: 1.6;
    transition: transform .3s var(--pq-ease, ease), box-shadow .3s ease;
}

.vm-contact__suivi:hover {
    color: rgba(255, 255, 255, .92);
    transform: translateY(-2px);
    box-shadow: 0 22px 40px -26px rgba(36, 28, 21, .95);
}

.vm-contact__suivi strong { display: block; color: #fff; font-size: 16.5px; margin-bottom: 2px; }

.vm-contact__suivi-icone {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--pq-themes-color, #FFB606);
    color: #241C15;
    font-size: 19px;
}

.vm-contact__suivi-fleche { margin-inline-start: auto; color: var(--pq-themes-color, #FFB606); }

/* ------------------------------------------------------------- les canaux */

.vm-contact__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin-bottom: 44px;
}

.vm-contact__voie {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 26px 22px;
    border: 1px solid rgba(120, 90, 40, .18);
    border-radius: 16px;
    background: #fff;
    text-align: center;
    align-items: center;
    cursor: pointer;
    font: inherit;
    transition: transform .3s var(--pq-ease, ease), border-color .3s ease, box-shadow .3s ease;
}

.vm-contact__voie:hover {
    transform: translateY(-3px);
    border-color: var(--pq-themes-color, #FFB606);
    box-shadow: 0 20px 36px -28px rgba(120, 90, 40, .8);
}

.vm-contact__voie:focus-visible { outline: 2px solid #B87A00; outline-offset: 3px; }

.vm-contact__voie-icone {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #FFFBF1;
    color: var(--pq-themes-color, #FFB606);
    font-size: 21px;
}

.vm-contact__voie--whatsapp .vm-contact__voie-icone { background: #E8F8EE; color: #25D366; }

.vm-contact__voie-titre { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8A7565; }
.vm-contact__voie-valeur { font-size: 17px; font-weight: 700; color: #241C15; }
.vm-contact__voie-note { font-size: 13px; color: #6B5646; }

/* ------------------------------------------------------------------- bas */

.vm-contact__bas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding-top: 34px;
    border-top: 1px solid rgba(120, 90, 40, .16);
}

.vm-contact__titre { margin: 0 0 12px; font-size: 19px; color: #241C15; text-transform: none; }
.vm-contact__bloc p { margin: 0; color: #6B5646; line-height: 1.7; }

.vm-contact__liste { margin: 0; padding: 0; list-style: none; }

.vm-contact__liste li {
    position: relative;
    margin-bottom: 9px;
    padding-inline-start: 26px;
    color: #6B5646;
    line-height: 1.65;
}

.vm-contact__liste li::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    top: .62em;
    width: 8px;
    height: 8px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--pq-themes-color, #FFB606);
}

@media (prefers-reduced-motion: reduce) {
    .vm-contact__suivi, .vm-contact__voie,
    .vm-contact__suivi:hover, .vm-contact__voie:hover { transform: none; transition: none; }
}

/* ------------------------------------------------------- formulaire contact */

.vm-contact__formulaire {
    max-width: 760px;
    margin: 0 auto 44px;
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid rgba(120, 90, 40, .16);
    border-radius: 18px;
    background: #fff;
}

.vm-contact__intro { margin: 0 0 22px; color: #6B5646; line-height: 1.7; }

/* Les deux messages de retour partagent la même forme : ce qui change est la
   couleur, pas la place. L'œil les trouve au même endroit dans les deux cas. */
.vm-contact__succes,
.vm-contact__erreur {
    margin: 0 0 20px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 600;
}

.vm-contact__succes { background: #E8F8EE; border: 1px solid #9AD9B4; color: #14663A; }
.vm-contact__erreur { background: #FDECEA; border: 1px solid #F0B3AC; color: #8C2318; }

.vm-formulaire__ligne {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.vm-formulaire__champ { margin-bottom: 16px; }

.vm-formulaire__champ label {
    display: block;
    margin-bottom: 7px;
    color: #4A3D33;
    font-size: 14px;
    font-weight: 600;
}

.vm-formulaire__champ textarea.form__control {
    min-height: 140px;
    padding: 14px 16px;
    line-height: 1.6;
    resize: vertical;
}

.vm-formulaire__aide { margin: -4px 0 16px; font-size: 13px; color: #8A7565; }

/* Le piège à robots doit rester dans le flux pour être rempli par les
   automates, mais invisible à l'œil ET aux lecteurs d'écran — `display: none`
   suffirait aux uns, pas aux autres. */
.vm-formulaire__piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}