/*
 * ═══════════════════════════════════════════════════════════════════════════
 * THÈME 2 « VITRINE » — l'habillage de sa coque
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * En-tête, rayons, recherche, mini-panier, menu mobile, pied de page. Chargé APRÈS
 * theme-layer.css, et seulement au thème 2 (templates/themes/vitrine/shop/base.html.twig).
 *
 * Mesures relevées sur la maquette validée le 13/10/2026 (docs/theme-2.md). Les couleurs du
 * texte, des filets et des fonds passent par les jetons --shop-* du thème 2, émis par
 * App\Service\ShopTheme ; la couleur du commerçant par --shop-primary et --shop-primary-contrast.
 * Seules les couleurs du pied de page sombre sont écrites ici : aucun autre thème n'en a.
 *
 * Toutes les classes commencent par « v- » : le gabarit commercial du thème 1 stylise des noms
 * génériques (header, footer, .nav, .sub-menu…), et un nom à lui reprendrait ses règles.
 */

:root {
    --v-conteneur: 1280px;
    --v-marge: clamp(16px, 4vw, 40px);
    --v-section: clamp(56px, 7vw, 104px);
    --v-ombre-panneau: 0 12px 32px rgba(22, 24, 27, 0.10);
    --v-pied-fond: #16181b;
    --v-pied-texte: #d5d7da;
    --v-pied-bas: #a6a9ad;
    --v-pied-filet: #2c2f34;
}

body.bodyShop {
    line-height: 1.55;
}

/* Le gabarit commercial retire le contour de focus de TOUS les liens (`a:focus { outline: 0 }`) :
   au clavier, on ne voyait plus où l'on était. Le thème 2 le rend. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--shop-primary);
    outline-offset: 2px;
}

[hidden] {
    display: none !important;
}

.v-invisible {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Les pages intérieures gardent leurs gabarits Bootstrap ; leur conteneur prend la largeur et les
   marges du thème, pour s'aligner sur l'en-tête, le titre de page et le pied de page. */
.page-content .container {
    max-width: var(--v-conteneur);
    padding-left: var(--v-marge);
    padding-right: var(--v-marge);
}

.v-conteneur {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--v-conteneur);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--v-marge);
    padding-right: var(--v-marge);
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. Bandeau d'information du commerçant
   ═══════════════════════════════════════════════════════════════════════════ */

.v-bandeau {
    background: var(--shop-primary);
    color: var(--shop-primary-contrast);
    text-align: center;
    font-size: 14px;
    line-height: 1.45;
    padding: 9px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. En-tête
   ═══════════════════════════════════════════════════════════════════════════ */

.v-entete {
    position: relative;
    z-index: 50;
    background: var(--shop-header-bg);
    border-bottom: 1px solid var(--shop-border);
    font-family: var(--shop-font-body);
}

/* Trois colonnes, la marque au centre EXACT : avec des côtés de largeur égale (1fr), le logo
   reste centré quelle que soit la longueur des menus de gauche et de droite. */
.v-entete__barre {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding-top: 22px;
}

.v-entete__gauche {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

.v-entete__pages {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    font-size: 15px;
    font-weight: 500;
}

.v-entete__pages a,
.v-entete__pages a:visited {
    color: var(--shop-ink);
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

.v-entete__pages a:hover {
    color: var(--shop-ink-muted);
}

.v-entete__pages a[aria-current="page"] {
    border-bottom-color: var(--shop-primary);
}

/* Deux classes : `.v-icone`, déclarée plus bas, rendrait sinon le bouton visible sur grand écran. */
.v-icone.v-entete__menu {
    display: none;
}

.v-marque,
.v-marque:visited,
.v-marque:hover {
    display: block;
    justify-self: center;
    text-align: center;
    color: var(--shop-ink);
}

.v-marque__nom {
    display: block;
    font-family: var(--shop-font-heading);
    font-weight: 750;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-wrap: balance;
    max-width: 16ch;
}

.v-marque__logo {
    display: block;
    width: auto;
    height: auto;
    max-height: 64px;
    max-width: min(260px, 46vw);
    margin: 0 auto;
}

.v-entete__droite {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.v-icone,
.v-icone:visited {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--shop-ink);
    cursor: pointer;
}

.v-icone:hover,
.v-icone[aria-expanded="true"],
.v-icone[aria-current="page"] {
    background: var(--shop-surface-alt);
    color: var(--shop-ink);
}

/* ── Menu du compte ── */

.v-compte {
    position: relative;
}

.v-menu-compte {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 220px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    box-shadow: var(--v-ombre-panneau);
}

.v-menu-compte a,
.v-menu-compte a:visited {
    display: block;
    padding: 10px 18px;
    font-size: 15px;
    color: var(--shop-ink);
}

.v-menu-compte a:hover {
    background: var(--shop-surface-alt);
    color: var(--shop-ink);
}

/* ── Panier : la pastille et son aperçu ── */

.v-panier {
    position: relative;
}

.v-panier__pastille,
.v-panier__pastille:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--shop-primary);
    color: var(--shop-primary-contrast);
    font-weight: 600;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.v-panier__pastille:hover,
.v-panier__pastille:focus {
    background: var(--shop-primary-dark);
    color: var(--shop-primary-contrast);
}

/* L'aperçu n'existe qu'avec une souris, sur grand écran. Ailleurs, la pastille mène au panier. */
.v-panier__apercu {
    display: none;
}

@media (hover: hover) and (min-width: 992px) {
    .v-panier__apercu {
        display: block;
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        z-index: 60;
        box-sizing: border-box;
        width: 400px;
        padding: 18px;
        background: var(--shop-surface);
        border: 1px solid var(--shop-border);
        box-shadow: var(--v-ombre-panneau);
        visibility: hidden;
        opacity: 0;
        transform: translateY(4px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
    }

    /* Un pont invisible au-dessus de l'aperçu : sans lui, la souris qui descend de la pastille
       traverse dix pixels de vide, et l'aperçu se referme avant qu'elle l'atteigne. */
    .v-panier__apercu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -12px;
        height: 12px;
    }

    .v-panier:hover .v-panier__apercu,
    .v-panier:focus-within .v-panier__apercu {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity 0.15s ease, transform 0.15s ease;
    }
}

/* Le contenu de l'aperçu est le mini-panier du socle (shop/_miniPanier.html.twig) : on
   l'habille ici sans toucher à son balisage, partagé avec le thème 1. */
.v-panier__apercu .cartOverflow {
    max-height: 320px;
    overflow-y: auto;
}

.v-panier__apercu .cartProducts {
    width: 100%;
    font-size: 14px;
    color: var(--shop-ink);
}

.v-panier__apercu .cartProducts th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--shop-ink-muted);
}

.v-panier__apercu .cartProducts td {
    vertical-align: middle;
    border-top: 1px solid var(--shop-border);
}

.v-panier__apercu .cartProducts img {
    width: 48px;
    height: 60px;
    object-fit: cover;
}

.v-panier__apercu .cartProducts a {
    color: var(--shop-ink);
    font-weight: 600;
}

.v-panier__apercu .text-right {
    font-size: 14px;
    color: var(--shop-ink-muted);
}

.v-panier__apercu .text-right b {
    color: var(--shop-ink);
}

.v-panier__apercu .btn,
.v-panier__apercu a.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-weight: 600;
}

.v-panier__apercu a.btn-success {
    background: var(--shop-primary) !important;
    border: 1px solid var(--shop-primary) !important;
    color: var(--shop-primary-contrast) !important;
}

.v-panier__apercu a.btnhover {
    background: transparent !important;
    border: 1px solid var(--shop-ink) !important;
    color: var(--shop-ink) !important;
}

/* ── Rayons ── */

