/**
 * Charte CBB v2 — complément CSS chargé partout par le module « charte ».
 *
 * La charte elle-même vit dans Oxygen 6 : variables (--cbb-*), classes (boutons, cartes, pastilles,
 * disponibilité…) et réglages globaux, source neuf/cbb-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 : */
	--cbb-filet: 1px solid var(--cbb-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 .cbb-sur-sombre. Pas sur une
 * surface qui contient un panneau clair (la barre d'en-tête et sa liste de recherche, par exemple).
 * ------------------------------------------------------------------------------------------ */

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

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

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

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

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

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

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

/* Encart de la fiche produit (injecté par un hook WooCommerce, pas par la source du gabarit — voir Affichage::encart_produit). */
.cbb-encart-produit:empty { display: none; }
.cbb-encart-produit .cbb-emplacement { display: block; margin: var(--cbb-esp-4) 0; }
.cbb-encart-produit .cbb-emplacement__message { display: block; padding: var(--cbb-esp-4); background: var(--cbb-sauge-pale); color: var(--cbb-vert-fonce); border-radius: var(--cbb-rayon); font-weight: var(--cbb-fw-demi); text-align: center; }
.cbb-encart-produit .cbb-emplacement__visuel img { width: 100%; height: auto; border-radius: var(--cbb-rayon-md); margin-bottom: var(--cbb-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. */
.cbb-emplacement.cbb-emplacement--encart:is(.cbb-emplacement--discret, .cbb-emplacement--avant, .cbb-emplacement--couleur) {
	display: flex; flex-direction: column; align-items: center; gap: var(--cbb-esp-2); box-sizing: border-box;
	padding: var(--cbb-esp-4) var(--cbb-esp-5); border-radius: var(--cbb-rayon); text-align: center;
}
.cbb-emplacement.cbb-emplacement--encart .cbb-emplacement__lien { display: flex; flex-direction: column; align-items: center; gap: var(--cbb-esp-2); color: inherit; text-decoration: none; }
.cbb-emplacement.cbb-emplacement--encart .cbb-emplacement__lien:hover .cbb-emplacement__message { text-decoration: underline; }
.cbb-emplacement.cbb-emplacement--encart .cbb-emplacement__message { display: block; padding: 0; background: none; border-radius: 0; color: inherit; font-size: var(--cbb-fs-lead); font-weight: var(--cbb-fw-demi); line-height: 1.3; }
.cbb-emplacement.cbb-emplacement--encart .cbb-emplacement__secondaire { display: block; font-size: var(--cbb-fs-petit); line-height: 1.4; }
.cbb-emplacement.cbb-emplacement--encart .cbb-emplacement__bouton { margin-top: var(--cbb-esp-1); text-decoration: none; }
.cbb-emplacement.cbb-emplacement--discret { background: var(--cbb-sauge-pale); color: var(--cbb-vert-fonce); }
.cbb-emplacement.cbb-emplacement--discret .cbb-emplacement__secondaire { color: var(--cbb-texte-doux); }
.cbb-emplacement.cbb-emplacement--avant { background: var(--cbb-vert); color: var(--cbb-blanc); }
.cbb-emplacement.cbb-emplacement--avant .cbb-emplacement__secondaire { color: var(--cbb-sur-vert); }
.cbb-emplacement.cbb-emplacement--couleur { background: var(--cbb-bordeaux); color: var(--cbb-blanc); }
.cbb-emplacement.cbb-emplacement--couleur .cbb-emplacement__secondaire { color: var(--cbb-bordeaux-pale); }
.cbb-emplacement.cbb-emplacement--avant .cbb-emplacement__message,
.cbb-emplacement.cbb-emplacement--couleur .cbb-emplacement__message { font-family: var(--cbb-police-titre); font-size: var(--cbb-ft-carte); font-weight: var(--cbb-fw-regulier); }
@media (max-width: 767px) {
	.cbb-emplacement.cbb-emplacement--encart:is(.cbb-emplacement--discret, .cbb-emplacement--avant, .cbb-emplacement--couleur) { padding: var(--cbb-esp-3) var(--cbb-esp-4); }
}
/* Texte sur plusieurs lignes (sauts de ligne gardés) et temps restant {compte_a_rebours} dans le texte d'un encart. */
.cbb-emplacement.cbb-emplacement--encart .cbb-compte-a-rebours { font-weight: var(--cbb-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.
 * ------------------------------------------------------------------------------------------ */
.cbb-annonce__texte .cbb-emplacement__message.cbb-emplacement__message--tel { display: none; }
@media (max-width: 767px) {
	.cbb-annonce__texte .cbb-emplacement__message.cbb-emplacement__message--ordi { display: none; }
	.cbb-annonce__texte .cbb-emplacement__message.cbb-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 cbb-annonce, Oxygen).
 * ------------------------------------------------------------------------------------------ */
.cbb-annonce:has(.cbb-emplacement--plus) { padding: 0; flex-direction: column; align-items: stretch; }
.cbb-annonce .cbb-annonce__texte:has(.cbb-emplacement--plus) { display: flex; flex-direction: column; width: 100%; }
.cbb-annonce__texte .cbb-emplacement.cbb-emplacement--plus { min-height: 34px; padding: 4px 16px; box-sizing: border-box; background: var(--cbb-bordeaux); }
.cbb-annonce__texte .cbb-emplacement.cbb-emplacement--plus .cbb-compte-a-rebours { background: var(--cbb-bordeaux-fonce); }
.cbb-annonce__texte .cbb-emplacement.cbb-emplacement--habituel { min-height: 38px; padding: 4px 16px; box-sizing: border-box; }
@media (max-width: 767px) {
	.cbb-annonce__texte .cbb-emplacement.cbb-emplacement--plus { min-height: 32px; padding: 4px 12px; }
	.cbb-annonce__texte .cbb-emplacement.cbb-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.
 * ------------------------------------------------------------------------------------------ */
.cbb-emplacement.cbb-bandeau-op { position: relative; display: grid; min-height: 440px; overflow: hidden; background: var(--cbb-vert-nuit); color: var(--cbb-blanc); font-family: var(--cbb-police-texte); }
.cbb-bandeau-op__visuel { grid-area: 1 / 1; position: relative; display: block; min-height: 0; overflow: hidden; }
.cbb-bandeau-op__visuel img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cbb-bandeau-op__contenu { grid-area: 1 / 1; position: relative; display: flex; align-items: center; width: 100%; max-width: calc(var(--cbb-largeur) + 48px); margin: 0 auto; padding: var(--cbb-esp-8) 24px; box-sizing: border-box; }
.cbb-bandeau-op:not(.cbb-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; }
.cbb-bandeau-op:not(.cbb-bandeau-op--texte) .cbb-bandeau-op__contenu { z-index: 2; }
.cbb-bandeau-op__texte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cbb-esp-4); max-width: 600px; }
.cbb-bandeau-op__titre { margin: 0; font-family: var(--cbb-police-titre); font-weight: var(--cbb-fw-regulier); font-size: var(--cbb-ft-section-grand); line-height: 1.06; letter-spacing: -0.01em; color: var(--cbb-blanc); overflow-wrap: anywhere; }
.cbb-bandeau-op__chapeau { margin: 0; font-size: var(--cbb-fs-lead); line-height: 1.55; color: var(--cbb-sur-nuit); overflow-wrap: anywhere; }
.cbb-bandeau-op__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cbb-esp-3) var(--cbb-esp-4); margin-top: var(--cbb-esp-2); }
.cbb-bandeau-op__actions .cbb-compte-a-rebours { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--cbb-esp-3); border-radius: var(--cbb-rayon-sm); background: var(--cbb-bordeaux); color: var(--cbb-blanc); font-size: var(--cbb-fs-texte); font-weight: var(--cbb-fw-demi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cbb-emplacement.cbb-bandeau-op--texte { min-height: 0; background: var(--cbb-vert); } /* version texte : hauteur de son contenu (plus précis que .cbb-emplacement.cbb-bandeau-op) */
.cbb-bandeau-op--texte .cbb-bandeau-op__contenu { padding-top: var(--cbb-esp-7); padding-bottom: var(--cbb-esp-7); }
.cbb-bandeau-op--texte .cbb-bandeau-op__texte { max-width: 760px; }
.cbb-bandeau-op--texte .cbb-bandeau-op__titre { font-size: var(--cbb-ft-section); }
.cbb-bandeau-op--texte .cbb-bandeau-op__chapeau { color: var(--cbb-sur-vert); }
@media (max-width: 1119px) {
	.cbb-emplacement.cbb-bandeau-op { min-height: 380px; }
	.cbb-bandeau-op__titre { font-size: var(--cbb-ft-section); }
}
@media (max-width: 767px) {
	.cbb-emplacement.cbb-bandeau-op { display: flex; flex-direction: column; min-height: 0; background: var(--cbb-vert-fonce); }
	.cbb-bandeau-op:not(.cbb-bandeau-op--texte)::before { display: none; }
	.cbb-bandeau-op__visuel img { position: static; height: auto; max-height: 420px; aspect-ratio: 1 / 1; }
	.cbb-bandeau-op__contenu { padding: var(--cbb-esp-5) 16px var(--cbb-esp-6); }
	.cbb-bandeau-op__texte { gap: var(--cbb-esp-3); }
	.cbb-bandeau-op__titre, .cbb-bandeau-op--texte .cbb-bandeau-op__titre { font-size: var(--cbb-ft-titre); line-height: 1.12; letter-spacing: 0; }
	.cbb-bandeau-op__chapeau { font-size: var(--cbb-fs-texte); }
	.cbb-emplacement.cbb-bandeau-op--texte { background: var(--cbb-vert); }
	.cbb-bandeau-op--texte .cbb-bandeau-op__contenu { padding-top: var(--cbb-esp-6); padding-bottom: var(--cbb-esp-6); }
}

/* --------------------------------------------------------------------------------------------
 * Couleur de l'opération (Remises\Couleur, 30/09/2026) : un affichage d'une opération colorée porte la classe
 * `cbb-op-couleur` et ses variables en ligne (--cbb-promo, --cbb-promo-texte, --cbb-promo-secondaire, --cbb-promo-fonce,
 * --cbb-promo-fonce-texte, --cbb-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. */
.cbb-annonce__texte .cbb-emplacement.cbb-emplacement--plus.cbb-op-couleur { background: var(--cbb-promo); color: var(--cbb-promo-texte); }
.cbb-annonce__texte .cbb-emplacement--plus.cbb-op-couleur :is(a, .cbb-emplacement__message, .cbb-annonce__segment) { color: var(--cbb-promo-texte); }
.cbb-annonce__texte .cbb-emplacement.cbb-emplacement--plus.cbb-op-couleur .cbb-compte-a-rebours { background: var(--cbb-promo-fonce); color: var(--cbb-promo-fonce-texte); }
.cbb-annonce__texte .cbb-op-couleur:not(.cbb-emplacement--plus) .cbb-compte-a-rebours { background: var(--cbb-promo); color: var(--cbb-promo-texte); }
/* Encarts au style « Couleur de l'opération ». */
.cbb-emplacement.cbb-emplacement--couleur.cbb-op-couleur { background: var(--cbb-promo); color: var(--cbb-promo-texte); }
.cbb-emplacement.cbb-emplacement--couleur.cbb-op-couleur .cbb-emplacement__secondaire { color: var(--cbb-promo-secondaire); }
/* Bandeau de l'accueil : version texte sur la couleur ; avec visuel, le compte à rebours. */
.cbb-bandeau-op.cbb-op-couleur .cbb-bandeau-op__actions .cbb-compte-a-rebours { background: var(--cbb-promo); color: var(--cbb-promo-texte); }
.cbb-emplacement.cbb-bandeau-op.cbb-bandeau-op--texte.cbb-op-couleur { background: var(--cbb-promo); color: var(--cbb-promo-texte); }
.cbb-bandeau-op--texte.cbb-op-couleur .cbb-bandeau-op__titre { color: var(--cbb-promo-texte); }
.cbb-bandeau-op--texte.cbb-op-couleur .cbb-bandeau-op__chapeau { color: var(--cbb-promo-secondaire); }
.cbb-bandeau-op.cbb-bandeau-op--texte.cbb-op-couleur .cbb-bandeau-op__actions .cbb-compte-a-rebours { background: var(--cbb-promo-fonce); color: var(--cbb-promo-fonce-texte); }
/* « Sélection du moment » des pages Vins / Bières / Spiritueux. */
.cbb-bandeau.cbb-operation.cbb-op-couleur { background-color: var(--cbb-promo); color: var(--cbb-promo-texte); }
.cbb-bandeau.cbb-operation.cbb-op-couleur .cbb-bandeau__titre { color: var(--cbb-promo-texte); }
.cbb-bandeau.cbb-operation.cbb-op-couleur :is(.cbb-bandeau__chapeau, .cbb-operation__dates) { color: var(--cbb-promo-secondaire); }
/* « Les promos du moment » s'empile sous l'encart de l'opération (pages Vins, Bières, Spiritueux). */
.cbb-operation + .cbb-promos-vins { margin-top: 36px; }
/* Étiquette « −X % » des cartes et de la fiche, ligne de remise du panier (texte sur blanc : variante lisible). */
.cbb-pastille.cbb-pastille--promo.cbb-op-couleur, .cbb-fiche-prix__etiquette.cbb-op-couleur { background-color: var(--cbb-promo); color: var(--cbb-promo-texte); }
.cbb-panier-ligne__remise.cbb-op-couleur { color: var(--cbb-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). */
.cbb-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.
 * -------------------------------------------------------------------------------------------- */
.cbb-fiche-technique dd a[href] {
	display: inline-block; padding: 10px 2px; margin: -10px -2px; min-height: 24px;
	color: var(--cbb-vert); text-decoration: underline dotted; text-decoration-thickness: 1px;
	text-decoration-color: var(--cbb-vert); text-underline-offset: 4px;
}
.cbb-fiche-technique dd a[href]::after { content: "\203A"; margin-left: 4px; font-weight: 700; text-decoration: none; display: inline-block; }
.cbb-fiche-technique dd a[href]:hover { text-decoration-style: solid; text-decoration-thickness: 2px; }
.cbb-fiche-technique dd a[href]:focus-visible { outline: 2px solid var(--cbb-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(--cbb-esp-3, 12px) var(--cbb-esp-4, 16px);
	border-radius: var(--cbb-rayon);
	background: var(--cbb-sauge-pale);
	color: var(--cbb-vert-fonce);
	font-family: var(--cbb-police-texte);
	font-weight: var(--cbb-fw-demi);
	line-height: 1.45;
}
body .breakdance-form-message.breakdance-form-message--error {
	background: var(--cbb-bordeaux-pale);
	color: var(--cbb-bordeaux-fonce);
}
body .breakdance-form-message-dismiss-button { color: inherit; }

/* --------------------------------------------------------------------------------------------
 * Carte « À l'honneur » du méga-menu (Catalogue\CarteMenu, [cbb_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.
 * ------------------------------------------------------------------------------------------ */

.cbb-mega__carte--produit .cbb-mega__carte-visuel { background: var(--cbb-blanc); }
.cbb-mega__carte--produit .cbb-mega__carte-image { object-fit: contain; padding: 12px; box-sizing: border-box; }
.cbb-mega__carte-prix { font-weight: 600; color: var(--cbb-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. */
.cbb-mega__carte--cadeau { border-color: var(--cbb-ocre-vif); }
.cbb-mega__carte--cadeau .cbb-mega__carte-prix { font-size: 18px; }
.cbb-mega__carte-bouton { align-self: flex-start; margin-top: 6px; padding: 10px 18px; border-radius: 999px; background: var(--cbb-vert-fonce); color: var(--cbb-blanc); font-size: 14px; font-weight: 700; transition: filter .2s ease; }
.cbb-mega__carte--cadeau:hover .cbb-mega__carte-bouton { filter: brightness(1.2); }

/* Date limite d'un événement (Panier\DateLimite) : feuille « date-limite » (charte-date-limite.css), chargée quand un événement est allumé. */