/* ===== DISONS DINETTE — "Au jardin" : feed d'articles ===== */
/* Vient compléter assets/css/legal.css (palette, reset, nav, footer) */

.script { font-family: 'Dancing Script', cursive; color: var(--rose); }

/* ===== HERO ===== */
.aj-hero {
  padding: 70px 24px 40px;
  text-align: center;
  background: linear-gradient(180deg, var(--creme-rose), var(--creme));
  position: relative;
  overflow: hidden;
}
.aj-hero .section-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rose); margin-bottom: 14px;
}
.aj-hero h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); margin-bottom: 14px; }
.aj-hero p.aj-lede { max-width: 560px; margin: 0 auto; color: rgba(26,26,26,.65); font-size: 1rem; line-height: 1.6; }
.aj-leaf { position: absolute; opacity: .14; color: var(--vert-fonce); width: 120px; height: 120px; }
.aj-leaf--1 { top: -20px; left: -20px; transform: rotate(-15deg); }
.aj-leaf--2 { bottom: -30px; right: -10px; transform: rotate(25deg); }

/* ===== FILTRES ===== */
.aj-filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  padding: 28px 24px; max-width: 980px; margin: 0 auto;
}
.aj-filter-btn {
  font-family: 'DM Sans', sans-serif; font-size: .85rem; font-weight: 500;
  padding: 9px 20px; border-radius: 30px; border: 1.5px solid rgba(30,74,46,.2);
  background: #fff; color: var(--vert-fonce); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.aj-filter-btn:hover { transform: translateY(-1px); border-color: var(--rose); }
.aj-filter-btn.active { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; }

/* ===== FEED — grille magazine ===== */
.aj-feed {
  max-width: 1180px; margin: 0 auto; padding: 10px 24px 60px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
}
.aj-card {
  grid-column: span 2;
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 6px 28px rgba(0,0,0,.06);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease;
}
.aj-card.visible { opacity: 1; transform: translateY(0); }
.aj-card.aj-hidden { display: none; }

.aj-card-media { position: relative; overflow: hidden; height: 230px; }
.aj-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.aj-card:hover .aj-card-media img { transform: scale(1.05); }

.aj-card-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.aj-tag {
  align-self: flex-start;
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--rose); background: var(--creme-rose);
  padding: 5px 12px; border-radius: 20px; margin-bottom: 12px;
}
.aj-card-body h2, .aj-card-body h3 { font-size: 1.3rem; line-height: 1.25; margin-bottom: 10px; }
.aj-date { font-size: .76rem; color: rgba(26,26,26,.4); margin-bottom: 8px; order: -1; }
.aj-excerpt { font-size: .92rem; line-height: 1.65; color: rgba(26,26,26,.75); margin-bottom: 4px; }
.aj-readmore {
  align-self: flex-start; margin-top: 14px;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif; font-size: .86rem; font-weight: 600;
  color: var(--vert-fonce); display: inline-flex; align-items: center; gap: 6px;
}
.aj-readmore:hover { color: var(--rose); }
.aj-readmore:hover svg { transform: translateX(3px); }
.aj-readmore svg { width: 14px; height: 14px; transition: transform .2s ease; }

/* Carte vedette */
.aj-card--featured {
  grid-column: span 4;
  flex-direction: row;
}
.aj-card--featured .aj-card-media { width: 46%; height: auto; min-height: 340px; flex-shrink: 0; }
.aj-card--featured .aj-card-body { padding: 38px 42px; justify-content: center; }
.aj-card--featured h2 { font-size: 1.9rem; }

/* Carte large (paysage) */
.aj-card--wide {
  grid-column: span 4;
  flex-direction: row;
}
.aj-card--wide .aj-card-media { width: 42%; height: auto; min-height: 260px; flex-shrink: 0; }
.aj-card--wide .aj-card-body { padding: 28px 34px; }

/* ===== CTA bas de page ===== */
.aj-cta {
  text-align: center; padding: 70px 24px 90px;
  background: var(--creme-rose);
}
.aj-cta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 14px; }
.aj-cta p { max-width: 480px; margin: 0 auto 26px; color: rgba(26,26,26,.65); }
.aj-btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.aj-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 30px; font-size: .92rem; font-weight: 500;
  text-decoration: none; transition: transform .15s, background .2s, color .2s;
}
.aj-btn--primary { background: var(--rose); color: #fff; }
.aj-btn--primary:hover { transform: translateY(-2px); background: var(--vert-fonce); }
.aj-btn--outline { border: 1.5px solid var(--vert-fonce); color: var(--vert-fonce); }
.aj-btn--outline:hover { transform: translateY(-2px); background: var(--vert-fonce); color: #fff; }

@media (max-width: 900px) {
  .aj-card, .aj-card--featured, .aj-card--wide { grid-column: span 4; flex-direction: column; }
  .aj-card--featured .aj-card-media, .aj-card--wide .aj-card-media { width: 100%; height: 240px; min-height: 0; }
}
@media (max-width: 560px) {
  .aj-feed { gap: 22px; padding: 10px 18px 50px; }
  .aj-card-body { padding: 20px 20px 24px; }
  .aj-card--featured .aj-card-body, .aj-card--wide .aj-card-body { padding: 24px 22px; }
}