.v-rayons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
    padding-top: 18px;
    padding-bottom: 16px;
    font-size: 15px;
}

.v-rayons a,
.v-rayons a:visited {
    color: var(--shop-ink-muted);
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.v-rayons a:hover {
    color: var(--shop-ink);
}

.v-rayons a[aria-current="page"] {
    color: var(--shop-ink);
    font-weight: 600;
    border-bottom-color: var(--shop-primary);
}

/* Rangée mise sur une ligne par vitrine.js (grand écran) : le reste est dans « Plus ». */
.v-rayons.v-rayons--une-ligne {
    flex-wrap: nowrap;
}

.v-rayons__plus {
    position: relative;
    flex: none;
}

.v-rayons__plus > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 2px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--shop-ink-muted);
    font: inherit;
    cursor: pointer;
}

.v-rayons__plus > button:hover,
.v-rayons__plus > button[aria-expanded="true"] {
    color: var(--shop-ink);
}

.v-rayons__plus > button[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Le rayon courant est dans la suite : « Plus » prend la marque du rayon actif. */
.v-rayons__plus--actif > button {
    color: var(--shop-ink);
    font-weight: 600;
    border-bottom-color: var(--shop-primary);
}

.v-rayons__suite {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 60;
    min-width: 220px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px 0;
    text-align: left;
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    box-shadow: var(--v-ombre-panneau);
}

.v-rayons .v-rayons__suite a {
    display: block;
    padding: 10px 18px;
    border-bottom: 0;
    color: var(--shop-ink);
}

.v-rayons .v-rayons__suite a:hover {
    background: var(--shop-surface-alt);
}

.v-rayons .v-rayons__suite a[aria-current="page"] {
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--shop-primary);
}

/* ── Recherche ── */

.v-recherche {
    padding: 14px 0 16px;
    border-top: 1px solid var(--shop-border);
    background: var(--shop-surface);
}

.v-recherche__formulaire {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 720px;
    margin: 0 auto;
}

.v-recherche__loupe {
    position: absolute;
    left: 18px;
    color: var(--shop-ink-muted);
    pointer-events: none;
}

.v-recherche__champ {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 20px 0 48px;
    border: 1px solid var(--shop-border);
    border-radius: 999px;
    background: var(--shop-surface);
    color: var(--shop-ink);
    font-family: var(--shop-font-body);
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
}

.v-recherche__champ:focus {
    border-color: var(--shop-ink);
}

.v-recherche__champ::-webkit-search-decoration,
.v-recherche__champ::-webkit-search-cancel-button {
    display: none;
}

/* La liste de résultats du socle (#hits), sous le champ et non sous la croix de fermeture. */
.v-recherche .shop-search-results-dropdown {
    top: calc(100% + 6px);
    right: 52px;
    border-radius: 16px;
}

/* ── Menu mobile ── */

.v-tiroir {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    box-sizing: border-box;
    width: min(86vw, 360px);
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0 0 24px;
    border: 0;
    overflow-y: auto;
    background: var(--shop-surface);
    color: var(--shop-ink);
    font-family: var(--shop-font-body);
}

.v-tiroir::backdrop {
    background: rgba(22, 24, 27, 0.45);
}

.v-tiroir__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 12px 20px;
    border-bottom: 1px solid var(--shop-border);
}

.v-tiroir__nom {
    font-family: var(--shop-font-heading);
    font-weight: 750;
    font-size: 22px;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.v-tiroir__titre {
    margin: 22px 20px 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--shop-ink-muted);
}

.v-tiroir__liste {
    margin: 0;
    padding: 4px 0;
    list-style: none;
}

.v-tiroir__liste + .v-tiroir__liste {
    border-top: 1px solid var(--shop-border);
}

.v-tiroir__liste a,
.v-tiroir__liste a:visited {
    display: block;
    padding: 11px 20px;
    font-size: 17px;
    color: var(--shop-ink);
}

.v-tiroir__liste a[aria-current="page"] {
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--shop-primary);
}

/* ── Petits écrans ── */

@media (max-width: 991.98px) {
    .v-entete__barre {
        padding-top: 12px;
        padding-bottom: 12px;
        gap: 8px;
    }

    .v-icone.v-entete__menu {
        display: inline-grid;
    }

    .v-entete__pages {
        display: none;
    }

    .v-marque__logo {
        max-height: 44px;
    }

    /* SOUS 992 PX, LES RAYONS NE SONT QUE DANS LE MENU ☰ (décidé avec Amory le 19/10/2026). Une
       rangée qui défile au doigt les doublait : vide avec un seul rayon, et cachant la plupart des
       autres hors de l'écran quand il y en a beaucoup. Le menu les reprend tous, avec les pages
       et le compte. */
    .v-rayons {
        display: none;
    }
}

@media (max-width: 575.98px) {
    /* Le compte et les favoris passent dans le menu mobile : à côté de la loupe et du panier,
       ils ne laisseraient plus de place au nom de la boutique. */
    .v-icone--large,
    .v-compte {
        display: none;
    }

    .v-entete__droite {
        gap: 2px;
    }

    .v-panier__pastille {
        padding: 0 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. Pied de page
   ═══════════════════════════════════════════════════════════════════════════ */

/* LE PIED DE PAGE RESTE EN BAS DE L'ÉCRAN. Sur une page courte — un accueil encore vide, un panier
   vide, une étape du tunnel —, il remontait et laissait un grand blanc dessous (vu sur l'accueil de
   Jeanne le 19/10/2026). La page occupe au moins la hauteur de l'écran, et son contenu prend la
   place qui reste. `dvh` : sur téléphone, la hauteur réellement visible, barre d'adresse comprise. */
body.bodyShop > .page-wraper,
body.bodyTunnel > .page-wraper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

body.bodyShop > .page-wraper > .page-content,
body.bodyTunnel > .page-wraper > .page-content {
    flex: 1 0 auto;
}

/* Les règles « footer … » du gabarit commercial (texte gris à 13 px, liens blancs) sont battues
   par des sélecteurs de classe : aucun !important n'est nécessaire. */
/* Un écart modeste : les pages finissent déjà sur l'espacement bas de leur dernière section. */
.v-pied {
    margin-top: clamp(24px, 3vw, 40px);
    background: var(--v-pied-fond);
    color: var(--v-pied-texte);
    font-family: var(--shop-font-body);
    font-size: 15px;
    line-height: 1.55;
}

.v-pied__colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 32px;
}

.v-pied p {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--v-pied-texte);
}

.v-pied .v-pied__nom {
    margin: 0;
    font-family: var(--shop-font-heading);
    font-weight: 750;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.v-pied .v-pied__titre {
    margin: 0 0 12px;
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
}

.v-pied__liens {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.v-pied__liens li {
    font-size: 15px;
    line-height: 1.4;
}

.v-pied a,
.v-pied a:visited {
    color: var(--v-pied-texte);
}

.v-pied a:hover,
.v-pied a:focus {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.v-pied a.v-pied__retractation,
.v-pied a.v-pied__retractation:visited {
    color: #ffffff;
    font-weight: 600;
}

.v-pied__bas {
    border-top: 1px solid var(--v-pied-filet);
}

.v-pied__mentions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 13px;
    color: var(--v-pied-bas);
}

.v-pied .v-pied__mentions a,
.v-pied .v-pied__mentions a:visited {
    color: var(--v-pied-bas);
}

.v-pied .v-pied__mentions a:hover {
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. Retour en haut
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le script du socle l'affiche au défilement (fadeIn, qui pose display: block) : on n'y touche
   pas, on remplace seulement l'image du gabarit commercial par la couleur du commerçant. */
button.scroltop.v-haut {
    width: 48px;
    height: 48px;
    right: 20px;
    bottom: 20px;
    padding: 0;
    border-radius: 999px;
    background: var(--shop-primary);
    background-image: none;
    color: var(--shop-primary-contrast);
    box-shadow: var(--v-ombre-panneau);
    line-height: 0;
}

button.scroltop.v-haut:hover {
    background: var(--shop-primary-dark);
}

@media (prefers-reduced-motion: reduce) {
    .v-panier__apercu {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. Titre des pages intérieures — fil d'Ariane et grand titre
   ═══════════════════════════════════════════════════════════════════════════ */

.v-entete-de-page {
    padding-top: 32px;
}

.v-ariane {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: var(--shop-ink-muted);
}

.v-ariane a,
.v-ariane a:visited {
    color: var(--shop-ink-muted);
}

.v-ariane a:hover {
    color: var(--shop-ink);
}

.v-entete-de-page .v-titre-de-page {
    margin: 18px 0 0;
    font-family: var(--shop-font-heading);
    font-weight: 750;
    font-size: clamp(36px, 4.4vw, 60px);
    line-height: 1;
    letter-spacing: -0.025em;
    text-wrap: balance;
    color: var(--shop-ink);
}

/* LE TITRE N'EST DIT QU'UNE FOIS. Plusieurs pages répètent leur titre en tête de contenu (« Foire
   aux questions » sous « Foire aux questions ») : au thème 1, une bannière colorée les sépare ; ici,
   les deux titres se suivraient. Les gabarits du socle marquent ces répétitions `titre-repete`, sur
   l'élément qui ne contient QUE le titre, et le thème 2 les retire — de l'affichage comme de la
   lecture d'écran. */
.titre-repete {
    display: none !important;
}

/* Le contenu qui suit garde ses gabarits, mais pas l'écart prévu sous la bannière du thème 1 :
   sous un titre posé sur fond blanc, il ferait un trou. */
.v-entete-de-page + .section-full,
.v-entete-de-page + .content-block,
.v-entete-de-page + .content-inner {
    padding-top: clamp(28px, 3.5vw, 48px) !important;
}

/* Un produit sans photo montre le logo de la boutique (cf. shop/_miniPanier.html.twig) : rogné au
   format portrait, il deviendrait illisible. Il est contenu dans son cadre, pas recadré. */
.v-panier__apercu .cartProducts img:not([src*="/upload/products/"]) {
    object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. Boutons des pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le gabarit commercial peint ses boutons de SA couleur (#187073, un vert canard) et les actions
   de commande en vert ; la couche de thème ne recolore que `.btn-primary`. Au thème 2, ils prennent
   la couleur du commerçant — les pages que ce thème ne redessine pas gardent ainsi son accent. */
.page-content .btn.btnhover,
.page-content .btn.btn-success {
    background-color: var(--shop-primary) !important;
    border-color: var(--shop-primary) !important;
    color: var(--shop-primary-contrast) !important;
}

.page-content .btn.btnhover:hover,
.page-content .btn.btnhover:focus,
.page-content .btn.btn-success:hover,
.page-content .btn.btn-success:focus {
    background-color: var(--shop-primary-dark) !important;
    border-color: var(--shop-primary-dark) !important;
}

/* Le reflet animé du gabarit commercial, étranger à la maquette. */
.page-content .btnhover:after {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. Champs de formulaire
   ═══════════════════════════════════════════════════════════════════════════ */

/* LES CHAMPS PRENNENT LA FORME DES BOUTONS. Les boutons du thème 2 sont des pastilles ; à côté
   d'un champ rectangulaire du gabarit commercial, ils ne s'accordaient pas — relevé par Amory le
   19/10/2026 sur le code promo du panier. Les champs d'une ligne deviennent des pastilles, les
   zones de texte gardent des coins arrondis. La bordure rouge d'un champ en erreur est préservée. */
.page-content .form-control {
    min-height: 48px;
    padding: 10px 20px;
    border-width: 1.5px;
    border-style: solid;
    /* !important : style.css impose `border-radius: 5px !important` à tout .form-control. */
    border-radius: 999px !important;
    background-color: var(--shop-surface);
    color: var(--shop-ink);
    font-family: var(--shop-font-body);
    font-size: 16px;
    box-shadow: none;
}

.page-content .form-control:not(.is-invalid) {
    border-color: #d6d4cf;
}

.page-content .form-control:not(.is-invalid):focus {
    border-color: var(--shop-ink);
    box-shadow: none;
}

.page-content textarea.form-control {
    border-radius: 20px !important;
    padding: 14px 20px;
}

/* Un champ et son bouton accolés (le code promo) forment une seule pastille. Seulement quand un
   bouton suit RÉELLEMENT le champ : le formulaire de contact range aussi ses champs dans des
   .input-group, suivis d'un simple message d'erreur — coupés, ils perdaient leur bout droit. */
.page-content .input-group > .form-control:has(+ .input-group-append) {
    border-radius: 999px 0 0 999px !important;
}

.page-content .input-group-prepend + .form-control {
    border-radius: 0 999px 999px 0 !important;
}

.page-content .input-group-append > .btn {
    min-height: 48px;
    padding-left: 22px;
    padding-right: 22px;
    border-radius: 0 999px 999px 0 !important;
}

.page-content .input-group-prepend > .btn {
    min-height: 48px;
    border-radius: 999px 0 0 999px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. Sélecteur de quantité
   ═══════════════════════════════════════════════════════════════════════════ */

/* LA PASTILLE DE LA MAQUETTE : − 1 +, sur une ligne. Le socle la construit avec
   bootstrap-touchspin, en empilant « + » et « − » à droite du champ dans deux boutons de 22 px —
   jugés peu lisibles par Amory le 19/10/2026. Rien ne change au balisage ni au script : les deux
   boutons sortent de leur colonne (display: contents) et l'ordre se règle ici. */
.page-content .btn-quantity {
    width: auto;
}

.page-content .bootstrap-touchspin {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    width: auto;
    height: 48px;
    border: 1.5px solid #d6d4cf;
    border-radius: 999px;
    background: var(--shop-surface);
}

.page-content .bootstrap-touchspin .input-group-btn-vertical {
    display: contents;
}

.page-content .bootstrap-touchspin .bootstrap-touchspin-down {
    order: 1;
}

.page-content .bootstrap-touchspin input.quantityCustom {
    order: 2;
}

.page-content .bootstrap-touchspin .bootstrap-touchspin-up {
    order: 3;
}

.page-content .bootstrap-touchspin .input-group-btn-vertical > .btn {
    display: grid;
    place-items: center;
    width: 44px;
    max-width: none;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--shop-ink) !important;
    font-family: var(--shop-font-body);
    font-size: 20px;
    line-height: 1;
}

.page-content .bootstrap-touchspin .input-group-btn-vertical > .btn:hover {
    background: var(--shop-surface-alt) !important;
}

/* LES SIGNES SONT DESSINÉS, pas écrits : Figtree n'a pas de « − », et la police de secours le
   rendait plus court que le « + ». Deux traits superposés dans la case du bouton ; les icônes
   minuscules du gabarit sont masquées. Le nom lu par un lecteur d'écran (« Ajouter une unité »,
   « Retirer une unité ») est posé par vitrine.js. */
.page-content .bootstrap-touchspin .input-group-btn-vertical i {
    display: none;
}

.page-content .bootstrap-touchspin .input-group-btn-vertical > .btn::before,
.page-content .bootstrap-touchspin .bootstrap-touchspin-up::after {
    content: "";
    grid-area: 1 / 1;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.page-content .bootstrap-touchspin .bootstrap-touchspin-up::after {
    transform: rotate(90deg);
}

@media (max-width: 575.98px) {
    /* Plus compact sur téléphone, où il partage une ligne de tableau avec le prix et le total. */
    .page-content .bootstrap-touchspin {
        height: 40px;
    }

    .page-content .bootstrap-touchspin .input-group-btn-vertical > .btn {
        width: 36px;
        height: 36px;
    }

    .page-content .bootstrap-touchspin input.quantityCustom {
        width: 32px !important;
        min-width: 32px !important;
        height: 36px !important;
    }
}

.page-content .bootstrap-touchspin input.quantityCustom {
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: var(--shop-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. Cartes produit — la liste d'un rayon, les favoris, l'accueil
   ═══════════════════════════════════════════════════════════════════════════ */

.v-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 44px 28px;
}

.v-carte {
    position: relative;
}

.v-carte__lien,
.v-carte__lien:visited,
.v-carte__lien:hover {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--shop-ink);
}

/* CARRÉE, comme la photo : le back-office recadre chaque photo produit au carré, et c'est le cadrage
   choisi par le commerçant. Le format portrait de la maquette en rognait les côtés (décidé par
   Amory le 19/10/2026). */
.v-carte__photo {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--shop-surface-alt);
}

.v-carte__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.v-carte__lien:hover .v-carte__photo img {
    transform: scale(1.03);
}

/* Le logo de la boutique, faute de photo : contenu, et non recadré au format portrait. */
.v-carte__photo img.v-carte__repli {
    object-fit: contain;
    padding: 18%;
    box-sizing: border-box;
}

.v-etiquette {
    position: absolute;
    top: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--shop-surface);
    color: var(--shop-ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

/* Le nom en Figtree, comme sur la maquette : la couche de thème donne la police des titres à
   tous les h2 et h3, et ce nom en est un. */
.v-carte .v-carte__nom {
    margin: 0;
    font-family: var(--shop-font-body);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    color: var(--shop-ink);
}

.v-carte__prive {
    margin-right: 4px;
    color: var(--shop-primary);
    vertical-align: -1px;
}

.v-carte .v-carte__prix {
    margin: 0;
    color: var(--shop-ink-muted);
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.v-carte__ttc {
    display: block;
    font-size: 13px;
}

/* Le cœur, posé sur la photo, HORS du lien : un bouton dans un lien est interdit, et un clic sur
   le cœur ne doit pas ouvrir la fiche. */
.v-carte__favori {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--shop-surface);
    color: var(--shop-ink);
    box-shadow: 0 2px 10px rgba(22, 24, 27, 0.12);
    cursor: pointer;
}

.v-carte__favori .fa-heart {
    color: var(--shop-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. Liste d'un rayon — description, nombre, filtres, pagination
   ═══════════════════════════════════════════════════════════════════════════ */

.v-liste .v-liste__intro {
    max-width: 60ch;
    margin: 14px 0 0;
    color: var(--shop-ink-muted);
}

.v-liste__outils {
    margin: 28px 0 36px;
}

.v-liste .v-liste__nombre {
    margin: 0 0 12px;
    color: var(--shop-ink-muted);
    font-size: 15px;
}

.v-liste .v-liste__vide {
    padding: 48px 0;
    text-align: center;
    color: var(--shop-ink-muted);
}

/* Les filtres et le tri du socle (shop/product/_filtres.html.twig), mis sur une ligne entre deux
   filets, comme sur la maquette. Le gabarit, et sa logique, ne changent pas. */
.v-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 16px 0;
    border-top: 1px solid var(--shop-border);
    border-bottom: 1px solid var(--shop-border);
}

.v-filtres .widget {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
}

.v-filtres .widget-title {
    margin: 0;
    padding: 0;
    font-family: var(--shop-font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--shop-ink-muted);
}

.v-filtres .widget-title::after,
.v-filtres .widget-title::before {
    display: none;
}

/* « Filtrer par » se lit aux lecteurs d'écran ; à l'œil, les pastilles se suffisent. Le tri,
   dernier bloc, garde son libellé. */
.v-filtres .widget:not(:last-child) > .widget-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.v-filtres .widget .d-flex {
    gap: 8px;
}

.v-filtres .widget .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    margin: 0 !important;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
}

.v-filtres .widget .btn-outline-secondary {
    border: 1px solid #d6d4cf;
    background: var(--shop-surface);
    color: var(--shop-ink);
}

.v-filtres .widget .btn-outline-secondary:hover {
    border-color: var(--shop-ink);
}

.v-filtres .widget .badge {
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.7;
}

.v-filtres select.form-control {
    width: auto;
    min-width: 200px;
    min-height: 40px;
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 15px;
}

/* La pagination du socle (shop/product/_pagination.html.twig), en pastilles. */
.v-pagination {
    margin-top: 56px;
}

.v-pagination .pagination {
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.v-pagination .page-link {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    margin: 0;
    border: 1px solid var(--shop-border) !important;
    border-radius: 999px !important;
    background: var(--shop-surface);
    color: var(--shop-ink);
    font-weight: 500;
}

.v-pagination .page-item.active .page-link {
    border-color: var(--shop-ink) !important;
    background: var(--shop-ink);
    color: var(--shop-surface);
}

.v-pagination .page-item.disabled .page-link {
    opacity: 0.4;
}

.v-pagination .page-link svg path {
    fill: currentColor;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. Accueil — les sept sections (templates/themes/vitrine/shop/homepage/sections/)
   ═══════════════════════════════════════════════════════════════════════════ */

.v-section {
    padding-top: var(--v-section);
}

/* « Fond teinté » : la section se détache sur toute la largeur, avec de l'air dessous aussi. */
.v-section--teintee {
    margin-top: var(--v-section);
    padding-bottom: var(--v-section);
    background: var(--shop-surface-alt);
}

/* Juste après le bandeau, pas de marge : deux aplats pleine largeur se suivent, et la marge les
   séparait d'une bande blanche vide — vue sur l'accueil de Jeanne, le 19/10/2026. */
.v-heros + .v-section--teintee {
    margin-top: 0;
}

.v-section__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 28px;
}

.v-section .v-section__titre {
    margin: 0;
    font-family: var(--shop-font-heading);
    font-weight: 700;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--shop-ink);
}

/* ── Bandeau ── */

.v-heros {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(420px, 44vw, 640px);
    overflow: hidden;
    background: var(--shop-primary-light);
}

.v-heros__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v-heros__contenu {
    position: relative;
    padding-top: clamp(24px, 4vw, 56px);
    padding-bottom: clamp(24px, 4vw, 56px);
}

.v-heros__carte {
    box-sizing: border-box;
    max-width: 520px;
    padding: clamp(24px, 3vw, 40px);
    background: var(--shop-surface);
}

.v-heros .v-heros__titre {
    margin: 0 0 14px;
    font-family: var(--shop-font-heading);
    font-weight: 750;
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-wrap: balance;
    color: var(--shop-ink);
}

.v-heros .v-heros__accroche {
    margin: 0 0 24px;
    color: var(--shop-ink-muted);
    font-size: 17px;
}

.v-bouton,
.v-bouton:visited {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--shop-primary);
    color: var(--shop-primary-contrast);
    font-weight: 600;
}

.v-bouton:hover,
.v-bouton:focus {
    background: var(--shop-primary-dark);
    color: var(--shop-primary-contrast);
}

/* ── Image et texte ── */

.v-image-texte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

.v-image-texte--image-a-gauche .v-image-texte__image {
    order: -1;
}

.v-image-texte__image img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
}

.v-image-texte__texte .v-section__titre {
    margin-bottom: 16px;
}

.v-image-texte__texte p {
    max-width: 52ch;
    margin: 0 0 14px;
    color: var(--shop-ink-muted);
}

.v-points {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--shop-ink-muted);
}

.v-points li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 6px;
}

.v-points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--shop-primary);
}

/* ── Rayons ── */

.v-rayons-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.v-rayon,
.v-rayon:visited,
.v-rayon:hover {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--shop-ink);
}

/* Carrée aussi : les photos de rayon sont recadrées au carré dans le back-office. */
.v-rayon__photo {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--shop-surface-alt);
}

.v-rayon__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.v-rayon:hover .v-rayon__photo img {
    transform: scale(1.03);
}

.v-rayon__photo img.v-rayon__repli {
    object-fit: contain;
    padding: 18%;
    box-sizing: border-box;
}

.v-rayon .v-rayon__nom {
    margin: 0;
    font-family: var(--shop-font-body);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--shop-ink);
}

