/* ==========================================================================
   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-fit: cover;
        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]
   Classe doublée depuis le 03/11/2026 : vmuikit.css de VM UIKit X, chargé
   APRÈS ce fichier sur toutes les pages, redéclare .uk-position-absolute
   { position: absolute !important }. À spécificité égale il gagnait : la
   seconde photo restait en position absolue et débordait sur le pied de page
   (capture de Hassan sur la prod). */
@media (max-width: 959px) {
    .vdb-collage-mobile.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;
}

/* ==========================================================================
   7. MODIFICATIONS RESTANTES DU 21 OCTOBRE 2026
   ==========================================================================

   Scripts et retours arrière : tmp/modifs-restantes-2026-10-21/.
   -------------------------------------------------------------------------- */

/* 7a. Annuaire des vignerons : recherche et menu déroulant des communes sur une
   même ligne, au-dessus de la grille (le JS de js/custom.js §1c construit la
   barre). Le bouton reprend la géométrie du champ de recherche du thème
   (theme.12.css : 50px de haut, 18px de marge intérieure, arrondi 4px) et le
   fond blanc / bordure indigo de §6a. La flèche tourne d'elle-même quand la
   liste est ouverte (règle UIkit sur [aria-expanded="true"]). */
.vdb-annuaire-grille > .el-nav {
    display: none; /* liste d'origine, remplacée par le menu dès que le JS passe */
}

.vdb-annuaire-outils {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
}

.vdb-annuaire-outils .vdb-annuaire-recherche.uk-search {
    flex: 1 1 320px;
    max-width: 560px;
    margin: 0;
}

.vdb-communes {
    position: relative; /* le panneau prend la largeur du bouton (100 %) */
    flex: 0 1 280px;
    min-width: 0;
}

.vdb-communes-bouton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    height: 50px;
    padding: 0 18px;
    border: 1px solid rgba(56, 56, 136, .25);
    border-radius: 4px;
    background: #fff;
    color: #383888;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease-in-out;
}

.vdb-communes-bouton:hover,
.vdb-communes-bouton:focus-visible,
.vdb-communes-bouton[aria-expanded="true"] {
    border-color: #383888;
    outline: none;
}

.vdb-communes-libelle {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vdb-communes-bouton .uk-drop-parent-icon {
    flex: none;
    margin-left: 0;
}

.vdb-communes-drop.uk-dropdown {
    width: 100%; /* UIkit 3.23 ignore « pos: bottom-justify » : mesuré 259px pour un bouton de 280px */
    left: 0 !important; /* UIkit posait left: 1px en ligne, d'où 1px de décalage */
    margin-left: 0;
    min-width: 0;
    padding: 8px 0;
}

.vdb-communes-nav > li > a {
    padding: 9px 18px;
    color: #4848a8;
}

.vdb-communes-nav > li > a:hover,
.vdb-communes-nav > li.uk-active > a {
    color: #383888;
    background: #f7f7f7;
}

.vdb-annuaire-grille > .vdb-annuaire-statut {
    margin: -28px 0 28px;
}

@media (max-width: 639px) {
    .vdb-annuaire-outils .vdb-annuaire-recherche.uk-search,
    .vdb-communes {
        flex-basis: 100%;
        max-width: none;
    }
}

/* ==========================================================================
   8. CHRONOLOGIE COMPLÈTE DE LA PAGE « L'HISTOIRE » (28 octobre 2026)
   ==========================================================================

   Section « Quelques repères » de l'art. 7 : les six repères restent visibles ;
   le bouton « En savoir plus » (élément HTML du Builder, uk-toggle) déplie la
   rangée masquée #chronologie-complete ; ses deux libellés basculent par le
   champ CSS de l'élément HTML (écrit dans la page) ; couleur par
   uk-text-secondary, flèche retournée par la feuille du thème. Le
   fonctionnement ne dépend donc PAS de ce fichier, servi
   sous une URL fixe (?4.5.33) que le navigateur garde en cache : le 28/10, une
   première version qui basculait les libellés ici affichait les deux à la fois
   chez qui avait l'ancienne feuille. Ici, seulement l'alignement du texte et
   de la flèche.
   Script : tmp/chronologie-2026-10-28/histoire_chronologie.py.
   -------------------------------------------------------------------------- */
.vdb-chrono-bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.vdb-chrono-bouton .uk-drop-parent-icon {
    margin-left: 0;
}

/* ==========================================================================
   9. CHANTIER PERFORMANCES ET ACCESSIBILITÉ (28 octobre 2026)
   ==========================================================================

   Font Awesome n'est plus chargé (YOOtheme, style 12 : « Load Font Awesome »
   décoché ; 100 Ko préchargés sur chaque page pour un seul usage). Seul usage
   relevé sur le site : l'œil du bouton « Afficher le mot de passe » des
   formulaires de Joomla (connexion, réinitialisation, profil). Il est redessiné
   ici (9a). Les contrastes insuffisants relevés par Lighthouse sont corrigés
   par la plus petite retouche de teinte qui atteint 4,5:1 (9b), choix de
   Hassan : couleurs seulement, liens non soulignés.
   Script et retours arrière : tmp/performances-2026-10-28/.
   -------------------------------------------------------------------------- */

/* 9a. Œil « Afficher / Masquer le mot de passe » (span.icon-eye, puis
   icon-eye-slash une fois le mot de passe affiché : le JS de Joomla réordonne
   les classes, d'où [class*=]). Glyphes U+F06E et U+F070 de la police
   fa-solid-900 livrée par Joomla, en masque SVG : même forme, même place.
   Font Awesome Free 6, icônes sous licence CC BY 4.0 (fontawesome.com). */
:root {
    --vdb-oeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 32Q227 33 179 56Q131 79 95 113Q60 146 37 181Q14 216 3 244Q-2 256 3 268Q14 296 37 331Q60 366 95 399Q131 433 179 456Q227 479 288 480Q349 479 397 456Q445 433 481 399Q516 366 539 331Q562 296 574 268Q579 256 574 244Q562 216 539 181Q516 146 481 113Q445 79 397 56Q349 33 288 32ZM144 256Q144 217 163 184Q182 151 216 131Q250 112 288 112Q326 112 360 131Q394 151 413 184Q432 217 432 256Q432 295 413 328Q394 361 360 381Q326 400 288 400Q250 400 216 381Q182 361 163 328Q144 295 144 256ZM288 192Q287 219 269 237Q251 255 224 256Q213 256 204 253Q194 251 192 260Q192 270 195 281Q207 320 240 339Q273 358 313 349Q352 337 371 304Q390 271 381 231Q372 200 348 181Q323 162 292 160Q283 162 285 172Q288 181 288 192Z'/%3E%3C/svg%3E");
    --vdb-oeil-barre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M39 5Q20 -7 5 9Q-7 28 9 43L601 507Q620 519 635 503Q647 484 631 469L526 387Q555 356 575 324Q595 293 606 268Q610 256 606 244Q594 216 571 181Q548 146 513 113Q477 79 429 56Q381 33 320 32Q269 33 226 49Q184 66 151 93L39 5ZM223 150Q263 113 320 112Q381 114 422 154Q462 195 464 256Q464 294 447 325L408 295Q421 265 413 231Q404 200 380 181Q355 162 324 160Q315 162 317 172Q320 181 320 192Q320 208 313 220L223 150ZM373 390Q348 400 320 400Q259 398 218 358Q178 317 176 256Q176 246 177 236L83 162Q49 208 35 244Q30 256 35 268Q46 296 69 331Q92 366 128 399Q163 433 211 456Q259 479 320 480Q392 478 446 448L373 390Z'/%3E%3C/svg%3E");
}

[class*="icon-eye"]::before {
    content: "";
    display: inline-block;
    width: 1.125em;
    height: 1em;
    vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: var(--vdb-oeil) center / contain no-repeat;
    mask: var(--vdb-oeil) center / contain no-repeat;
}

[class*="icon-eye-slash"]::before {
    width: 1.25em;
    -webkit-mask-image: var(--vdb-oeil-barre);
    mask-image: var(--vdb-oeil-barre);
}

/* 9b. Contrastes (WCAG AA, 4,5:1 pour le texte courant).
   - Gris « muted » du thème #acacb8 (2,2:1 sur blanc) -> #6e6e81 (4,7:1 sur
     blanc comme sur le gris #f7f7f7) : fil d'Ariane, dates et méta, onglets,
     pagination, menus déroulants (communes de l'annuaire). Mêmes sélecteurs
     que theme.12.css : actif, survol et fonds sombres gardent leur couleur.
     Si le gris est changé un jour dans le Customizer, retoucher ici aussi. */
.uk-text-meta,
.uk-text-meta > a,
.uk-comment-meta,
.uk-link-muted a,
.uk-link-toggle .uk-link-muted,
a.uk-link-muted,
.uk-breadcrumb > * > *,
.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before,
.uk-subnav > * > :first-child,
.uk-subnav-pill > * > :first-child,
.uk-pagination > * > *,
.uk-dropdown-nav > li > a {
    color: #6e6e81;
}

/*     .uk-text-muted porte !important dans UIkit : même chose ici. Sur fond
     sombre, .uk-light .uk-text-muted (plus précis, !important lui aussi)
     garde sa couleur. */
.uk-text-muted {
    color: #6e6e81 !important;
}

/*   - Liens #b3630b (4,46:1 sur blanc) -> #b0610b (4,6:1), à peine visible. */
.uk-link,
a {
    color: #b0610b;
}

/*   - Prix des cartes produit (boutique, accueil, « Vous aimerez aussi ») :
     doré #b48213 (3,2:1 sur le gris des cartes) -> #92690f (4,6:1). Le reste
     des .uk-text-primary garde le doré du thème. */
.rm-product-card .el-meta.uk-text-primary {
    color: #92690f !important;
}

/*   - Adresse du bas de page : blanc à 50 % sur indigo (3,5:1) -> 70 % (5,2:1).
     !important comme la règle d'UIkit (.uk-light .uk-text-muted), que l'id
     l'emporte. */
#footer-bottom .uk-text-muted {
    color: rgba(255, 255, 255, .7) !important;
}

/*   - Filtre de la boutique, fourchette de prix : indigo à 70 % d'opacité
     (4:1) -> 80 % (4,9:1). filtre.css du module se charge après ce fichier :
     sélecteur plus précis que le sien (.vdb-price-label). */
.vdb-group-title .vdb-price-label {
    opacity: .8;
}

/* 9c. Héros à 40 % de la hauteur d'écran (Builder : « Height viewport 40 »,
   toutes les pages sauf l'accueil). UIkit pose cette hauteur en JS
   (min-height: max(0px, 40vh), mesuré le 28/10 sur 8 pages, téléphone et
   bureau) : sur un téléphone lent, la page s'affiche d'abord avec un héros
   plus bas, puis tout le contenu descend d'un coup (CLS 0,16 à 0,24 mesuré par
   Lighthouse). La même hauteur est posée dès le premier affichage. Ne vaut
   que pour cette valeur exacte de l'attribut (héros en haut de page, sous
   l'en-tête transparent : offset-top ne retire rien). */
[uk-height-viewport="offset-top: true; offset-bottom: 60;"] {
    min-height: 40vh;
}

/* ==========================================================================
   10. RETOURS DU CHEF DE PROJET AVANT LA MISE EN LIGNE (29 octobre 2026)
   ==========================================================================

   Captures annotées transmises par Hassan le jour de la mise en ligne.
   Script, sauvegardes et retours arrière : tmp/retours-manager-2026-10-29/.
   -------------------------------------------------------------------------- */

