/* df-contenus */
/**
 * Blocs de contenu ajoutés par la Phase 16 ter B : formulaire de contact, calendrier lunaire du mois et sa colonne de
 * vente (sélection du jour, prochain jour Fruit), texte de
 * référencement sous les archives, mention de conservation, bloc événement. Jetons de la charte v2 uniquement.
 * Chargé à la demande (Contenus\Style::charger).
 */

/* ---------------------------------------------------------------- formulaire de contact */
.df-contact { max-width: 720px; margin: var(--df-esp-6, 32px) 0; padding: var(--df-esp-6, 32px); background: var(--df-blanc, #fff); border: 1px solid var(--df-trait, #d8d2c4); border-radius: var(--df-rayon-lg, 12px); font-family: var(--df-police-texte, system-ui, sans-serif); color: var(--df-texte, #2b2f2c); }
.df-contact__titre { margin: 0 0 6px; font-family: var(--df-police-titre, Georgia, serif); font-size: 26px; font-weight: 400; line-height: 1.2; color: var(--df-encre, #1b2522); }
.df-contact__intro { margin: 0 0 var(--df-esp-5, 20px); color: var(--df-texte-doux, #5a615c); }
.df-contact__form { display: flex; flex-direction: column; gap: var(--df-esp-4, 16px); }
.df-contact__duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--df-esp-4, 16px); }
.df-contact__champ { display: flex; flex-direction: column; gap: 6px; }
.df-contact__champ label { font-size: var(--df-fs-petit, 13.5px); font-weight: 600; color: var(--df-encre, #1b2522); }
.df-contact__champ input[type="text"], .df-contact__champ input[type="email"], .df-contact__champ select, .df-contact__champ textarea {
	width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--df-trait, #d8d2c4); border-radius: var(--df-rayon, 8px); background: var(--df-blanc, #fff);
	font: 400 15px/1.4 var(--df-police-texte, system-ui, sans-serif); color: var(--df-encre, #1b2522); box-sizing: border-box;
}
.df-contact__champ textarea { padding: 12px 14px; min-height: 140px; resize: vertical; }
.df-contact__champ input:focus, .df-contact__champ select:focus, .df-contact__champ textarea:focus { outline: 2px solid var(--df-sauge, #8fa98a); outline-offset: 1px; }
.df-contact__champ--erreur input, .df-contact__champ--erreur select, .df-contact__champ--erreur textarea { border-color: var(--df-bordeaux, #8a2b3a); }
.df-contact__erreur { font-size: var(--df-fs-petit, 13.5px); color: var(--df-bordeaux, #8a2b3a); }
.df-contact__case { display: flex; align-items: flex-start; gap: 10px; font-weight: 400 !important; line-height: 1.45; cursor: pointer; }
.df-contact__case input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--df-vert, #294c45); }
.df-contact__case a { color: var(--df-vert, #294c45); }
.df-contact__piege { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.df-contact__actions { display: flex; }
.df-contact__etat { margin: 0 0 var(--df-esp-4, 16px); padding: 12px 14px; border-radius: var(--df-rayon, 8px); font-size: var(--df-fs-texte, 15px); }
.df-contact__etat--ok { background: var(--df-sauge-pale, #e6eee3); color: var(--df-vert-fonce, #1f3b35); border: 1px solid var(--df-sauge, #8fa98a); }
.df-contact__etat--erreur { background: var(--df-bordeaux-pale, #f6e7e9); color: var(--df-bordeaux-fonce, #6d1f2c); border: 1px solid var(--df-bordeaux, #8a2b3a); }
.df-contact__etat-zone:empty { display: none; }
@media (max-width: 767px) {
	.df-contact { padding: var(--df-esp-5, 20px); margin: var(--df-esp-5, 20px) 0; border-radius: var(--df-rayon, 8px); }
	.df-contact__duo { grid-template-columns: 1fr; }
	.df-contact__actions .df-btn { width: 100%; }
}

/* ---------------------------------------------------------------- calendrier lunaire du mois */
.df-calendrier { margin: var(--df-esp-5, 24px) 0; padding: 0 6px; font-family: var(--df-police-texte, system-ui, sans-serif); color: var(--df-texte, #2b2f2c); }
.df-calendrier__navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.df-calendrier__mois { margin: 0; font-family: var(--df-police-titre, Georgia, serif); font-size: 24px; font-weight: 400; text-transform: capitalize; color: var(--df-encre, #1b2522); }
.df-calendrier__lien { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--df-trait, #d8d2c4); border-radius: 999px; background: var(--df-blanc, #fff); color: var(--df-vert, #294c45); font-size: var(--df-fs-petit, 13.5px); font-weight: 600; text-decoration: none; }
.df-calendrier__lien:hover { border-color: var(--df-vert, #294c45); }
.df-calendrier__lien--absent { visibility: hidden; }
.df-calendrier .df-calendrier__table { display: table; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 6px; margin: 0 0 0 -6px; width: calc(100% + 12px); max-width: none; }
.df-calendrier__entete { text-align: center; font-size: var(--df-fs-mini, 12px); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--df-texte-doux, #5a615c); padding: 4px 0; }
.df-calendrier__jour { position: relative; height: 76px; padding: 8px; vertical-align: top; text-align: left; border: 1px solid var(--df-trait, #d8d2c4); border-radius: var(--df-rayon, 8px); background: var(--df-blanc, #fff); }
.df-calendrier__jour--vide { border: 0; background: transparent; }
.df-calendrier__numero, .df-calendrier__type { display: block; }
.df-calendrier__numero { font-size: 15px; font-weight: 700; color: var(--df-encre, #1b2522); }
.df-calendrier__type { font-size: var(--df-fs-mini, 12px); font-weight: 600; }
.df-calendrier__jour--fruit { background: #f9dcc8; border-color: #e3a882; }
.df-calendrier__jour--fleur { background: #f3d3e2; border-color: #d797b6; }
.df-calendrier__jour--feuille { background: #d4e5cd; border-color: #93b788; }
.df-calendrier__jour--racine { background: #e6d6c0; border-color: #b99a72; }
.df-calendrier__jour--fruit .df-calendrier__type { color: #964722; } .df-calendrier__jour--fleur .df-calendrier__type { color: #9a3f6c; }
.df-calendrier__jour--feuille .df-calendrier__type { color: #3f6b35; } .df-calendrier__jour--racine .df-calendrier__type { color: #6b4e2b; }
.df-calendrier__jour--aujourdhui { outline: 2px solid var(--df-vert, #294c45); outline-offset: 1px; }
.df-calendrier__jour--perigee::after { content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--df-ocre-vif, #c98a2b); }
.df-calendrier__legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: var(--df-fs-petit, 13.5px); color: var(--df-texte-doux, #5a615c); }
.df-calendrier__legende li { display: inline-flex; align-items: center; gap: 6px; }
.df-calendrier__pastille { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--df-trait, #d8d2c4); }
.df-calendrier__pastille--fruit { background: #f9dcc8; border-color: #e3a882; } .df-calendrier__pastille--fleur { background: #f3d3e2; border-color: #d797b6; }
.df-calendrier__pastille--perigee { border-radius: 50%; background: var(--df-ocre-vif, #c98a2b); }
/* Une icône au trait par type de jour (fruit, fleur, feuille, racine) : dans la case, en haut à droite, et dans la légende. */
.df-calendrier__icone { position: absolute; top: 6px; right: 6px; }
.df-calendrier__jour--fruit .df-calendrier__icone, .df-calendrier__pastille--fruit .df-calendrier__pastille-icone { color: #964722; } .df-calendrier__jour--fleur .df-calendrier__icone, .df-calendrier__pastille--fleur .df-calendrier__pastille-icone { color: #9a3f6c; }
.df-calendrier__jour--feuille .df-calendrier__icone, .df-calendrier__pastille--feuille .df-calendrier__pastille-icone { color: #3f6b35; } .df-calendrier__jour--racine .df-calendrier__icone, .df-calendrier__pastille--racine .df-calendrier__pastille-icone { color: #6b4e2b; }
.df-calendrier__pastille--fruit, .df-calendrier__pastille--fleur, .df-calendrier__pastille--feuille, .df-calendrier__pastille--racine { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.df-calendrier__jour--perigee::after { right: 34px; }
.df-calendrier__pastille--feuille { background: #d4e5cd; border-color: #93b788; } .df-calendrier__pastille--racine { background: #e6d6c0; border-color: #b99a72; }
@media (max-width: 767px) {
	.df-calendrier { padding: 0 3px; }
	.df-calendrier .df-calendrier__table { border-spacing: 3px; margin: 0 0 0 -3px; width: calc(100% + 6px); }
	.df-calendrier__jour { height: 58px; padding: 5px 2px 5px 4px; }
	.df-calendrier__numero { font-size: 13px; }
	.df-calendrier__icone { width: 15px; height: 15px; top: 4px; right: 3px; }
	.df-calendrier__jour--perigee::after { right: 21px; top: 6px; }
	.df-calendrier__type { font-size: 9.5px; letter-spacing: -.01em; word-break: normal; overflow-wrap: normal; }
	.df-calendrier__mois { font-size: 20px; }
	.df-calendrier__navigation { flex-wrap: wrap; }
	.df-calendrier__mois { order: -1; width: 100%; text-align: center; }
	.df-calendrier__lien { flex: 1 1 0; justify-content: center; padding: 0 10px; white-space: nowrap; }
	.df-calendrier__lien--absent { display: block; }
}

/* ---------------------------------------------------------------- calendrier lunaire : colonne de vente (Fiche\LunaireVente)
 * À droite du calendrier (dessous quand la place manque : flex-wrap, donc aussi dans un article étroit). Mise en scène de
 * l'encart lunaire des fiches (fond vert profond, titre en police de titre) ; cartes produit du catalogue en version
 * couchée (photo à gauche). Règles préfixées par .df-lune-vente : elles l'emportent sur celles de .df-prose. */
.df-prose > .df-calendrier-vente { max-width: none; }
.df-calendrier-vente { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--df-esp-6, 32px) 40px; margin: var(--df-esp-5, 24px) 0; }
.df-calendrier-vente > .df-calendrier { flex: 1 1 560px; min-width: 0; max-width: 820px; margin: 0; }
.df-lune-vente { flex: 0 0 400px; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 16px; font-family: var(--df-police-texte, system-ui, sans-serif); color: var(--df-texte, #2b2f2c); }
.df-lune-vente .df-lune-vente__bloc { border-radius: var(--df-rayon-lg, 12px); }
.df-lune-vente .df-lune-vente__selection { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px 20px; background: var(--df-vert-fonce, #1f3b35); color: var(--df-blanc, #fff); scroll-margin-top: 90px; }
.df-lune-vente .df-lune-vente__tete { display: flex; align-items: center; gap: 12px; }
.df-lune-vente .df-lune-vente__rond { display: flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: rgba(250, 247, 241, .12); color: #f1e7c8; }
.df-lune-vente .df-lune-vente__titres { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.df-lune-vente .df-lune-vente__titre { margin: 0; font-family: var(--df-police-titre, Georgia, serif); font-size: 21px; font-weight: 400; line-height: 1.2; color: var(--df-blanc, #fff); }
.df-lune-vente .df-lune-vente__sous-titre { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; line-height: 1.35; color: #c9d8c6; }
.df-lune-vente .df-lune-vente__sous-titre .df-calendrier__pastille { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 3px; border: 0; }
.df-lune-vente .df-lune-vente__accroche { margin: 0; font-size: 15px; line-height: 1.55; color: #e3ebe1; }
.df-lune-vente .df-lune-vente__perigee { display: flex; align-items: baseline; gap: 8px; margin: -4px 0 0; font-size: 12.5px; line-height: 1.45; color: #c9d8c6; }
.df-lune-vente .df-lune-vente__perigee::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--df-ocre-vif, #c98a2b); transform: translateY(-1px); }
.df-lune-vente .df-lune-vente__cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
/* Carte du catalogue couchée : photo à gauche, pied (prix, quantité, « Ajouter ») sous le texte. */
.df-lune-vente .df-carte-produit { display: grid; grid-template-columns: 84px minmax(0, 1fr); border: 0; box-shadow: none; }
.df-lune-vente .df-carte-produit__scene { aspect-ratio: auto; height: 100%; min-height: 132px; }
.df-lune-vente .df-carte-produit__scene img { position: absolute; inset: 8px 4px; width: calc(100% - 8px); height: calc(100% - 16px); }
.df-lune-vente .df-carte-produit__pastilles { display: none; }
.df-lune-vente .df-carte-produit__corps { gap: 4px; padding: 11px 12px 12px; }
.df-lune-vente .df-carte-produit__producteur { font-size: 11px; }
.df-lune-vente .df-carte-produit__titre { font-size: 15.5px; line-height: 1.25; }
.df-lune-vente .df-carte-produit__meta { font-size: 12.5px; }
.df-lune-vente .df-carte-produit__pied { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; row-gap: 8px; margin-top: 6px; padding-top: 8px; }
.df-lune-vente .df-carte-produit__pied .df-prix { align-items: flex-start; margin-right: auto; text-align: left; }
.df-lune-vente .df-lune-vente__lien { align-self: flex-start; display: inline-flex; align-items: center; min-height: 40px; font-size: var(--df-fs-petit, 13.5px); font-weight: 600; color: var(--df-vert, #294c45); text-decoration: underline; text-underline-offset: 3px; }
.df-lune-vente .df-lune-vente__selection .df-lune-vente__lien { min-height: 32px; color: #f1e7c8; }
.df-lune-vente .df-lune-vente__fruit { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 16px; background: var(--df-blanc, #fff); border: 1px solid var(--df-trait, #d8d2c4); }
.df-lune-vente .df-lune-vente__titre-fruit { margin: 0; font-family: var(--df-police-texte, system-ui, sans-serif); font-size: var(--df-fs-mini, 12px); font-weight: 700; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; color: var(--df-vert, #294c45); }
.df-lune-vente .df-lune-vente__quand { display: flex; align-items: center; gap: 14px; }
.df-lune-vente .df-lune-vente__case { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 0 0 58px; width: 58px; height: 62px; border: 1px solid var(--df-ocre-trait, #d8b56b); border-radius: var(--df-rayon, 8px); background: var(--df-ocre-pale, #f8efd9); color: var(--df-encre, #1b2522); }
.df-lune-vente .df-lune-vente__case-num { font-family: var(--df-police-titre, Georgia, serif); font-size: 26px; line-height: 1; }
.df-lune-vente .df-lune-vente__case-mois { font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--df-texte-doux, #5a615c); }
.df-lune-vente .df-lune-vente__date { display: flex; flex-direction: column; gap: 3px; margin: 0; font-family: var(--df-police-titre, Georgia, serif); font-size: 20px; line-height: 1.2; color: var(--df-encre, #1b2522); }
.df-lune-vente .df-lune-vente__conseil { font-family: var(--df-police-texte, system-ui, sans-serif); font-size: var(--df-fs-petit, 13.5px); line-height: 1.4; color: var(--df-texte-doux, #5a615c); }
.df-lune-vente .df-lune-vente__urgence { margin: 0; padding: 10px 12px; border-radius: var(--df-rayon, 8px); background: var(--df-sauge-pale, #e6eee3); font-size: 14px; line-height: 1.5; color: var(--df-texte, #2b2f2c); }
.df-lune-vente .df-lune-vente__urgence strong { color: var(--df-vert-fonce, #1f3b35); }
@media (max-width: 1023px) {
	.df-lune-vente { flex: 1 1 100%; }
}
@media (max-width: 767px) {
	.df-calendrier-vente { gap: var(--df-esp-5, 24px); }
	.df-lune-vente .df-lune-vente__selection { padding: 20px 16px 16px; }
	.df-lune-vente .df-lune-vente__titre { font-size: 19px; }
	.df-lune-vente .df-lune-vente__fruit { padding: 16px; }
}

/* ---------------------------------------------------------------- texte de référencement sous les archives */
.df-archive-bas { max-width: 860px; margin: var(--df-esp-7, 48px) auto 0; font-size: var(--df-fs-base, 16px); line-height: 1.65; color: var(--df-texte, #2b2f2c); }
.df-archive-bas h2, .df-archive-bas h3 { font-family: var(--df-police-titre, Georgia, serif); font-weight: 400; color: var(--df-encre, #1b2522); }
/* Fiches conseil (Contenus\Fiches, proposition C du 04/10/2026, docs/maquettes/texte-bas/propositions.html) : en-tête centré,
   une carte par intertitre, la première dans le vert sauge de l'encadré « L'essentiel ». « div. » : passe devant la classe
   Oxygen de l'emplacement (.df-producteur-bas-emplacement .df-producteur-bas, 860 px). */
div.df-archive-bas.df-fiches { max-width: 1080px; margin: 80px auto 0; font-size: 15.5px; line-height: 1.7; }
.df-univers-seo + .df-producteur-bas-emplacement div.df-fiches { margin-top: 0; }
/* Pages d'univers et familles de spiritueux : les fiches sont le dernier bloc avant le pied de page (bande de réassurance) ;
   même respiration dessous que sous le texte du bas (.df-univers-seo : 96 px, 44 px sur téléphone). */
.df-univers-bas .df-producteur-bas-emplacement div.df-fiches { margin-bottom: 96px; }
.df-fiches p { margin: 0 0 14px; }
.df-fiches ul, .df-fiches ol { margin: 0 0 14px; padding-left: 20px; }
.df-fiches li { margin: 4px 0; }
.df-fiches li::marker { color: var(--df-vert, #294c45); }
.df-fiches strong { font-weight: 600; color: var(--df-encre, #1b2522); }
.df-fiches a { color: var(--df-vert, #294c45); text-decoration: underline; text-underline-offset: 3px; }
.df-fiches__tete { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.df-fiches__etiquette { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0 0 10px; font-size: var(--df-fs-mini, 12px); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--df-vert, #294c45); }
.df-fiches__etiquette::before, .df-fiches__etiquette::after { content: ""; flex: 0 0 36px; height: 1px; background: var(--df-sauge-clair, #b9ccb4); }
.df-archive-bas .df-fiches__titre { margin: 0 0 14px; font-size: 38px; line-height: 1.12; }
.df-fiches__chapeau { font-size: 17.5px; line-height: 1.65; color: var(--df-encre, #1b2522); }
.df-fiches__chapeau > :last-child { margin-bottom: 0; }
.df-fiches__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.df-fiches__grille > :last-child:nth-child(even) { grid-column: 1 / -1; } /* carte seule sur sa ligne : toute la largeur */
.df-fiches__fiche { box-sizing: border-box; padding: 26px 28px 14px; border: 1px solid var(--df-trait, #d8d2c4); border-radius: var(--df-rayon-lg, 12px); background: var(--df-blanc, #fff); }
.df-fiches__fiche:focus { outline: 2px solid var(--df-vert, #294c45); outline-offset: 2px; }
.df-fiches__fiche--large { grid-column: 1 / -1; border-color: transparent; border-left: 4px solid var(--df-vert, #294c45); background: var(--df-sauge-pale, #e6eee3); }
.df-fiches__icone { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 50%; background: var(--df-sauge-pale, #e6eee3); color: var(--df-vert, #294c45); }
.df-fiches__fiche--large .df-fiches__icone { background: var(--df-blanc, #fff); }
.df-archive-bas .df-fiches__nom { margin: 0 0 10px; font-size: 21px; line-height: 1.25; }
.df-fiches__corps h4 { margin: 16px 0 6px; font-size: 16px; font-weight: 600; color: var(--df-encre, #1b2522); }
.df-fiches__suite { display: none; }
/* Ancien texte long de la catégorie (Grille::sc_texte) : encadré « L'essentiel », même colonne que le texte qui suit. */
.df-texte-liste.df-texte-liste--encart { display: block; box-sizing: border-box; max-width: 1080px; margin: 72px auto 0; padding: 30px 36px 22px; border-radius: var(--df-rayon-lg, 12px); border-left: 4px solid var(--df-vert, #294c45); background: var(--df-sauge-pale, #e6eee3); }
.df-texte-liste--encart .df-texte-liste__etiquette { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: var(--df-fs-mini, 12px); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--df-vert, #294c45); }
.df-texte-liste--encart .df-texte-liste__etiquette::after { content: ""; flex: 0 0 36px; height: 1px; background: var(--df-sauge-clair, #b9ccb4); }
.df-texte-liste--encart .df-texte-liste__corps h3 { margin: 18px 0 8px; font-family: var(--df-police-titre, Georgia, serif); font-size: 21px; font-weight: 400; line-height: 1.25; color: var(--df-encre, #1b2522); }
.df-texte-liste--encart .df-texte-liste__corps h3:first-child { margin-top: 4px; }
.df-texte-liste--encart ~ * .df-archive-bas { margin-top: 44px; }
@media (max-width: 767px) {
	.df-texte-liste.df-texte-liste--encart { margin-top: 44px; padding: 22px 18px 14px; border-left-width: 3px; }
	.df-texte-liste--encart .df-texte-liste__corps h3 { font-size: 19px; }
	.df-archive-bas h2 { font-size: 28px; line-height: 1.15; }
	.df-archive-bas h3 { font-size: 22px; line-height: 1.2; }
	div.df-archive-bas.df-fiches { margin-top: 48px; font-size: 15px; }
	.df-univers-bas .df-producteur-bas-emplacement div.df-fiches { margin-bottom: 44px; }
	.df-archive-bas .df-fiches__titre { font-size: 27px; }
	.df-fiches__chapeau { font-size: 16px; }
	.df-fiches__grille { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.df-fiches__fiche { padding: 20px 18px 8px; }
	.df-archive-bas .df-fiches__nom { font-size: 19px; }
	.df-fiches--replie .df-fiches__fiche:nth-child(n+3) { display: none; }
	.df-fiches--replie .df-fiches__suite { display: flex; justify-content: center; margin-top: 16px; }
	.df-fiches__bouton { min-height: 48px; padding: 12px 22px; border: 1.5px solid var(--df-vert, #294c45); border-radius: var(--df-rayon, 8px); background: transparent; color: var(--df-vert, #294c45); font: 600 15px/1.2 var(--df-police-texte, system-ui, sans-serif); cursor: pointer; }
}

/* ---------------------------------------------------------------- mention de conservation et bloc événement (fiche) */
.df-fiche-conservation { margin: 0; padding: 10px 14px; border-left: 3px solid var(--df-ocre-trait, #d8b56b); background: var(--df-ocre-pale, #f8efd9); border-radius: 0 var(--df-rayon, 8px) var(--df-rayon, 8px) 0; font-size: var(--df-fs-petit, 13.5px); line-height: 1.5; color: var(--df-texte, #2b2f2c); }
.df-fiche-evenement { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px 18px; border: 1px solid var(--df-sauge-clair, #b9ccb4); border-radius: var(--df-rayon-lg, 12px); background: var(--df-sauge-pale, #e6eee3); }
.df-fiche-evenement__titre { margin: 0; font-size: var(--df-fs-mini, 12px); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--df-vert, #294c45); }
.df-fiche-evenement__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; }
.df-fiche-evenement__liste dt { font-size: var(--df-fs-mini, 12px); color: var(--df-texte-doux, #5a615c); }
.df-fiche-evenement__liste dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; color: var(--df-encre, #1b2522); }
.df-fiche-evenement__passe { margin: 0; font-size: var(--df-fs-petit, 13.5px); color: var(--df-texte-doux, #5a615c); }

/* ---------------------------------------------------------------- page « Programme de fidélité » (Fidelite\Presentation) */
.df-fidelite-page__intro { font-size: 17px; }
.df-fidelite-page__solde { padding: 12px 16px; border: 1px solid var(--df-sauge-clair, #b9ccb4); border-radius: var(--df-rayon, 8px); background: var(--df-sauge-pale, #e6eee3); }
.df-prose .df-fidelite-page__chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: var(--df-esp-5, 20px) 0; padding: 0; list-style: none; }
.df-prose .df-fidelite-page__chiffre { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 16px 18px; border: 1px solid var(--df-trait, #d8d2c4); border-radius: var(--df-rayon-lg, 12px); background: var(--df-blanc, #fff); }
.df-fidelite-page__valeur { font-family: var(--df-police-titre, Georgia, serif); font-size: 24px; line-height: 1.2; color: var(--df-vert, #294c45); }
.df-fidelite-page__legende { font-size: var(--df-fs-petit, 13.5px); line-height: 1.4; color: var(--df-texte-doux, #5a615c); }
.df-fidelite-page__exemple { padding: 10px 14px; border-left: 3px solid var(--df-ocre-trait, #d8b56b); background: var(--df-ocre-pale, #f8efd9); border-radius: 0 var(--df-rayon, 8px) var(--df-rayon, 8px) 0; }

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