/* ==========================================================================
   Vins de Bourgueil — CSS personnalisé
   Chargé par YOOtheme après theme.css (LoadThemeHead.php : style:theme-custom).
   Ce fichier n'appartient pas au package YOOtheme : il survit aux mises à jour
   du thème comme à celles de VM UIKit X. Y placer tout le CSS custom.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CHECKOUT / PANIER — hiérarchie des boutons
   Le template du plugin One Page rend TOUTES ses actions en .uk-button-primary
   (doré) : « Vider le panier », « Continuer », « Mettre à jour », « Changer »,
   « Appliquer le coupon » et le bouton final de commande ont donc exactement le
   même poids visuel. On rétablit la hiérarchie en CSS plutôt qu'en modifiant
   une quinzaine de lignes réparties dans 3 templates du plugin.

   Volontairement NON ciblé : .uk-button-primary en général — les groupes
   « Commande express / Créer un compte » (data-uk-button-radio) s'en servent
   pour marquer l'option active. Le repeindre casserait cet état.
   -------------------------------------------------------------------------- */

/* 1a. CTA final « Confirmer la commande » — l'action dominante de la page.
   Indigo plein (uk-button-secondary du thème) au lieu du doré, pour qu'il
   ressorte des actions secondaires qui l'entourent. */
a[onclick*="submit_order"].uk-button {
    background-color: #383888;
    color: #fff;
    border: 1px solid #383888;
    font-size: 1.05rem;
    padding: 0 40px;
    line-height: 54px;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

a[onclick*="submit_order"].uk-button:hover,
a[onclick*="submit_order"].uk-button:focus {
    background-color: #2f3070;
    border-color: #2f3070;
    color: #fff;
}

a[onclick*="submit_order"].uk-button:focus-visible {
    outline: 2px solid #f0c870;
    outline-offset: 2px;
}

/* 1b. Actions secondaires du panier (Changer, Mettre à jour, coupon…).
   Tous les petits boutons dorés passent en bouton fantôme indigo : présents
   mais discrets, dans l'esprit de .btn-border__blue déjà utilisé par le thème. */
#cart-contents .uk-button-primary.uk-button-small {
    background-color: transparent;
    color: #383888;
    border: 1px solid rgba(56, 56, 136, .35);
}

#cart-contents .uk-button-primary.uk-button-small:hover,
#cart-contents .uk-button-primary.uk-button-small:focus {
    background-color: #383888;
    border-color: #383888;
    color: #fff;
}

/* 1c. « Vider le panier » — action destructive, présentée à l'identique des
   autres dans le template d'origine. On la neutralise visuellement pour
   éviter le clic réflexe ; le rouge n'apparaît qu'au survol. */
#emptycart.uk-button {
    background-color: transparent;
    color: #8a8a9e;
    border: 1px solid rgba(56, 56, 136, .18);
    font-weight: 400;
}

#emptycart.uk-button:hover,
#emptycart.uk-button:focus {
    background-color: transparent;
    border-color: #c0392b;
    color: #c0392b;
}

/* 1d. Confort de lecture des lignes produit du panier. */
#cart-contents .quantity-input {
    max-width: 56px !important;
    text-align: center;
}

#cart-contents .quantity-minus,
#cart-contents .quantity-plus {
    color: #383888;
}

#cart-contents .quantity-minus:hover,
#cart-contents .quantity-plus:hover {
    color: #f0c870;
}

/* 1e. Bloc quantité du panier — même motif que la grille boutique :
   [−][champ][+] soudés dans un .uk-button-group, « Mise à jour » sur la même ligne.
   uk-button-default a une bordure blanche dans ce thème (invisible sur fond clair) :
   on redonne au groupe une bordure indigo discrète pour qu'il se lise sur le panier. */
#cart-contents .vdb-cart-qty {
    gap: 10px;
}

#cart-contents .vdb-cart-qty .uk-button-group {
    border: 1px solid rgba(56, 56, 136, .25);
    border-radius: 4px;
    overflow: hidden;
    align-items: stretch;
}