/* 10a. Texte des boutons à 13px. Le style 12 donne 10px au bouton de taille
   normale (pilule de 50px) et 13px au bouton « small » (35px) : deux boutons
   voisins semblaient de tailles différentes, et le texte des boutons normaux
   était « écrit très petit » (fiche vigneron, Les terroirs, Les types de vin,
   fiche produit). 13px = la valeur de .uk-button-small dans theme.12.css.
   Même spécificité que la règle du thème : un sélecteur plus précis garde sa
   valeur (bouton panier de l'en-tête §3, fenêtre de l'âge). Les boutons
   « large » (12px) et « texte » (10px) passent aussi à 13px. */
.uk-button {
    font-size: 13px;
}

/* 10b. Boutons « contour » sur fond clair. uk-button-default porte une
   bordure blanche (invisible sur une carte blanche, CLAUDE.md piège 11) :
   « Appeler le domaine » et « Site du domaine » de la fiche vigneron
   (Template « Les vignerons - détails », carte Infos pratiques) n'étaient
   qu'un mot flottant. Classe posée sur l'élément Bouton dans le Builder. */
.vdb-boutons-contour .uk-button-default {
    border-color: #383888;
}

.vdb-boutons-contour .uk-button-default:hover,
.vdb-boutons-contour .uk-button-default:focus {
    background-color: #383888;
    border-color: #383888;
    color: #fff;
}

/* 10c. (Retiré l'après-midi du 29/10.) « ID du client » et « Groupe de
   clients » de la page compte étaient masqués ici ; la surcharge
   html/com_virtuemart/user/edit_shopper.php ne les affiche plus (§12). */

/* 10d. Images du panier à la même hauteur. Le gabarit du One Page affichait
   l'image d'origine de chaque cuvée à la largeur de sa colonne : la hauteur
   suivait les proportions de chaque photo (1581 x 2560, 1630 x 5014…), d'où
   « 3 tailles d'images différentes » pour trois lignes. La surcharge
   default_left.php sert maintenant la vignette de la boutique (118 x 200) ;
   ici, une hauteur commune, la bouteille entière dans le cadre. */
#cart-contents .product img.uk-thumbnail-mini {
    width: auto;
    max-width: 100%;
    height: 160px;
    object-fit: contain;
}

/* Téléphone et tablette : colonne de 64px (réglage mobile_imgwidth du One
   Page), image à gauche du nom de la cuvée. */
#cart-contents .product .uk-hidden\@l img.uk-thumbnail-mini {
    height: 96px;
}

/* 10e. Boutons du Builder sur téléphone (< 640px). À 13px, « Les cuvées
   riches et structurées » (Les terroirs, Les types de vin) ne tenait plus
   dans un écran de 360px : le texte passait à la ligne et la pilule doublait
   de hauteur (98px, une ligne de 48px par ligne de texte, mesuré le 29/10).
   Marges intérieures 28 -> 20px (le libellé tient alors sur une ligne dès
   360px) et hauteur tenue à 50px, comme une pilule d'une ligne, même si un
   libellé plus long passe sur deux lignes (2 x 16px + 2 x 8px + bordure).
   Taille normale seulement ; les boutons de VirtueMart n'ont pas .el-content.
   Depuis l'après-midi du 29/10 (§11), plus aucun bouton de contenu n'est en
   taille normale : règle gardée pour un bouton normal posé un jour ; un
   bouton small trop long pour l'écran est traité en §11a. */
@media (max-width: 639px) {
    .el-content.uk-button:not(.uk-button-small):not(.uk-button-large):not(.uk-button-text):not(.uk-button-link) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 50px;
        padding: 8px 20px;
        line-height: 16px;
    }
}

/* 10f. Fenêtre « Suggestion de produits voisins » (après un ajout au panier,
   gabarit padded_relatedproducts.php de VM UIKit X). Dès 1 200px d'écran,
   chaque suggestion prend un tiers d'une fenêtre de 580px (150px utiles) :
   « Ajouter au panier » passait sur deux lignes, serré contre les bords.
   Une demi-largeur suffit au bouton (222px mesurés). La roue qui tournait
   sans fin après cet ajout est corrigée dans js/custom.js §5. */
@media (min-width: 1200px) {
    #fancybox-content .uk-grid > .uk-width-1-3\@l {
        width: 50%;
    }
}

/* ==========================================================================
   11. BOUTONS UNIFORMES ET LIBELLÉ « METTRE AU PANIER » (29 octobre 2026, après-midi)
   ==========================================================================

   Demande de Hassan : des boutons uniformes sur tout le site, à la taille du
   bouton « Boutique » de l'en-tête (uk-button-small : 35px de haut, texte 13px,
   graisse 600, interlettrage 1,5px, marges intérieures 0 18px, mesuré le
   29/10). Tout est réglé hors de cette feuille : taille Small et style doré
   (primary) pour l'action principale dans le Builder (layouts d'articles et
   Templates), argument button_size de la source product_addtocart pour le
   bouton principal de la fiche produit, classe uk-button-small dans RSForm
   pour « Envoyer » (Contact). Le libellé « Mettre au panier » vient de l'override
   de langue (COM_VIRTUEMART_CART_ADD_TO). Scripts et retours arrière :
   tmp/boutons-uniformes-2026-10-29/.
   §10a reste utile (13px pour les boutons de taille normale restants : page
   compte, panier) ; §10e ne vise plus aucun bouton de contenu.
   -------------------------------------------------------------------------- */

/* 11a. Bouton small du Builder sur téléphone (< 640px). Un libellé trop long
   pour l'écran passe sur deux lignes : avec la hauteur de ligne du thème
   (33px), la pilule doublait de hauteur. Hauteur tenue à 35px sur une ligne
   (16px + 2 x 6px + bordure, porté à 35px par min-height), 46px sur deux.
   Ne vise que les boutons des éléments du Builder (.el-content, .el-link des
   cartes), pas ceux du panier ni de VirtueMart. */
