/* =========================================================
   NESCAPS — Composants
   Boutons, cartes, tableaux, FAQ, breadcrumb, vidéo, encadrés.
   ========================================================= */

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-copper-500); color: var(--color-white); }
.btn-primary:hover { background: var(--color-coffee-900); color: var(--color-white); }
.btn-outline { background: transparent; border-color: var(--color-coffee-900); color: var(--color-coffee-900); }
.btn-outline:hover { background: var(--color-coffee-900); color: var(--color-white); }
.btn-ghost { background: transparent; color: var(--color-coffee-900); padding-left: 0; padding-right: 0; }
.btn-ghost:hover { color: var(--color-copper-500); }

/* --- Cards --- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.card:hover { box-shadow: var(--shadow-m); transform: translateY(-3px); }
.card-media { aspect-ratio: 4/3; background: var(--color-cream-200); }
.card-body { padding: var(--space-m); display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; }
.card-eyebrow { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-copper-500); font-weight: 700; }
.card-title { font-family: var(--font-display); font-size: 1.2rem; color: var(--color-coffee-900); margin: 0; }
.card-desc { font-size: 0.92rem; color: var(--color-ink-soft); flex: 1; }
.card-meta { font-size: var(--fs-micro); color: var(--color-coffee-500); margin-top: var(--space-2xs); }

/* Link card (silo hub, sans image) */
.link-card {
  display: block;
  padding: var(--space-m);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  text-decoration: none;
  color: inherit;
  background: var(--color-white);
  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.link-card:hover { box-shadow: var(--shadow-m); border-color: var(--color-copper-300); }
.link-card .card-eyebrow { display: block; margin-bottom: var(--space-3xs); }
.link-card h3 { font-size: 1.1rem; margin-bottom: var(--space-2xs); }
.link-card p { font-size: 0.9rem; color: var(--color-ink-soft); margin: 0; }

/* --- Tableaux --- */
.table-wrap { overflow-x: auto; margin: var(--space-l) 0; border-radius: var(--radius-m); border: 1px solid var(--color-line); }
table.data-table { width: 100%; font-size: 0.92rem; }
.data-table th, .data-table td { padding: var(--space-xs) var(--space-s); text-align: left; border-bottom: 1px solid var(--color-line); }
.data-table thead th { background: var(--color-coffee-900); color: var(--color-cream-050); font-family: var(--font-display); font-weight: 700; }
.data-table tbody tr:nth-child(even) { background: var(--color-cream-200); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* --- Breadcrumb --- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-3xs); font-size: var(--fs-small); color: var(--color-coffee-500); list-style: none; padding: 0; margin: 0; }
.breadcrumb li { display: flex; align-items: center; gap: var(--space-3xs); margin: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--space-3xs); color: var(--color-line-strong); }
.breadcrumb a { color: var(--color-coffee-500); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-copper-500); }
.breadcrumb li:last-child { color: var(--color-ink); font-weight: 600; }

/* --- FAQ accordéon --- */
.faq-list { border-top: 1px solid var(--color-line); }
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-coffee-900);
  padding: var(--space-m) 0;
  cursor: pointer;
}
.faq-question .faq-icon { flex-shrink: 0; transition: transform var(--dur-base) var(--ease); }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
.faq-answer > div { overflow: hidden; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer p { padding-bottom: var(--space-m); margin: 0; color: var(--color-ink-soft); }

/* --- Encadrés --- */
.callout {
  border-radius: var(--radius-m);
  padding: var(--space-m) var(--space-l);
  margin: var(--space-l) 0;
  border-left: 4px solid var(--color-copper-500);
  background: var(--color-cream-200);
}
.callout h4 { margin-bottom: var(--space-2xs); font-size: 1.05rem; }
.callout p:last-child { margin-bottom: 0; }
.callout--info { border-color: var(--color-info-border); background: var(--color-info-bg); }
.callout--warn { border-color: var(--color-warn-border); background: var(--color-warn-bg); }

/* --- Newsletter --- */
.newsletter {
  background: var(--color-coffee-900);
  color: var(--color-cream-050);
  border-radius: var(--radius-l);
  padding: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
  flex-wrap: wrap;
}
.newsletter h2, .newsletter h3 { color: var(--color-cream-050); margin-bottom: var(--space-2xs); }
.newsletter p { color: var(--color-cream-200); margin: 0; max-width: 42ch; }
.newsletter-form { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.newsletter-form input[type="email"] {
  padding: 0.85em 1.2em;
  border-radius: var(--radius-pill);
  border: none;
  min-width: 260px;
  font-family: inherit;
  font-size: 0.95rem;
}

/* --- Vidéo --- */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-l); }
@media (max-width: 860px) { .video-grid { grid-template-columns: 1fr; } }
.video-card { border-radius: var(--radius-m); overflow: hidden; background: var(--color-white); border: 1px solid var(--color-line); }
.video-thumb-btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--color-coffee-900);
}
.video-thumb-btn img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.video-thumb-btn .play-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.video-thumb-btn .play-icon span {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(251, 247, 240, 0.92);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-base) var(--ease);
}
.video-thumb-btn:hover .play-icon span { transform: scale(1.08); }
.video-thumb-btn .play-icon svg { width: 22px; height: 22px; fill: var(--color-coffee-900); margin-left: 3px; }
.video-card iframe { width: 100%; aspect-ratio: 16/9; border: none; display: block; }
.video-card-title { padding: var(--space-s); font-size: 0.95rem; font-weight: 600; color: var(--color-coffee-900); }

/* --- Auteur --- */
.author-box {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  padding: var(--space-m);
  background: var(--color-cream-200);
  border-radius: var(--radius-m);
  margin: var(--space-l) 0;
}
.author-box img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.author-box .name { font-weight: 700; color: var(--color-coffee-900); }
.author-box .role { font-size: var(--fs-small); color: var(--color-coffee-500); }

/* --- Pills / badges --- */
.pill { display: inline-block; padding: 0.3em 0.8em; border-radius: var(--radius-pill); font-size: var(--fs-micro); font-weight: 700; background: var(--color-sage-200); color: var(--color-coffee-900); }

/* --- Figures éditoriales --- */
.content-figure { margin: var(--space-l) 0; }
.content-figure img { display: block; box-shadow: var(--shadow-m); }
.content-figure--narrow { max-width: 420px; margin-left: auto; margin-right: auto; }
.content-figure figcaption {
  margin-top: var(--space-2xs);
  font-size: var(--fs-small);
  color: var(--color-coffee-500);
  text-align: center;
}

/* --- Placeholder visuel élégant --- */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--color-cream-200), var(--color-sage-200));
  color: var(--color-coffee-700);
}
.ph svg { width: 40%; height: 40%; opacity: 0.55; }

/* --- Utilitaires --- */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: var(--space-s); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }