/**
 * Blocs « blog et pages » de la Phase 16 sexies A3 : rubriques du blog, « À découvrir » sous les articles, vidéo au clic de la
 * page « Notre concept », page Promotions. Jetons de la charte v2 uniquement (variables --df-*). Chargée seulement sur les
 * pages qui les affichent (Contenus\Feuille). Points de rupture : tablette ≤ 1023 px, téléphone ≤ 767 px.
 *
 * Les pages passent par le gabarit « page de contenu », dont le texte est enveloppé dans .df-prose (liens verts soulignés,
 * titres et paragraphes à marges) : les règles de ces blocs sont préfixées par leur racine pour l'emporter sur celles-ci.
 */

/* ============================================================================ rubriques du blog */
.df-rubriques { width: 100%; }
.df-rubriques__liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.df-rubriques .df-rubriques__lien { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--df-trait, #e4ddcf); border-radius: var(--df-rayon-pilule, 999px); background: var(--df-blanc, #fff); font-family: var(--df-police-texte, system-ui, sans-serif); font-size: var(--df-fs-texte, 15px); font-weight: 600; line-height: 1.2; color: var(--df-encre, #1b2522); text-decoration: none; white-space: nowrap; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.df-rubriques .df-rubriques__lien:hover, .df-rubriques .df-rubriques__lien:focus-visible { border-color: var(--df-vert, #294c45); color: var(--df-vert, #294c45); }
.df-rubriques .df-rubriques__lien--actif, .df-rubriques .df-rubriques__lien--actif:hover, .df-rubriques .df-rubriques__lien--actif:focus-visible { background: var(--df-vert, #294c45); border-color: var(--df-vert, #294c45); color: var(--df-blanc, #fff); }
.df-rubriques .df-rubriques__nb { font-size: var(--df-fs-petit, 13.5px); font-weight: 500; color: var(--df-texte-doux, #5f6a66); }
.df-rubriques .df-rubriques__lien--actif .df-rubriques__nb { color: var(--df-sur-vert, #dfe8de); }
/* Téléphone : une seule ligne de pastilles qui défile (défilement tactile, sans script), jusqu'au bord de l'écran. */
@media (max-width: 767px) {
	.df-rubriques__liste { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 8px; scroll-snap-type: x proximity; scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.df-rubriques__liste::-webkit-scrollbar { display: none; }
	.df-rubriques__liste > li { flex: 0 0 auto; scroll-snap-align: start; }
}

/* ============================================================================ « À découvrir » sous les articles */
.df-decouvrir { width: 100%; margin-top: 12px; padding-top: 40px; border-top: 1px solid var(--df-trait-doux, #ece6da); font-family: var(--df-police-texte, system-ui, sans-serif); }
.df-decouvrir__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 28px; margin-bottom: 24px; }
.df-decouvrir__titres { min-width: 0; }
.df-decouvrir .df-decouvrir__surtitre { margin: 0 0 6px; font-size: var(--df-fs-mini, 12px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--df-sauge-fonce, #56715a); }
.df-decouvrir .df-decouvrir__titre { margin: 0; font-family: var(--df-police-titre, Georgia, serif); font-size: var(--df-ft-section, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -.012em; color: var(--df-encre, #1b2522); }
.df-decouvrir .df-decouvrir__texte { margin: 8px 0 0; font-size: var(--df-fs-lead, 17px); line-height: 1.5; color: var(--df-texte, #46524e); }
.df-decouvrir__liens { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.df-decouvrir .df-decouvrir__lien, .df-promo-page .df-promo-groupe__tout { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--df-fs-texte, 15px); font-weight: 600; color: var(--df-vert, #294c45); text-decoration: none; white-space: nowrap; }
.df-decouvrir .df-decouvrir__lien:hover, .df-promo-page .df-promo-groupe__tout:hover { color: var(--df-vert-fonce, #1f3b35); text-decoration: underline; text-underline-offset: 4px; }
.df-decouvrir__fleche { width: 18px; height: 18px; flex: 0 0 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M5 12h14M13 6l6 6-6 6%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / 18px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M5 12h14M13 6l6 6-6 6%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform .2s ease; }
.df-decouvrir__lien:hover .df-decouvrir__fleche, .df-promo-groupe__tout:hover .df-decouvrir__fleche { transform: translateX(3px); }
.df-decouvrir__cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1023px) {
	.df-decouvrir__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.df-decouvrir { padding-top: 28px; }
	.df-decouvrir .df-decouvrir__titre { font-size: var(--df-ft-titre, 28px); }
	.df-decouvrir .df-decouvrir__texte { font-size: var(--df-fs-base, 16px); }
	.df-decouvrir__cartes { gap: 12px; }
}

/* ============================================================================ page « Notre concept » et vidéo au clic */
.df-prose > .df-concept { max-width: none; }
.df-prose .df-concept > .wp-block-group__inner-container { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
.df-prose .df-concept .wp-block-group__inner-container > * { grid-column: 1; max-width: none; }
.df-prose .df-concept .wp-block-group__inner-container > p { margin: 0 0 1.1em; font-size: var(--df-fs-lead, 17px); line-height: 1.7; }
.df-prose .df-concept .wp-block-group__inner-container > p:first-child { margin-bottom: .75em; font-family: var(--df-police-titre, Georgia, serif); font-size: var(--df-ft-section, 40px); font-weight: 400; line-height: 1.12; letter-spacing: -.012em; color: var(--df-encre, #1b2522); }
.df-prose .df-concept .wp-block-group__inner-container > .df-video-clic { grid-column: 2; grid-row: 1 / span 5; margin: 6px 0 0; position: sticky; top: 24px; }
.df-prose .df-concept .wp-block-group__inner-container > .df-concept__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 0; }
@media (max-width: 1023px) {
	.df-prose .df-concept > .wp-block-group__inner-container { display: block; }
	.df-prose .df-concept .wp-block-group__inner-container > p:first-child { font-size: 32px; }
	.df-prose .df-concept .wp-block-group__inner-container > .df-video-clic { position: static; margin: 28px 0; }
}
@media (max-width: 767px) {
	.df-prose .df-concept .wp-block-group__inner-container > p { font-size: var(--df-fs-base, 16px); }
	.df-prose .df-concept .wp-block-group__inner-container > p:first-child { font-size: 26px; }
}

.df-video-clic { position: static; margin: 28px 0; }
}
@media (max-width: 767px) {
	.df-prose .df-concept > p { font-size: var(--df-fs-base, 16px); }
	.df-prose .df-concept > p:first-child { font-size: 26px; }
}

.df-video-clic { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: var(--df-vert-nuit, #162c27); box-shadow: var(--df-ombre-survol, 0 12px 28px -16px rgba(31, 59, 53, .45)); }
.df-video-clic .df-video-clic__lancer { position: relative; display: block; aspect-ratio: 16 / 9; color: var(--df-blanc, #fff); text-decoration: none; }
.df-video-clic .df-video-clic__lancer:hover, .df-video-clic .df-video-clic__lancer:focus-visible { color: var(--df-blanc, #fff); }
.df-video-clic .df-video-clic__lancer:focus-visible { outline: 3px solid var(--df-sauge, #7f9a80); outline-offset: -3px; }
.df-video-clic__affiche { position: absolute; inset: 0; background: radial-gradient(120% 90% at 18% 12%, rgba(185, 204, 181, .28), transparent 55%), radial-gradient(90% 80% at 92% 100%, rgba(114, 31, 49, .35), transparent 60%), linear-gradient(135deg, var(--df-vert, #294c45), var(--df-vert-nuit, #162c27)); background-size: cover; background-position: center; transition: transform .4s ease; }
.df-video-clic__affiche--image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 44, 39, .15), rgba(22, 44, 39, .55)); }
.df-video-clic__lancer:hover .df-video-clic__affiche { transform: scale(1.03); }
.df-video-clic__lecture { position: absolute; left: 50%; top: 46%; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; padding-left: 4px; box-sizing: border-box; border-radius: 50%; background: var(--df-creme, #faf7f1); color: var(--df-vert, #294c45); box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .55); transform: translate(-50%, -50%); transition: transform .2s ease; }
.df-video-clic__lancer:hover .df-video-clic__lecture { transform: translate(-50%, -50%) scale(1.07); }
.df-video-clic__libelle { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 20px 16px; font-family: var(--df-police-texte, system-ui, sans-serif); font-size: var(--df-fs-base, 16px); font-weight: 600; line-height: 1.3; text-align: center; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .5)); }
.df-video-clic__lecteur { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.df-video-clic .df-video-clic__note { margin: 0; padding: 10px 16px 12px; font-family: var(--df-police-texte, system-ui, sans-serif); font-size: var(--df-fs-mini, 12px); line-height: 1.45; color: var(--df-sur-nuit, #cfdccd); background: var(--df-vert-nuit, #162c27); }
.df-video-clic__accord { position: absolute; inset: 0 0 auto 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 16 / 9; padding: 20px; box-sizing: border-box; text-align: center; background: rgba(22, 44, 39, .96); color: var(--df-blanc, #fff); font-family: var(--df-police-texte, system-ui, sans-serif); }
.df-video-clic__accord p { margin: 0; max-width: 460px; font-size: var(--df-fs-texte, 15px); line-height: 1.5; }
.df-video-clic__bouton { min-height: 44px; padding: 0 20px; border: 1.5px solid var(--df-sauge-clair, #b9ccb5); border-radius: var(--df-rayon, 6px); background: transparent; color: var(--df-blanc, #fff); font: inherit; font-weight: 600; cursor: pointer; }
.df-video-clic__bouton--oui { background: var(--df-creme, #faf7f1); border-color: var(--df-creme, #faf7f1); color: var(--df-vert, #294c45); }
.df-video-clic__bouton:hover { filter: brightness(.96); }
@media (max-width: 767px) {
	.df-video-clic__lecture { width: 68px; height: 68px; }
	.df-video-clic__accord { position: static; aspect-ratio: auto; padding: 18px 16px; }
}

/* ============================================================================ boutons de ces pages */
.df-promo-bouton, .df-prose .df-promo-bouton, .df-promo-page .df-promo-bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; box-sizing: border-box; border: 1.5px solid var(--df-vert, #294c45); border-radius: var(--df-rayon, 6px); background: var(--df-vert, #294c45); font-family: var(--df-police-texte, system-ui, sans-serif); font-size: var(--df-fs-texte, 15px); font-weight: 600; line-height: 1.2; color: var(--df-blanc, #fff); text-decoration: none; transition: background .2s ease, color .2s ease; }
.df-promo-bouton:hover, .df-prose .df-promo-bouton:hover, .df-promo-page .df-promo-bouton:hover { background: var(--df-vert-fonce, #1f3b35); border-color: var(--df-vert-fonce, #1f3b35); color: var(--df-blanc, #fff); }
.df-promo-bouton--contour, .df-prose .df-promo-bouton--contour { background: transparent; color: var(--df-vert, #294c45); }
.df-promo-bouton--contour:hover, .df-prose .df-promo-bouton--contour:hover { background: var(--df-vert, #294c45); color: var(--df-blanc, #fff); }
.df-promo-page .df-promo-bouton--clair { background: var(--df-creme, #faf7f1); border-color: var(--df-creme, #faf7f1); color: var(--df-bordeaux, #721f31); }
.df-promo-page .df-promo-bouton--clair:hover { background: var(--df-blanc, #fff); border-color: var(--df-blanc, #fff); color: var(--df-bordeaux-fonce, #5a1826); }

/* ============================================================================ page Promotions */
.df-prose > .df-promo-page { max-width: none; }
.df-promo-page { display: flex; flex-direction: column; gap: 40px; width: 100%; font-family: var(--df-police-texte, system-ui, sans-serif); }
/* Bandeau d'en-tête : le seul appel fort bordeaux de la page. */
.df-promo-page .df-promo-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; overflow: hidden; padding: 48px 56px; border-radius: 20px; background: radial-gradient(90% 140% at 100% 0%, rgba(255, 255, 255, .12), transparent 55%), linear-gradient(135deg, var(--df-bordeaux, #721f31), var(--df-bordeaux-fonce, #5a1826)); color: var(--df-blanc, #fff); }
.df-promo-page .df-promo-hero__texte { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 640px; min-width: 0; }
.df-promo-page .df-promo-hero__surtitre { margin: 0; font-size: var(--df-fs-mini, 12px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--df-ocre-pale, #f7eedb); }
.df-promo-page .df-promo-hero__titre { margin: 0; font-family: var(--df-police-titre, Georgia, serif); font-size: var(--df-ft-section-grand, 48px); font-weight: 400; line-height: 1.05; letter-spacing: -.012em; color: var(--df-blanc, #fff); }
.df-promo-page .df-promo-hero__chapeau { margin: 0; font-size: var(--df-fs-lead, 17px); line-height: 1.55; color: #f3e3e1; }
.df-promo-page .df-promo-hero__operation { margin: 4px 0 0; display: inline-flex; align-self: flex-start; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--df-rayon-pilule, 999px); font-size: var(--df-fs-petit, 13.5px); color: var(--df-blanc, #fff); }
.df-promo-page .df-promo-hero__actions { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.df-promo-page .df-promo-hero__chiffre { position: relative; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; padding: 0 8px; text-align: center; }
.df-promo-page .df-promo-hero__jusqua { font-size: var(--df-fs-base, 16px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--df-ocre-pale, #f7eedb); }
.df-promo-page .df-promo-hero__max { font-family: var(--df-police-titre, Georgia, serif); font-size: 112px; line-height: .95; letter-spacing: -.02em; color: var(--df-blanc, #fff); }
.df-promo-page .df-promo-hero--vide { background: linear-gradient(135deg, var(--df-vert, #294c45), var(--df-vert-nuit, #162c27)); }
.df-promo-page .df-promo-hero--vide .df-promo-hero__chapeau { color: var(--df-sur-vert, #dfe8de); }
.df-promo-page .df-promo-hero--vide .df-promo-hero__surtitre { color: var(--df-sauge-clair, #b9ccb5); }
.df-promo-page .df-promo-hero--vide .df-promo-bouton:not(.df-promo-bouton--clair) { background: var(--df-creme, #faf7f1); border-color: var(--df-creme, #faf7f1); color: var(--df-vert, #294c45); }
.df-promo-page .df-promo-hero--vide .df-promo-bouton--clair { background: transparent; border-color: var(--df-sauge-clair, #b9ccb5); color: var(--df-blanc, #fff); }

/* Raccourcis par type de produit. */
.df-promo-page .df-promo-types { margin: -8px 0 0; }
.df-promo-page .df-promo-types__liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.df-promo-page .df-promo-types__lien { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--df-trait, #e4ddcf); border-radius: var(--df-rayon-pilule, 999px); background: var(--df-blanc, #fff); font-size: var(--df-fs-texte, 15px); font-weight: 600; color: var(--df-encre, #1b2522); text-decoration: none; white-space: nowrap; transition: border-color .2s ease, color .2s ease; }
.df-promo-page .df-promo-types__lien:hover, .df-promo-page .df-promo-types__lien:focus-visible { border-color: var(--df-bordeaux, #721f31); color: var(--df-bordeaux, #721f31); }
.df-promo-page .df-promo-types__lien--actif, .df-promo-page .df-promo-types__lien--actif:hover { background: var(--df-bordeaux-pale, #f6e9e8); border-color: var(--df-bordeaux, #721f31); color: var(--df-bordeaux, #721f31); }
.df-promo-page .df-promo-types__nb { font-size: var(--df-fs-petit, 13.5px); font-weight: 500; color: var(--df-texte-doux, #5f6a66); }

/* Groupes de produits et cartes. */
.df-promo-page .df-promo-groupe { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 24px; }
.df-promo-page .df-promo-groupe__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; padding-bottom: 12px; border-bottom: 1px solid var(--df-trait, #e4ddcf); }
.df-promo-page .df-promo-groupe__titre { margin: 0; font-family: var(--df-police-titre, Georgia, serif); font-size: var(--df-ft-titre, 32px); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; color: var(--df-encre, #1b2522); }
.df-promo-page .df-promo-groupe__nb { display: inline-flex; vertical-align: middle; margin-left: 8px; padding: 2px 10px; border-radius: var(--df-rayon-pilule, 999px); background: var(--df-bordeaux-pale, #f6e9e8); font-family: var(--df-police-texte, system-ui, sans-serif); font-size: var(--df-fs-petit, 13.5px); font-weight: 700; color: var(--df-bordeaux, #721f31); }
.df-promo-page .df-promo-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.df-promo-page .df-promo-case { position: relative; display: flex; }
.df-promo-page .df-promo-case > .df-carte-produit { flex: 1 1 auto; min-width: 0; }
/* Le pourcentage de remise, en grand sur la photo, remplace la petite pastille « −15 % » de la carte. */
.df-promo-page .df-promo-case__taux { position: absolute; top: 10px; right: 10px; z-index: 3; padding: 6px 12px; border-radius: var(--df-rayon-pilule, 999px); background: var(--df-bordeaux, #721f31); font-family: var(--df-police-texte, system-ui, sans-serif); font-size: 17px; font-weight: 700; line-height: 1.1; color: var(--df-blanc, #fff); box-shadow: 0 6px 14px -6px rgba(90, 24, 38, .6); pointer-events: none; }
.df-promo-page .df-promo-case__taux--simple { font-size: var(--df-fs-petit, 13.5px); }
.df-promo-page .df-promo-case .df-pastille--promo { display: none; }
.df-promo-page .df-carte-produit a { text-decoration: none; }
.df-promo-page .df-carte-produit .df-prix__barre { color: var(--df-texte-doux, #5f6a66); }
.df-promo-page .df-carte-produit .df-prix__montant { color: var(--df-bordeaux, #721f31); }
.df-promo-page .df-promo-pages { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; }
.df-promo-page .df-promo-pages__lien { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--df-trait, #e4ddcf); border-radius: var(--df-rayon-pilule, 999px); background: var(--df-blanc, #fff); font-weight: 600; color: var(--df-encre, #1b2522); text-decoration: none; }
.df-promo-page .df-promo-pages__lien:hover { border-color: var(--df-vert, #294c45); color: var(--df-vert, #294c45); }
.df-promo-page .df-promo-pages__etat { font-size: var(--df-fs-texte, 15px); color: var(--df-texte-doux, #5f6a66); }
@media (max-width: 1119px) {
	.df-promo-page .df-promo-cartes { gap: 20px; }
}
@media (max-width: 1023px) {
	.df-promo-page .df-promo-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.df-promo-page .df-promo-hero { padding: 40px 36px; }
	.df-promo-page .df-promo-hero__max { font-size: 88px; }
}
@media (max-width: 767px) {
	.df-promo-page { gap: 28px; }
	.df-promo-page .df-promo-hero { flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px 22px; border-radius: 16px; }
	.df-promo-page .df-promo-hero__titre { font-size: 36px; }
	.df-promo-page .df-promo-hero__chapeau { font-size: var(--df-fs-base, 16px); }
	.df-promo-page .df-promo-hero__chiffre { flex-direction: row; align-items: baseline; gap: 10px; padding: 0; }
	.df-promo-page .df-promo-hero__max { font-size: 56px; }
	.df-promo-page .df-promo-hero__jusqua { font-size: var(--df-fs-petit, 13.5px); }
	/* Les raccourcis défilent sur une ligne, comme les rubriques du blog. */
	.df-promo-page .df-promo-types__liste { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 8px; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none; }
	.df-promo-page .df-promo-types__liste::-webkit-scrollbar { display: none; }
	.df-promo-page .df-promo-types__liste > li { flex: 0 0 auto; scroll-snap-align: start; }
	.df-promo-page .df-promo-groupe__titre { font-size: var(--df-ft-bloc, 24px); }
	.df-promo-page .df-promo-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.df-promo-page .df-promo-case__taux { top: 8px; right: 8px; padding: 4px 9px; font-size: 14px; }
}