@media (max-width: 639px) {
    .el-content.uk-button-small,
    .el-link.uk-button-small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 35px;
        padding: 6px 18px;
        line-height: 16px;
    }
}

/* 11b. Fenêtre d'ajout au panier (gabarit cart/padded.php de VM UIKit X, qui
   ne se surcharge pas dans le thème, CLAUDE.md piège 5) : « Poursuivre vos
   achats » et « Voir le panier » étaient en taille normale (50px), le texte
   couleur de lien (classe uk-link) sur le doré. Mesures de uk-button-small et
   texte indigo des autres boutons dorés. */
#fancybox-content #closefancy,
#fancybox-content .uk-special-cartclose,
#fancybox-content .uk-special-addtocart {
    padding: 0 18px;
    line-height: 33px;
    color: #383888;
}

/* ==========================================================================
   12. PAGE « MON COMPTE » ET PANIER (29 octobre 2026, après-midi)
   ==========================================================================

   Demandes de Hassan : page compte réorganisée (/se-connecter, /mon-compte),
   panier à la manière de celui de Robert et Marcel, adapté à la charte
   (panneaux gris pleins au lieu de cartes blanches bordées), boutons à la
   taille du bouton « Boutique » de l'en-tête (uk-button-small : 35px, 13px).
   Gabarits : html/com_virtuemart/user/ (edit, edit_login, edit_shopper) et
   html/plg_content_vmuikitx_onepage/default.php. Données (menu du compte,
   départements) et retours arrière : tmp/compte-panier-2026-10-29/.
   -------------------------------------------------------------------------- */

/* 12a. Bouton seul en contour indigo, hors élément Bouton du Builder (qui a
   .vdb-boutons-contour, §10b) : « Se déconnecter », « Poursuivre vos achats »,
   adresse de livraison et notes du panier. */
.uk-button-default.vdb-bouton-contour,
#right_div #shiptobutton,
#right_div #commentbutton {
    border-color: #383888;
    color: #383888;
}

.uk-button-default.vdb-bouton-contour:hover,
.uk-button-default.vdb-bouton-contour:focus,
#right_div #shiptobutton:hover,
#right_div #commentbutton:hover {
    background-color: #383888;
    border-color: #383888;
    color: #fff;
}

/* 12b. Page compte. Panneaux gris (#f7f7f7, le « muted » des sections du
   thème), champs blancs dessus : sur blanc, les champs du thème sont gris. */
.vdb-compte-titre {
    margin-bottom: 30px;
}

.vdb-compte-carte {
    background: #f7f7f7;
    border-radius: 20px;
    padding: 30px;
}

@media (min-width: 960px) {
    .vdb-compte-carte {
        padding: 40px;
    }
}

.vdb-compte-carte > :first-child,
.vdb-compte-carte .uk-card-title {
    margin-top: 0;
}

.vdb-compte-carte .uk-input,
.vdb-compte-carte .uk-select,
.vdb-compte-carte .uk-textarea {
    background-color: #fff;
}

/* Pays, Département, Civilité : toute la largeur de leur case (VirtueMart
   leur laisse une largeur automatique). */
.vdb-compte-carte .uk-select {
    width: 100%;
}

.vdb-compte-aide {
    color: #6e6e81;
}

.vdb-compte-souvenir {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 15px 0 0;
}

.vdb-compte-carte-actions {
    gap: 10px 20px;
    margin-top: 25px;
    font-size: 14px;
}

.vdb-compte-soustitre {
    margin-top: 70px;
}

/* Client connecté : « Bonjour … », Mes commandes, Se déconnecter. */
.vdb-compte-bandeau {
    gap: 15px 30px;
    margin-bottom: 40px;
    padding: 20px 30px;
    border-radius: 20px;
    background: #f7f7f7;
}

.vdb-compte-bandeau-actions {
    gap: 10px;
}

/* Bouton d'envoi sous le formulaire (il flottait en haut à droite). */
.vdb-compte-actions {
    gap: 15px 25px;
    margin-top: 30px;
}

.vdb-compte-annuler,
.vdb-compte-obligatoire {
    font-size: 14px;
}

.vdb-compte-obligatoire {
    margin-left: auto;
    color: #6e6e81;
}

/* Champs sur deux colonnes dans chaque panneau dès 640px : Prénom / Nom,
   Code postal / Ville, Pays / Département… Grille de 6 : un champ en prend 3,
   les adresses et l'e-mail toute la ligne, Civilité, Prénom et Nom un tiers,
   Code postal un tiers et Ville deux. Le libellé de chaque champ porte son
   nom VirtueMart en classe (gabarits d'origine). Tout ce qui n'est pas un
   champ (adresses de livraison du client connecté, captcha) : toute la ligne. */
@media (min-width: 640px) {
    .vdb-compte-carte .user-details {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        column-gap: 20px;
    }

    .vdb-compte-carte .user-details > * {
        grid-column: 1 / -1;
    }

    .vdb-compte-carte .user-details > .uk-margin {
        grid-column: span 3;
        margin: 0 0 20px;
    }

    .vdb-compte-carte .user-details > .uk-margin:has(> .email, > .company, > .address_1, > .address_2) {
        grid-column: 1 / -1;
    }

    .vdb-compte-carte .user-details > .uk-margin:has(> .title, > .first_name, > .last_name, > .zip) {
        grid-column: span 2;
    }

    .vdb-compte-carte .user-details > .uk-margin:has(> .city) {
        grid-column: span 4;
    }
}

/* 12c. Panier : fil d'Ariane et « Poursuivre vos achats » sur une ligne. */
.vdb-panier-haut {
    gap: 15px 30px;
    margin-bottom: 40px;
}

.vdb-panier-fil > nav {
    margin-bottom: 0;
}