.v-rayon .v-rayon__description {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--shop-ink-muted);
    font-size: 15px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Réassurance ── */

.v-reassurance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 24px;
    margin: 0;
    padding: 32px 0;
    list-style: none;
    border-top: 1px solid var(--shop-border);
    border-bottom: 1px solid var(--shop-border);
}

.v-argument {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.v-argument > svg {
    flex: none;
    color: var(--shop-primary);
}

.v-argument .v-argument__titre {
    margin: 0;
    font-family: var(--shop-font-body);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--shop-ink);
}

.v-argument .v-argument__texte {
    margin: 2px 0 0;
    color: var(--shop-ink-muted);
    font-size: 15px;
}

/* ── Texte ── */

.v-texte {
    max-width: 70ch;
}

.v-texte--centre {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.v-texte .v-section__titre {
    margin-bottom: 16px;
}

.v-texte p {
    margin: 0;
    color: var(--shop-ink-muted);
    font-size: 17px;
}

/* ── Widget ── */

.v-widget {
    display: block;
    width: 100%;
    border: 0;
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .v-heros {
        min-height: 360px;
    }

    .v-grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 14px;
    }

    .v-carte .v-carte__nom {
        font-size: 15px;
    }

    .v-carte .v-carte__prix {
        font-size: 14px;
    }

    .v-rayons-grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .v-carte__photo img,
    .v-rayon__photo img {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. Listes déroulantes — le module bootstrap-select du gabarit
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le gabarit remplace chaque <select> par un bouton (bootstrap-select). Son conteneur garde la
   classe form-control, et prenait donc la forme de pastille des champs, autour d'un bouton qui
   gardait son propre cadre : deux cadres emboîtés. Le conteneur s'efface, le bouton devient la
   pastille. */
.page-content .bootstrap-select.form-control {
    min-height: 0;
    height: auto;
    padding: 0 !important;
    border: 0 !important;
    background: transparent;
}

.page-content .bootstrap-select > .dropdown-toggle {
    display: flex;
    align-items: center;
    min-height: 48px;
    height: auto;
    padding: 0 40px 0 20px;
    border: 1.5px solid #d6d4cf !important;
    border-radius: 999px !important;
    background: var(--shop-surface) !important;
    box-shadow: none !important;
    color: var(--shop-ink) !important;
    font-family: var(--shop-font-body);
    font-size: 16px;
}

.page-content .bootstrap-select > .dropdown-toggle:focus,
.page-content .bootstrap-select.show > .dropdown-toggle {
    border-color: var(--shop-ink) !important;
}

.page-content .bootstrap-select .dropdown-menu {
    border: 1px solid var(--shop-border);
    border-radius: 16px;
    box-shadow: var(--v-ombre-panneau);
    overflow: hidden;
}

/* Dans la barre des filtres : à sa taille, sur la ligne de son libellé. */
.v-filtres .bootstrap-select {
    width: auto !important;
    min-width: 220px;
}

.v-filtres .bootstrap-select > .dropdown-toggle {
    min-height: 40px;
    font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. Fiche produit — les photos à gauche, le panneau d'achat à droite
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le formulaire d'achat est celui du thème 1 (shop/product/_achat.html.twig), partagé : sa logique
   et son script n'existent qu'une fois. Il est habillé ici par ses classes Bootstrap et celles du
   gabarit commercial ; les règles qui doivent battre un style écrit dans la balise, ou une classe
   utilitaire de Bootstrap (elles sont en !important), le sont aussi. */

.v-fiche {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin-top: 24px;
}

@media (min-width: 992px) {
    .v-fiche {
        grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr);
        gap: clamp(40px, 5vw, 72px);
        align-items: start;
    }

    /* LE PANNEAU D'ACHAT SUIT LE DÉFILEMENT, comme sur la maquette : le bouton reste à portée
       pendant qu'on regarde les photos. */
    .v-fiche__achat {
        position: sticky;
        top: 24px;
    }
}

/* — Les photos — */

.v-galerie {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.v-galerie__photo.carousel-inner {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--shop-surface-alt);
}

.v-galerie__photo .carousel-item {
    height: 100%;
}

.v-galerie__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v-galerie__photo img.v-galerie__repli {
    object-fit: contain;
    padding: 18%;
    box-sizing: border-box;
}

.v-galerie__photo .v-etiquette {
    z-index: 2;
    top: 16px;
    left: 16px;
    font-size: 13px;
    padding: 6px 12px;
}

.v-galerie__fleche {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 999px;
    background: var(--shop-surface);
    color: var(--shop-ink);
    box-shadow: 0 2px 10px rgba(22, 24, 27, 0.12);
}

.v-galerie__fleche:hover,
.v-galerie__fleche:focus {
    color: var(--shop-ink);
}

.v-galerie__fleche--precedente {
    left: 14px;
}

.v-galerie__fleche--suivante {
    right: 14px;
}

/* Les vignettes : les indicateurs de Bootstrap (des traits blancs posés sur la photo), redevenus
   une rangée de cinq carrés sous elle — cinq, le nombre maximal de photos d'un produit. Bootstrap
   tient leur classe `active` à jour. */
.v-galerie .v-galerie__vignettes {
    position: static;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.v-galerie .v-galerie__vignettes li {
    position: relative;
    box-sizing: border-box;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    background: var(--shop-surface-alt);
    text-indent: 0;
    opacity: 1;
    aspect-ratio: 1 / 1;
}

.v-galerie__vignettes button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.v-galerie__vignettes img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v-galerie__vignettes li::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    pointer-events: none;
}

.v-galerie__vignettes li.active::after {
    border-color: var(--shop-primary);
}

/* — Le panneau d'achat — */

.v-fiche__achat form.cart {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.v-fiche__achat .dlab-post-title {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.v-fiche__entete {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.v-fiche__achat .v-fiche__titre {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--shop-font-heading);
    font-weight: 750;
    font-size: clamp(32px, 3.6vw, 50px);
    line-height: 1.04;
    letter-spacing: -0.025em;
    text-wrap: balance;
    overflow-wrap: anywhere;
    color: var(--shop-ink);
}

.v-fiche__titre .v-carte__prive {
    vertical-align: 0;
}

.v-fiche__favori {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-top: 4px;
    padding: 0;
    border: 1.5px solid #d6d4cf;
    border-radius: 999px;
    background: var(--shop-surface);
    color: var(--shop-ink);
    font-size: 20px;
    cursor: pointer;
}

.v-fiche__favori:hover {
    border-color: var(--shop-ink);
}

.v-fiche__favori .fa-heart {
    color: var(--shop-primary);
}

.v-fiche__achat .v-fiche__prix {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--shop-ink);
    font-variant-numeric: tabular-nums;
}

.v-fiche__prix small {
    font-size: 15px;
    font-weight: 400;
    color: var(--shop-ink-muted);
}

.v-fiche__ttc {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: var(--shop-ink-muted);
}

/* La date de livraison estimée : une phrase d'information, pas un cri — le gabarit l'écrivait en
   gras et en italique. */
.v-fiche__achat .dlab-post-title > p.mb-3 {
    margin: 0 !important;
    font-size: 15px;
    line-height: 1.5;
    color: var(--shop-ink-muted);
}

.v-fiche__achat .dlab-post-title > p.mb-3 b {
    font-weight: 400;
}

.v-fiche__achat .dlab-post-title > p.mb-3 i {
    font-style: normal;
}

/* La description courte. */
.v-fiche__achat .dlab-post-title > p.m-b10 {
    margin: 0;
    color: #3e4146;
}

/* Les allergènes, dans un encadré : la maquette les met à part, pour qu'on les trouve. */
.v-fiche__achat #allergenes {
    margin: 0;
    padding: 16px 18px;
    background: var(--shop-surface-alt);
    font-size: 15px;
}

.v-fiche__achat #allergenes > b {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.v-fiche__achat #allergenes > b + br {
    display: none;
}

.v-fiche__achat #allergenes small {
    font-size: 13px;
    color: var(--shop-ink-muted);
}

/* Les étiquettes, en pastilles : chacune ouvre son rayon filtré. */
.v-fiche__achat .shop-item-tage {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.v-fiche__achat .shop-item-tage a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin: 0 !important;
    padding: 0 14px;
    border: 1px solid #d6d4cf;
    border-radius: 999px;
    background: transparent;
    color: var(--shop-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

.v-fiche__achat .shop-item-tage a:hover {
    border-color: var(--shop-ink);
}

/* Les filets du gabarit : l'espacement suffit à séparer. */
.v-fiche__achat .dlab-divider {
    display: none;
}

/* Options, stock, quantité : une colonne, sans la grille de Bootstrap. */
.v-fiche__achat form.cart > .row {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
}

.v-fiche__achat form.cart > .row > div {
    flex: none;
    max-width: none;
    margin: 0 !important;
    padding: 0;
}

.v-fiche__achat .shop-form .h6,
.v-fiche__achat .m-b30 .h6 {
    display: block;
    margin: 0 0 8px;
    font-family: var(--shop-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--shop-ink);
}

.v-fiche__achat .shop-form .h6 small {
    font-weight: 400;
    color: var(--shop-ink-muted) !important;
}

.v-fiche__achat .shop-form br {
    display: none;
}

.v-fiche__achat .shop-form .form-group {
    margin: 0;
}

.v-fiche__achat .shop-form .bootstrap-select {
    width: 100% !important;
}

/* Les options à saisir : le gabarit leur écrit un style dans la balise (coins carrés, 10 pixels de
   marge) — le texte toucherait l'arrondi de la pastille. */
.v-fiche__achat input.customerInput {
    height: 48px !important;
    line-height: normal !important;
    padding: 0 20px !important;
}

.v-fiche__achat textarea.customerInput {
    padding: 12px 20px !important;
}

.v-fiche__achat .alert {
    margin: 0 !important;
}

.v-fiche__achat #stockStatus,
.v-fiche__achat .text-success,
.v-fiche__achat .text-danger {
    font-weight: 600;
}

/* Le bouton d'achat, sur toute la largeur du panneau — ou « Vendu », pour une pièce unique. */
.v-fiche__achat form.cart > .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 24px;
    border-radius: 999px !important;
    font-family: var(--shop-font-body);
    font-size: 16px;
    font-weight: 600;
}

.v-fiche__achat form.cart > .btn .ti-shopping-cart {
    display: none;
}

.v-fiche__achat #addToCartBtn.disabledAddToCart,
.v-fiche__achat form.cart > .btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* « Estimer les frais de livraison » : un lien souligné à la couleur de la boutique. */
.v-fiche__achat form.cart > a[data-target="#estimateDelivery"] {
    align-self: flex-start;
    margin: 0 !important;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--shop-primary);
    color: var(--shop-ink);
    font-size: 15px;
    font-weight: 600;
}

