/* df-polices */
/**
 * Polices de la charte v2 — auto-hébergées (aucun appel à Google Fonts ni à un autre serveur).
 *
 * - Young Serif (titres, prix) : une seule graisse (400), comme dessinée par l'auteur.
 * - Hanken Grotesk (texte, boutons, menus) : fichier « variable » qui couvre les graisses 100 à 900
 *   (la charte n'utilise que 400, 500, 600 et 700).
 * Deux sous-ensembles par police : « latin » (français complet, €, −, guillemets typographiques) et
 * « latin-ext » (noms de producteurs étrangers) ; le navigateur ne télécharge le second que si besoin.
 * Licence SIL Open Font License 1.1 (fichiers OFL-*.txt à côté des polices). Fichiers repris du
 * paquet npm @fontsource (versions 5.3.0).
 *
 * Enregistrées dans Oxygen 6 (module charte) : « Young Serif (DF) » et « Hanken Grotesk (DF) »,
 * utilisées par les variables --df-police-titre et --df-police-texte.
 */
@font-face {
	font-family: 'Young Serif';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://essai2.damienf.xyz/wp-content/plugins/df-core/assets/fonts/young-serif-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Young Serif';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://essai2.damienf.xyz/wp-content/plugins/df-core/assets/fonts/young-serif-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('https://essai2.damienf.xyz/wp-content/plugins/df-core/assets/fonts/hanken-grotesk-variable-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('https://essai2.damienf.xyz/wp-content/plugins/df-core/assets/fonts/hanken-grotesk-variable-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Sora et Figtree : les deux polices de l'identité DF (licence SIL OFL 1.1, fichiers OFL-*.txt). */
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('https://essai2.damienf.xyz/wp-content/plugins/df-core/assets/fonts/sora-variable-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('https://essai2.damienf.xyz/wp-content/plugins/df-core/assets/fonts/sora-variable-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('https://essai2.damienf.xyz/wp-content/plugins/df-core/assets/fonts/figtree-variable-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('https://essai2.damienf.xyz/wp-content/plugins/df-core/assets/fonts/figtree-variable-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* df-charte */
/**
 * 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; }
}

/* df-charte-motdepasse */
/**
 * Charte v2 — bouton « afficher le mot de passe »
 * Découpé de charte.css (Phase 16 sexdecies F1, vitesse) : cette feuille n'est chargée que sur les écrans qui en ont besoin
 * (voir Charte\Module::satellite), pour ne pas alourdir le premier affichage des autres. Chargée sur les pages compte et commande, et partout où WooCommerce dessine un champ de mot de passe.
 */

/* ---------------------------------------------------------------- bouton « afficher le mot de passe » (WooCommerce)
 * WooCommerce dessine l'œil avec sa police d'icônes, que le site ne charge pas : sans cette règle il ne reste qu'un
 * petit rectangle vide à droite du champ (connexion de la page commande, compte client). Œil en SVG (masque, couleur
 * du texte), barré quand le mot de passe est affiché (classe display-password posée par WooCommerce). */
.password-input { position: relative; display: block; }
.password-input input.input-text,
.df-commande-page form.login .password-input input.input-text { width: 100%; padding-right: 48px; }
.password-input .show-password-input {
	position: absolute; top: 0; right: 0; bottom: 0; width: 46px; margin: 0; padding: 0; border: 0; border-radius: 0 6px 6px 0;
	background: none; box-shadow: none; color: var(--df-texte-doux, #5a615c); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.password-input .show-password-input::before,
.password-input .show-password-input::after { content: none; }
.password-input .show-password-input::before {
	content: ""; display: block; width: 20px; height: 20px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.password-input .show-password-input.display-password::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
}
.password-input .show-password-input:hover { color: var(--df-encre, #1b2522); }
.password-input .show-password-input:focus-visible { outline: 2px solid var(--df-vert, #294c45); outline-offset: -4px; }

/* df-haut-de-page */
/*
 * Haut de page (module charte) : en-tête qui suit, bouton « revenir en haut » (assets/js/haut-de-page.js).
 * L'en-tête est « collant » (sticky) : la barre d'annonce part avec la page, la barre verte reste. Pour la cacher on
 * décale son « top » plutôt qu'un transform : un transform sur l'en-tête casserait le tiroir (position: fixed dedans).
 */
html.df-entete-suit header.df-entete { position: sticky; top: calc(-1 * var(--df-annonce-h, 0px)); z-index: 900; transition: top .28s ease, box-shadow .28s ease; }
html.df-entete-suit header.df-entete.est-colle { box-shadow: 0 10px 24px -16px rgba(14, 24, 21, .55); }
html.df-entete-suit header.df-entete.est-cache { top: calc(-1 * var(--df-entete-h, 200px) - 12px); box-shadow: none; }

/* Bouton « revenir en haut » : à droite, au-dessus des contenus, sous les panneaux (panier, zoom, simulation). */
.df-haut { position: fixed; right: 18px; bottom: 18px; z-index: 880; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--df-vert, #1f3b35); color: var(--df-blanc, #fff); box-shadow: 0 10px 24px -10px rgba(14, 24, 21, .6); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, background-color .15s ease; }
.df-haut.est-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, background-color .15s ease; }
.df-haut:hover { background: var(--df-vert-nuit, #16302a); }
.df-haut:focus-visible { outline: 2px solid var(--df-sauge, #8fae9f); outline-offset: 3px; }
.df-haut svg { width: 22px; height: 22px; }
/* Bulle de discussion à droite (54 px, à 24 px du bord et 20 px du bas ; 14 / 14 sur téléphone) : le bouton se centre juste au-dessus. */
.df-haut--crisp { right: 27px; bottom: 90px; }
@media (max-width: 767px) {
	.df-haut { right: 12px; bottom: 12px; width: 44px; height: 44px; }
	.df-haut--crisp { right: 19px; bottom: 80px; }
}
/* Fiche produit sur téléphone : la barre d'achat collante (84 px) garde sa place ; le bouton et la bulle se posent au-dessus. */
@media (max-width: 767px) {
	body:has(.df-fiche-achat) .df-haut { bottom: 96px; }
	body:has(.df-fiche-achat) .df-haut--crisp { bottom: 164px; }
}
@media (prefers-reduced-motion: reduce) {
	html.df-entete-suit header.df-entete, .df-haut, .df-haut.est-visible { transition: none; }
}
@media print { .df-haut { display: none !important; } }