/* 12d. Panier : panneaux gris pleins au lieu des cartes blanches bordées
   (livraison, paiement, code chèque, mentions, colonne « Commande »), champs
   blancs dessus. */
#cart-contents .uk-card-default {
    border-color: transparent;
    background: #f7f7f7;
    box-shadow: none;
}

#cart-contents .uk-card-default .uk-input,
#cart-contents .uk-card-default .uk-select,
#cart-contents .uk-card-default .uk-textarea {
    background-color: #fff;
}

/* 12e. Onglets « Commander / Se connecter » et « Invité / Compte » : à la
   taille du bouton « Boutique ». « Connectez-vous » passait sur deux lignes
   (13px + 2 x 28px de marge dans 195px), la pilule montait à 98px. Libellé
   raccourci en « Se connecter » (override de langue) et marges réduites. */
#right_div .uk-button-group > .uk-button {
    padding: 0 10px;
    line-height: 33px;
    white-space: nowrap;
}

/* 12f. Les autres boutons de la colonne « Commande » à la même taille :
   adresse de livraison, notes, « Confirmer la commande » (uk-button-large). */
#right_div #shiptobutton,
#right_div #commentbutton,
#right_div .uk-button-large {
    padding: 0 18px;
    font-size: 13px;
    line-height: 33px;
}

/* Sur téléphone, « Ajouter une adresse de livraison » ne tient pas sur une
   ligne de 288px : deux lignes de 16px dans une pilule de 50px plutôt qu'un
   texte coupé (même parti que §10e). */
@media (max-width: 639px) {
    #right_div #shiptobutton,
    #right_div #commentbutton {
        padding: 9px 18px;
        line-height: 16px;
        white-space: normal;
    }
}

/* 12g. « Mettre à jour » et le groupe - / + d'une ligne du panier : jamais
   tassés (le groupe se réduisait à 61px, icônes à 0px), ni sur deux lignes ;
   le bouton passe sous la quantité s'il manque de place. Sur téléphone,
   la ligne et la quantité ont désormais toute la largeur (default_left.php). */
#cart-contents .vdb-cart-qty .uk-button-group,
#cart-contents .vdb-cart-qty .refreshbutton {
    flex: none;
    white-space: nowrap;
}

/* Ligne du panier sur toute la largeur sur téléphone : vm-ltr-site.css de
   VirtueMart met div.product à 49 % sous 480px (min. 220px, flottant),
   règle pensée pour les grilles de produits, pas pour le panier. */
#cart-contents div.product {
    float: none;
    width: 100%;
    min-width: 0;
}

/* 12h. Créneaux du Click & Collect (plugin vmshipment/clickandcollect,
   boutons .cc-slot) : contour indigo comme les pilules du panier de Robert
   et Marcel, créneau choisi en indigo plein (le plugin bascule
   uk-button-default / uk-button-primary au clic). Les créneaux portent un
   style="margin:2px" posé par le plugin, et leur conteneur display:block :
   seul !important les remplace sans modifier le plugin. */
#cart-contents #cc_slots {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

#cart-contents .cc-slot {
    margin: 0 !important;
    padding: 0 14px;
}

#cart-contents .cc-slot.uk-button-default {
    border-color: #383888;
    background-color: #fff;
    color: #383888;
}

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

/* 12i. Logos des cartes acceptées sous « Carte Bancaire » (paramètre
   payment_logos du moyen de paiement CAWL, images/virtuemart/payment/,
   fichiers 120 x 80 pour les écrans haute densité). Règle valable hors du
   panier : le nom du moyen de paiement enregistré avec la commande contient
   les logos (page « Voir la commande »). Les mails les retirent (strip_tags). */
.vmCartPaymentLogo img {
    width: auto;
    height: 30px;
    border-radius: 4px;
    vertical-align: middle;
}

/* Le plugin rend les logos AVANT le nom (« Carte » / « Bancaire » passait
   sur deux lignes à côté d'eux) : nom et mention [TEST] d'abord, saut de
   ligne (pseudo-élément pleine largeur), logos dessous. */
#cart-contents #paymentdiv .vmpayment {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: calc(100% - 30px);
    vertical-align: top;
}

#cart-contents #paymentdiv .vmpayment_name {
    order: 1;
}

#cart-contents #paymentdiv .vmpayment > :not(.vmCartPaymentLogo):not(.vmpayment_name) {
    order: 2;
}

#cart-contents #paymentdiv .vmpayment::after {
    content: "";
    flex-basis: 100%;
    order: 3;
}

#cart-contents #paymentdiv .vmCartPaymentLogo {
    order: 4;
}

/* 12j. Panier, bloc « Modifier le client » (surcharge
   default_shopperform.php, visible seulement de la boutique) : panneau gris
   de la page compte (.vdb-compte-carte, §12b), champ et bouton sur une ligne
   dans chaque colonne. */
.vdb-panier-client {
    margin-bottom: 40px;
}

.vdb-panier-client-ligne {
    gap: 10px;
}

.vdb-panier-client-ligne > .uk-input,
.vdb-panier-client-ligne > .uk-select {
    flex: 1;
    min-width: 0;
}

.vdb-panier-client-ligne > .uk-button {
    flex: none;
}

/* Téléphone : le champ prend la ligne, le bouton passe dessous. */
@media (max-width: 639px) {
    .vdb-panier-client-ligne {
        flex-wrap: wrap;
    }

    .vdb-panier-client-ligne > .uk-input,
    .vdb-panier-client-ligne > .uk-select {
        flex-basis: 100%;
    }
}

/* ==========================================================================
   13. RETOURS DU 30 OCTOBRE 2026 — panier
   ==========================================================================

   Captures de la cheffe de projet (préprod). Scripts et retours arrière :
   tmp/retours-2026-10-30/. Le JavaScript qui va avec : js/custom.js §6 et §7.
   -------------------------------------------------------------------------- */