.v-fiche__achat form.cart > a[data-target="#estimateDelivery"] .fa {
    display: none;
}

/* Le produit qui échappe au droit de rétractation : dit sous le bouton, avant l'achat. */
.v-fiche__achat #exclusionRetractation {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5;
    color: var(--shop-ink-muted) !important;
}

.v-fiche__achat #exclusionRetractation a {
    color: var(--shop-ink-muted);
    text-decoration: underline;
}

/* Les modes de livraison, sous un filet. */
.v-fiche__livraisons {
    padding-top: 18px;
    border-top: 1px solid var(--shop-border);
}

.v-fiche__achat .v-fiche__sous-titre {
    margin: 0 0 14px;
    font-weight: 600;
    color: var(--shop-ink);
}

.v-fiche__livraisons ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.v-fiche__livraisons li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
}

.v-fiche__livraisons svg {
    flex: none;
    color: var(--shop-primary);
}

.v-fiche__livraisons strong {
    display: block;
    font-weight: 600;
    color: var(--shop-ink);
}

.v-fiche__livraisons span {
    display: block;
    color: var(--shop-ink-muted);
    font-size: 14px;
}

/* — Sous la fiche : la description longue, la galerie — */

.v-fiche__suite {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 5vw, 64px);
    margin-top: clamp(56px, 7vw, 96px);
}

.v-fiche__suite .v-fiche__intertitre {
    margin: 0 0 14px;
    font-family: var(--shop-font-heading);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--shop-ink);
}

.v-fiche__description {
    max-width: 68ch;
    margin: 0;
    color: #3e4146;
}

.v-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.v-photos img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--shop-surface-alt);
    cursor: zoom-in;
}

/* La fenêtre d'estimation des frais : arrondie comme le reste du thème, et sa liste des communes
   (select2) en pastille, comme les autres champs. */
#estimateDelivery .modal-content {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
}

#estimateDelivery .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 44px 0 20px;
    border: 1.5px solid #d6d4cf;
    border-radius: 999px;
    font-size: 15px;
}

#estimateDelivery .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.4;
    color: var(--shop-ink);
}

#estimateDelivery .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 16px;
    height: 20px;
    margin-top: -10px;
}

#estimateDelivery .modal-header .close {
    font-size: 30px;
    font-weight: 400;
    color: var(--shop-ink);
    opacity: 0.6;
}

#estimateDelivery .modal-header .close:hover {
    opacity: 1;
}

#estimateDelivery .select2-dropdown {
    border: 1px solid var(--shop-border);
    border-radius: 16px;
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .v-photos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .v-galerie .v-galerie__vignettes {
        gap: 8px;
    }

    .v-galerie__fleche {
        width: 40px;
        height: 40px;
        margin-top: -20px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. Panier — les lignes, puis le récapitulatif
   ═══════════════════════════════════════════════════════════════════════════ */

/* L'affichage seul : les lignes et les totaux sont calculés par le socle (shop/cart/cart.html.twig),
   et ses morceaux partagés — messages, code promo, frais de port offerts, bouton de commande —
   gardent leurs classes Bootstrap, habillées ici. */

.v-panier-page {
    margin-top: clamp(24px, 3vw, 40px);
}

.v-panier-page .alert {
    margin: 0 0 16px !important;
    border: 0;
    border-radius: 0;
    font-size: 15px;
}

.v-panier-page__grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
}

@media (min-width: 992px) {
    .v-panier-page__grille {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
        gap: clamp(40px, 5vw, 72px);
        align-items: start;
    }

    /* Le récapitulatif et son bouton restent à portée, comme le panneau d'achat de la fiche. */
    .v-recap {
        position: sticky;
        top: 24px;
    }
}

/* — Les lignes — */

.v-lignes {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--shop-border);
}

.v-ligne {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--shop-border);
}

.v-ligne__photo {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--shop-surface-alt);
    overflow: hidden;
}

.v-ligne__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v-ligne__photo img.v-ligne__repli {
    object-fit: contain;
    padding: 14%;
    box-sizing: border-box;
}

