/*
 * Domaine Bekka — Design System : composants premium + animations.
 * Chargé après main.css. Source future : assets/scss/.
 *
 * Sommaire
 *  1. Tokens étendus (motion, ombres, rayons, z-index)
 *  2. Système photographique (db-figure : ratios, placeholders par type)
 *  3. Système iconographique (db-icon)
 *  4. Page-hero (ouverture des pages intérieures)
 *  5. Intro-block
 *  6. Manifesto
 *  7. Preuves
 *  8. Citation
 *  9. Conséquence (produit)
 * 10. Galerie / tuiles
 * 11. Invitation
 * 12. Chapitres — thèmes
 * 13. Bibliothèque d'animations discrètes
 */

/* 1. Tokens étendus ------------------------------------------------------ */
:root {
	--db-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--db-dur-slow: 1.1s;
	--db-dur: 0.6s;
	--db-shadow-soft: 0 24px 60px -30px rgba(26, 26, 23, 0.35);
	--db-radius: 2px;
	--db-hair: 1px solid rgba(176, 141, 87, 0.3); /* filet or */
	--db-z-header: 100;
}

/* 2. Système photographique --------------------------------------------- */
.db-figure { position: relative; margin: 0; overflow: hidden; background: #e7e0d2; }
.db-figure__img { width: 100%; height: 100%; object-fit: cover; object-position: var(--db-obj-pos, center center); display: block; }

/* Ratios */
.db-figure--landscape { aspect-ratio: 3 / 2; }
.db-figure--portrait  { aspect-ratio: 4 / 5; }
.db-figure--square    { aspect-ratio: 1 / 1; }
.db-figure--wide      { aspect-ratio: 16 / 9; }
.db-figure--drone     { aspect-ratio: 21 / 9; }
.db-figure--editorial { aspect-ratio: 5 / 7; }
.db-figure--detail    { aspect-ratio: 1 / 1; }

/* Placeholder générique */
.db-figure__placeholder {
	position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start;
	padding: 1rem 1.25rem; color: rgba(255, 255, 255, 0.85);
}
.db-figure__ph-label {
	font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600;
	opacity: 0.7;
}

/* Placeholders par type — dégradés « terroir » distincts, jamais de banque d'images */
.db-ph--drone    { background: radial-gradient(140% 120% at 70% 10%, rgba(176,141,87,.4), transparent 55%), linear-gradient(160deg, #3f4726, #6d7a45); }
.db-ph--portrait { background: radial-gradient(120% 120% at 30% 20%, rgba(176,141,87,.45), transparent 60%), linear-gradient(140deg, #4a4033, #7a6a56); }
.db-ph--paysage  { background: linear-gradient(180deg, #6d7a45 0%, #4a512b 60%, #3a3320 100%); }
.db-ph--recolte  { background: radial-gradient(120% 120% at 80% 80%, rgba(176,141,87,.5), transparent 55%), linear-gradient(135deg, #5b6236, #464b29); }
.db-ph--detail   { background: linear-gradient(135deg, #b08d57, #7a6a56); }
.db-ph--texture  { background: repeating-linear-gradient(45deg, #7a6a56, #7a6a56 8px, #6f6050 8px, #6f6050 16px); }
.db-ph--cuisine  { background: radial-gradient(120% 120% at 30% 30%, rgba(245,241,232,.25), transparent 55%), linear-gradient(140deg, #8a6b3f, #5b4a30); }
.db-ph--saison   { background: linear-gradient(120deg, #5b6236, #b08d57 120%); }

.db-figure__caption {
	position: absolute; left: 0; right: 0; bottom: 0;
	display: flex; justify-content: space-between; gap: 1rem;
	padding: 2.5rem 1.25rem 1rem; color: #fff;
	background: linear-gradient(transparent, rgba(26,26,23,0.6));
	font-size: 0.8rem;
}
.db-figure__credit { opacity: 0.7; font-size: 0.72rem; }

/* 3. Iconographie -------------------------------------------------------- */
.db-icon { display: inline-block; vertical-align: middle; color: var(--db-or-mat); }
.db-intro-block__icon, .db-preuve__icon { display: inline-flex; color: var(--db-or-mat); margin-bottom: 1rem; }

/* 4. Page-hero ----------------------------------------------------------- */
.db-pagehero {
	position: relative; display: flex; align-items: flex-end;
	background: var(--db-vert-olive-dark) center/cover no-repeat; color: #fff;
}
.db-pagehero--full { min-height: 92vh; }
.db-pagehero--tall { min-height: 74vh; }
.db-pagehero--std  { min-height: 56vh; }
.db-pagehero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,23,.15), rgba(26,26,23,.65)); }
.db-pagehero__content { position: relative; width: min(100% - 2.5rem, var(--db-max)); margin-inline: auto; padding-block: clamp(3rem, 8vw, 6rem); }
.db-pagehero__eyebrow { text-transform: uppercase; letter-spacing: 0.28em; font-size: 0.75rem; color: var(--db-or-mat); margin-bottom: 1.25rem; }
.db-pagehero__title { color: #fff; font-size: clamp(2.6rem, 6vw, 5rem); max-width: 16ch; margin: 0; }
.db-pagehero__subtitle { color: rgba(255,255,255,0.9); font-size: 1.2rem; max-width: 46ch; margin-top: 1.5rem; }

/* 5. Intro-block --------------------------------------------------------- */
.db-intro-block { max-width: 720px; margin-bottom: 3rem; }
.db-intro-block--center { margin-inline: auto; text-align: center; }
.db-intro-block__lead { font-size: 1.2rem; color: var(--db-terre); line-height: 1.75; margin-top: 1rem; }

/* 6. Manifesto ----------------------------------------------------------- */
.db-manifesto { padding-block: clamp(4rem, 11vw, 10rem); text-align: center; }
.db-manifesto--cream { background: var(--db-blanc-casse); }
.db-manifesto--olive { background: var(--db-vert-olive); color: #fff; }
.db-manifesto--dark  { background: var(--db-noir-profond); color: #fff; }
.db-manifesto__inner { width: min(100% - 2.5rem, 820px); }
.db-manifesto__text { font-family: var(--db-font-serif); font-size: clamp(1.7rem, 3.8vw, 2.9rem); line-height: 1.35; margin: 0; }
.db-manifesto--olive .db-manifesto__text, .db-manifesto--dark .db-manifesto__text { color: #fff; }
.db-manifesto__cite { margin-top: 1.75rem; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--db-or-mat); }

/* 7. Preuves ------------------------------------------------------------- */
.db-preuves { padding-block: var(--db-section-y); }
.db-preuves--olive { background: var(--db-vert-olive); color: #fff; }
.db-preuves--dark  { background: var(--db-noir-profond); color: #fff; }
.db-preuves--cream { background: var(--db-blanc-casse); }
.db-preuves--olive .db-section__title, .db-preuves--dark .db-section__title { color: #fff; }
.db-preuves__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--db-gap); margin-top: 3rem; }
.db-preuve { text-align: center; padding: 1.5rem 0.5rem; border-top: var(--db-hair); }
.db-preuve__value { font-family: var(--db-font-serif); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; margin: 0.5rem 0 0.4rem; }
.db-preuves--olive .db-preuve__value, .db-preuves--dark .db-preuve__value { color: #fff; }
.db-preuve__label { font-size: 0.82rem; letter-spacing: 0.06em; color: var(--db-terre); margin: 0; text-transform: uppercase; }
.db-preuves--olive .db-preuve__label, .db-preuves--dark .db-preuve__label { color: rgba(255,255,255,0.75); }

/* 8. Citation ------------------------------------------------------------ */
.db-quote { padding-block: clamp(3.5rem, 8vw, 7rem); }
.db-quote__inner { width: min(100% - 2.5rem, 800px); text-align: center; }
.db-quote__mark { color: var(--db-or-mat); display: inline-flex; }
.db-quote__text { font-family: var(--db-font-serif); font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-style: italic; line-height: 1.4; margin: 1rem 0 1.5rem; border: 0; }
.db-quote__author { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--db-noir-profond); font-weight: 600; }
.db-quote__role { display: block; color: var(--db-terre); font-weight: 400; letter-spacing: 0.06em; margin-top: 0.25rem; }

/* 9. Conséquence (produit) ---------------------------------------------- */
.db-consequence { background: var(--db-blanc-casse); }

/* 10. Galerie / tuiles --------------------------------------------------- */
.db-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 2.5rem; }
.db-tile { overflow: hidden; }
.db-tile--wide { grid-column: span 2; }
@media (max-width: 780px) {
	.db-gallery__grid { grid-template-columns: repeat(2, 1fr); }
	.db-tile--wide { grid-column: span 2; }
}

/* 11. Invitation --------------------------------------------------------- */
.db-invitation { text-align: center; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.db-invitation--dark { background: var(--db-noir-profond); color: #fff; }
.db-invitation--olive { background: var(--db-vert-olive); color: #fff; }
.db-invitation__inner { width: min(100% - 2.5rem, 720px); }
.db-invitation__title { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); margin: 0.5rem 0 1rem; }
.db-invitation__text { color: rgba(255,255,255,0.85); font-size: 1.1rem; margin-bottom: 2rem; }

/* 12. Chapitres — thèmes (surcharges du bloc chapitre de main.css) -------- */
.db-chapter--theme-olive { background: var(--db-vert-olive); }
.db-chapter--theme-olive .db-chapter__title, .db-chapter--theme-olive .db-chapter__lead, .db-chapter--theme-olive .db-chapter__body { color: #fff; }
.db-chapter--theme-dark { background: var(--db-noir-profond); }
.db-chapter--theme-dark .db-chapter__title, .db-chapter--theme-dark .db-chapter__lead, .db-chapter--theme-dark .db-chapter__body { color: #fff; }
.db-chapter--theme-cream { background: var(--db-blanc-casse); }
.db-chapter__body { color: var(--db-terre); line-height: 1.8; }
.db-chapter__body p { margin: 0 0 1rem; }
.db-chapter__media { height: 100%; min-height: 60vh; }

/* 13. Bibliothèque d'animations discrètes -------------------------------- */
/* Base : révélation (déjà dans main.css via [data-reveal]).                */
/* Variantes : ajouter une classe à côté de data-reveal.                    */
[data-reveal].db-anim-left  { transform: translateX(-32px); }
[data-reveal].db-anim-right { transform: translateX(32px); }
[data-reveal].db-anim-scale { transform: scale(0.96); }
[data-reveal].db-anim-left.is-revealed,
[data-reveal].db-anim-right.is-revealed,
[data-reveal].db-anim-scale.is-revealed { transform: none; }

/* Révélation en cascade des enfants (ex. grilles) via --db-i (index) */
[data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity var(--db-dur-slow) var(--db-ease), transform var(--db-dur-slow) var(--db-ease); transition-delay: calc(var(--db-i, 0) * 90ms); }
[data-reveal-stagger].is-revealed > * { opacity: 1; transform: none; }

/* Zoom lent « Ken Burns » sur médias de hero (immersion) */
.db-pagehero[style] { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
	.db-hero--film { animation: db-kenburns 18s ease-out both; }
}
@keyframes db-kenburns { from { background-size: 108%; } to { background-size: 100%; } }

/* Souligné or animé sur les liens-flèche */
.db-link-arrow { position: relative; }
.db-link-arrow::before {
	content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
	background: var(--db-or-mat); transition: width var(--db-dur) var(--db-ease);
}
.db-link-arrow:hover::before { width: 100%; }

@media (prefers-reduced-motion: reduce) {
	.db-hero--film { animation: none; }
	[data-reveal-stagger] > * { opacity: 1; transform: none; transition: none; }
}

/* Responsive preuves */
@media (max-width: 780px) { .db-preuves__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .db-preuves__grid { grid-template-columns: 1fr; } }

/* =========================================================================
   JOURNAL-MAGAZINE
   ========================================================================= */
.db-journal-hero { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2rem, 4vw, 3rem); background: var(--db-blanc-casse); }
.db-journal-hero__inner { width: min(100% - 2.5rem, 860px); }
.db-journal-hero__title { font-size: clamp(2.4rem, 5vw, 4rem); margin: 0.5rem 0 1rem; }
.db-journal-hero__lead { font-size: 1.2rem; color: var(--db-terre); line-height: 1.75; max-width: 60ch; }

/* Filtres par univers */
.db-filter { border-block: var(--db-hair); margin-bottom: 3rem; }
.db-filter__list { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; list-style: none; margin: 0; padding: 1rem 0; }
.db-filter__item a { text-decoration: none; font-size: 0.85rem; letter-spacing: 0.05em; color: var(--db-terre); padding-bottom: 2px; border-bottom: 1px solid transparent; }
.db-filter__item a:hover { color: var(--db-noir-profond); }
.db-filter__item.is-active a { color: var(--db-vert-olive); border-color: var(--db-or-mat); font-weight: 600; }

/* À la une */
.db-journal-featured__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--db-gap); }
@media (max-width: 820px) { .db-journal-featured__grid { grid-template-columns: 1fr; } }

/* Grille éditoriale */
.db-journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 900px) { .db-journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .db-journal-grid { grid-template-columns: 1fr; } }

/* Carte éditoriale */
.db-artcard { display: flex; flex-direction: column; }
.db-artcard__media { margin-bottom: 1.1rem; }
.db-artcard__univers { display: inline-block; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--db-or-mat); text-decoration: none; margin-bottom: 0.6rem; }
.db-artcard__title { font-size: 1.5rem; line-height: 1.2; margin: 0 0 0.5rem; }
.db-artcard__title a { text-decoration: none; }
.db-artcard__title a:hover { color: var(--db-vert-olive); }
.db-artcard__excerpt { color: var(--db-terre); font-size: 0.95rem; margin: 0 0 0.8rem; }
.db-artcard__meta { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--db-terre); opacity: 0.8; margin: auto 0 0; }
.db-artcard--featured .db-artcard__title { font-size: clamp(1.8rem, 3vw, 2.4rem); }

/* =========================================================================
   PILLAR PAGE (page de référence)
   ========================================================================= */
.db-pillar__intro { padding-block: clamp(3rem, 7vw, 6rem); background: var(--db-blanc-casse); }
.db-pillar__intro-inner { width: min(100% - 2.5rem, 820px); text-align: center; }
.db-pillar__lede { font-family: var(--db-font-serif); font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.45; color: var(--db-noir-profond); margin: 0; }

/* Layout : sommaire sticky + corps */
.db-pillar__layout { display: grid; grid-template-columns: 240px 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-block: clamp(2rem, 5vw, 4rem); }
.db-toc { position: sticky; top: 100px; }
.db-toc__title { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--db-or-mat); font-weight: 600; margin: 0 0 1rem; }
.db-toc__nav { display: flex; flex-direction: column; gap: 0.55rem; border-left: var(--db-hair); }
.db-toc__link { text-decoration: none; color: var(--db-terre); font-size: 0.9rem; padding-left: 1rem; margin-left: -1px; border-left: 2px solid transparent; transition: color .2s, border-color .2s; }
.db-toc__link:hover, .db-toc__link.is-active { color: var(--db-noir-profond); border-color: var(--db-or-mat); }

.db-pillar__section { padding-block: clamp(1.5rem, 3vw, 2.5rem); scroll-margin-top: 100px; }
.db-pillar__section + .db-pillar__section { border-top: var(--db-hair); }
.db-pillar__h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0.3rem 0 1.25rem; }
.db-pillar__media { margin: 0 0 1.5rem; }

/* Prose éditoriale (pillar + article) */
.db-prose, .db-pillar__prose { font-size: 1.1rem; line-height: 1.85; color: #2c2b26; }
.db-prose > *, .db-pillar__prose > * { max-width: 68ch; }
.db-prose p, .db-pillar__prose p { margin: 0 0 1.3rem; }
.db-prose strong, .db-pillar__prose strong { color: var(--db-noir-profond); }
.db-prose h2, .db-prose h3 { font-family: var(--db-font-serif); margin: 2.5rem 0 1rem; }
.db-prose a { color: var(--db-vert-olive); text-underline-offset: 3px; }
.db-prose blockquote { border-left: 3px solid var(--db-or-mat); margin: 2rem 0; padding-left: 1.5rem; font-family: var(--db-font-serif); font-size: 1.5rem; font-style: italic; color: var(--db-terre); }

@media (max-width: 860px) {
	.db-pillar__layout { grid-template-columns: 1fr; }
	.db-toc { position: static; border: var(--db-hair); padding: 1.25rem; background: var(--db-blanc-casse); }
	.db-toc__nav { flex-flow: row wrap; gap: 0.5rem 1.25rem; border-left: 0; }
	.db-toc__link { border-left: 0; padding-left: 0; }
}

/* Callout pillar (archive univers) */
.db-pillar-callout__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding: 2rem; background: var(--db-vert-olive); color: #fff; }
.db-pillar-callout__inner .db-section__eyebrow { color: var(--db-or-mat); }
.db-pillar-callout__title { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0.25rem 0 0; }

/* Maillage interne */
.db-mesh__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--db-gap); margin-top: 2.5rem; }
.db-mesh__title { font-size: 1.2rem; letter-spacing: 0.02em; margin: 0 0 1rem; padding-bottom: 0.6rem; border-bottom: var(--db-hair); }
.db-mesh__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.db-mesh__links a { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--db-noir-profond); }
.db-mesh__links a:hover { color: var(--db-vert-olive); }
.db-mesh__links .db-icon { color: var(--db-or-mat); flex: none; }
@media (max-width: 640px) { .db-mesh__grid { grid-template-columns: 1fr; } }

/* FAQ accordéon */
.db-faq__inner { width: min(100% - 2.5rem, 820px); }
.db-faq__list { margin-top: 2.5rem; }
.db-faq__item { border-bottom: var(--db-hair); }
.db-faq__q { cursor: pointer; list-style: none; padding: 1.25rem 2rem 1.25rem 0; font-family: var(--db-font-serif); font-size: 1.25rem; color: var(--db-noir-profond); position: relative; }
.db-faq__q::-webkit-details-marker { display: none; }
.db-faq__q::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--db-or-mat); font-size: 1.5rem; transition: transform .25s var(--db-ease); }
.db-faq__item[open] .db-faq__q::after { transform: translateY(-50%) rotate(45deg); }
.db-faq__a { padding: 0 0 1.5rem; color: var(--db-terre); line-height: 1.8; max-width: 70ch; }
.db-faq__a p { margin: 0; }

/* =========================================================================
   ARTICLE (lecture immersive)
   ========================================================================= */
.db-article__hero { position: relative; min-height: 62vh; display: flex; align-items: flex-end; background: var(--db-vert-olive-dark) center/cover no-repeat; color: #fff; }
.db-article__hero--plain { min-height: 44vh; }
.db-article__hero-overlay { position: absolute; inset: 0; background: linear-gradient(transparent, rgba(26,26,23,0.72)); }
.db-article__hero-inner { position: relative; padding-block: clamp(2.5rem, 6vw, 5rem); }
.db-article__univers { display: inline-block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--db-or-mat); text-decoration: none; margin-bottom: 1rem; }
.db-article__title { color: #fff; font-size: clamp(2.2rem, 5vw, 4rem); max-width: 20ch; margin: 0; }
.db-article__meta { color: rgba(255,255,255,0.85); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1.25rem; }
.db-article__body { max-width: 820px; padding-block: clamp(3rem, 6vw, 5rem); }
.db-article__signature { display: flex; align-items: center; gap: 0.6rem; margin-top: 3rem; padding-top: 1.5rem; border-top: var(--db-hair); font-family: var(--db-font-serif); font-style: italic; color: var(--db-terre); }
.db-article__signature .db-icon { color: var(--db-or-mat); }

/* Navigation intra-univers */
.db-article__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 820px; padding-bottom: 3rem; }
.db-article__nav-link { text-decoration: none; padding: 1.5rem; background: var(--db-blanc-casse); border: var(--db-hair); display: flex; flex-direction: column; gap: 0.4rem; transition: background .2s; }
.db-article__nav-link:hover { background: #efe9dc; }
.db-article__nav-link--next { text-align: right; }
.db-article__nav-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--db-or-mat); font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.db-article__nav-link--next .db-article__nav-label { justify-content: flex-end; }
.db-article__nav-title { font-family: var(--db-font-serif); font-size: 1.15rem; color: var(--db-noir-profond); }
.db-flip { transform: scaleX(-1); }
@media (max-width: 560px) { .db-article__nav { grid-template-columns: 1fr; } .db-article__nav-link--next { text-align: left; } .db-article__nav-link--next .db-article__nav-label { justify-content: flex-start; } }

.db-related { background: var(--db-blanc-casse); }

/* =========================================================================
   DIGITAL ESTATE OS — entités du patrimoine
   ========================================================================= */

/* Fiche d'entité (single) */
.db-entity__hero { position: relative; min-height: 56vh; display: flex; align-items: flex-end; background: var(--db-vert-olive-dark) center/cover no-repeat; color: #fff; }
.db-entity__hero--plain { min-height: 40vh; }
.db-entity__hero-overlay { position: absolute; inset: 0; background: linear-gradient(transparent, rgba(26,26,23,0.7)); }
.db-entity__hero-inner { position: relative; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.db-entity__eyebrow { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--db-or-mat); margin-bottom: 0.75rem; }
.db-entity__title { color: #fff; font-size: clamp(2.2rem, 5vw, 3.8rem); margin: 0; }

.db-entity__body { display: grid; grid-template-columns: 300px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; padding-block: clamp(2.5rem, 5vw, 4rem); max-width: var(--db-max); }
@media (max-width: 860px) { .db-entity__body { grid-template-columns: 1fr; } }

/* Fiche technique (dl) */
.db-facts { position: sticky; top: 100px; margin: 0; border-top: 2px solid var(--db-or-mat); }
.db-facts__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.9rem 0; border-bottom: var(--db-hair); }
.db-facts__row dt { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--db-terre); margin: 0; }
.db-facts__row dd { margin: 0; font-weight: 500; color: var(--db-noir-profond); }
.db-facts__row dd a { color: var(--db-vert-olive); }
@media (max-width: 860px) { .db-facts { position: static; } }

.db-entity__longtext { margin-top: 1.5rem; }

/* Cartes d'entité (archives) */
.db-ecard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 900px) { .db-ecard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .db-ecard-grid { grid-template-columns: 1fr; } }
.db-ecard__link { text-decoration: none; display: block; }
.db-ecard__media { margin-bottom: 1rem; }
.db-ecard__type { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--db-or-mat); }
.db-ecard__title { font-size: 1.4rem; margin: 0.4rem 0 0.5rem; }
.db-ecard__link:hover .db-ecard__title { color: var(--db-vert-olive); }
.db-ecard__excerpt { color: var(--db-terre); font-size: 0.92rem; margin: 0; }

/* Constellation (maillage auto) */
.db-constellation { background: var(--db-blanc-casse); }
.db-constellation__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; }
.db-constellation__item { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; background: #fff; border: var(--db-hair); text-decoration: none; transition: transform .25s var(--db-ease), box-shadow .25s var(--db-ease); }
.db-constellation__item:hover { transform: translateY(-4px); box-shadow: var(--db-shadow-soft); }
.db-constellation__type { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--db-or-mat); font-weight: 600; }
.db-constellation__title { font-family: var(--db-font-serif); font-size: 1.2rem; color: var(--db-noir-profond); }
.db-constellation__arrow { color: var(--db-or-mat); margin-top: auto; }
@media (max-width: 860px) { .db-constellation__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .db-constellation__grid { grid-template-columns: 1fr; } }

/* =========================================================================
   CALENDRIER AGRICOLE
   ========================================================================= */
.db-calendrier__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (max-width: 900px) { .db-calendrier__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .db-calendrier__grid { grid-template-columns: 1fr; } }
.db-cmonth { background: #fff; border: var(--db-hair); padding: 1.5rem; display: flex; flex-direction: column; }
.db-cmonth.is-current { border-color: var(--db-or-mat); box-shadow: var(--db-shadow-soft); background: #fffdf8; }
.db-cmonth__head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: var(--db-hair); }
.db-cmonth__name { font-size: 1.7rem; margin: 0; }
.db-cmonth__season { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--db-terre); }
.db-cmonth__now { margin-left: auto; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; background: var(--db-or-mat); color: #fff; padding: 0.2rem 0.6rem; }
.db-cmonth__list { margin: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.db-cmonth__list dt { display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--db-vert-olive); font-weight: 600; margin-bottom: 0.2rem; }
.db-cmonth__list dt .db-icon { color: var(--db-or-mat); }
.db-cmonth__list dd { margin: 0; font-size: 0.92rem; color: #3a382f; }
.db-cmonth__tip { margin-top: auto; padding-top: 0.9rem; border-top: var(--db-hair); }
.db-cmonth__tip dd { font-style: italic; color: var(--db-terre); }

/* =========================================================================
   TIMELINE
   ========================================================================= */
.db-timeline__track { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; position: relative; }
.db-timeline__track::before { content: ""; position: absolute; left: 120px; top: 0; bottom: 0; width: 2px; background: var(--db-hair); background: rgba(176,141,87,0.35); }
.db-timeline__node { display: grid; grid-template-columns: 120px 1fr; gap: 2rem; padding: 1.25rem 0; position: relative; }
.db-timeline__node::before { content: ""; position: absolute; left: 114px; top: 2rem; width: 14px; height: 14px; border-radius: 50%; background: var(--db-blanc-casse); border: 2px solid var(--db-or-mat); }
.db-timeline__node--origin::before, .db-timeline__node--now::before { background: var(--db-or-mat); }
.db-timeline__year { font-family: var(--db-font-serif); font-size: 1.5rem; color: var(--db-vert-olive); text-align: right; padding-right: 1.5rem; }
.db-timeline__card { background: #fff; border: var(--db-hair); padding: 1.5rem; }
.db-timeline__type { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--db-or-mat); font-weight: 600; }
.db-timeline__title { font-size: 1.4rem; margin: 0.3rem 0 0.5rem; }
.db-timeline__title a { text-decoration: none; }
.db-timeline__title a:hover { color: var(--db-vert-olive); }
.db-timeline__card p { margin: 0; color: var(--db-terre); font-size: 0.95rem; }
.db-timeline__node--origin .db-timeline__card, .db-timeline__node--now .db-timeline__card { background: var(--db-vert-olive); color: #fff; }
.db-timeline__node--origin .db-timeline__title, .db-timeline__node--now .db-timeline__title, .db-timeline__node--origin .db-timeline__card p, .db-timeline__node--now .db-timeline__card p { color: #fff; }
@media (max-width: 620px) {
	.db-timeline__track::before { left: 7px; }
	.db-timeline__node { grid-template-columns: 1fr; gap: 0.5rem; padding-left: 2rem; }
	.db-timeline__node::before { left: 1px; top: 1.6rem; }
	.db-timeline__year { text-align: left; padding: 0; }
}

/* =========================================================================
   PASSEPORT NUMÉRIQUE (III.4)
   ========================================================================= */
.db-passport__hero { position: relative; min-height: 46vh; display: flex; align-items: flex-end; background: var(--db-vert-olive-dark) center/cover no-repeat; color: #fff; }
.db-passport__hero-overlay { position: absolute; inset: 0; background: linear-gradient(transparent, rgba(26,26,23,0.72)); }
.db-passport__hero-inner { position: relative; padding-block: clamp(2rem, 5vw, 3.5rem); }
.db-passport__eyebrow { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--db-or-mat); margin-bottom: 0.6rem; }
.db-passport__title { color: #fff; font-size: clamp(2rem, 4.5vw, 3.4rem); margin: 0; }
.db-passport__lot { color: rgba(255,255,255,0.85); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.75rem; }

.db-passport__body { display: grid; grid-template-columns: 1fr 300px; gap: clamp(2rem, 5vw, 4rem); align-items: start; padding-block: clamp(2.5rem, 5vw, 4rem); }
.db-passport__intro { font-family: var(--db-font-serif); font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: var(--db-terre); margin: 0 0 1.5rem; }
.db-passport__facts { margin-top: 1.5rem; }
.db-passport__analyses { margin-top: 1.25rem; color: var(--db-terre); }
.db-passport__analyses a, .db-passport__facts a { color: var(--db-vert-olive); }

/* Carte QR imprimable */
.db-passport__qr { position: sticky; top: 100px; text-align: center; background: #fff; border: var(--db-hair); padding: 1.5rem; }
.db-qr { width: 100%; max-width: 220px; margin: 0 auto; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.db-qr svg { width: 100%; height: 100%; }
.db-qr__note { margin: 1rem 0 0.4rem; font-size: 0.85rem; letter-spacing: 0.05em; color: var(--db-noir-profond); font-weight: 600; }
.db-qr__url { margin: 0; font-size: 0.7rem; color: var(--db-terre); word-break: break-all; }

.db-embed { position: relative; }
.db-embed iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; }

.db-passport__assoc { background: var(--db-blanc-casse); }
.db-passport__assoc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--db-gap); }
.db-passport__assoc-title { font-size: 1.4rem; margin: 0 0 0.6rem; }
.db-passport__assoc a { color: var(--db-vert-olive); }

@media (max-width: 860px) {
	.db-passport__body { grid-template-columns: 1fr; }
	.db-passport__qr { position: static; max-width: 320px; }
	.db-passport__assoc-grid { grid-template-columns: 1fr; }
}

@media print {
	.db-header, .db-footer, .db-passport__video, .db-passport__assoc, .db-invitation, .db-nav-toggle { display: none !important; }
	.db-passport__hero { min-height: auto; color: #000; }
	.db-passport__hero-overlay { display: none; }
}

/* =========================================================================
   FAMILY TREE (III.6)
   ========================================================================= */
.db-tree__gen { position: relative; padding-block: clamp(1.5rem, 4vw, 3rem); }
.db-tree__gen + .db-tree__gen { border-top: var(--db-hair); }
.db-tree__gen-head { text-align: center; margin-bottom: 2.5rem; position: relative; }
.db-tree__gen-line { display: block; width: 1px; height: 2.5rem; margin: 0 auto 1rem; background: linear-gradient(var(--db-or-mat), transparent); }
.db-tree__gen-title { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0; }
.db-tree__gen-desc { color: var(--db-terre); margin: 0.5rem auto 0; max-width: 48ch; }

.db-tree__people { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.db-person { width: 180px; text-decoration: none; text-align: center; display: flex; flex-direction: column; align-items: center; transition: transform .25s var(--db-ease); }
.db-person:hover { transform: translateY(-4px); }
.db-person__media { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; margin-bottom: 1rem; border: 3px solid var(--db-blanc-pur); box-shadow: var(--db-shadow-soft); aspect-ratio: 1/1; }
.db-person__media .db-figure__img { width: 100%; height: 100%; object-fit: cover; }
.db-person__name { font-family: var(--db-font-serif); font-size: 1.25rem; color: var(--db-noir-profond); line-height: 1.2; }
.db-person:hover .db-person__name { color: var(--db-vert-olive); }
.db-person__role { font-size: 0.82rem; color: var(--db-or-mat); margin-top: 0.25rem; letter-spacing: 0.04em; }
.db-person__periode { font-size: 0.78rem; color: var(--db-terre); margin-top: 0.15rem; }
.db-tree__empty { text-align: center; padding-block: 3rem; }

@media (max-width: 480px) {
	.db-person { width: 130px; }
	.db-person__media { width: 104px; height: 104px; }
}

/* =========================================================================
   IMAGES CURATÉES (db_picture) — fond plein cadre, srcset, art-direction
   ========================================================================= */
.db-img { display: block; max-width: 100%; }

/* Couche média absolue dans les héros */
.db-hero__media, .db-pagehero__media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.db-hero__media picture, .db-pagehero__media picture { display: block; width: 100%; height: 100%; }
.db-hero__img, .db-pagehero__img,
.db-hero__media .db-img, .db-pagehero__media .db-img {
	width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block;
}
.db-hero__overlay, .db-pagehero__overlay { z-index: 1; }
.db-hero__content, .db-pagehero__content { position: relative; z-index: 2; }
.db-hero--has-img { background: var(--db-vert-olive-dark); }

/* Ken Burns lent sur l'image du hero d'accueil (au lieu du background) */
@media (prefers-reduced-motion: no-preference) {
	.db-hero--film .db-hero__img { animation: db-kenburns-img 20s ease-out both; transform-origin: center; }
}
@keyframes db-kenburns-img { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Média des chapitres & cartes : l'image remplit le cadre */
.db-chapter__media .db-img, .db-chapter__media picture { width: 100%; height: 100%; }
.db-chapter__media .db-img { object-fit: cover; }
.db-card__media .db-img { width: 100%; height: 100%; object-fit: cover; }
.db-card__media picture { display: block; width: 100%; height: 100%; }

/* =========================================================================
   BUSINESS / CONVERSION (formulaires, CTA, contact, wholesale, export)
   ========================================================================= */

/* Page générique */
.db-page__head { padding-block: clamp(3rem, 6vw, 5rem) 1rem; background: var(--db-blanc-casse); }
.db-page__title { font-size: clamp(2rem, 4vw, 3rem); margin: 0.4rem 0 0; }
.db-page__body { max-width: 820px; padding-block: clamp(2rem, 4vw, 3.5rem); }

/* Formulaires */
.db-form { max-width: 760px; margin: 2rem auto 0; text-align: left; }
.db-form__title { font-size: 1.6rem; margin: 0 0 0.5rem; }
.db-form__intro { color: var(--db-terre); margin: 0 0 1.5rem; }
.db-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.db-form__row { margin-bottom: 1rem; }
.db-form__field { display: flex; flex-direction: column; gap: 0.35rem; }
.db-form__field--full { grid-column: 1 / -1; }
.db-form__field span { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--db-noir-profond); font-weight: 600; }
.db-form input, .db-form textarea {
	width: 100%; padding: 0.8rem 0.9rem; border: 1px solid rgba(122,106,86,0.35);
	background: #fff; font-family: var(--db-font-sans); font-size: 1rem; color: var(--db-noir-profond);
	border-radius: var(--db-radius, 2px);
}
.db-form input:focus, .db-form textarea:focus { outline: none; border-color: var(--db-or-mat); box-shadow: 0 0 0 3px rgba(176,141,87,0.15); }
.db-form .db-btn { margin-top: 1.5rem; }
.db-form__consent { font-size: 0.78rem; color: var(--db-terre); margin: 0.75rem 0 0; }
.db-form__success { background: rgba(91,98,54,0.12); border-left: 3px solid var(--db-vert-olive); padding: 1rem 1.25rem; margin-bottom: 1.5rem; color: var(--db-vert-olive-dark); }
.db-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) { .db-form__grid { grid-template-columns: 1fr; } }

.db-lead-section__inner { max-width: 860px; }

/* CTA business */
.db-bizcta { text-align: center; padding-block: clamp(3.5rem, 8vw, 6rem); }
.db-bizcta--dark { background: var(--db-noir-profond); color: #fff; }
.db-bizcta--olive { background: var(--db-vert-olive); color: #fff; }
.db-bizcta__inner { width: min(100% - 2.5rem, 760px); }
.db-bizcta__eyebrow { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--db-or-mat); font-weight: 600; margin: 0 0 0.75rem; }
.db-bizcta__title { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 0 0 0.75rem; }
.db-bizcta__text { color: rgba(255,255,255,0.85); font-size: 1.05rem; margin: 0 0 1.75rem; }
.db-bizcta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Contact — actions rapides */
.db-quickactions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.db-quickaction { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; padding: 1.75rem 1rem; background: #fff; border: var(--db-hair); text-decoration: none; color: var(--db-noir-profond); transition: transform .2s var(--db-ease), box-shadow .2s var(--db-ease); }
.db-quickaction:hover { transform: translateY(-3px); box-shadow: var(--db-shadow-soft); }
.db-quickaction__ic { color: var(--db-or-mat); }
.db-quickaction__t { font-weight: 600; font-size: 0.95rem; }
@media (max-width: 780px) { .db-quickactions { grid-template-columns: repeat(2, 1fr); } }

.db-contact-main__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.db-contact-info { background: var(--db-blanc-casse); padding: 2rem; border: var(--db-hair); }
.db-contact-info__title { font-size: 1.4rem; margin: 0 0 1.25rem; }
.db-contact-info__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.db-contact-info__list li { display: flex; flex-direction: column; gap: 0.15rem; }
.db-contact-info__list span { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--db-terre); }
.db-contact-info__list a { color: var(--db-vert-olive); text-decoration: none; }
.db-contact-map .db-embed iframe { width: 100%; min-height: 380px; border: 0; display: block; }
@media (max-width: 860px) { .db-contact-main__grid { grid-template-columns: 1fr; } }

/* Wholesale / Partner — why grid */
.db-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--db-gap); margin-top: 3rem; }
.db-why__item { text-align: center; padding: 1.5rem 1rem; border-top: 2px solid var(--db-or-mat); }
.db-why__ic { color: var(--db-or-mat); display: inline-flex; margin-bottom: 0.75rem; }
.db-why__t { font-size: 1.3rem; margin: 0 0 0.5rem; }
.db-why__d { color: var(--db-terre); font-size: 0.95rem; margin: 0; }
@media (max-width: 900px) { .db-why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .db-why__grid { grid-template-columns: 1fr; } }

.db-packaging__list { list-style: none; margin: 2.5rem auto 0; padding: 0; max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 2rem; }
.db-packaging__item { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.9rem; border-bottom: var(--db-hair); }
.db-packaging__item .db-icon { color: var(--db-or-mat); flex: none; }
@media (max-width: 640px) { .db-packaging__list { grid-template-columns: 1fr; } }

/* Export cards */
.db-export-intro__inner { max-width: 820px; text-align: center; margin-inline: auto; }
.db-export-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--db-gap); }
.db-export-card { padding: 1.75rem; background: #fff; border: var(--db-hair); }
.db-export-card__ic { color: var(--db-or-mat); display: inline-flex; margin-bottom: 0.75rem; }
.db-export-card__t { font-size: 1.25rem; margin: 0 0 0.4rem; }
.db-export-card__d { color: var(--db-terre); font-size: 0.95rem; margin: 0; }
@media (max-width: 900px) { .db-export-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .db-export-grid { grid-template-columns: 1fr; } }
.db-markets__list { list-style: none; margin: 2.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: center; }
.db-markets__list li { padding: 0.6rem 1.4rem; border: 1px solid var(--db-or-mat); color: var(--db-vert-olive-dark); font-size: 0.95rem; letter-spacing: 0.04em; }

/* Preuve sociale */
.db-proof { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--db-blanc-casse); text-align: center; }
.db-proof__eyebrow { margin-bottom: 2rem; }
.db-proof__grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem 3rem; }
.db-proof__logo { max-height: 64px; width: auto; filter: grayscale(1); opacity: 0.75; }
.db-proof__quote { font-family: var(--db-font-serif); font-style: italic; font-size: 1.2rem; max-width: 32ch; margin: 0; }
.db-proof__label { font-size: 0.8rem; color: var(--db-terre); margin: 0.5rem 0 0; }

/* =========================================================================
   PAGE PRODUIT PREMIUM (single-production)
   ========================================================================= */
.db-eyebrow { font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: var(--db-or-mat); margin: 0 0 1rem; }

.db-pdp-hero { padding-block: clamp(2.5rem, 6vw, 5rem); background: var(--db-blanc-casse); }
.db-pdp-hero__grid { display: grid; grid-template-columns: minmax(280px, 46%) 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.db-pdp-hero__media { margin: 0; overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--db-shadow-soft); }
.db-pdp-hero__media .db-img, .db-pdp-hero__media picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.db-pdp-hero__title { font-family: var(--db-font-serif); font-weight: 500; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.05; margin: 0 0 1rem; }
.db-pdp-hero__accroche { font-family: var(--db-font-serif); font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--db-terre); margin: 0 0 1.25rem; }
.db-pdp-hero__story { font-size: 1.05rem; line-height: 1.8; color: #3a382f; }
.db-pdp-hero__story p { margin: 0 0 1rem; }
.db-notes { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0.5rem 0 1.75rem; padding: 0; }
.db-notes li { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--db-olive-d, var(--db-vert-olive-dark)); border: 1px solid rgba(176,141,87,0.5); padding: 0.35rem 0.85rem; border-radius: 999px; }
.db-pdp-hero__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }
@media (max-width: 780px) {
	.db-pdp-hero__grid { grid-template-columns: 1fr; }
	.db-pdp-hero__media { aspect-ratio: 3/2; }
}

.db-pdp-band { position: relative; }
.db-pdp-band__img { width: 100%; height: clamp(280px, 42vh, 520px); object-fit: cover; display: block; }
.db-pdp-band__cap { position: absolute; inset: auto 0 0 0; padding: 2.5rem 1.25rem 1.5rem; background: linear-gradient(transparent, rgba(26,26,23,0.55)); text-align: center; }
.db-pdp-band__cap p { color: #fff; font-family: var(--db-font-serif); font-style: italic; font-size: clamp(1.1rem, 2.4vw, 1.6rem); margin: 0; }

/* Repli image (db_picture) à l'intérieur d'une figure à ratio fixe */
.db-figure > .db-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.db-card__media .db-img, .db-card__media picture { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hero d'article : couche média sous l'overlay */
.db-article__hero { position: relative; }
.db-article__hero-overlay { z-index: 1; }
.db-article__hero-inner { position: relative; z-index: 2; }

/* Accents de saison (héros) */
.db-season-printemps.db-ph--saison { background: linear-gradient(120deg, #7d8a4e, #c9b06a); }
.db-season-ete.db-ph--saison { background: linear-gradient(120deg, #b58a3c, #6d7a45); }
.db-season-automne.db-ph--saison { background: linear-gradient(120deg, #8a5a2b, #5b6236); }
.db-season-hiver.db-ph--saison { background: linear-gradient(120deg, #4a512b, #2c2b26); }