/* 13a. Panier, colonnes côte à côte (960px et plus) : défilement cohérent.
   Demande : pendant qu'on fait défiler, que les deux colonnes restent en
   face l'une de l'autre et que « Confirmer la commande » soit toujours
   visible, du haut de la page jusqu'au récapitulatif des prix.
   - La colonne la plus courte suit le défilement (js/custom.js §7 lui pose
     .vdb-suit) : la colonne « Commande » le plus souvent (son panneau
     #otherpay_buttons, la colonne restant étirée pour le trait de séparation),
     celle du panier quand elle est la plus courte (#leftdiv, alors calée en
     haut de la grille). --vdb-suit-haut cale le repère de la colonne qui
     suit (bas de « Confirmer », ou bas du récapitulatif des prix) sur la
     ligne où « Confirmer » se tient quand son bloc est collé en bas de
     l'écran : le bouton ne bouge plus, de l'arrivée sur la page jusqu'à ce
     qu'il soit en face de « Total TTC ». --vdb-suit-bas, marge sous le
     panneau, règle cette fin de course (bas du bouton = bas du
     récapitulatif).
   - Total TTC, CGV et « Confirmer la commande » (.checkout-button-top, gabarit
     default_shopper.php) restent collés en bas de l'écran tant que leur place
     est plus bas : les champs du formulaire défilent derrière. Leur enveloppe
     #other-things (206px, avec « Notes et demandes spéciales ») passe en
     display: contents pour que le bloc puisse glisser dans tout le
     formulaire ; le One Page la masque et la réaffiche (onglet « Se
     connecter ») par slideUp / slideDown, testé. Ombre portée seulement
     quand le bloc est collé (.vdb-colle, posée par js/custom.js §7). */
@media (min-width: 960px) {
    #cart-contents > #right_div.vdb-suit > #otherpay_buttons,
    #cart-contents > #leftdiv.vdb-suit {
        position: sticky;
        top: var(--vdb-suit-haut, 100px);
    }

    #cart-contents > #right_div > #otherpay_buttons {
        margin-bottom: var(--vdb-suit-bas, 0px);
    }

    #cart-contents > #leftdiv.vdb-suit {
        align-self: flex-start;
    }

    #right_div #other-things {
        display: contents;
    }

    #right_div .checkout-button-top {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin-top: 10px;
        padding-bottom: 15px;
        background-color: #f7f7f7;
    }

    #right_div .checkout-button-top.vdb-colle {
        box-shadow: 0 -14px 14px -12px rgba(56, 56, 136, 0.25);
    }
}

/* 13b. Fenêtre « Votre panier » du bouton panier de l'en-tête (module
   mod_virtuemart_cart, gabarit de VM UIKit X). Boutons à la taille du bouton
   « Boutique » (uk-button-small : 35px, marges 0 18px, texte 13px par §10a),
   « Fermer » en contour indigo, « Voir le panier » doré. VM UIKit X ajoute
   uk-button-primary à tous les boutons du module après un ajout au panier :
   d'où la double classe sur « Fermer ». */
#cartmodal .uk-modal-footer .uk-button {
    padding: 0 18px;
    line-height: 33px;
}

#cartmodal .uk-modal-footer .uk-button.uk-modal-close {
    background-color: transparent;
    border-color: #383888;
    color: #383888;
}

#cartmodal .uk-modal-footer .uk-button.uk-modal-close:hover,
#cartmodal .uk-modal-footer .uk-button.uk-modal-close:focus {
    background-color: #383888;
    color: #fff;
}

/* Vignettes des cuvées à la même hauteur (même parti que §10d au panier). */
#cartmodal .vm_cart_products img {
    width: auto;
    max-width: 100%;
    height: 120px;
    object-fit: contain;
}

/* 13c. Écart entre « Ajouter une adresse de livraison » et « Notes et
   demandes spéciales » (colonne « Commande » du panier), demandé par Hassan
   le 30/10 : 15px à toutes les largeurs. Dès 960px, l'enveloppe #other-things
   est en display: contents (§13a) et sa marge (10px) avait disparu : les deux
   boutons se touchaient. Sur téléphone, cette marge fusionne avec celle-ci. */
#right_div #other-things > .uk-width-1-1:first-child {
    margin-top: 15px;
}

/* ==========================================================================
   14. RETOURS SUR TÉLÉPHONE APRÈS LA MISE EN LIGNE (3 novembre 2026)
   Captures de Hassan prises sur vinbourgueil.com (iPhone, 393px de large).
   Tout est ici et dans js/custom.js §8 : rien à refaire dans le Builder,
   rien en base. Le montage photo de la section Langeais est corrigé au §5h.
   ========================================================================== */

/* 14a. Cartes dorées (uk-card-primary ; mêmes règles pour les tuiles et
   sections dorées) : le titre en « tertiary » (blanc) était illisible sur le
   doré (1,5:1) : « Visitez nos maisons des vins » (accueil), « La Maison des
   Vins de Bourgueil / de Langeais » (pages des maisons). Indigo (6,5:1),
   comme le titre « Chez Jean ». Le bouton doré « Langeais » de l'accueil se
   confondait avec la carte : contour indigo, comme §12a. */
.uk-card-primary .uk-text-tertiary,
.uk-tile-primary .uk-text-tertiary,
.uk-section-primary .uk-text-tertiary {
    color: #383888;
}

.uk-card-primary .uk-button-primary,
.uk-tile-primary .uk-button-primary,
.uk-section-primary .uk-button-primary {
    background-color: transparent;
    border-color: #383888;
    color: #383888;
}

.uk-card-primary .uk-button-primary:hover,
.uk-card-primary .uk-button-primary:focus,
.uk-tile-primary .uk-button-primary:hover,
.uk-tile-primary .uk-button-primary:focus,
.uk-section-primary .uk-button-primary:hover,
.uk-section-primary .uk-button-primary:focus {
    background-color: #383888;
    border-color: #383888;
    color: #fff;
}

