/**
 * Charte v2 — complément CSS chargé partout par le module « charte ».
 *
 * La charte elle-même vit dans Oxygen 6 : variables (--df-*), classes (boutons, cartes, pastilles,
 * disponibilité…) et réglages globaux, source neuf/df-core/gabarits/sources/charte.php — documentation
 * docs/charte.md. Ce fichier ne couvre que ce qu'aucun gabarit Oxygen ne rend : les boutons produits par
 * WooCommerce, les blocs injectés par des hooks PHP (producteur, fenêtre de bienvenue, encart produit,
 * ligne cadeau). Il n'utilise que les variables de la charte v2.
 */

:root {
	/* Seul jeton composé, qu'Oxygen ne sait pas représenter : */
	--df-filet: 1px solid var(--df-trait);
}

/* --------------------------------------------------------------------------------------------
 * Liens sur fond sombre : ils restent clairs au survol.
 * Le réglage global « liens au survol » (vert foncé, charte.php > reglages_globaux) produit la règle
 * Breakdance « a:hover { color: var(--bde-links-color-hover) } », plus forte qu'une couleur posée par
 * une seule classe : un lien blanc sur fond vert devenait vert foncé, donc invisible. Chaque surface
 * sombre redéfinit cette variable pour tous les liens qu'elle contient (ou qu'elle est elle-même).
 * Nouvelle surface sombre : l'ajouter ici, ou lui poser la classe .df-sur-sombre. Pas sur une
 * surface qui contient un panneau clair (la barre d'en-tête et sa liste de recherche, par exemple).
 * ------------------------------------------------------------------------------------------ */

.df-sur-sombre, .df-entete__logo-lien, .df-pied__principal, .df-hero-cadre, .df-carte,
.df-pg-encart, .df-pg-bandeau, .df-pg-occasion--vedette {
	--bde-links-color-hover: var(--df-blanc);
}

/* --------------------------------------------------------------------------------------------
 * Boutons WooCommerce (et .df-btn des blocs PHP) : rendu « bouton principal » de la charte.
 * ------------------------------------------------------------------------------------------ */

.df-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce-page a.button, .df-bienvenue__inscription button, .df-bienvenue__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--df-esp-2);
	min-height: 48px;
	padding: 0 var(--df-esp-5);
	font-family: var(--df-police-texte);
	font-size: var(--df-fs-texte);
	font-weight: var(--df-fw-demi);
	line-height: 1.2;
	border-radius: var(--df-rayon);
	border: 1px solid var(--df-vert);
	background: var(--df-vert);
	color: var(--df-blanc) !important;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
	text-decoration: none;
}
.df-btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce-page a.button:hover, .df-bienvenue__inscription button:hover {
	background: var(--df-vert-fonce);
	border-color: var(--df-vert-fonce);
	color: var(--df-blanc) !important;
}
.df-btn--ghost, .df-bienvenue__bouton {
	background: transparent;
	color: var(--df-vert) !important;
}
.df-btn--ghost:hover, .df-bienvenue__bouton:hover { background: var(--df-sauge-pale); color: var(--df-vert) !important; }
.df-btn--small { min-height: 36px; padding: 0 var(--df-esp-4); font-size: var(--df-fs-petit); }

/* --------------------------------------------------------------------------------------------
 * Fiche producteur (bloc sur la fiche produit)
 * ------------------------------------------------------------------------------------------ */