.v-ligne__corps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.v-ligne__haut {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.v-panier-page .v-ligne__nom {
    margin: 0;
    font-family: var(--shop-font-body);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: anywhere;
}

.v-ligne__nom a,
.v-ligne__nom a:visited {
    color: var(--shop-ink);
}

.v-ligne__nom a:hover {
    color: var(--shop-ink);
    text-decoration: underline;
}

.v-ligne__total {
    flex: none;
    margin: 0;
    text-align: right;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--shop-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.v-ligne__total small {
    font-size: 13px;
    font-weight: 400;
    color: var(--shop-ink-muted);
}

.v-ligne__ttc {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--shop-ink-muted);
}

.v-ligne__remise {
    display: table;
    margin: 6px 0 0 auto;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--shop-surface-alt);
    font-size: 12px;
    font-weight: 600;
    color: var(--shop-ink);
}

.v-ligne__options {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--shop-ink-muted);
}

.v-ligne__mention {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--shop-ink-muted);
}

.v-ligne__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 10px;
}

.v-ligne__quantite {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.v-ligne__quantite .btn-quantity {
    margin: 0;
}

.v-ligne__valider {
    min-height: 40px;
    padding: 0 16px;
    border: 1.5px solid var(--shop-ink);
    border-radius: 999px;
    background: transparent;
    color: var(--shop-ink);
    font-family: var(--shop-font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.v-ligne__valider:hover {
    background: var(--shop-ink);
    color: var(--shop-surface);
}

.v-ligne__unite {
    margin: 0;
    font-size: 14px;
    color: var(--shop-ink-muted);
    font-variant-numeric: tabular-nums;
}

.v-ligne__retirer {
    margin: 0 0 0 auto;
}

.v-ligne__retirer button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--shop-ink-muted);
    font-family: var(--shop-font-body);
    font-size: 14px;
    cursor: pointer;
}

.v-ligne__retirer button:hover {
    color: var(--shop-ink);
    text-decoration: underline;
}

/* — Le récapitulatif — */

.v-recap {
    padding: clamp(20px, 3vw, 28px);
    background: var(--shop-surface-alt);
}

.v-panier-page .v-recap__titre {
    margin: 0 0 18px;
    font-family: var(--shop-font-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--shop-ink);
}

/* Le code promo (_code_promo.html.twig) : son intertitre, son champ et son bouton accolés en une
   pastille (section 7), ou le code appliqué et le lien pour le retirer. */
.v-recap__code {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #dfe1e4;
}

.v-recap__code .form-group {
    margin: 0 !important;
}

.v-recap__code h4 {
    margin: 0 0 10px;
    font-family: var(--shop-font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--shop-ink);
}

.v-recap__code .text-center {
    text-align: left !important;
}

/* Un visiteur non connecté : l'invitation à se connecter, à la place du champ. */
.v-recap__code .code-promo-connexion p {
    font-size: 14px;
    color: var(--shop-ink-muted);
}

.v-recap__code .code-promo-connexion a {
    color: var(--shop-ink);
    font-weight: 600;
    text-decoration: underline;
}

.v-recap__code .text-center + .text-center {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

/* Le lien qui retire le code appliqué : une pastille ronde. */
.v-recap__code .text-center + .text-center .btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 999px !important;
    background: var(--shop-surface) !important;
}

.v-recap__code .alert {
    margin: 10px 0 0 !important;
}

.v-recap__montants {
    margin: 0;
    font-size: 15px;
}

.v-recap__montants > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 5px 0;
}

.v-recap__montants dt {
    font-weight: 400;
    color: var(--shop-ink-muted);
}

.v-recap__montants dd {
    margin: 0;
    color: var(--shop-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.v-recap__montants .v-recap__total {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid #dfe1e4;
}

.v-recap__total dt {
    font-weight: 600;
    color: var(--shop-ink);
}

.v-recap__total dt small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--shop-ink-muted);
}

.v-recap__total dd {
    font-size: 24px;
    font-weight: 700;
}

/* Les frais de port offerts (_franco.html.twig), puis le bouton ou le minimum (_commander). */
.v-recap .alert {
    margin: 18px 0 0 !important;
    padding: 12px 14px;
    border: 0;
    border-radius: 0;
    background: var(--shop-surface);
    color: var(--shop-ink);
    font-size: 14px;
}

.v-recap .alert-warning .fa,
.v-recap .alert-success .fa {
    color: var(--shop-primary);
}

.v-recap .alert-danger {
    color: #a12b25;
}

.v-recap .form-group {
    margin: 18px 0 0;
}

.v-recap .form-group > .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    border-radius: 999px !important;
    font-family: var(--shop-font-body);
    font-size: 16px;
    font-weight: 600;
}

/* — Le panier vide — */

.v-panier-vide {
    padding: 24px 0 clamp(40px, 6vw, 72px);
}

.v-panier-vide p {
    margin: 0 0 20px;
    font-size: 18px;
    color: var(--shop-ink-muted);
}

.v-panier-vide__lien,
.v-panier-vide__lien:visited {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--shop-primary);
    color: var(--shop-primary-contrast);
    font-weight: 600;
}

.v-panier-vide__lien:hover {
    background: var(--shop-primary-dark);
    color: var(--shop-primary-contrast);
}

@media (max-width: 575.98px) {
    .v-ligne {
        grid-template-columns: 80px minmax(0, 1fr);
        gap: 16px;
        padding: 20px 0;
    }

    /* Sur téléphone, le montant passe sous le nom. */
    .v-ligne__haut {
        flex-direction: column;
        gap: 2px;
    }

    .v-ligne__total {
        text-align: left;
    }

    .v-ligne__remise {
        margin-left: 0;
    }

    .v-ligne__bas {
        gap: 10px 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. Tunnel de commande — inscription, connexion, livraison, adresses, paiement
   ═══════════════════════════════════════════════════════════════════════════ */

/* Chargé par templates/themes/vitrine/shop/emptyBase.html.twig. Chaque étape garde son gabarit du
   socle et ses scripts — créneaux, adresses, paiement Stripe — : ce qui suit ne fait que les
   habiller, par leurs classes. Tout est rangé sous .bodyTunnel, la classe du corps du tunnel. */

.bodyTunnel {
    background: var(--shop-surface);
    color: var(--shop-ink);
}

/* — L'en-tête : retour au panier, la marque, la mention de sécurité — */

.v-tunnel-entete {
    background: var(--shop-surface);
    border-bottom: 1px solid var(--shop-border);
}

.v-tunnel-entete__barre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 76px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.v-tunnel-entete__retour,
.v-tunnel-entete__retour:visited {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--shop-ink);
    font-size: 15px;
    font-weight: 500;
}

.v-tunnel-entete__retour:hover {
    color: var(--shop-ink);
    text-decoration: underline;
}

.v-tunnel-entete .v-marque {
    justify-self: center;
}

.v-tunnel-entete .v-marque__nom {
    font-size: 28px;
}

.v-tunnel-entete .v-marque__logo {
    max-height: 52px;
}

.v-tunnel-entete__securite {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    color: var(--shop-ink-muted);
}

@media (max-width: 575.98px) {
    /* Sur téléphone, le cadenas seul : la marque garde la place. */
    .v-tunnel-entete__securite span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .v-tunnel-entete .v-marque__nom {
        font-size: 22px;
    }
}

/* — Les étapes : du texte, l'étape en cours soulignée à la couleur de la boutique — le bandeau
     vert canard du gabarit commercial, avec ses chevrons, disparaît. — */

.bodyTunnel .cartBreadcrumb.dlab-bnr-inr {
    height: auto;
    min-height: 0;
    padding: 28px 0 0 !important;
    background: none;
}

.bodyTunnel .cartBreadcrumb::after,
.bodyTunnel .cartBreadcrumb::before {
    display: none !important;
}

.bodyTunnel .cartBreadcrumb .dlab-bnr-inr-entry {
    display: block;
}

.bodyTunnel .cartBreadcrumb .breadcrumb-row {
    display: block;
    padding: 0;
    border-radius: 0;
    background: none !important;
}

.bodyTunnel .cartBreadcrumb .breadcrumb-row ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
    margin: 0;
    padding: 0;
}