/* 14b. Titres en « warning » sur fond indigo (Maison des vins de Bourgueil,
   section « Un lieu de partage » : Dégustation de vins, Produits du
   terroir…). Le doré foncé du thème (#9e7f05) n'y faisait que 2:1 ; le doré
   clair des pictogrammes voisins, #f0c870, fait 4,8:1. !important comme la
   règle du thème. */
.uk-section-secondary .uk-text-warning,
.uk-tile-secondary .uk-text-warning,
.uk-card-secondary .uk-text-warning,
.uk-light .uk-text-warning {
    color: #f0c870 !important;
}

/* 14c. Photo posée en fond d'une colonne sans contenu (accueil, photo de la
   boutique à côté de « Visitez nos maisons des vins ») : sous 960px, la
   colonne se réduisait à 80px et la photo à un bandeau coupé. 240px. Les
   colonnes vdb-col-photo des pages des maisons gardent leurs 320px (§5g) :
   :where() laisse ce sélecteur sans poids. */
@media (max-width: 959px) {
    :where(.uk-grid-item-match > .uk-flex > .uk-tile.uk-background-cover:not(:has(*))) {
        min-height: 240px;
    }
}

/* 14d. Onglets « En direct d'Instagram / Avis… » du bas de l'accueil.
   - Les bulles décoratives du fond de section (en bas à droite) tombaient
     sur les onglets. Masquées sous 960px, comme celles de la section « Nos
     vignerons », que le Builder n'affiche qu'à partir de 960px.
   - Le bloc prenait la hauteur du plus haut des trois widgets Elfsight
     (réglage « hauteur égale » du Builder, mesuré à 831px) : sous le flux
     Instagram (550px) restaient 280px de blanc avant les onglets. Sur
     téléphone, chaque onglet garde sa hauteur. UIkit pose cette hauteur en
     style en ligne (min-height), d'où !important. */
@media (max-width: 959px) {
    .uk-section.uk-background-bottom-right:has(.uk-switcher) {
        background-image: none !important;
    }
}

@media (max-width: 639px) {
    .uk-switcher[uk-height-match] > * {
        min-height: 0 !important;
    }
}

/* 14e. Texte justifié sur téléphone (section Langeais des maisons des vins,
   page Actualités) : sur 40 caractères par ligne, la justification creusait
   de grands blancs entre les mots. Aligné à gauche sous 640px ; justifié
   au-delà, comme dans le Builder. */
@media (max-width: 639px) {
    .uk-text-justify {
        text-align: left !important;
    }
}

/* 14f. Fenêtre d'ajout au panier (fancybox de VirtueMart). Sur téléphone, le
   contenu prenait la largeur de l'écran et fancybox lui ajoutait ses deux
   marges de 10px (jquery.fancybox-1.3.4.css) : 433px pour 393, « Voir le
   panier » et le titre coupés à droite. Fenêtre calée sur l'écran. La feuille
   de fancybox, chargée après ce fichier, impose width: auto !important sur
   #fancybox-wrap : sélecteur plus précis (body). Le script de fancybox écrit
   left et width en style en ligne, d'où !important. */
@media (max-width: 639px) {
    body #fancybox-wrap {
        left: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    body #fancybox-outer {
        box-sizing: border-box;
    }

    body #fancybox-content {
        width: auto !important;
    }

    /* Croix de fermeture : posée à 15px hors de la fenêtre (top/right -15px),
       elle sortait de l'écran (398px de page pour 393). Dans le coin. */
    body #fancybox-close {
        top: 0;
        right: 0;
    }

    #fancybox-content .uk-panel > .uk-h4:first-child {
        font-size: 16px;
        line-height: 1.4;
    }

    #fancybox-content #closefancy,
    #fancybox-content .uk-special-cartclose {
        width: 100%;
        margin-bottom: 10px;
    }
}

/*     « Poursuivre vos achats » en contour indigo, « Voir le panier » reste
     doré : une seule action dorée, comme dans la fenêtre « Votre panier »
     de l'en-tête (§13b). */
#fancybox-content #closefancy,
#fancybox-content .uk-special-cartclose {
    background-color: transparent;
    border-color: #383888;
}

#fancybox-content #closefancy:hover,
#fancybox-content .uk-special-cartclose:hover {
    background-color: #383888;
    color: #fff;
}

/* 14g. Panier sur téléphone, récapitulatif des prix. §5j alignait à gauche
   les libellés des seules lignes .product-subtotal : « TVA » et « Total TTC »
   (autres lignes du gabarit default_prices.php du One Page) restaient alignés
   à droite dans leur demi-colonne, et « Coût total des produits » passait
   sur deux lignes. Libellé à gauche sur toute la largeur restante, montant à
   droite à sa largeur. */
@media (max-width: 639px) {
    .price-summary .uk-grid > .price-type:not(.price-amount) {
        flex: 1 1 0;
        width: auto;
        text-align: left;
    }

    .price-summary .uk-grid > .price-amount {
        flex: none;
        width: auto;
    }
}

/* 14h. Bouton « Retour en haut » (élément du pied de page, rendu fixe en bas
   à droite par son CSS d'élément dans le Builder). Il recouvrait le haut des
   pages (vidéo de l'accueil) et, au panier, les montants et « Confirmer la
   commande ». js/custom.js §8 lui donne vdb-haut-page, et
   vdb-haut-page--visible une fois descendu de trois quarts d'écran. Jamais
   affiché au panier (#cart-contents). Sans JavaScript, rien ne change. */
.vdb-haut-page {
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
}

.vdb-haut-page.vdb-haut-page--visible {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease;
}

body:has(#cart-contents) .vdb-haut-page {
    display: none;
}