.df-producteur { display: flex; gap: var(--df-esp-5); align-items: center; border: var(--df-filet); border-radius: var(--df-rayon-lg); padding: var(--df-esp-5); background: var(--df-blanc); }
.df-producteur img { width: 80px; height: 80px; object-fit: contain; flex-shrink: 0; }
.df-producteur__contenu { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.df-producteur__nom { font-family: var(--df-police-titre); font-size: var(--df-ft-carte); font-weight: var(--df-fw-regulier); color: var(--df-encre); text-decoration: none; }
.df-producteur__nom:hover { color: var(--df-vert); }
.df-producteur__infos { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.df-producteur__info { font-size: var(--df-fs-petit); color: var(--df-texte-doux); }
.df-producteur__lien { font-size: var(--df-fs-texte); font-weight: var(--df-fw-demi); color: var(--df-vert); text-decoration: none; margin-top: 4px; }
.df-producteur__lien:hover { text-decoration: underline; }
@media (max-width: 600px) { .df-producteur { flex-direction: column; text-align: center; } .df-producteur__contenu { align-items: center; } }

/* --------------------------------------------------------------------------------------------
 * Animation commerciale (Phase 10) : fenêtre de bienvenue et ligne « cadeau » du panier.
 * Hors gabarit Oxygen (injectés en pied de page / sur les écrans WooCommerce) : styles ici, pas dans
 * une classe de gabarit — voir docs/modele-animation.md § 7.8.
 * ------------------------------------------------------------------------------------------ */

.df-bienvenue {
	max-width: 420px;
	width: calc(100% - 32px);
	border: none;
	border-radius: var(--df-rayon-lg);
	box-shadow: var(--df-ombre-panneau);
	padding: var(--df-esp-6);
	font-family: var(--df-police-texte);
	background: var(--df-creme);
	color: var(--df-encre);
}
.df-bienvenue::backdrop { background: var(--df-voile); }
.df-bienvenue__fermer { position: absolute; top: 8px; right: 8px; margin: 0; }
.df-bienvenue__fermer button {
	background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--df-texte-doux); padding: 6px;
}
.df-bienvenue__image { width: 100%; height: auto; border-radius: var(--df-rayon-md); margin-bottom: var(--df-esp-4); }
.df-bienvenue__message { font-family: var(--df-police-titre); font-size: var(--df-ft-bloc); font-weight: var(--df-fw-regulier); color: var(--df-encre); text-align: center; margin: 0 0 var(--df-esp-5); }
.df-bienvenue__bouton { display: flex; width: 100%; box-sizing: border-box; margin: var(--df-esp-4) 0 0; }
.df-bienvenue__inscription { display: flex; flex-direction: column; gap: var(--df-esp-2); }
.df-bienvenue__inscription label { font-size: var(--df-fs-petit); color: var(--df-texte-doux); }
.df-bienvenue__inscription input[type="email"] { height: 48px; padding: 0 var(--df-esp-4); border: 1px solid var(--df-trait); border-radius: var(--df-rayon); font-family: inherit; font-size: var(--df-fs-texte); background: var(--df-blanc); }
/* Fenêtre de bienvenue complète (Phase 16 quater) : titre, consentement, champ piège, état après l'inscription (code). */
.df-bienvenue__titre { font-family: var(--df-police-titre); font-size: var(--df-ft-carte); font-weight: var(--df-fw-regulier); color: var(--df-vert); text-align: center; margin: 0 0 var(--df-esp-2); line-height: 1.2; }
.df-bienvenue__titre + .df-bienvenue__message { font-size: var(--df-fs-lead); margin-bottom: var(--df-esp-4); }
.df-bienvenue__consentement { display: flex; align-items: flex-start; gap: var(--df-esp-2); }
.df-bienvenue__consentement input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--df-vert); }
.df-bienvenue__inscription .df-bienvenue__consentement label { font-size: var(--df-fs-petit); line-height: 1.4; }
.df-bienvenue__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.df-bienvenue__envoyer { height: 48px; margin-top: var(--df-esp-2); }
.df-bienvenue__etat { margin: 0; min-height: 1.4em; font-size: var(--df-fs-petit); color: var(--df-texte-doux); text-align: center; }
.df-bienvenue__etat--erreur { color: var(--df-erreur, #a8232d); }
.df-bienvenue__resultat { display: flex; flex-direction: column; align-items: center; gap: var(--df-esp-2); text-align: center; }
.df-bienvenue__merci { margin: 0; font-size: var(--df-fs-texte); color: var(--df-encre); }
/* Fenêtre d'une opération qui a une couleur (Remises\Couleur : variables --df-promo… posées en ligne sur le <dialog>). */
.df-bienvenue.df-op-couleur { background: var(--df-promo); color: var(--df-promo-texte); }
.df-bienvenue.df-op-couleur :is(.df-bienvenue__titre, .df-bienvenue__message) { color: var(--df-promo-texte); }
.df-bienvenue.df-op-couleur .df-bienvenue__bouton { background: var(--df-promo-fonce); border-color: var(--df-promo-fonce); color: var(--df-promo-fonce-texte) !important; }
.df-bienvenue.df-op-couleur .df-bienvenue__fermer button { color: var(--df-promo-texte); }
.df-bienvenue__suite { width: 100%; margin: var(--df-esp-2) 0 0; }
.df-bienvenue__suite .df-bienvenue__bouton { margin-top: 0; cursor: pointer; font: inherit; }
.df-bienvenue__resultat--invalide .df-bienvenue__merci { color: var(--df-erreur, #a8232d); }
@media (max-width: 480px) { .df-bienvenue { padding: var(--df-esp-5) var(--df-esp-4); } }
@media (prefers-reduced-motion: no-preference) { .df-bienvenue[open] { animation: df-bienvenue-entree .22s ease-out; } }
@keyframes df-bienvenue-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.df-cadeau-quantite em { color: var(--df-vert); font-style: normal; font-size: var(--df-fs-petit); }

/* Encart de la fiche produit (injecté par un hook WooCommerce, pas par la source du gabarit — voir Affichage::encart_produit). */
.df-encart-produit:empty { display: none; }
.df-encart-produit .df-emplacement { display: block; margin: var(--df-esp-4) 0; }
.df-encart-produit .df-emplacement__message { display: block; padding: var(--df-esp-4); background: var(--df-sauge-pale); color: var(--df-vert-fonce); border-radius: var(--df-rayon); font-weight: var(--df-fw-demi); text-align: center; }
.df-encart-produit .df-emplacement__visuel img { width: 100%; height: auto; border-radius: var(--df-rayon-md); margin-bottom: var(--df-esp-2); }

/* Encarts d'opération réglables (écran Opérations commerciales, 29/09/2026 ; Remises\Encarts::rendre) : catégorie et fiche
 * produit, trois styles. Le style « discret » reprend le rendu d'avant. Les sélecteurs sont assez précis pour passer
 * devant ceux du gabarit catégorie (Oxygen) et de l'encart produit ci-dessus. L'aperçu de l'écran charge CETTE feuille
 * dans un cadre isolé (Remises\Admin\Ecran::apercu_site) : aucune copie à tenir à jour. */
.df-emplacement.df-emplacement--encart:is(.df-emplacement--discret, .df-emplacement--avant, .df-emplacement--couleur) {
	display: flex; flex-direction: column; align-items: center; gap: var(--df-esp-2); box-sizing: border-box;
	padding: var(--df-esp-4) var(--df-esp-5); border-radius: var(--df-rayon); text-align: center;
}
.df-emplacement.df-emplacement--encart .df-emplacement__lien { display: flex; flex-direction: column; align-items: center; gap: var(--df-esp-2); color: inherit; text-decoration: none; }
.df-emplacement.df-emplacement--encart .df-emplacement__lien:hover .df-emplacement__message { text-decoration: underline; }
.df-emplacement.df-emplacement--encart .df-emplacement__message { display: block; padding: 0; background: none; border-radius: 0; color: inherit; font-size: var(--df-fs-lead); font-weight: var(--df-fw-demi); line-height: 1.3; }
.df-emplacement.df-emplacement--encart .df-emplacement__secondaire { display: block; font-size: var(--df-fs-petit); line-height: 1.4; }
.df-emplacement.df-emplacement--encart .df-emplacement__bouton { margin-top: var(--df-esp-1); text-decoration: none; }
.df-emplacement.df-emplacement--discret { background: var(--df-sauge-pale); color: var(--df-vert-fonce); }
.df-emplacement.df-emplacement--discret .df-emplacement__secondaire { color: var(--df-texte-doux); }
.df-emplacement.df-emplacement--avant { background: var(--df-vert); color: var(--df-blanc); }
.df-emplacement.df-emplacement--avant .df-emplacement__secondaire { color: var(--df-sur-vert); }
.df-emplacement.df-emplacement--couleur { background: var(--df-bordeaux); color: var(--df-blanc); }
.df-emplacement.df-emplacement--couleur .df-emplacement__secondaire { color: var(--df-bordeaux-pale); }
.df-emplacement.df-emplacement--avant .df-emplacement__message,
.df-emplacement.df-emplacement--couleur .df-emplacement__message { font-family: var(--df-police-titre); font-size: var(--df-ft-carte); font-weight: var(--df-fw-regulier); }
@media (max-width: 767px) {
	.df-emplacement.df-emplacement--encart:is(.df-emplacement--discret, .df-emplacement--avant, .df-emplacement--couleur) { padding: var(--df-esp-3) var(--df-esp-4); }
}
/* Texte sur plusieurs lignes (sauts de ligne gardés) et temps restant {compte_a_rebours} dans le texte d'un encart. */
.df-emplacement.df-emplacement--encart .df-compte-a-rebours { font-weight: var(--df-fw-gras); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------------------------------------------------
 * Barre d'annonce, « Message sur téléphone » (facultatif, 05/10/2026) : les deux versions sont dans le HTML ; on
 * masque l'autre en display:none (retirée aussi des lecteurs d'écran, jamais lue deux fois). Même point de rupture
 * que la barre (767 px). Sans message téléphone, aucun de ces éléments n'existe.
 * ------------------------------------------------------------------------------------------ */
.df-annonce__texte .df-emplacement__message.df-emplacement__message--tel { display: none; }
@media (max-width: 767px) {
	.df-annonce__texte .df-emplacement__message.df-emplacement__message--ordi { display: none; }
	.df-annonce__texte .df-emplacement__message.df-emplacement__message--tel { display: contents; }
}

/* --------------------------------------------------------------------------------------------
 * Barre d'annonce « en plus du bandeau habituel » (écran Opérations commerciales, 30/09/2026) : la ligne de l'opération
 * (bordeaux) au-dessus du texte habituel (sauge), dans la même barre, rendue par le serveur (aucun décalage au
 * chargement). Sélecteurs plus précis que ceux du gabarit en-tête (classes df-annonce, Oxygen).
 * ------------------------------------------------------------------------------------------ */
.df-annonce:has(.df-emplacement--plus) { padding: 0; flex-direction: column; align-items: stretch; }
.df-annonce .df-annonce__texte:has(.df-emplacement--plus) { display: flex; flex-direction: column; width: 100%; }
.df-annonce__texte .df-emplacement.df-emplacement--plus { min-height: 34px; padding: 4px 16px; box-sizing: border-box; background: var(--df-bordeaux); }
.df-annonce__texte .df-emplacement.df-emplacement--plus .df-compte-a-rebours { background: var(--df-bordeaux-fonce); }
.df-annonce__texte .df-emplacement.df-emplacement--habituel { min-height: 38px; padding: 4px 16px; box-sizing: border-box; }
@media (max-width: 767px) {
	.df-annonce__texte .df-emplacement.df-emplacement--plus { min-height: 32px; padding: 4px 12px; }
	.df-annonce__texte .df-emplacement.df-emplacement--habituel { min-height: 34px; padding: 4px 12px; }
}

/* --------------------------------------------------------------------------------------------
 * Bandeau de l'accueil d'une opération (Remises\Bandeau::rendre) : grand visuel sur toute la largeur, sous le menu,
 * qui porte l'accroche, le texte, le bouton et le compte à rebours (maquette Accueil, charte v2). Sur téléphone, le
 * visuel passe au-dessus du texte. Sans visuel : version texte sur fond vert.
 * ------------------------------------------------------------------------------------------ */
.df-emplacement.df-bandeau-op { position: relative; display: grid; min-height: 440px; overflow: hidden; background: var(--df-vert-nuit); color: var(--df-blanc); font-family: var(--df-police-texte); }
.df-bandeau-op__visuel { grid-area: 1 / 1; position: relative; display: block; min-height: 0; overflow: hidden; }
.df-bandeau-op__visuel img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.df-bandeau-op__contenu { grid-area: 1 / 1; position: relative; display: flex; align-items: center; width: 100%; max-width: calc(var(--df-largeur) + 48px); margin: 0 auto; padding: var(--df-esp-8) 24px; box-sizing: border-box; }
.df-bandeau-op:not(.df-bandeau-op--texte)::before { content: ""; grid-area: 1 / 1; position: relative; z-index: 1; background: linear-gradient(90deg, rgba(22, 44, 39, .9) 0%, rgba(22, 44, 39, .72) 38%, rgba(22, 44, 39, .12) 72%, rgba(22, 44, 39, 0) 100%); pointer-events: none; }
.df-bandeau-op:not(.df-bandeau-op--texte) .df-bandeau-op__contenu { z-index: 2; }
.df-bandeau-op__texte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--df-esp-4); max-width: 600px; }
.df-bandeau-op__titre { margin: 0; font-family: var(--df-police-titre); font-weight: var(--df-fw-regulier); font-size: var(--df-ft-section-grand); line-height: 1.06; letter-spacing: -0.01em; color: var(--df-blanc); overflow-wrap: anywhere; }
.df-bandeau-op__chapeau { margin: 0; font-size: var(--df-fs-lead); line-height: 1.55; color: var(--df-sur-nuit); overflow-wrap: anywhere; }
.df-bandeau-op__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--df-esp-3) var(--df-esp-4); margin-top: var(--df-esp-2); }
.df-bandeau-op__actions .df-compte-a-rebours { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--df-esp-3); border-radius: var(--df-rayon-sm); background: var(--df-bordeaux); color: var(--df-blanc); font-size: var(--df-fs-texte); font-weight: var(--df-fw-demi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.df-emplacement.df-bandeau-op--texte { min-height: 0; background: var(--df-vert); } /* version texte : hauteur de son contenu (plus précis que .df-emplacement.df-bandeau-op) */
.df-bandeau-op--texte .df-bandeau-op__contenu { padding-top: var(--df-esp-7); padding-bottom: var(--df-esp-7); }
.df-bandeau-op--texte .df-bandeau-op__texte { max-width: 760px; }
.df-bandeau-op--texte .df-bandeau-op__titre { font-size: var(--df-ft-section); }
.df-bandeau-op--texte .df-bandeau-op__chapeau { color: var(--df-sur-vert); }
@media (max-width: 1119px) {
	.df-emplacement.df-bandeau-op { min-height: 380px; }
	.df-bandeau-op__titre { font-size: var(--df-ft-section); }
}
@media (max-width: 767px) {
	.df-emplacement.df-bandeau-op { display: flex; flex-direction: column; min-height: 0; background: var(--df-vert-fonce); }
	.df-bandeau-op:not(.df-bandeau-op--texte)::before { display: none; }
	.df-bandeau-op__visuel img { position: static; height: auto; max-height: 420px; aspect-ratio: 1 / 1; }
	.df-bandeau-op__contenu { padding: var(--df-esp-5) 16px var(--df-esp-6); }
	.df-bandeau-op__texte { gap: var(--df-esp-3); }
	.df-bandeau-op__titre, .df-bandeau-op--texte .df-bandeau-op__titre { font-size: var(--df-ft-titre); line-height: 1.12; letter-spacing: 0; }
	.df-bandeau-op__chapeau { font-size: var(--df-fs-texte); }
	.df-emplacement.df-bandeau-op--texte { background: var(--df-vert); }
	.df-bandeau-op--texte .df-bandeau-op__contenu { padding-top: var(--df-esp-6); padding-bottom: var(--df-esp-6); }
}

/* --------------------------------------------------------------------------------------------
 * Couleur de l'opération (Remises\Couleur, 30/09/2026) : un affichage d'une opération colorée porte la classe
 * `df-op-couleur` et ses variables en ligne (--df-promo, --df-promo-texte, --df-promo-secondaire, --df-promo-fonce,
 * --df-promo-fonce-texte, --df-promo-encre), calculées par le serveur (texte blanc ou foncé selon la couleur, AA).
 * Sans couleur choisie : aucune de ces règles ne s'applique, les couleurs d'avant restent. Sélecteurs plus précis que
 * ceux des classes Oxygen (oxy-selectors.css, chargée après cette feuille).
 * ------------------------------------------------------------------------------------------ */
/* Barre du haut « en plus » : la ligne de l'opération prend la couleur ; « à la place » : le compte à rebours. */
.df-annonce__texte .df-emplacement.df-emplacement--plus.df-op-couleur { background: var(--df-promo); color: var(--df-promo-texte); }
.df-annonce__texte .df-emplacement--plus.df-op-couleur :is(a, .df-emplacement__message, .df-annonce__segment) { color: var(--df-promo-texte); }
.df-annonce__texte .df-emplacement.df-emplacement--plus.df-op-couleur .df-compte-a-rebours { background: var(--df-promo-fonce); color: var(--df-promo-fonce-texte); }
.df-annonce__texte .df-op-couleur:not(.df-emplacement--plus) .df-compte-a-rebours { background: var(--df-promo); color: var(--df-promo-texte); }
/* Encarts au style « Couleur de l'opération ». */
.df-emplacement.df-emplacement--couleur.df-op-couleur { background: var(--df-promo); color: var(--df-promo-texte); }
.df-emplacement.df-emplacement--couleur.df-op-couleur .df-emplacement__secondaire { color: var(--df-promo-secondaire); }
/* Bandeau de l'accueil : version texte sur la couleur ; avec visuel, le compte à rebours. */
.df-bandeau-op.df-op-couleur .df-bandeau-op__actions .df-compte-a-rebours { background: var(--df-promo); color: var(--df-promo-texte); }
.df-emplacement.df-bandeau-op.df-bandeau-op--texte.df-op-couleur { background: var(--df-promo); color: var(--df-promo-texte); }
.df-bandeau-op--texte.df-op-couleur .df-bandeau-op__titre { color: var(--df-promo-texte); }
.df-bandeau-op--texte.df-op-couleur .df-bandeau-op__chapeau { color: var(--df-promo-secondaire); }
.df-bandeau-op.df-bandeau-op--texte.df-op-couleur .df-bandeau-op__actions .df-compte-a-rebours { background: var(--df-promo-fonce); color: var(--df-promo-fonce-texte); }
/* « Sélection du moment » des pages Vins / Bières / Spiritueux. */
.df-bandeau.df-operation.df-op-couleur { background-color: var(--df-promo); color: var(--df-promo-texte); }
.df-bandeau.df-operation.df-op-couleur .df-bandeau__titre { color: var(--df-promo-texte); }
.df-bandeau.df-operation.df-op-couleur :is(.df-bandeau__chapeau, .df-operation__dates) { color: var(--df-promo-secondaire); }
/* Étiquette « −X % » des cartes et de la fiche, ligne de remise du panier (texte sur blanc : variante lisible). */
.df-pastille.df-pastille--promo.df-op-couleur, .df-fiche-prix__etiquette.df-op-couleur { background-color: var(--df-promo); color: var(--df-promo-texte); }
.df-panier-ligne__remise.df-op-couleur { color: var(--df-promo-encre); }
/* Vitesse (Phase 16 bis) : le tiroir fermé (mobile) est hors écran mais tout près du bord ; sans cette règle le navigateur y
   charge aussitôt ses 6 vignettes « différées » (~120 Ko) qui passent avant la photo d'en-tête. Fermé, son contenu n'est
   ni dessiné ni chargé ; à l'ouverture, tout revient d'un coup (les vignettes se chargent alors). */
.df-tiroir:not(.est-ouvert):not(:target) { content-visibility: hidden; }

/* Breakdance met une capitale à chaque mot des boutons et liens de WooCommerce (« Se Connecter », « Appliquer Le Code ») :
   en français, seule la première lettre (texte de WooCommerce tel quel). Mêmes sélecteurs que breakdance-woocommerce.css,
   précédés de « body » pour passer devant quel que soit l'ordre des feuilles. */
body .bde-woo-product-quicklook-button,
body .bde-mini-cart-offcanvas .button,
body.woocommerce-page.woocommerce-lost-password .breakdance-woocommerce button[type=submit],
body .breakdance-woocommerce .woocommerce-form-track-order button[type=submit],
body .breakdance-woocommerce #place_order,
body .breakdance-woocommerce .woocommerce-button.pay,
body .breakdance-woocommerce button.single_add_to_cart_button,
body .breakdance-woocommerce a.single_add_to_cart_button,
body .breakdance-woocommerce a.button.wc-backward,
body .breakdance-woocommerce a.checkout-button,
body .breakdance-woocommerce p.order-again a.button,
body .breakdance-woocommerce button[name=add-to-cart],
body .breakdance-woocommerce button[name=login],
body .breakdance-woocommerce button[name=save_address],
body .breakdance-woocommerce button[name=save_account_details],
body .breakdance-woocommerce button[name=woocommerce_checkout_place_order],
body .breakdance-woocommerce button[name=register],
body .breakdance-woocommerce .woocommerce-MyAccount-content a.button[href*=add-payment-method],
body .breakdance-woocommerce .woocommerce-MyAccount-downloads-file,
body .breakdance-woocommerce .woocommerce-Address a.edit,
body .breakdance-woocommerce .woocommerce-button.view,
body .breakdance-woocommerce .woocommerce-Button--previous,
body .breakdance-woocommerce .woocommerce-Button--next,
body .breakdance-woocommerce .widget_price_filter .button,
body .breakdance-woocommerce a.product_type_external,
body .breakdance-woocommerce a.button.product_type_grouped,
body .breakdance-woocommerce .added_to_cart,
body .breakdance-woocommerce a.button.add_to_cart_button,
body .breakdance-woocommerce .woocommerce-widget-layered-nav-dropdown__submit,
body .breakdance-woocommerce .woocommerce-product-search button[type=submit],
body .breakdance-woocommerce a.product_type_simple,
body .breakdance-woocommerce a.product_type_variable,
body .breakdance-woocommerce .form-submit input[type=submit],
body .breakdance-woocommerce button[name=update_cart],
body .breakdance-woocommerce button[name=calc_shipping],
body .breakdance-woocommerce button[name=apply_coupon],
body .breakdance-woocommerce .reset_variations,
body .breakdance-woocommerce .woocommerce-button.cancel,
body .breakdance-woocommerce .woocommerce-notices-wrapper + p:not([class]) a,
body .breakdance-woocommerce .woocommerce-mini-cart__empty-message a,
body .breakdance-woocommerce .woocommerce-noreviews a,
body .breakdance-woocommerce .available-on-backorder a,
body .breakdance-woocommerce .woocommerce-info a,
body .breakdance-woocommerce .woocommerce-thankyou-order-received a,
body .breakdance-woocommerce .woocommerce-message a,
body .breakdance-woocommerce .woocommerce-error a,
body .breakdance-woocommerce .woocommerce-error strong { text-transform: none; }

/* --------------------------------------------------------------------------------------------
 * Fiche produit, « Fiche technique » (retour mobile n°10) : les valeurs qui mènent quelque part
 * (producteur, région, cépage, catégorie…) se reconnaissent des valeurs simples : couleur de lien
 * de la charte (vert de marque), souligné pointillé fin qui devient plein au survol et au focus,
 * petit chevron « › ». Zone d'appui d'au moins 44 px de haut sans changer la mise en page
 * (marge négative qui compense l'espace ajouté). Les valeurs sans lien ne changent pas.
 * -------------------------------------------------------------------------------------------- */
.df-fiche-technique dd a[href] {
	display: inline-block; padding: 10px 2px; margin: -10px -2px; min-height: 24px;
	color: var(--df-vert); text-decoration: underline dotted; text-decoration-thickness: 1px;
	text-decoration-color: var(--df-vert); text-underline-offset: 4px;
}
.df-fiche-technique dd a[href]::after { content: "\203A"; margin-left: 4px; font-weight: 700; text-decoration: none; display: inline-block; }
.df-fiche-technique dd a[href]:hover { text-decoration-style: solid; text-decoration-thickness: 2px; }
.df-fiche-technique dd a[href]:focus-visible { outline: 2px solid var(--df-vert); outline-offset: 1px; border-radius: 3px; text-decoration-style: solid; }

/* --------------------------------------------------------------------------------------------
 * Messages des formulaires natifs (inscription à la lettre du pied de page et de l'accueil, contact…).
 * Le style d'origine (vert / rose très pâles, texte clair posé par les gabarits sur fond sombre) donnait
 * un texte presque invisible. Même rendu partout, contraste AA : réussite = vert sauge pâle + vert foncé
 * (10,1:1), erreur = bordeaux pâle + bordeaux foncé (11,1:1).
 * ------------------------------------------------------------------------------------------ */
body .breakdance-form-message {
	box-sizing: border-box;
	padding: var(--df-esp-3, 12px) var(--df-esp-4, 16px);
	border-radius: var(--df-rayon);
	background: var(--df-sauge-pale);
	color: var(--df-vert-fonce);
	font-family: var(--df-police-texte);
	font-weight: var(--df-fw-demi);
	line-height: 1.45;
}
body .breakdance-form-message.breakdance-form-message--error {
	background: var(--df-bordeaux-pale);
	color: var(--df-bordeaux-fonce);
}
body .breakdance-form-message-dismiss-button { color: inherit; }

/* --------------------------------------------------------------------------------------------
 * Carte « À l'honneur » du méga-menu (Catalogue\CarteMenu, [df_carte_menu]) : les classes de la carte viennent de la
 * charte Oxygen ; ici, seulement le mode « produit » (bouteille entière sur fond blanc, pas recadrée) et son prix.
 * ------------------------------------------------------------------------------------------ */

.df-mega__carte--produit .df-mega__carte-visuel { background: var(--df-blanc); }
.df-mega__carte--produit .df-mega__carte-image { object-fit: contain; padding: 12px; box-sizing: border-box; }
.df-mega__carte-prix { font-weight: 600; color: var(--df-vert-fonce); }

/* Carte « Carte cadeau » du méga-menu « Coffrets cadeaux » (CartesCadeaux\Page::carte_menu) : même fond clair et mêmes textes foncés
   que la carte « À l'honneur » voisine (lisibilité sur la préprod, 24/10/2026) ; seuls le filet doré, le prix et le bouton la distinguent. */
.df-mega__carte--cadeau { border-color: var(--df-ocre-vif); }
.df-mega__carte--cadeau .df-mega__carte-prix { font-size: 18px; }
.df-mega__carte-bouton { align-self: flex-start; margin-top: 6px; padding: 10px 18px; border-radius: 999px; background: var(--df-vert-fonce); color: var(--df-blanc); font-size: 14px; font-weight: 700; transition: filter .2s ease; }
.df-mega__carte--cadeau:hover .df-mega__carte-bouton { filter: brightness(1.2); }

/* --------------------------------------------------------------------------------------------
 * Date limite d'un événement (Panier\DateLimite, 29/10/2026) : bandeau tout en haut des pages (« Noël : commandez au plus
 * tard le … »), et sa ligne dans l'encart de disponibilité d'une fiche. Texte choisi par le navigateur (jour à Paris) ;
 * masqué tant que rien n'est à dire ([hidden]).
 * ------------------------------------------------------------------------------------------ */
.df-date-limite { box-sizing: border-box; width: 100%; padding: 6px 16px; background: var(--df-vert-fonce); color: var(--df-blanc); font-family: var(--df-police-texte); font-size: var(--df-fs-petit); line-height: 1.4; text-align: center; --bde-links-color-hover: var(--df-blanc); }
.df-date-limite[hidden], .df-fiche-dispo__evenement[hidden] { display: none; }
.df-date-limite strong { font-weight: var(--df-fw-demi); }
.df-date-limite a { color: var(--df-blanc); text-decoration: underline; text-underline-offset: 2px; }
.df-fiche-dispo .df-fiche-dispo__evenement { display: block; flex-basis: 100%; margin-top: 4px; font-size: var(--df-fs-petit); color: var(--df-vert-fonce); }
.df-fiche-dispo .df-fiche-dispo__evenement strong { font-weight: var(--df-fw-demi); }
.df-fiche-dispo .df-fiche-dispo__evenement a { color: inherit; text-decoration: underline; }
@media (max-width: 767px) {
	.df-date-limite { padding: 6px 12px; }
}