#cart-contents .vdb-cart-qty .quantity-minus,
#cart-contents .vdb-cart-qty .quantity-plus {
    border: 0;
    background: transparent;
    color: #383888;
    padding: 0 10px;
    line-height: 34px;
}

#cart-contents .vdb-cart-qty .quantity-minus:hover,
#cart-contents .vdb-cart-qty .quantity-plus:hover {
    background: #383888;
    color: #fff;
}

#cart-contents .vdb-cart-qty .quantity-input {
    width: 48px;
    max-width: 48px !important;
    border: 0;
    border-left: 1px solid rgba(56, 56, 136, .18);
    border-right: 1px solid rgba(56, 56, 136, .18);
    border-radius: 0;
    text-align: center;
    height: 34px;
    background: #fff;
}

#cart-contents .vdb-cart-qty .quantity-input:focus {
    outline: 2px solid #f0c870;
    outline-offset: -2px;
}

/* « Mise à jour » : aligné en hauteur sur le groupe quantité. */
#cart-contents .vdb-cart-qty .refreshbutton {
    line-height: 34px;
    padding: 0 14px;
}

/* --------------------------------------------------------------------------
   2. HEADER DESKTOP — bouton « compte »
   Le bouton à droite de la navbar n'ouvre pas la navigation du site : il ouvre
   le dialog #tm-dialog, qui ne contient que le menu de compte (Mon compte,
   Connexion, Déconnexion). Le burger de YOOtheme y était donc trompeur — on le
   remplace par la silhouette de /images/header/user.svg, posée dans une
   pastille blanche qui lui donne le même poids que les pilules voisines
   (« Boutique en ligne », « Votre panier »).

   Ciblé sur [href="#tm-dialog"] seulement. Le sélecteur d'attribut est en
   correspondance exacte : il ne touche pas #tm-dialog-mobile, où le burger
   reste juste (le dialog mobile, lui, porte bien la navigation).

   Le pictogramme est peint en masque CSS et non en background-image : sa
   couleur est pilotée ici, le fill="#fff" du fichier SVG est ignoré (seul
   l'alpha est lu). Le fichier peut donc resservir ailleurs dans une autre
   teinte sans être dupliqué.

   Couleurs : pastille blanche + silhouette indigo #383888 au repos, pastille
   dorée #f0c870 au survol et dialog ouvert — l'accent du thème, déjà porté par
   « Boutique en ligne » et le bouton de retour en haut de page.
   -------------------------------------------------------------------------- */

/* La pastille. 38px = la hauteur des pilules de la navbar (line-height 33px +
   2px de bordure haut/bas), pour que les trois éléments s'alignent. */
.uk-navbar-toggle[href="#tm-dialog"] > [uk-navbar-toggle-icon] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #fff;
    /* Filet quasi invisible sur l'indigo, mais qui détache la pastille si le
       header se retrouve un jour transparent au-dessus d'une section claire. */
    box-shadow: inset 0 0 0 1px rgba(56, 56, 136, .2);
    transition: background-color .15s ease-in-out;
}

/* La silhouette, en pseudo-élément : la pastille porte déjà un fond, elle ne
   peut pas porter aussi le masque. */
