/* ==========================================================================
   Agriculture au Cameroun — feuille de style principale
   Palette dérivée du drapeau camerounais (vert / rouge / jaune).
   ========================================================================== */

:root {
  --green:        #007A5E;
  --green-light:  #009C78;
  --green-dark:   #00553F;
  --green-soft:   #E6F4F0;
  --red:          #CE1126;
  --red-dark:     #A50D1E;
  --yellow:       #FCD116;
  --yellow-soft:  #FFF8DD;

  --white:        #ffffff;
  --bg:           #F7F8F7;
  --bg-alt:       #EFF3F1;
  --text:         #1F2421;
  --text-soft:    #5A6560;
  --border:       #E1E7E3;

  /* Serif éditoriale pour les titres et le corps des articles ; grotesque
     pour l'interface. La lecture longue et la navigation n'ont pas les mêmes
     besoins : les séparer évite la page « tout en Inter » sans caractère. */
  --font-heading: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-reading: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shadow-sm: 0 1px 2px rgba(16,32,24,.06);
  --shadow-md: 0 4px 14px rgba(16,32,24,.08);
  --shadow-lg: 0 16px 40px rgba(16,32,24,.12);

  --radius:     14px;
  --radius-sm:  8px;
  --container:  1200px;
  --transition: .22s cubic-bezier(.4,0,.2,1);
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

img, picture, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: var(--green-dark); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--red); }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.95rem, 1.2rem + 2.7vw, 3.05rem); }
h2 { font-size: clamp(1.45rem, 1.05rem + 1.4vw, 2.05rem); }
h3 { font-size: 1.2rem; }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.main-content { flex: 1; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--green); color: #fff; padding: .75rem 1.25rem;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }

/* --------------------------------------------------------------- boutons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.35rem; border-radius: 999px;
  font-weight: 600; font-size: .95rem; line-height: 1;
  transition: var(--transition); border: 2px solid transparent;
  white-space: nowrap;
}
.btn i { font-size: 1.15em; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); color: #fff; transform: translateY(-1px); }
.btn-accent { background: var(--red); color: #fff; }
.btn-accent:hover { background: var(--red-dark); color: #fff; transform: translateY(-1px); }
.btn-ghost { border-color: currentColor; color: var(--green-dark); background: transparent; }
.btn-ghost:hover { background: var(--green); border-color: var(--green); color: #fff; }
.btn-sm { padding: .5rem 1rem; font-size: .85rem; }
.btn-lg { padding: .9rem 1.75rem; font-size: 1rem; }

/* --------------------------------------------------------------- entête */
.site-header { background: #fff; box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 100; }

.topbar { background: var(--green-dark); color: #fff; font-size: .82rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; min-height: 36px; gap: 1rem; }
.topbar-tagline { opacity: .9; }

.lang-switch { display: flex; gap: .25rem; align-items: center; }
.lang-link {
  color: rgba(255,255,255,.75); padding: .15rem .55rem; border-radius: 999px;
  font-weight: 600; letter-spacing: .04em; font-size: .78rem;
}
.lang-link:hover { color: #fff; background: rgba(255,255,255,.15); }
.lang-link.is-active { background: var(--yellow); color: var(--green-dark); }

.header-inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 72px; justify-content: space-between;
}
.logo img { height: 44px; width: auto; }

.nav-list { display: flex; align-items: center; gap: .35rem; }
.nav-list > li > a {
  display: flex; align-items: center; gap: .3rem;
  padding: .6rem .8rem; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-weight: 600; font-size: .93rem; color: var(--text);
}
.nav-list > li > a:hover { background: var(--green-soft); color: var(--green-dark); }
.nav-list i { font-size: .9em; }

.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + .35rem); left: 0; min-width: 320px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 1rem; z-index: 50;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: var(--transition);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown-intro { font-size: .82rem; color: var(--text-soft); margin-bottom: .75rem; }
.dropdown ul { display: grid; gap: .1rem; }
.dropdown li a {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border-radius: var(--radius-sm);
  font-size: .9rem; color: var(--text);
}
.dropdown li a:hover { background: var(--bg-alt); color: var(--green-dark); }
.dropdown li a i { font-size: 1.15rem; }
.dropdown li a em { margin-left: auto; font-style: normal; font-size: .75rem; color: var(--text-soft); }
.dropdown-all {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border);
  font-size: .85rem; font-weight: 600; width: 100%;
}

.header-actions { display: flex; align-items: center; gap: .6rem; }
.header-search { position: relative; display: flex; }
.header-search input {
  width: 190px; padding: .55rem 2.4rem .55rem .9rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); font-size: .88rem; transition: var(--transition);
}
.header-search input:focus { width: 240px; background: #fff; }
.header-search button { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); color: var(--text-soft); }

.icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--bg-alt); color: var(--text); font-size: 1.2rem;
}
.icon-btn:hover { background: var(--green); color: #fff; }

.burger { display: none; font-size: 1.7rem; color: var(--text); }

/* --------------------------------------------------------- fil d'Ariane */
.breadcrumb { background: var(--bg-alt); border-bottom: 1px solid var(--border); font-size: .82rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .65rem 0; }
.breadcrumb li { display: flex; align-items: center; gap: .4rem; }
.breadcrumb i { font-size: .8rem; color: var(--text-soft); }
.breadcrumb span[aria-current] { color: var(--text-soft); }

/* --------------------------------------------------------------- héros */
.hero {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 55%, var(--green-light) 100%);
  color: #fff; padding: clamp(2.5rem, 5vw, 4.5rem) 0; position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset: auto -10% -60% auto;
  width: 420px; height: 420px; border-radius: 50%;
  background: rgba(252,209,22,.14);
}
.hero-inner {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: center;
  position: relative; z-index: 1;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.14); padding: .35rem .85rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600; margin-bottom: 1rem;
}
.hero h1 { color: #fff; margin-bottom: .9rem; }
.hero-sub { font-size: 1.05rem; opacity: .92; max-width: 46ch; margin-bottom: 1.75rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.hero .btn-ghost:hover { background: #fff; color: var(--green-dark); border-color: #fff; }

.hero-feature {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg); display: block; aspect-ratio: 16/10; background: rgba(0,0,0,.2);
}
.hero-feature img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.hero-feature:hover img { transform: scale(1.04); }
.hero-feature-body {
  position: absolute; inset: auto 0 0 0; padding: 2.5rem 1.25rem 1.25rem;
  background: linear-gradient(transparent, rgba(0,0,0,.82)); color: #fff;
  display: flex; flex-direction: column; gap: .5rem;
}
.hero-feature-body strong { font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.3; }
.badge {
  align-self: flex-start; background: var(--yellow); color: var(--green-dark);
  padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}

/* -------------------------------------------------------------- sections */
.section { padding: clamp(2.25rem, 4vw, 3.5rem) 0; }
.section-alt { background: var(--bg-alt); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.section-title { display: flex; align-items: center; gap: .55rem; }
.section-title i { color: var(--cat-color, var(--green)); }
.section-more { font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .35rem; }

.grid { display: grid; gap: 1.5rem; }
/* 320px minimum : trois colonnes dans un conteneur de 1200px, deux sur
   tablette, une sur mobile. Des cartes plus larges se lisent mieux qu'une
   quatrième colonne étriquée. */
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.layout-with-aside { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 2rem; align-items: start; }
/* À côté de la colonne latérale, la place utile est réduite : on abaisse le
   seuil pour conserver trois cartes par ligne sur un écran de bureau. */
.layout-with-aside .grid-3 { grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 1.25rem; }

/* ---------------------------------------------------------------- cartes */
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card-media { display: block; aspect-ratio: 16/10; background: var(--bg-alt); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.card:hover .card-media img { transform: scale(1.05); }
.card-media-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: rgba(255,255,255,.85); font-size: 2.5rem; }
.card-body {
  padding: 1.1rem 1.15rem 1.25rem;
  display: flex; flex-direction: column; gap: .6rem; flex: 1;
}
.card-cat {
  align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--cat-color, var(--green));
  background: color-mix(in srgb, var(--cat-color, #007A5E) 12%, white);
  padding: .22rem .6rem; border-radius: 999px;
}
/* Titre et extrait occupent une hauteur fixe : sans cela, un titre de trois
   lignes décale l'extrait et la date de toute la rangée. La coupure se fait
   proprement en fin de ligne, avec les points de suspension du navigateur. */
.card-title {
  font-size: 1.06rem; line-height: 1.35;
  min-height: calc(1.35em * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-title a { color: var(--text); }
.card-title a:hover { color: var(--green); }

.card-excerpt {
  font-size: .9rem; line-height: 1.55; color: var(--text-soft);
  min-height: calc(1.55em * 3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  margin-top: auto; padding-top: .85rem;
  border-top: 1px solid var(--border);
  font-size: .8rem; color: var(--text-soft);
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.card-compact .card-title { -webkit-line-clamp: 3; min-height: calc(1.35em * 3); }
.card-wide { grid-column: span 2; }
.card-product .price {
  font-family: var(--font-body); font-size: 1.25rem; font-weight: 700;
  color: var(--red); margin-top: auto;
}
.card-product .card-meta { border-top: 0; padding-top: 0; }

/* ---------------------------------------------------------------- puces */
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
  border: 1px solid var(--border); background: #fff; color: var(--text);
}
.chip em { font-style: normal; font-size: .75rem; color: var(--text-soft); }
.chip:hover, .chip.is-active {
  background: var(--cat-color, var(--green)); border-color: var(--cat-color, var(--green)); color: #fff;
}
.chip:hover em, .chip.is-active em { color: rgba(255,255,255,.8); }
.chip-nav { background: #fff; border-bottom: 1px solid var(--border); }
.chip-nav .chip-row { justify-content: flex-start; }
.chip-nav .chip-row { margin: 0; padding: 1rem 0; overflow-x: auto; flex-wrap: nowrap; }

.topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.topic-grid a {
  display: flex; flex-direction: column; gap: .4rem; height: 100%;
  padding: 1.25rem; border-radius: var(--radius); background: #fff;
  border: 1px solid var(--border); border-top: 4px solid var(--topic-color, var(--green));
  color: var(--text); transition: var(--transition);
}
.topic-grid a:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.topic-grid i { font-size: 1.9rem; color: var(--topic-color, var(--green)); }
.topic-grid strong { font-family: var(--font-heading); font-size: 1.05rem; }
.topic-grid span { font-size: .85rem; color: var(--text-soft); }

/* ------------------------------------------------------ colonne latérale */
.aside { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 100px; }
.aside-block { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.aside-block h2 { font-size: 1rem; margin-bottom: .85rem; }
.rank-list { display: grid; gap: .8rem; }
.rank-list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; }
.rank { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
        background: var(--green-soft); color: var(--green-dark); font-weight: 700; font-size: .8rem; }
.rank-list a { color: var(--text); }
.rank-list a:hover { color: var(--green); }
.link-list { display: grid; gap: .3rem; }
.link-list a { display: flex; align-items: center; gap: .5rem; padding: .45rem .5rem; border-radius: var(--radius-sm); color: var(--text); font-size: .9rem; }
.link-list a:hover { background: var(--bg-alt); color: var(--green-dark); }
.ad-slot { background: var(--yellow-soft); border-color: #F3E3A0; }
.ad-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #8a6d00; margin-bottom: .4rem; }
.ad-slot p { font-size: .87rem; margin-bottom: .8rem; }

/* --------------------------------------------------------------- archives */
.archive-header { background: #fff; border-bottom: 1px solid var(--border); padding: 2.25rem 0 2rem; text-align: center; }
.archive-icon { font-size: 2.4rem; color: var(--cat-color, var(--green)); line-height: 1; margin-bottom: .5rem; }
.archive-header h1 { margin-bottom: .6rem; }
.archive-intro { color: var(--text-soft); max-width: 62ch; margin-inline: auto; }
.archive-count { font-size: .82rem; color: var(--text-soft); margin-top: .75rem; font-weight: 600; }
.empty-state {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 3rem 1rem; background: #fff; border: 1px dashed var(--border);
  border-radius: var(--radius); color: var(--text-soft); margin-bottom: 1.25rem;
}
.empty-state i { font-size: 1.6rem; }

/* ------------------------------------------------------------- pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.5rem; flex-wrap: wrap; }
.page-list { display: flex; gap: .35rem; }
.page-list a, .page-list .is-current, .page-gap {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .5rem;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff;
  font-weight: 600; font-size: .9rem; color: var(--text);
}
.page-list a:hover { border-color: var(--green); color: var(--green); }
.page-list .is-current { background: var(--green); border-color: var(--green); color: #fff; }
.page-gap { border: 0; background: none; }
.page-prev, .page-next { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; }

/* ---------------------------------------------------------------- article */
.single-narrow { max-width: 760px; margin-inline: auto; }
.single-header { background: #fff; padding: 2.25rem 0 1.75rem; border-bottom: 1px solid var(--border); }
.single-header h1 { margin: .75rem 0; }
.single-lead {
  font-family: var(--font-reading);
  font-size: 1.18rem; line-height: 1.6;
  color: var(--text-soft); max-width: 62ch;
}
.single-meta {
  display: flex; flex-wrap: wrap; gap: 1.1rem;
  font-family: var(--font-body); font-size: .85rem;
  color: var(--text-soft); margin-top: 1.25rem;
  padding-top: 1rem; border-top: 1px solid var(--border);
}
.single-meta span { display: inline-flex; align-items: center; gap: .35rem; }

.single-cover { max-width: 1000px; margin: 0 auto; }
.single-cover img { width: 100%; max-height: 520px; object-fit: cover; }
.single-cover-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; min-height: 180px; color: #fff;
  background: linear-gradient(135deg,
              var(--cat-color, var(--green)) 0%,
              color-mix(in srgb, var(--cat-color, #007A5E) 65%, black) 100%);
}
.single-cover-fallback i { font-size: 3rem; opacity: .9; }
.single-cover-fallback span {
  font-family: var(--font-heading); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; opacity: .9;
}
.single-cover figcaption { font-size: .82rem; color: var(--text-soft); padding: .6rem 1rem; text-align: center; }

.single-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 2.5rem; align-items: start; padding: 2.25rem 0; }
.single-body { min-width: 0; }

.notice { border-left: 4px solid var(--yellow); background: var(--yellow-soft); padding: 1rem 1.15rem; border-radius: var(--radius-sm); margin-bottom: 1.75rem; }
.notice p + p { margin-top: .3rem; font-size: .9rem; color: var(--text-soft); }

/* Corps de texte des articles importés */
.prose {
  font-family: var(--font-reading);
  font-size: 1.12rem;
  line-height: 1.72;
  /* Une ligne trop longue fatigue : on borne la mesure à ~72 caractères. */
  max-width: 72ch;
}
.prose > * + * { margin-top: 1.2rem; }
.prose h2 {
  font-size: 1.65rem; margin-top: 2.6rem; padding-bottom: .45rem;
  border-bottom: 2px solid var(--green-soft);
  scroll-margin-top: 6rem;          /* le sommaire ne cache pas le titre visé */
}
.prose h3 { font-size: 1.3rem; margin-top: 2rem; color: var(--green-dark); scroll-margin-top: 6rem; }
.prose h4 { font-size: 1.12rem; margin-top: 1.5rem; }
.prose p { text-wrap: pretty; }
/* Les tableaux et figures peuvent déborder de la mesure du texte. */
.prose figure, .prose .table-scroll, .prose .embed-responsive { max-width: none; }

/* Dans la colonne d'article, plus large que la mesure de lecture : le texte
   reste borné à ~72 caractères, mais les blocs (tableaux, encadrés, figures,
   chiffres clés, FAQ) occupent toute la largeur disponible — sinon un vide
   s'installe entre le contenu et la colonne latérale. */
.single-body .prose { max-width: none; }
.single-body .prose > p,
.single-body .prose > ul,
.single-body .prose > ol:not(.steps),
.single-body .prose > blockquote,
.single-body .prose > h2,
.single-body .prose > h3,
.single-body .prose > h4,
.single-body .prose > .callout,
.single-body .prose > .prose-seealso { max-width: 72ch; }
.single-body .prose .steps > li > p,
.single-body .prose .steps > li > ul,
.single-body .prose .steps > li > ol { max-width: 66ch; }
.prose a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--red); }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { padding-left: .2rem; }
.prose li::marker { color: var(--green); font-weight: 600; }
.prose li + li { margin-top: .5rem; }
.prose li > ul, .prose li > ol { margin-top: .5rem; }
.prose img, .prose .content-image {
  border-radius: var(--radius); margin-inline: auto; box-shadow: var(--shadow-sm);
}
.prose figure { margin-block: 1.75rem; }
.prose figcaption { font-size: .85rem; color: var(--text-soft); text-align: center; margin-top: .5rem; }
.prose blockquote {
  border-left: 4px solid var(--green); background: var(--green-soft);
  padding: 1rem 1.25rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
}
.prose strong { font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin-block: 2rem; }
/* ------------------------------------------------------------- tableaux
   Un seul système pour les tableaux d'article et ceux des gabarits :
   carte blanche, filets horizontaux, couleur d'accent héritée de la
   rubrique (--cat-color). Sur mobile, chaque ligne devient une carte
   grâce aux data-label posés par Content::tables().                      */
.table-scroll {
  --table-accent: var(--cat-color, var(--green));
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-block: 2rem;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--table-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  scrollbar-width: thin;
}
.table-scroll:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.prose table, .order-table {
  --table-accent: var(--cat-color, var(--green));
  border-collapse: collapse; width: 100%; min-width: 560px;
  font-family: var(--font-body);
  font-size: .95rem; line-height: 1.55;
  background: #fff;
  text-align: left;
}
.prose caption, .order-table caption {
  caption-side: top; text-align: left;
  font-family: var(--font-heading); font-size: 1.08rem; font-weight: 700;
  color: var(--text);
  padding: 1.15rem 1.35rem .35rem;
  border-left: 3px solid transparent;      /* alignement avec les cellules */
}
.prose th, .prose td,
.order-table th, .order-table td {
  border: 0;
  padding: .9rem 1.35rem;
  vertical-align: top;
}

/* En-tête : pas de bandeau saturé — un aplat très clair et un filet net,
   qui restent lisibles quelle que soit la couleur de la rubrique. */
.prose thead th, .order-table thead th {
  font-weight: 600; font-size: .74rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--green-dark);
  background: var(--green-soft);
  padding-block: .85rem;
  border-bottom: 2px solid var(--green);
  white-space: nowrap;
}
@supports (color: color-mix(in srgb, red, blue)) {
  .prose thead th, .order-table thead th {
    color: color-mix(in srgb, var(--table-accent) 72%, #10201a);
    background: color-mix(in srgb, var(--table-accent) 8%, #fff);
    border-bottom-color: color-mix(in srgb, var(--table-accent) 35%, #fff);
  }
}

.prose tbody tr + tr, .order-table tbody tr + tr { border-top: 1px solid var(--border); }
.prose tbody tr, .order-table tbody tr { transition: background var(--transition); }
.prose tbody tr:hover, .order-table tbody tr:hover { background: var(--green-soft); }
@supports (color: color-mix(in srgb, red, blue)) {
  .prose tbody tr:hover, .order-table tbody tr:hover {
    background: color-mix(in srgb, var(--table-accent) 6%, #fff);
  }
}

/* Première colonne : l'entité décrite (maladie, ravageur, poste de coût). */
.prose tbody th[scope="row"], .order-table tbody td:first-child {
  font-weight: 600; color: var(--text);
  min-width: 9rem;
}
.prose tbody th[scope="row"] { border-left: 3px solid transparent; }
.prose tbody tr:hover th[scope="row"] { border-left-color: var(--table-accent); }

/* Ligne-titre au milieu du tableau (« RAVAGEURS »). */
.prose tr.table-section th {
  font-family: var(--font-body); font-weight: 700;
  font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--green-dark); background: var(--bg-alt);
  padding-block: .7rem; border-left: 3px solid var(--table-accent);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .prose tr.table-section th {
    color: color-mix(in srgb, var(--table-accent) 72%, #10201a);
    background: color-mix(in srgb, var(--table-accent) 12%, #fff);
  }
}

/* Listes et paragraphes dans une cellule : compacts, sans marge parasite. */
.prose td p + p, .prose th p + p { margin-top: .35rem; }
.prose td ul, .prose td ol { padding-left: 1.1rem; margin-top: .35rem; }
.prose td li + li { margin-top: .25rem; }
.prose td img { border-radius: var(--radius-sm); box-shadow: none; }

.order-table tfoot th {
  background: var(--bg-alt); font-family: var(--font-heading);
  font-size: 1rem; border-top: 2px solid var(--border);
}

/* Mobile : le tableau se lit en cartes, une par ligne. Réservé aux
   tableaux dont les cellules portent un data-label (classe is-cards). */
@media (max-width: 720px) {
  .prose table:not(.is-cards), .order-table { font-size: .9rem; }
  .prose table:not(.is-cards) th, .prose table:not(.is-cards) td,
  .order-table th, .order-table td { padding: .75rem .95rem; }

  .table-scroll.has-cards {
    overflow: visible; background: none; border: 0; box-shadow: none;
  }
  .prose table.is-cards { display: block; width: 100%; min-width: 0; }
  .prose table.is-cards th, .prose table.is-cards td {
    min-width: 0; white-space: normal; overflow-wrap: break-word;
  }
  .prose table.is-cards thead { display: none; }
  .prose table.is-cards tbody { display: block; }
  .prose table.is-cards caption { display: block; width: 100%; padding: 0 0 .85rem; }

  .prose table.is-cards tbody tr {
    display: block; margin-bottom: 1rem;
    background: #fff; border: 1px solid var(--border);
    border-left: 3px solid var(--table-accent);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .prose table.is-cards tbody tr + tr { border-top: 1px solid var(--border); }
  .prose table.is-cards tbody th[scope="row"] {
    display: block; border-left: 0;
    background: var(--green-soft); color: var(--green-dark);
    font-family: var(--font-heading); font-size: 1.02rem; font-weight: 700;
    padding: .7rem .95rem;
  }
  @supports (color: color-mix(in srgb, red, blue)) {
    .prose table.is-cards tbody th[scope="row"] {
      background: color-mix(in srgb, var(--table-accent) 9%, #fff);
      color: color-mix(in srgb, var(--table-accent) 72%, #10201a);
    }
  }
  .prose table.is-cards tbody td {
    display: block; padding: .7rem .95rem;
    border-top: 1px solid var(--border);
  }
  .prose table.is-cards tbody td::before {
    content: attr(data-label);
    display: block; margin-bottom: .2rem;
    font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
    font-weight: 600; color: var(--text-soft);
  }
  .prose table.is-cards tbody td:not([data-label])::before { display: none; }
  .prose table.is-cards tr.table-section { border-left-width: 3px; }
  .prose table.is-cards tr.table-section th {
    display: block; border-left: 0; text-align: center;
  }
}

.embed-responsive { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; }
.embed-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

.single-tags, .single-share { margin-top: 2.25rem; }
.single-tags h2, .single-share h2 { font-size: .95rem; margin-bottom: .7rem; }
.single-tags ul, .single-share ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-tag { font-weight: 500; }
.single-share a {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--bg-alt); color: var(--text); font-size: 1.25rem;
}
.single-share a:hover { background: var(--green); color: #fff; }
.single-back { margin-top: 2rem; font-weight: 600; }
.single-back a { display: inline-flex; align-items: center; gap: .4rem; }

.page-header { background: #fff; padding: 2.25rem 0 1.75rem; border-bottom: 1px solid var(--border); }
.static-page .prose { padding: 2.25rem 0; }

/* --------------------------------------------------------------- boutique */
.product-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2.5rem; align-items: start; }
.product-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); background: #fff; aspect-ratio: 4/3; }
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-info { display: flex; flex-direction: column; gap: 1rem; }
.product-lead { color: var(--text-soft); font-size: 1.02rem; line-height: 1.6; }
/* Description du produit : pleine largeur, sous les deux colonnes. */
.product-description { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.product-description .prose { max-width: none; }
.product-description .prose > p,
.product-description .prose > ul,
.product-description .prose > ol:not(.steps),
.product-description .prose > h2,
.product-description .prose > h3,
.product-description .prose > .callout,
.product-description .prose > .prose-seealso { max-width: 72ch; }
.product-description .prose .steps > li > p,
.product-description .prose .steps > li > ul { max-width: 66ch; }
.price-lg { font-family: var(--font-body); font-size: 2rem; font-weight: 700; color: var(--red); letter-spacing: -.02em; }
.stock { display: inline-flex; align-items: center; gap: .4rem; color: var(--green); font-weight: 600; font-size: .9rem; }
.product-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --------------------------------------------------------------- recherche */
.search-form { display: flex; gap: .6rem; max-width: 560px; margin: 1.25rem auto 0; }
.search-form input {
  flex: 1; padding: .8rem 1.1rem; border: 1px solid var(--border);
  border-radius: 999px; background: #fff; font-size: .95rem;
}

/* ------------------------------------------------------------------- 404 */
.error-page { text-align: center; }
.error-code { font-family: var(--font-heading); font-size: clamp(4rem, 14vw, 8rem); font-weight: 800; color: var(--green-soft); line-height: 1; }
.error-page h1 { margin-bottom: .75rem; }
.error-chips { justify-content: center; margin-block: 1.75rem; }

/* --------------------------------------------------------------- bandeau */
.cta-band {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  color: #fff; text-align: center; padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}
.cta-band h2 { color: #fff; margin-bottom: .6rem; }
.cta-band p { opacity: .92; margin-bottom: 1.5rem; }

.newsletter-form { display: flex; gap: .5rem; }
.newsletter-form input {
  flex: 1; min-width: 0; padding: .7rem 1rem; border: 1px solid var(--border);
  border-radius: 999px; background: #fff; font-size: .9rem;
}
.newsletter-form-lg { max-width: 520px; margin-inline: auto; }

/* ------------------------------------------------------------------ pied */
.site-footer { background: var(--green-dark); color: rgba(255,255,255,.82); margin-top: auto; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 2rem; padding: 3rem 0 2.25rem;
}
.site-footer h2 { color: #fff; font-family: var(--font-body); font-size: .92rem; font-weight: 700;
                  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: var(--yellow); }
.footer-col ul { display: grid; gap: .55rem; font-size: .9rem; }
.footer-logo { background: #fff; padding: .5rem .75rem; border-radius: var(--radius-sm); margin-bottom: 1rem; }
.footer-about p { font-size: .9rem; }
/* Les icônes sociales sont une rangée, pas une liste de liens : la règle doit
   être plus spécifique que `.footer-col ul` (qui impose une grille verticale). */
.footer-col ul.social {
  display: flex;
  flex-flow: row wrap;
  gap: .55rem;
  margin-top: 1.25rem;
}
.footer-col ul.social li { display: block; }
.footer-col ul.social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  transition: var(--transition);
}
.footer-col ul.social a:hover,
.footer-col ul.social a:focus-visible {
  background: var(--brand, var(--yellow));
  border-color: var(--brand, var(--yellow));
  color: #fff;
  transform: translateY(-2px);
}
.footer-contact { margin-top: 1.1rem; }
.footer-contact li { display: flex; align-items: center; gap: .5rem; }
.footer-newsletter p { font-size: .9rem; margin-bottom: .9rem; }
.footer-col > ul li { line-height: 1.45; }

/* Bandeau légal : mentions, CGU, CGV, confidentialité, cookies */
.footer-legal-bar {
  border-top: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .12);
  font-size: .82rem;
}
.footer-legal-bar ul {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem 1.35rem; padding: .85rem 0;
}
.footer-legal-bar li { position: relative; }
/* Séparateur discret entre les liens, invisible en début de ligne */
.footer-legal-bar li + li::before {
  content: ''; position: absolute; left: -.7rem; top: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255, 255, 255, .35); transform: translateY(-50%);
}
.footer-legal-bar a { color: rgba(255, 255, 255, .72); }
.footer-legal-bar a:hover { color: var(--yellow); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); font-size: .85rem; }
.footer-bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem 1.5rem; flex-wrap: wrap; padding: 1.1rem 0;
}
.footer-copy { margin-right: auto; }
.footer-credit { color: rgba(255, 255, 255, .68); }
.footer-credit a { font-weight: 600; color: #fff; }
.footer-credit a:hover { color: var(--yellow); }
.footer-lang { display: flex; gap: .75rem; }
.footer-lang a.is-active { color: var(--yellow); font-weight: 600; }

/* Informations légales restant à fournir, signalées dans le contenu */
.legal-todo {
  background: var(--yellow-soft); border: 1px dashed #C9A227; color: #7A5C00;
  padding: .05em .4em; border-radius: 4px; font-size: .92em;
}
.legal-updated {
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border);
  font-size: .85rem; color: var(--text-soft); font-style: italic;
}

/* ------------------------------------------------------ panier & commande */
.page-h1 { margin-bottom: 1.5rem; }

.count-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--red); color: #fff;
  border-radius: 999px; font-size: .68rem; font-weight: 700; line-height: 1;
}
.icon-btn { position: relative; }
.icon-btn-fav.is-active { background: var(--red); color: #fff; }

/* Messages après une action (motif POST-Redirect-GET) */
.flash-zone { margin-top: 1rem; }
.flash {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1.1rem; border-radius: var(--radius-sm);
  font-size: .92rem; font-weight: 500; margin-bottom: .5rem;
}
.flash i { font-size: 1.2rem; flex: none; }
.flash-success { background: var(--green-soft); color: var(--green-dark); border-left: 4px solid var(--green); }
.flash-error   { background: #FDECEE; color: var(--red-dark); border-left: 4px solid var(--red); }

.cart-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 2rem; align-items: start; }
.cart-lines { display: grid; gap: .85rem; }
.cart-line {
  display: grid;
  grid-template-columns: 84px minmax(0,1fr) auto auto auto;
  gap: 1rem; align-items: center;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: .85rem 1rem;
}
.cart-line-media { width: 84px; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-alt); }
.cart-line-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-body h2 { font-size: 1rem; line-height: 1.35; }
.cart-line-body h2 a { color: var(--text); }
.cart-line-body h2 a:hover { color: var(--green); }
.cart-line-type { font-size: .8rem; color: var(--text-soft); margin-top: .2rem; }
.cart-line-unit { font-size: .85rem; color: var(--text-soft); }
.cart-line-qty input, .qty-input {
  width: 68px; padding: .5rem .6rem; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff;
}
.cart-line-total { font-family: var(--font-body); font-weight: 700; white-space: nowrap; }
.cart-line-remove {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; color: var(--text-soft); font-size: 1.15rem;
  transition: var(--transition);
}
.cart-line-remove:hover { background: #FDECEE; color: var(--red); }

.cart-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.cart-clear { color: var(--text-soft); border: 1px solid var(--border); background: #fff; }
.cart-clear:hover { color: var(--red); border-color: var(--red); }

.cart-summary, .checkout-summary {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.35rem;
  position: sticky; top: 100px;
}
.cart-summary h2, .checkout-summary h2 { font-size: 1.05rem; margin-bottom: 1rem; }
.cart-summary dl > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; padding: .35rem 0; }
.cart-summary dd.free { color: var(--green); font-weight: 600; }
.cart-total-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin: .85rem 0 1.1rem; padding-top: .85rem;
  border-top: 1px solid var(--border);
}
.cart-total-row strong { font-family: var(--font-body); font-size: 1.4rem; font-weight: 700; color: var(--red); }
.cart-checkout { width: 100%; justify-content: center; }
.cart-continue {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .9rem; font-size: .88rem; font-weight: 600;
}

/* Fiche produit */
.product-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.product-buy { display: flex; gap: .6rem; align-items: center; }
.product-actions .btn-ghost.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.card-buy { display: flex; gap: .5rem; align-items: center; margin-top: auto; }
.card-buy form { display: contents; }

/* Tunnel de commande */
.checkout-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 2rem; align-items: start; }
.checkout-lead { color: var(--text-soft); margin-bottom: 1.75rem; max-width: 60ch; }
.checkout-form fieldset {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; padding: 1.5rem;
}
.checkout-form legend { font-family: var(--font-heading); font-weight: 700; padding: 0 .5rem; }
.field { margin-bottom: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.field input, .field textarea {
  width: 100%; padding: .7rem .9rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; font-size: .95rem;
}
.field input:focus, .field textarea:focus { border-color: var(--green); }
.field input[aria-invalid="true"] { border-color: var(--red); background: #FFF7F8; }
.field-hint { font-size: .8rem; color: var(--text-soft); margin-top: .3rem; }
.field-error { font-size: .82rem; color: var(--red-dark); font-weight: 600; margin-top: .3rem; }

.notice-payment { border-left-color: var(--green); background: var(--green-soft); margin-top: 1.25rem; }
.checkout-items { display: grid; gap: .6rem; font-size: .88rem; margin-bottom: .5rem; }
.checkout-items li { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: baseline; }
.checkout-items .qty { color: var(--text-soft); font-weight: 600; }
.checkout-items .amount { font-weight: 600; white-space: nowrap; }
.checkout-terms { font-size: .8rem; color: var(--text-soft); margin-top: .8rem; text-align: center; }

/* Confirmation de commande */
.order-head { text-align: center; margin-bottom: 2rem; }
.order-icon { font-size: 3rem; color: var(--green); line-height: 1; }
.order-ref { margin-top: .6rem; color: var(--text-soft); }
.order-ref strong {
  display: inline-block; margin-left: .3rem; padding: .2rem .7rem;
  background: var(--green-soft); color: var(--green-dark);
  border-radius: var(--radius-sm); font-family: var(--font-heading); letter-spacing: .05em;
}
.order-h2 { font-size: 1.1rem; margin: 2rem 0 .85rem; }
/* .order-table : voir la section « tableaux » plus haut. */
.order-customer { display: grid; gap: .5rem; font-size: .92rem; }
.order-customer li { display: flex; align-items: center; gap: .55rem; }
.order-customer i { color: var(--green); }
.order-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }

@media (max-width: 900px) {
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .cart-summary, .checkout-summary { position: static; }
}
@media (max-width: 620px) {
  .cart-line {
    grid-template-columns: 64px minmax(0,1fr) auto;
    grid-template-areas: 'media body remove' 'media qty total';
    row-gap: .6rem;
  }
  .cart-line-media { grid-area: media; width: 64px; }
  .cart-line-body { grid-area: body; }
  .cart-line-qty { grid-area: qty; }
  .cart-line-total { grid-area: total; text-align: right; }
  .cart-line-remove { grid-area: remove; }
  .field-row { grid-template-columns: 1fr; }
}

/* Bouton d'appel inséré dans le corps d'un article (voir convertInlineCtas). */
.prose .prose-cta { margin-block: 2rem; }
.prose .prose-cta a {
  text-decoration: none;
  color: #fff;
}
.prose .prose-cta a:hover { color: #fff; }
/* Bouton posé seul dans le texte : il garde son allure de bouton. */
.prose a.btn { text-decoration: none; }
.prose a.btn:hover { color: #fff; }
.prose a.btn.btn-ghost:hover { color: #fff; }

/* ---------------------------------------------------- sommaire d'article */
.toc {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-sm);
  margin-bottom: 2rem;
  font-family: var(--font-body);
}
.toc-title {
  display: flex; align-items: center; gap: .55rem;
  padding: .95rem 1.35rem;
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--green-dark);
  cursor: pointer;
  list-style: none;          /* masque le triangle natif */
}
.toc-title::-webkit-details-marker { display: none; }
.toc-title:hover { color: var(--green); }
.toc-count {
  margin-left: auto;
  background: var(--green); color: #fff;
  min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
  display: grid; place-items: center;
  border-radius: 999px; font-size: .72rem; letter-spacing: 0;
}
.toc-caret { transition: transform var(--transition); font-size: 1rem; }
.toc[open] .toc-caret { transform: rotate(180deg); }

.toc ol {
  counter-reset: toc;
  display: grid; gap: .4rem;
  padding: 0 1.35rem 1.1rem;
  border-top: 1px solid var(--border);
  margin-top: 0;
}
.toc ol { padding-top: .9rem; }
.toc li { counter-increment: toc; display: flex; gap: .6rem; font-size: .93rem; }
.toc li::before {
  content: counter(toc);
  flex: none; min-width: 1.35rem;
  color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums;
}
.toc a { color: var(--text); }
.toc a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* Renvoi vers un autre article, inséré au fil du texte */
.prose .prose-seealso {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  margin-block: 1.75rem; padding: .85rem 1.1rem;
  background: var(--green-soft);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-body); font-size: .95rem;
}
.prose-seealso-label {
  flex: none;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--green-dark);
}
.prose-seealso-body a { font-weight: 600; }

/* ------------------------------------------------- blocs éditoriaux de fiche
   Chiffres clés, encadrés, itinéraire en étapes, questions fréquentes :
   des repères visuels pour un texte long, tous accordés à la couleur de
   la rubrique (--cat-color).                                              */

.prose .key-figures {
  --accent: var(--cat-color, var(--green));
  /* Flex plutôt que grid : quel que soit le nombre de chiffres, la dernière
     ligne se remplit — une grille laisserait une case vide. */
  display: flex; flex-wrap: wrap; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-block: 2rem;
  font-family: var(--font-body);
}
.prose .key-figures > div {
  flex: 1 1 10rem; padding: 1.15rem 1.25rem;
  border-left: 1px solid var(--border);
}
.prose .key-figures > div:first-child { border-left: 0; }
.prose .key-figures b {
  display: block; font-family: var(--font-heading);
  font-size: 1.65rem; line-height: 1.15; color: var(--accent);
}
.prose .key-figures span {
  display: block; margin-top: .25rem;
  font-size: .82rem; line-height: 1.4; color: var(--text-soft);
}

.prose .callout {
  --accent: var(--green);
  display: flex; gap: .95rem; align-items: flex-start;
  margin-block: 1.85rem; padding: 1.1rem 1.3rem;
  background: var(--green-soft);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
}
.prose .callout > i { flex: none; font-size: 1.4rem; color: var(--accent); line-height: 1.3; }
.prose .callout p + p { margin-top: .45rem; }
.prose .callout strong { display: block; margin-bottom: .15rem; }
.prose .callout--warn { --accent: #B98300; background: var(--yellow-soft); }
.prose .callout--alert { --accent: var(--red); background: #FDECEE; }

.prose .steps { list-style: none; padding-left: 0; counter-reset: step; }
.prose .steps > li {
  position: relative; counter-increment: step;
  margin-left: 1.15rem; padding: 0 0 1.75rem 2.6rem;
  border-left: 2px solid var(--border);
}
.prose .steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.prose .steps > li::marker { content: none; }
.prose .steps > li::before {
  content: counter(step);
  position: absolute; left: -1.15rem; top: -.15rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--cat-color, var(--green)); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem;
}
.prose .steps > li > :first-child { margin-top: 0; }
.prose .steps h3 {
  font-family: var(--font-heading); font-size: 1.18rem;
  color: var(--text); margin-bottom: .5rem;
}

.prose .faq {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; overflow: hidden; margin-block: 2rem;
  font-family: var(--font-body);
}
.prose .faq details + details { border-top: 1px solid var(--border); }
.prose .faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700;
}
.prose .faq summary::-webkit-details-marker { display: none; }
.prose .faq summary::after {
  content: '+'; flex: none;
  font-size: 1.35rem; line-height: 1; color: var(--cat-color, var(--green));
}
.prose .faq details[open] summary::after { content: '\2212'; }
.prose .faq summary:hover { color: var(--cat-color, var(--green)); }
.prose .faq-body { padding: 0 1.25rem 1.15rem; font-size: .98rem; }
.prose .faq-body > * + * { margin-top: .6rem; }

/* ------------------------------------------------- nouveaux blocs de fiche */

/* Avantages / limites — deux colonnes face à face. */
.prose .pros-cons {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-block: 2rem; font-family: var(--font-body);
}
.prose .pros-cons > div { background: #fff; padding: 1.1rem 1.25rem; }
.prose .pros-cons h3 {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .6rem; font-size: 1rem; font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft);
}
.prose .pros-cons ul { margin: 0; padding-left: 1.2rem; font-size: .96rem; }
.prose .pros-cons li::marker { color: currentColor; }
.prose .pros-cons .pros h3 { color: var(--green); }
.prose .pros-cons .cons h3 { color: var(--red); }

/* Liste de contrôle — ce qu'il faut avoir avant de se lancer. */
.prose .checklist {
  list-style: none; padding: 1.1rem 1.3rem; margin-block: 2rem;
  background: #fff; border: 1px solid var(--border);
  border-left: 4px solid var(--cat-color, var(--green));
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-body); font-size: .98rem;
}
.prose .checklist > li { position: relative; padding-left: 1.9rem; }
.prose .checklist > li + li { margin-top: .6rem; }
.prose .checklist > li::marker { content: none; }
.prose .checklist > li::before {
  content: ''; position: absolute; left: 0; top: .25em;
  width: 1.1rem; height: 1.1rem; border-radius: 4px;
  border: 2px solid var(--cat-color, var(--green));
}

/* Calendrier cultural — les mois où l'opération a lieu sont marqués. */
.prose .crop-calendar {
  margin-block: 2rem; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; font-family: var(--font-body);
}
.prose .crop-calendar-row {
  display: grid; grid-template-columns: minmax(7rem, 1.4fr) repeat(12, 1fr);
  align-items: stretch; font-size: .82rem;
}
.prose .crop-calendar-row + .crop-calendar-row { border-top: 1px solid var(--border); }
.prose .crop-calendar-head { background: var(--bg-alt); font-weight: 600; color: var(--text-soft); }
.prose .crop-calendar-row > span {
  padding: .5rem .3rem; text-align: center; border-left: 1px solid var(--border);
}
.prose .crop-calendar-row > span:first-child {
  text-align: left; padding-left: .9rem; border-left: 0; font-weight: 600; color: var(--text);
}
.prose .crop-calendar-row > span.on {
  background: var(--cat-color, var(--green)); color: #fff; font-weight: 700;
}

/* Citation d'expert — parole attribuée, distincte d'une citation de texte. */
.prose .quote-expert {
  margin-block: 2rem; padding: 1.3rem 1.5rem;
  background: #fff; border: 1px solid var(--border);
  border-left: 4px solid var(--cat-color, var(--green));
  border-radius: 0 var(--radius) var(--radius) 0;
}
.prose .quote-expert p { font-size: 1.1rem; font-style: italic; }
.prose .quote-expert footer {
  margin-top: .8rem; font-family: var(--font-body); font-size: .88rem;
  font-style: normal; color: var(--text-soft);
}
.prose .quote-expert footer b { color: var(--text); font-style: normal; }

/* Galerie — deux ou trois images de même hauteur. */
.prose .gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .8rem; margin-block: 2rem;
}
.prose .gallery figure { margin: 0; }
.prose .gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin: 0; }
.prose .gallery figcaption { text-align: left; margin-top: .35rem; }

/* Tableau de budget : la dernière ligne porte le total. */
.prose table.budget tfoot th, .prose table.budget tfoot td {
  background: var(--bg-alt); font-weight: 700;
  border-top: 2px solid var(--border);
}
.prose table.budget td:last-child, .prose table.budget th:last-child { text-align: right; }

/* Fin d'article : le titre est un <p> et non un <h2>, pour ne pas
   apparaître dans le sommaire. */
.prose .cta-panel {
  margin-block: 2.5rem; padding: 1.85rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
  color: #fff; font-family: var(--font-body);
}
.prose .cta-panel-title {
  font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700;
  margin-bottom: .5rem;
}
.prose .cta-panel p { font-size: .98rem; }
.prose .cta-panel a.btn { margin-top: 1.1rem; background: var(--yellow); color: var(--green-dark); text-decoration: none; }
.prose .cta-panel a.btn:hover { background: #fff; color: var(--green-dark); }

/* --------------------------------------------- appel à l'action d'article */
.article-cta {
  margin-top: 3rem;
  border-radius: var(--radius);
  padding: 1.85rem;
  border: 1px solid var(--border);
  font-family: var(--font-body);
}
.article-cta h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem; margin-bottom: .6rem;
}
.article-cta p { font-size: .96rem; }
.article-cta-kicker {
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  margin-bottom: .5rem;
}
.article-cta-actions {
  display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem;
}
.article-cta .newsletter-form { margin-top: 1.25rem; max-width: 440px; }

.article-cta-shop {
  background: linear-gradient(135deg, #FFF6F7 0%, #FDECEE 100%);
  border-color: #F5C6CC;
}
.article-cta-shop .article-cta-kicker { color: var(--red-dark); }

.article-cta-project {
  background: linear-gradient(135deg, #F1F6FD 0%, #E4EDFA 100%);
  border-color: #C9DBF3;
}
.article-cta-project .article-cta-kicker { color: #1565C0; }

.article-cta-newsletter {
  background: linear-gradient(135deg, var(--green-soft) 0%, #D8EDE6 100%);
  border-color: #B9DCD2;
}
.article-cta-newsletter .article-cta-kicker { color: var(--green-dark); }

@media (max-width: 620px) {
  .article-cta { padding: 1.35rem; }
  .article-cta-actions .btn { width: 100%; justify-content: center; }
}

/* -------------------------------------------- pages institutionnelles */
.page-hero { padding: clamp(2.5rem, 5vw, 4rem) 0; text-align: center; color: #fff; }
.page-hero-green { background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 60%, var(--green-light) 100%); }
.page-hero-dark  { background: linear-gradient(135deg, #10231C 0%, var(--green-dark) 65%, var(--green) 100%); }
.page-hero h1 { color: #fff; margin-bottom: .8rem; }
.page-hero-kicker {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-body); font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  padding: .3rem .85rem; border-radius: 999px; margin-bottom: 1rem;
}
.page-hero-lead {
  font-family: var(--font-reading); font-size: 1.12rem;
  max-width: 62ch; margin-inline: auto; opacity: .93;
}
.page-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.75rem; }
.page-hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.page-hero .btn-ghost:hover { background: #fff; color: var(--green-dark); border-color: #fff; }

/* Chiffres clés */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem; margin-top: 1.75rem;
}
.stat-card {
  background: #fff; border: 1px solid var(--border);
  border-top: 4px solid var(--green);
  border-radius: var(--radius); padding: 1.5rem 1.25rem;
  text-align: center; font-family: var(--font-body);
}
.stat-card i { font-size: 1.75rem; color: var(--green); }
.stat-card strong {
  display: block; font-size: 2.1rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--text); margin: .35rem 0 .15rem;
  font-variant-numeric: tabular-nums;
}
.stat-card span { display: block; font-size: .92rem; color: var(--text-soft); }
.stat-card em { display: block; font-style: normal; font-size: .78rem; color: var(--text-soft); opacity: .8; margin-top: .2rem; }
.about-stats-title, .section-title + .about-stats-sub { margin-bottom: .35rem; }
.about-stats-sub { color: var(--text-soft); max-width: 62ch; }

/* Piliers « À propos » */
.about-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.about-pillar { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; }
.about-pillar i { font-size: 2rem; color: var(--green); }
.about-pillar h2 { font-size: 1.3rem; margin: .6rem 0 .5rem; }
.about-pillar p { color: var(--text-soft); font-size: .95rem; }

.about-cta, .rates-contact {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.about-cta h2, .rates-contact h2 { margin-bottom: .5rem; }
.about-cta p, .rates-contact p { color: var(--text-soft); max-width: 52ch; }
.about-cta-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Profil d'audience */
.audience-profile {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .75rem; margin-top: 1.75rem; font-family: var(--font-body); font-size: .95rem;
}
.audience-profile li { display: flex; align-items: flex-start; gap: .55rem; }
.audience-profile i { color: var(--green); font-size: 1.15rem; flex: none; }

/* Offres publicitaires */
.rate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.25rem; margin-top: 1.75rem; }
.rate-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.75rem 1.5rem;
  font-family: var(--font-body);
}
.rate-card.is-featured { border-color: var(--red); box-shadow: var(--shadow-md); }
.rate-badge {
  position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff; white-space: nowrap;
  padding: .25rem .8rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.rate-card > i { font-size: 1.9rem; color: var(--green); }
.rate-card h3 { font-family: var(--font-heading); font-size: 1.25rem; margin: .5rem 0 .2rem; }
.rate-spec { font-size: .85rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.rate-price { margin: 1rem 0 .75rem; }
.rate-price strong {
  display: block; font-size: 1.75rem; font-weight: 700;
  color: var(--red); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.rate-price span { font-size: .82rem; color: var(--text-soft); }
.rate-place, .rate-duration { font-size: .87rem; color: var(--text-soft); margin-bottom: .4rem; }
.rate-place i { color: var(--green); }
.rate-card .btn { margin-top: auto; justify-content: center; }
.rate-note {
  display: flex; align-items: center; gap: .55rem; justify-content: center;
  margin-top: 1.5rem; padding: .85rem 1.2rem;
  background: var(--yellow-soft); border: 1px dashed #E0C55F;
  border-radius: var(--radius-sm); font-size: .92rem; font-family: var(--font-body);
}
.rate-note i { color: #8a6d00; font-size: 1.2rem; }

/* Page newsletter */
.newsletter-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.newsletter-aside { display: grid; gap: 1rem; }
.newsletter-page-form .btn { width: 100%; justify-content: center; }
.newsletter-promises {
  display: grid; gap: .6rem; margin-top: 1.5rem;
  font-family: var(--font-body); font-size: .93rem;
}
.newsletter-promises li { display: flex; align-items: center; gap: .55rem; }
.newsletter-promises i { color: var(--green); font-size: 1.2rem; }
.newsletter-content-list { display: grid; gap: .5rem; font-size: .93rem; font-family: var(--font-body); }
.newsletter-content-list li { display: flex; align-items: center; gap: .45rem; }
.newsletter-content-list i { color: var(--green); }

@media (max-width: 900px) {
  .newsletter-layout { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- page de contact */
.contact-hero {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 60%, var(--green-light) 100%);
  color: #fff; text-align: center;
  padding: clamp(2.25rem, 4vw, 3.5rem) 0 clamp(2.5rem, 4vw, 3.75rem);
}
.contact-hero h1 { color: #fff; margin-bottom: .75rem; }
.contact-hero-icon { font-size: 2.6rem; line-height: 1; opacity: .9; margin-bottom: .5rem; }
.contact-hero-lead {
  font-family: var(--font-reading); font-size: 1.1rem;
  max-width: 60ch; margin: 0 auto; opacity: .93;
}
.contact-quick {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin-top: 1.75rem; font-family: var(--font-body);
}
.contact-quick a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem; border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff; font-size: .9rem; font-weight: 600;
  transition: var(--transition);
}
.contact-quick a:hover { background: #fff; color: var(--green-dark); border-color: #fff; }
.contact-quick i { font-size: 1.15rem; }

.contact-layout {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2.5rem; align-items: start;
}
.contact-h2 { font-size: 1.5rem; margin-bottom: .6rem; }
.contact-intro { color: var(--text-soft); margin-bottom: 1.5rem; max-width: 60ch; }

.contact-form {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.75rem;
}
.contact-form select {
  width: 100%; padding: .7rem .9rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; font-size: .95rem;
}
/* Le texte reste un paragraphe : en faire un conteneur flex transformait le
   lien en élément à part, coupé au milieu de la phrase. */
.contact-privacy {
  font-size: .84rem; line-height: 1.5; color: var(--text-soft);
  margin: 1.25rem 0 1.5rem;
}
.contact-privacy i {
  color: var(--green); font-size: 1rem;
  vertical-align: -.15em; margin-right: .25rem;
}
.contact-privacy a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }

.contact-aside { display: grid; gap: 1rem; }
.contact-card {
  background: #fff; border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: var(--radius); padding: 1.25rem 1.35rem;
  font-family: var(--font-body);
}
.contact-card-technical { border-left-color: #455A64; }
.contact-card-place     { border-left-color: var(--yellow); }
.contact-card-role {
  display: flex; align-items: center; gap: .45rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: .3rem;
}
.contact-card h3 { font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: .75rem; }
.contact-card-links { display: grid; gap: .5rem; font-size: .92rem; }
.contact-card-links li { display: flex; align-items: center; gap: .5rem; }
.contact-card-links a { display: inline-flex; align-items: center; gap: .45rem; color: var(--text); }
.contact-card-links a:hover { color: var(--green); }
.contact-card-links i { color: var(--green); }
.contact-wa {
  margin-left: auto; width: 30px; height: 30px; flex: none;
  display: grid !important; place-items: center; border-radius: 50%;
  background: #E8F8EE; color: #128C7E !important;
}
.contact-wa:hover { background: #25D366; color: #fff !important; }
.contact-hours { font-size: .88rem; color: var(--text-soft); }
.footer-col ul.contact-social,
.contact-social { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.contact-social a {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--bg-alt); color: var(--text);
  font-size: 1.05rem; transition: var(--transition);
}
.contact-social a:hover { background: var(--brand, var(--green)); color: #fff; }

.contact-video {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2.5rem; align-items: center;
}
.contact-video-text h2 { margin-bottom: .75rem; }
.contact-video-text p { color: var(--text-soft); margin-bottom: 1.25rem; max-width: 46ch; }
.contact-video .embed-responsive { box-shadow: var(--shadow-md); }

@media (max-width: 900px) {
  .contact-layout, .contact-video { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .contact-form { padding: 1.25rem; }
  .contact-quick a { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------- visionneuse image */
.is-zoomable { cursor: zoom-in; }
.is-zoomable:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.lightbox {
  position: fixed; inset: 0; z-index: 500;
  display: none; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(12, 20, 16, .92);
  cursor: zoom-out;
}
.lightbox.is-open { display: grid; animation: lightbox-in .18s ease-out; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox-figure {
  max-width: min(1200px, 100%); max-height: 100%;
  display: flex; flex-direction: column; gap: .75rem;
  cursor: default;
}
.lightbox-figure img {
  max-width: 100%; max-height: 80vh;
  margin-inline: auto; object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.lightbox-figure figcaption {
  color: rgba(255, 255, 255, .82);
  font-size: .88rem; text-align: center; max-width: 70ch; margin-inline: auto;
}
.lightbox-close {
  position: absolute; top: 1rem; right: 1.25rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-size: 1.9rem; line-height: 1;
  display: grid; place-items: center;
  transition: var(--transition);
}
.lightbox-close:hover { background: rgba(255, 255, 255, .25); }
body.lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lightbox.is-open { animation: none; }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .layout-with-aside, .single-layout { grid-template-columns: 1fr; }
  .aside { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  .burger { display: block; }
  .header-search { display: none; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-feature { order: -1; }

  .main-nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw);
    background: #fff; box-shadow: var(--shadow-lg); padding: 5rem 1.25rem 2rem;
    transform: translateX(100%); transition: transform var(--transition);
    overflow-y: auto; z-index: 200;
  }
  .main-nav.is-open { transform: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav-list > li > a { padding: .8rem .75rem; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--green-soft);
    border-radius: 0; padding: .25rem 0 .5rem .75rem; margin-left: .75rem;
    display: none; min-width: 0;
  }
  .has-dropdown.is-open .dropdown { display: block; }
  .dropdown-intro { display: none; }
  body.nav-open { overflow: hidden; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 150; }
}

@media (max-width: 620px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
  .footer-copy { margin-right: 0; }
  .topbar-tagline { display: none; }
  .topbar-inner { justify-content: flex-end; }
  .card-wide { grid-column: auto; }
  .single-share ul { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------- impression */
@media print {
  .site-header, .site-footer, .aside, .single-share, .breadcrumb, .cta-band { display: none; }
  body { background: #fff; }
  .single-layout { grid-template-columns: 1fr; }
}