/* 14i. Panier, ligne d'une cuvée : « Mettre à jour » 10px plus bas que le
   groupe - / +. theme.12.css donne à tout .uk-button-group une marge basse
   de 19px !important (compatibilité Bootstrap du thème) : centré dans la
   ligne avec sa marge, le groupe remontait, le bouton restait au milieu. */
#cart-contents .vdb-cart-qty .uk-button-group {
    margin-bottom: 0 !important;
}

/* 14j. Panier sur téléphone, « Code chèque boutique » : le champ prend la
   largeur de la carte, « Enregistrer » passait dessous, collé au champ et
   centré. 10px d'écart et bouton sur toute la largeur, comme le champ (même
   chose pour « Supprimer », qui le remplace quand un code est appliqué).
   vm-ltr-site.css (chargé après ce fichier) décale span.details-button de
   10px à gauche : marge retirée. */
@media (max-width: 639px) {
    #coupon_code {
        width: 100%;
    }

    #cart-contents .details-button,
    #cart-contents .deletecoupon-button {
        display: block;
        margin: 0;
    }

    #cart-contents #save-button,
    #cart-contents #delete-button {
        width: 100%;
        margin-top: 10px;
    }
}

/* 14k. Panier sur téléphone et tablette (moins de 960px) : bloc Total TTC /
   CGV / « Confirmer la commande » fixé en bas de l'écran tant que sa place
   est plus bas, comme le bloc collé des colonnes côte à côte (§13a).
   Le position: sticky de §13a ne sert pas ici : les colonnes sont empilées et
   le bloc, au bout de la colonne « Commande », ne pourrait coller qu'une fois
   cette colonne atteinte. js/custom.js §9 pose .vdb-barre sur le bloc et
   réserve sa hauteur à sa place (cale .vdb-place-confirmer) : rien ne saute
   quand il se pose ou se détache. Retiré pendant la saisie dans un champ du
   panier (le clavier du téléphone le pousserait sur le champ). Plus compact
   que dans la colonne : Total à 20px, CGV à 13px, bouton de 46px. */
@media (max-width: 959px) {
    #right_div .checkout-button-top.vdb-barre {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 975;
        margin: 0;
        padding: 8px 15px 12px;
        background-color: #f7f7f7;
        box-shadow: 0 -6px 16px rgba(56, 56, 136, 0.2);
    }

    #right_div .checkout-button-top.vdb-barre #bottom_total,
    #right_div .checkout-button-top.vdb-barre #bottom_total strong {
        margin: 0 0 4px;
        font-size: 20px;
        line-height: 1.3;
    }

    #right_div .checkout-button-top.vdb-barre label {
        display: block;
        font-size: 13px;
        line-height: 1.35;
    }

    #right_div .checkout-button-top.vdb-barre label a {
        font-size: inherit;
        line-height: inherit;
    }

    #right_div .checkout-button-top.vdb-barre a[onclick*="submit_order"] {
        margin-top: 8px !important;
        line-height: 44px;
    }

    /*   Bouton des cookies (Pixim Consent, en bas à gauche) : posé au-dessus
       du bloc tant qu'il est fixé, sinon il recouvrait « Confirmer ».
       --vdb-barre-h vient de js/custom.js §9. */
    html.vdb-barre-commande .pxc-manage {
        bottom: calc(var(--vdb-barre-h, 140px) + 12px);
    }
}

/* 14l. Vidéo de l'accueil sur téléphone et tablette (moins de 960px) : la
   section a une hauteur minimale fixe de 950px dans le Builder (style en
   ligne), le logo centré dedans. Sur un écran de 667px (iPhone SE), il
   tombait en bas de l'écran, 400px de vidéo vide au-dessus. Hauteur de
   l'écran : le logo se centre dans ce qu'on voit. 100svh = écran avec les
   barres du navigateur affichées (100vh pour les navigateurs qui ne le
   connaissent pas). Ne vise que la section dont la vidéo est en fond
   (iframe uk-cover) ; au bureau, 950px comme dans le Builder. */
@media (max-width: 959px) {
    .uk-section.uk-cover-container:has(> iframe[uk-cover]) {
        min-height: 100vh !important;
        min-height: 100svh !important;
    }
}

/* ==========================================================================
   15. YOOTHEME PRO 5 — retouches après la mise à jour de la prod (03/11/2026)
   La prod est passée de YOOtheme 4.5.33 à 5.0.53 le 03/11 ; le local est
   resté en 4.5.33, où ces règles ne changent rien de visible.
   La vidéo de l'accueil est remise par js/custom.js §10 (YOOtheme 5 ne lit
   plus Vimeo en fond de section) ; §14l la retrouve grâce à la classe
   uk-cover-container que §10 rend à la section.
   ========================================================================== */

/* 15a. Images qui remplissent leur carte (uk-flex-1 : option « expand » des
   grilles et de l'Overlay Slider). YOOtheme 4 leur ajoutait uk-object-cover,
   YOOtheme 5 ne le fait plus : la photo était étirée dès que la carte est
   plus haute qu'elle, en particulier les vignerons de l'accueil sur
   téléphone, dans le cadre 4:5 de §5f. 20 images de l'accueil concernées. */
img.el-image.uk-flex-1 {
    object-fit: cover;
}

/* 15b. Vignerons de l'accueil (Overlay Slider, classe sillder-style__vignerons) :
   voile noir en dégradé sous le nom et le bouton « Voir le détail », pour qu'ils
   restent lisibles sur une photo claire. Posé sur le lien de la carte
   (uk-inline-clip, déjà en position relative), entre la photo et le texte.
   z-index obligatoires : la photo forme sa propre couche (classes de
   transition d'UIkit) et recouvrait le voile sans eux. */
.sillder-style__vignerons .el-item > a.uk-inline-clip::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 35%;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.78) 100%);
    pointer-events: none;
}

.sillder-style__vignerons .el-item > a.uk-inline-clip > .uk-position-bottom-center {
    z-index: 2;
}

.sillder-style__vignerons .el-title {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}