.bodyTunnel .cartBreadcrumb .breadcrumb-row ul li {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.bodyTunnel .cartBreadcrumb .breadcrumb-row ul li::after,
.bodyTunnel .cartBreadcrumb .breadcrumb-row ul li::before {
    display: none !important;
    content: none !important;
}

.bodyTunnel .cartBreadcrumb .breadcrumb-row ul li a {
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 2px solid transparent;
    color: var(--shop-ink-muted) !important;
    font-weight: 400;
    text-transform: none;
}

.bodyTunnel .cartBreadcrumb .breadcrumb-row ul li a:hover {
    color: var(--shop-ink) !important;
}

.bodyTunnel .cartBreadcrumb .breadcrumb-row ul li a.active {
    border-bottom-color: var(--shop-primary);
    color: var(--shop-ink) !important;
    font-weight: 600;
}

/* — Les titres et les encadrés des étapes — */

.bodyTunnel .page-content .section-head {
    margin-bottom: 32px;
}

.bodyTunnel .page-content .section-head h2,
.bodyTunnel .page-content .section-head h3,
.bodyTunnel .page-content .shop-account h3 {
    font-family: var(--shop-font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--shop-ink);
}

/* Les encadrés d'inscription, de connexion et d'adresse. */
.bodyTunnel .page-content .border-1,
.bodyTunnel .page-content .border {
    border: 1px solid var(--shop-border) !important;
    border-radius: 0 !important;
}

/* « en cliquant ici », dans la phrase : un lien, et non un bouton vert canard posé dans le texte. */
.bodyTunnel .page-content .mb-4 > a.btn.btn-sm {
    display: inline;
    padding: 0;
    border: 0 !important;
    background: none !important;
    color: var(--shop-ink) !important;
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    vertical-align: baseline;
}

/* « Précédent » : la pastille secondaire, au contour. */
.bodyTunnel .page-content .btn.btn-hover {
    border: 1.5px solid var(--shop-ink) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--shop-ink) !important;
    box-shadow: none !important;
}

.bodyTunnel .page-content .btn.btn-hover:hover,
.bodyTunnel .page-content .btn.btn-hover:focus {
    background: var(--shop-ink) !important;
    color: var(--shop-surface) !important;
}

.bodyTunnel .page-content .btn.btn-success,
.bodyTunnel .page-content .btn.btn-hover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    font-family: var(--shop-font-body);
    font-size: 16px;
    font-weight: 600;
}

.bodyTunnel .page-content .btn.btn-success {
    border-radius: 999px !important;
}

/* Sauf le bouton accolé à son champ (le code promo) : il ferme la pastille du champ (section 7). */
.bodyTunnel .page-content .input-group-append > .btn {
    border-radius: 0 999px 999px 0 !important;
}

/* L'encadré d'inscription, détaché des étapes. */
.bodyTunnel .page-content .shop-account {
    padding-top: 40px !important;
}

/* — Les modes de livraison : des cartes sobres ; celle qu'on choisit prend la couleur de la
     boutique. — */

.bodyTunnel .deliveryChoice {
    position: relative;
    border: 1.5px solid #d6d4cf !important;
    border-radius: 0;
    box-shadow: none !important;
    transform: none !important;
    transition: border-color 0.2s ease;
}

.bodyTunnel .deliveryChoice:hover {
    border-color: var(--shop-ink) !important;
}

.bodyTunnel .deliveryChoice.selectedChoice {
    border-color: var(--shop-primary) !important;
    box-shadow: inset 0 0 0 1px var(--shop-primary) !important;
}

.bodyTunnel .deliveryChoice .icon-bx-md.bg-primary {
    background-color: var(--shop-surface-alt) !important;
}

.bodyTunnel .deliveryChoice .dlab-tilte {
    font-family: var(--shop-font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--shop-ink);
}

.bodyTunnel .page-content .card {
    border: 1px solid var(--shop-border);
    border-radius: 0;
}

.bodyTunnel .page-content .cardShadow {
    box-shadow: none;
}

/* Le calendrier des créneaux (jquery.datetimepicker) : le jour choisi à la couleur de la boutique. */
.bodyTunnel .xdsoft_datetimepicker {
    border: 1px solid var(--shop-border);
    border-radius: 12px;
    box-shadow: var(--v-ombre-panneau);
    font-family: var(--shop-font-body);
}

.bodyTunnel .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.bodyTunnel .xdsoft_datetimepicker .xdsoft_calendar td:hover {
    background: var(--shop-primary) !important;
    color: var(--shop-primary-contrast) !important;
    box-shadow: none !important;
}

/* — Le paiement : le récapitulatif, le code promo, le bloc de paiement — */

.bodyTunnel .page-content .check-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.bodyTunnel .page-content .check-tbl th,
.bodyTunnel .page-content .check-tbl td {
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--shop-border);
    vertical-align: middle;
}

.bodyTunnel .page-content .check-tbl thead th {
    background: none;
    color: var(--shop-ink-muted);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
}

.bodyTunnel .page-content .col-lg-8 > h3,
.bodyTunnel .page-content .col-lg-8 h3,
.bodyTunnel .page-content .col-lg-4 h3 {
    font-family: var(--shop-font-heading);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--shop-ink);
}

.bodyTunnel .page-content .card-body h4 {
    font-family: var(--shop-font-body);
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
}

/* Le bloc de paiement : un fond gris écrit dans la balise, aux coins arrondis — remis au thème. */
.bodyTunnel .page-content div:has(> #paymentContainer) {
    padding: 24px !important;
    border-radius: 0 !important;
    background-color: var(--shop-surface-alt) !important;
}

/* Son texte d'introduction, justifié dans la balise : des espaces béants sur une colonne étroite. */
.bodyTunnel .page-content div:has(> #paymentContainer) > p {
    text-align: left !important;
}

.bodyTunnel #cardholder-name.StripeElement,
.bodyTunnel #card-element.StripeElement {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 13px 20px !important;
    border: 1.5px solid #d6d4cf !important;
    border-radius: 999px !important;
    background: var(--shop-surface) !important;
    box-shadow: none !important;
    font-family: var(--shop-font-body);
    font-size: 16px;
    color: var(--shop-ink);
}

.bodyTunnel #card-element.StripeElement--focus,
.bodyTunnel #cardholder-name.StripeElement:focus {
    border-color: var(--shop-ink) !important;
}

/* « Enregistrer cette carte ? » Oui / Non : deux pastilles. */
.bodyTunnel .product-item-size {
    gap: 8px;
}

.bodyTunnel .product-item-size .btn {
    min-height: 40px;
    padding: 0 18px;
    border: 1.5px solid #d6d4cf !important;
    border-radius: 999px !important;
    background: var(--shop-surface) !important;
    color: var(--shop-ink) !important;
    font-weight: 600;
}

.bodyTunnel .product-item-size .btn.active {
    border-color: var(--shop-ink) !important;
    background: var(--shop-ink) !important;
    color: var(--shop-surface) !important;
}

.bodyTunnel #card-button,
.bodyTunnel #already-known-card-button {
    width: 100%;
    min-height: 52px;
    border-radius: 999px !important;
    font-size: 16px;
    font-weight: 600;
}

.bodyTunnel #paymentContainer a:not(.btn) {
    color: var(--shop-ink);
    text-decoration: underline;
}

/* — Le pied : la seule rangée des mentions — */

.v-tunnel-pied {
    margin-top: clamp(48px, 6vw, 80px);
}