.uk-navbar-toggle[href="#tm-dialog"] > [uk-navbar-toggle-icon]::before {
    content: "";
    width: 22px;
    height: 22px;
    background-color: #383888;
    -webkit-mask-image: url(../../../images/header/user.svg);
    mask-image: url(../../../images/header/user.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Survol et dialog ouvert. La pastille rend le bouton indépendant de la
   couleur de texte de la navbar : on ne peut plus compter sur le currentColor
   du thème, l'état est donc peint explicitement. */
.uk-navbar-toggle[href="#tm-dialog"]:hover > [uk-navbar-toggle-icon],
.uk-navbar-toggle[href="#tm-dialog"][aria-expanded="true"] > [uk-navbar-toggle-icon] {
    background-color: #f0c870;
    box-shadow: inset 0 0 0 1px rgba(56, 56, 136, .2);
}

/* UIkit injecte le <svg> du burger dans ce div au chargement : on le retire.
   La taille du parent étant fixée ci-dessus, le bouton ne se replie pas et le
   pictogramme est visible dès le premier rendu, sans attendre le JS.
   Sélecteur en descendant (et non en enfant direct) : si une version future de
   UIkit emballait son icône, le pire cas reste « le burger revient », jamais
   « les deux pictogrammes superposés ». */
.uk-navbar-toggle[href="#tm-dialog"] > [uk-navbar-toggle-icon] svg {
    display: none;
}


/* --------------------------------------------------------------------------
   3. HEADER DESKTOP — bouton « panier »
   Le module VM UIKit X (plugins/system/vmuikitx_override/html_override/
   mod_virtuemart_cart/default.php) rend le bouton ainsi :

       <a class="uk-button …" href="#cartmodal" uk-toggle>
         <span uk-icon="icon: cart" class="uk-margin-small-right"></span>
         Votre panier - <span class="total"> 0,00 € </span>
       </a>

   « Votre panier » et le tiret sont des nœuds de texte NUS : aucune balise ne
   les porte, on ne peut donc pas les cibler directement en CSS. On neutralise
   donc la taille de police sur le lien, puis on la restaure sur le seul enfant
   à garder lisible — le montant.

   Deux pièges, mesurés sur la page réelle, qu'un simple font-size:0 laissait :

   1. HAUTEUR. Sans texte à 13px pour la caler, la ligne se recalcule sur la
      seule icône (inline-block, line-height:0, alignée sur la ligne de base) :
      le bouton passait de 35px à 40px et l'icône se retrouvait 5px plus bas que
      le montant. Dans la navbar, la pilule panier ne s'alignait donc plus sur
      « Boutique en ligne ». D'où inline-flex + align-items:center : le centrage
      devient géométrique et ne dépend plus des métriques de la police.
      Mesures : 35px de haut et 0,00px d'écart icône/montant, comme l'origine.

   2. LETTER-SPACING. .uk-button porte letter-spacing:1.5px, et c'est une
      LONGUEUR : elle ne suit pas font-size:0. Les 15 caractères masqués
      occupaient donc encore ~22px de vide entre le caddie et le prix (30px
      mesurés au lieu de 8). On le remet à 0 sur le lien et on le redonne au
      seul montant, pour qu'il garde la typo des autres boutons du thème.

   Bonus du passage en flex : .total devient un élément flex, donc un bloc — les
   espaces qui traînent dans «  0,00 €  » sont rognés par le rendu de ligne. Le
   bouton retrouve un padding symétrique 19px / 19px sans aucune marge magique.

   Pourquoi pas ailleurs :
   - Pas de réglage back-office : com_vmuikitx n'expose que l'alignement et la
     taille du bouton (vm_cart_align / vm_cart_dropdown), pas son libellé.
   - Pas de surcharge de la traduction : COM_VIRTUEMART_CART_TITLE sert AUSSI
     de titre à la modale du panier et de titre de colonne dans le checkout
     One Page (default_left.php). La vider casserait ces deux écrans.
   - Pas de surcharge PHP du module : recopier 10 Ko de template du plugin pour
     retirer deux mots fige sa version et bloque ses correctifs futurs.

   Le texte reste dans le DOM : font-size:0 le retire de l'affichage, pas de
   l'arbre d'accessibilité. Le lecteur d'écran continue d'annoncer
   « Votre panier - 0,00 € », alors qu'une icône seule n'aurait plus de nom.

   Dégradation : si une version future de VM UIKit X change le href, la règle
   cesse simplement de s'appliquer et le libellé réapparaît — jamais de casse.
   -------------------------------------------------------------------------- */

.vmCartModule a.uk-button[href="#cartmodal"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    letter-spacing: 0;
}

/* 13px et 1.5px = les valeurs que theme.12.css donne à .uk-button-small et
   à .uk-button. On ne fait que les redonner au montant, seul contenu visible.
   À ajuster si le réglage de taille de VM UIKit X passe de « Small » à autre
   chose (Default = 12px / Large = 15px dans ce thème). */
.vmCartModule a.uk-button[href="#cartmodal"] > .total {
    font-size: 13px;
    letter-spacing: 1.5px;
}

/* Le pictogramme est un <svg> aux dimensions fixes : il ne dépend pas de la
   taille de police. On ne retouche que l'écart au montant, la marge de 10px du
   plugin ayant été posée pour un libellé qui n'est plus là. */
.vmCartModule a.uk-button[href="#cartmodal"] > [uk-icon] {
    margin-right: 8px !important;
}

/* ==========================================================================
   4. CARTES D'ACTUALITÉS — étiquette de rubrique « Actualités »
   ==========================================================================

   Portée : les grilles d'actualités de l'accueil (article 1) et de la page
   Actualités (article 14), repérées par la classe `vdb-actus` posée sur
   l'élément Grid dans le builder. Aucune autre grille du site n'est touchée.

   Pourquoi un pseudo-élément et pas un vrai bloc : en YOOtheme Pro 4.5,
   `grid_item` n'expose aucun emplacement « badge » — son champ Tags ne sert
   qu'au filtre de la grille et ne s'affiche pas. Le seul point d'accroche
   stable est donc la carte elle-même.

   Le style reprend exactement celui que le thème donne à .uk-label : Lato 600,
   10px, majuscules, interlettrage 1.5px, fond blanc, texte indigo #383888.
   C'est le couple le plus lisible des trois essayés — 10:1 de contraste, contre
   6,2:1 pour l'indigo sur le doré #f0c870, et 1,6:1 pour du blanc sur ce même
   doré, qui est à proscrire.

   Dégradation : si la classe est retirée de la grille, ou si la carte change
   de style et perd son .uk-card-media-top, la règle cesse simplement de
   s'appliquer — la carte redevient normale, jamais cassée.
   -------------------------------------------------------------------------- */

/* Le conteneur de l'image devient le repère de positionnement. L'étiquette se
   pose sur .uk-card-media-top et non sur .uk-inline-clip : ce dernier porte
   l'overflow:hidden qui rogne le zoom au survol, et y mettre la pastille la
   ferait bouger avec la photo.

   L'overflow:hidden ajouté ici a deux effets voulus, maintenant que l'étiquette
   est collée au bord : il retient l'ombre portée, qui déborderait sinon à
   gauche de la carte sur le fond de page, et il fait suivre à l'angle carré de
   l'étiquette l'arrondi de 20px de la carte. */
.vdb-actus .uk-card-media-top {
    position: relative;
    overflow: hidden;
}

.vdb-actus .uk-card-media-top::before {
    content: "Actualités";
    position: absolute;
    top: 16px;
    left: 0;
    z-index: 1;
    padding: 5px 12px;
    background: #fff;
    color: #383888;
    font-family: Lato, sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
    /* La carte entière est un <a> (panel_link) : la pastille ne doit jamais
       intercepter le clic qui mène à l'article. */
    pointer-events: none;
    /* L'ombre ne sert pas la lisibilité du texte, déjà assurée par l'aplat, mais
       le détourage de la pastille sur les photos claires (affiches sur fond
       crème), où le blanc se confondrait sinon avec l'image. */
    box-shadow: 0 2px 10px rgba(47, 48, 77, .25);
}

/* L'étiquette est calée sur le bord gauche : plus de retrait horizontal à
   régler, seule la hauteur bouge. En dessous de 640px les cartes passent pleine
   largeur et l'image grandit : on descend un peu pour garder la même
   respiration optique. */
@media (min-width: 640px) {
    .vdb-actus .uk-card-media-top::before {
        top: 20px;
    }
}

/* ==========================================================================
   5. RECETTE DU 2 OCTOBRE 2026 — corrections de rendu
   ==========================================================================

   Chaque bloc cite le point du cahier de recette qu'il corrige (identifiant
   section.point du cahier https://claude.ai/artifact/Cn4ZnGSrzhEaFhUD39zFmV).

   Les classes vdb-* sont posées dans le builder (champ « Classe » de
   l'élément, de la colonne ou de la section) par le script
   tmp/recette-corrections-2026-10-02/corrections_recette_vdb.py. Retirer la
   classe dans le builder annule la règle à cet endroit, sans rien casser.
   -------------------------------------------------------------------------- */

/* 5a. En-tête : l'enveloppe Contact n'était cliquable que sur son bord.
   Le bouton « Boutique » voisin (module 118, et 142 dans le menu mobile) est
   une mini-grille du builder, qui porte la marge négative standard des grilles
   (-40px) : son premier bloc débordait de 40px vers la gauche et recouvrait
   l'icône (mesuré : bloc de 794 à 1025px, icône de 794 à 814px). Un clic sur
   l'enveloppe tombait sur ce bloc. [entete.liens, contact.form] */
.tm-header .uk-navbar-item > .uk-grid,
.tm-header-mobile .uk-navbar-item > .uk-grid {
    margin-left: 0;
}

.tm-header .uk-navbar-item > .uk-grid > *,
.tm-header-mobile .uk-navbar-item > .uk-grid > * {
    padding-left: 0;
}

/* 5b. Rubrique en cours dans le menu : sur la barre indigo comme sur l'en-tête
   transparent, le thème la peint en blanc, exactement comme les autres
   entrées (theme.12.css : .uk-light … li.uk-active > a { color: #fff }).
   Doré de la charte + soulignement, pour qu'on la repère sans survol.
   [entete.actif] */
.tm-header .uk-navbar-nav > li.uk-active > a,
.tm-header .uk-light .uk-navbar-nav > li.uk-active > a,
.tm-header .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li.uk-active > a {
    color: #f0c870;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

/* 5c. Titres sur téléphone (< 640px). L'échelle du thème donne 46,8px au titre
   des bandeaux (heading-small) et 32,3px aux titres de section : « Maison des
   vins de Bourgueil » ou « Fête des vins du Val de Loire » tenaient sur trois
   lignes. Valeurs en px : le thème a une racine à 18px, des rem seraient
   trompeurs. Ordinateur et tablette inchangés.
   [charte.debord, legales.rm, actu.rm, mdv-bourgueil.rm, vignoble.rm] */
@media (max-width: 639px) {
    .uk-heading-small {
        font-size: 30px;
        line-height: 1.15;
    }

    h1,
    .uk-h1 {
        font-size: 26px;
        line-height: 1.2;
    }

    h2,
    .uk-h2 {
        font-size: 22px;
        line-height: 1.25;
    }

    h3,
    .uk-h3 {
        font-size: 20px;
        line-height: 1.3;
    }

    /* Chapô des billets et phrases d'accroche : 20px dans le thème. */
    .uk-text-lead {
        font-size: 17px;
        line-height: 1.5;
    }
}

/* 5d. Pages légales sur téléphone : texte courant à 16px (18px dans le thème).
   Classe vdb-texte-legal sur la section de texte des articles 4, 5, 6 et 18.
   [legales.rm] */
@media (max-width: 639px) {
    .vdb-texte-legal p,
    .vdb-texte-legal li {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* 5e. Grilles en carrousel horizontal sous 960px. Au lieu d'empiler 4 cuvées
   ou 3 actualités d'environ 600px chacune, on les fait défiler au doigt ; la
   carte suivante dépasse à droite pour montrer le geste. Classe
   vdb-slider-mobile sur l'élément Grid ou Grid Pro (accueil : boutique et
   actualités ; maison de Bourgueil : photos « L'esprit Chez Jean »).
   Ordinateur inchangé. [accueil.boutique, accueil.actus, accueil.rm,
   mdv-bourgueil.rm] */
@media (max-width: 959px) {
    .vdb-slider-mobile > [uk-grid] {
        flex-wrap: nowrap;
        /* Les grilles portent uk-flex-center : en ligne unique, le contenu qui
           déborde serait centré et la 1re carte coupée à gauche, hors de portée
           du défilement. */
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        margin-left: -16px;
        padding-bottom: 12px;
        scrollbar-width: thin;
    }

    .vdb-slider-mobile > [uk-grid] > * {
        flex: 0 0 82%;
        width: 82%;
        max-width: 82%;
        padding-left: 16px;
        margin-top: 0 !important;
        scroll-snap-align: start;
    }

    /* Photos de galerie dans ce carrousel : cadrage 3:4 homogène, sans quoi
       les vignettes 250 × 550 font plus de 800px de haut une fois élargies. */
    .vdb-photos-mobile .el-image {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        object-fit: cover;
    }
}

@media (min-width: 640px) and (max-width: 959px) {
    .vdb-slider-mobile > [uk-grid] > * {
        flex-basis: 45%;
        width: 45%;
        max-width: 45%;
    }
}

/* 5f. Vignerons de l'accueil sur téléphone : la diapositive active est
   désormais centrée (réglage slider_center du builder) et le portrait passe de
   450 × 703 à un cadre 4:5, cadré sur le haut, pour garder le nom et le
   bouton « Voir le détail » dans l'écran. flex: none est indispensable :
   l'image porte uk-flex-1 et ignorerait sinon sa hauteur.
   [accueil.vignerons, responsive.masque] */
@media (max-width: 639px) {
    .sillder-style__vignerons .el-image {
        flex: none;
        height: auto;
        aspect-ratio: 4 / 5;
        object-position: center 25%;
    }
}

/* 5g. Photos posées en fond d'une colonne vide (pages des maisons des vins).
   Sur téléphone, la colonne n'a pas de contenu : elle se réduit à 80px et la
   photo n'apparaît plus qu'en bandeau (l'enseigne « Maison des vins » coupée).
   Classe vdb-col-photo sur la colonne. [mdv-bourgueil.rm, mdv-langeais.rm] */
@media (max-width: 959px) {
    .vdb-col-photo .uk-background-cover {
        min-height: 320px;
    }
}

/* 5h. Montage de deux photos dans la section Langeais de la page « Les maisons
   des vins » : la première est remontée de 150px, la seconde en position
   absolue. Sur téléphone et tablette, elles recouvraient la fin du texte et le
   bouton. On les remet l'une sous l'autre. Le builder écrit ces positions en
   style en ligne, d'où !important. Classe vdb-collage-mobile sur les deux
   images. [maisons.rm] */
@media (max-width: 959px) {
    .vdb-collage-mobile {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }
}

/* 5i. « À lire aussi » des billets (Templates « Actualités - Détails » et
   « Vins et gastronomie - Détails ») : une seule carte sur téléphone.
   Classe vdb-un-seul-mobile sur la grille. [actu.rm] */
@media (max-width: 639px) {
    .vdb-un-seul-mobile > [uk-grid] > :nth-child(n+2) {
        display: none;
    }
}

/* 5j. Panier sur téléphone (< 640px). [panier.rm, tunnel.rm]
   - La colonne quantité ne faisait que la moitié de la ligne : le groupe
     [-][n][+] (130px) et « Mettre à jour » (150px) n'y tenaient pas, et le
     bouton passait dessous. Pleine largeur : les deux tiennent sur une ligne,
     le prix de la ligne passe dessous, à droite.
   - Totaux : chaque libellé était aligné à droite dans une demi-colonne, ce
     qui décalait la colonne des libellés. Libellés à gauche, montants à
     droite. */
@media (max-width: 639px) {
    #cart-contents .quantity.uk-width-1-2 {
        width: 100%;
    }

    #cart-contents .vdb-cart-qty {
        flex-wrap: nowrap;
    }

    /* Le prix de la ligne, passé dessous, restait dans une demi-colonne : pleine
       largeur, aligné à droite comme les totaux. */
    #cart-contents .quantity ~ .uk-text-right.uk-width-1-2 {
        width: 100%;
    }

    .product-subtotal > .price-type:not(.price-amount) {
        text-align: left;
    }
}

/* Bloc « Commande » : dans les sélecteurs « Commander / Connectez-vous » et
   « Invité / Compte », seule l'option active avait un fond (doré) ; l'autre
   moitié n'avait ni fond ni bordure, et le sélecteur paraissait coupé en deux.
   Un filet doré sur l'option inactive le fait lire comme un seul contrôle.
   On ne touche pas à .uk-button-primary, qui marque l'option active (cf. §1).
   [panier.rm] */
#loginbtns > .uk-button:not(.uk-button-primary),
.billto-shipto .uk-button-group > .uk-button:not(.uk-button-primary) {
    border: 1px solid #f0c870;
}

/* 5k. En-tête entre 1 200 et 1 399px. Le menu centré chevauchait le logo sous
   environ 1 260px de large (mesuré : -30px à 1 200, +10px à 1 280). En dessous de
   1 200px, l'en-tête mobile prend désormais le relais (style YOOtheme : bascule
   mobile passée de 960 à 1 200px). Entre 1 200 et 1 399px, le groupe centré
   (menu + « Boutique » + panier) est resserré : espacement des entrées 35 -> 15px,
   corps 18 -> 15px, écart entre les trois blocs 20 -> 12px. Mesuré dans une
   fenêtre de 1 280px : -59px d'écart logo/menu avant, +28px avec ces valeurs.
   Ce qui compte est la largeur du groupe : il est centré en position absolue.
   [entete.portable] */
@media (min-width: 1200px) and (max-width: 1399px) {
    .tm-header .uk-navbar-center {
        gap: 12px;
    }

    .tm-header .uk-navbar-nav {
        gap: 15px;
    }

    .tm-header .uk-navbar-nav > li > a {
        font-size: 15px;
        letter-spacing: .6px;
    }
}

/* ==========================================================================
   6. BRIEF DU 19 OCTOBRE 2026 — annuaire des vignerons, pont vers la boutique
   ==========================================================================

   Les classes vdb-* sont posées dans le builder (Templates « Vignerons - liste »
   et « Les vignerons - détails ») par le script
   tmp/brief-hassan-2026-10-19/brief_vignerons_vdb.py. Le comportement de la
   recherche est dans js/custom.js (§1).
   -------------------------------------------------------------------------- */

/* 6a. Barre de recherche de l'annuaire. Le champ de recherche du thème est un
   aplat indigo à 4 % : invisible sur la section grise (#f7f7f7). Fond blanc,
   bordure indigo légère, largeur de lecture, centré au-dessus du filtre. */
.vdb-annuaire-recherche.uk-search {
    display: block;
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.vdb-annuaire-recherche .uk-search-input,
.vdb-annuaire-recherche .uk-search-input:focus {
    background-color: #fff;
    border: 1px solid rgba(56, 56, 136, .25);
}

.vdb-annuaire-recherche .uk-search-input:focus {
    border-color: #383888;
}

.vdb-annuaire-statut {
    margin: 12px 0 0;
    text-align: center;
}

/* 6b. Carte écartée par la recherche. Le filtre par commune d'UIkit masque en
   style en ligne : les deux se cumulent sans se gêner. */
.js-filter > .vdb-out {
    display: none !important;
}

/* 6c. Nom des vignerons : sous le nom du domaine, dans les cartes de
   l'annuaire et en tête de la fiche vigneron. Indigo, graisse normale : le
   corps du thème est en lighter, un <strong> y serait presque invisible. */
.vdb-vignerons {
    color: #383888;
    font-weight: 400;
}

.el-content .vdb-vignerons {
    margin: 0 0 8px;
}