/* Variables CSS pour la palette végétale */
:root {
  --color-sage: #6cae75;
  --color-olive: #4c8159;
  --color-forest: #2d3f34;
  --color-mint: #c2e5c1;
  --color-moss: #5a7c65;
  --color-leaf: #8bc49c;
  --color-bark: #3a4a3e;
  --color-soil: #1a2e1f;

  /* Couleurs de base */
  --text-light: #e2e8f0;
  /* slate-200 */
  --text-medium: #94a3b8;
  /* slate-400 */
  --text-dark: #64748b;
  /* slate-500 */
  --border-color: #334155;
  /* slate-700 */
  --bg-darker: #0f172a;
  /* slate-950 */
  --bg-dark: #1e293b;
  /* slate-900 */
  --bg-medium: #334155;
  /* slate-800 */

  /* Couleurs spécifiques pour les statuts */
  --status-orange-text: #fdbb74;
  /* orange-200 */
  --status-orange-border: #c2410c;
  /* orange-600 */
  --status-orange-bg: rgba(124, 45, 18, 0.4);
  /* orange-900/40 */

  --status-yellow-text: #fde047;
  /* yellow-200 */
  --status-yellow-border: #a16207;
  /* yellow-600 */
  --status-yellow-bg: rgba(113, 63, 18, 0.4);
  /* yellow-900/40 */

  --status-slate-text: #94a3b8;
  /* slate-400 */
  --status-slate-border: #334155;
  /* slate-700 */
  --status-slate-bg: rgba(51, 65, 85, 0.5);
  /* slate-800/50 */
}

/* Base styles */
body {
  margin: 0;
  font-family: "Menlo", "Monaco", "monospace", sans-serif;
  background-color: var(--color-soil);
  color: var(--text-light);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: 1280px;
  /* Equivalent to container mx-auto */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  /* px-6 */
  padding-right: 1.5rem;
  /* px-6 */
}

/* Header */
.header {
  border-bottom: 1px solid var(--color-bark);
  background-color: var(--color-forest);
  padding-top: 1rem;
  /* py-4 */
  padding-bottom: 1rem;
  /* py-4 */
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* gap-4 */
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* gap-3 */
}

.logo-box {
  width: 2rem;
  /* w-8 */
  height: 2rem;
  /* h-8 */
  background-color: var(--bg-medium);
  border: 1px solid var(--border-color);
  border-radius: 0.25rem;
  /* rounded */
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-text {
  color: var(--color-sage);
  font-weight: bold;
  font-size: 0.875rem;
  /* text-sm */
}

.icon-sage {
  color: var(--color-sage);
}

.header-title {
  font-size: 1.125rem;
  /* text-lg */
  font-weight: bold;
  color: var(--color-mint);
  /* text-mint */
}

.header-subtitle {
  font-size: 0.75rem;
  /* text-xs */
  color: var(--text-medium);
}

@media (max-width: 768px) {
  .header-subtitle {
    display: none;
  }

  .header-title-decor {
    display: none;
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  /* gap-6 */
}

.last-update-text {
  font-size: 0.75rem;
  /* text-xs */
  color: var(--text-dark);
}

.nav {
  display: flex;
  gap: 1.5rem;
  /* gap-6 */
  font-size: 0.875rem;
  /* text-sm */
}

@media (max-width: 768px) {
  .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
}

.nav-link {
  color: var(--text-light);
  padding: 0.25rem 0.5rem;
  /* px-2 py-1 */
  border-radius: 0.25rem;
  /* rounded */
  transition: all 200ms ease-in-out;
  text-decoration: none;
}

.nav-link:hover {
  color: var(--color-mint);
  background-color: rgba(108, 174, 117, 0.3);
  /* bg-sage/30 */
}

.nav-link:nth-child(2):hover {
  /* writings/ */
  background-color: rgba(76, 129, 89, 0.3);
  /* bg-olive/30 */
}

.nav-link:nth-child(3):hover {
  /* about.md */
  background-color: rgba(90, 124, 101, 0.3);
  /* bg-moss/30 */
}

/* Back link styles */
.back-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-medium);
  text-decoration: none;
  transition: all 200ms ease-in-out;
  font-size: 0.875rem;
}

.back-link:hover {
  color: var(--text-light);
}

.back-link svg {
  transition: transform 200ms ease-in-out;
}

.back-link:hover svg {
  transform: translateX(-0.25rem);
}

.breadcrumb {
  font-size: 0.875rem;
  color: var(--text-medium);
}

/* Main content */
.main-content {
  padding-top: 2rem;
  /* py-8 */
  padding-bottom: 2rem;
  /* py-8 */
  flex-grow: 1;
}

/* Intro section */
.intro-section {
  margin-bottom: 2rem;
  /* mb-8 */
}

.intro-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* gap-2 */
  margin-bottom: 0.5rem;
  /* mb-2 */
}

.intro-prompt {
  color: var(--color-sage);
}

.intro-text {
  color: var(--text-light);
}

.intro-categories {
  font-size: 0.75rem;
  /* text-xs */
  color: var(--text-dark);
}

/* Grid layout for status and highlights */
.grid-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  /* gap-8 */
  margin-bottom: 2rem;
  /* mb-8 */
}

@media (min-width: 1024px) {

  /* lg */
  .grid-layout {
    grid-template-columns: 2fr 1fr;
  }

  .status-bar-container {
    grid-column: span 2 / span 2;
    /* lg:col-span-2 */
  }
}

/* Card styles */
.card {
  background-color: var(--color-forest);
  border: 1px solid var(--color-bark);
  border-radius: 0.5rem;
  /* rounded */
}

.card-header {
  padding-bottom: 0.75rem;
  /* pb-3 */
  padding-left: 1.5rem;
  /* px-6 */
  padding-right: 1.5rem;
  /* px-6 */
  padding-top: 1.5rem;
  /* pt-6 */
}

.card-title {
  font-size: 0.875rem;
  /* text-sm */
  font-weight: normal;
  color: var(--text-medium);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* gap-2 */
}

.card-content {
  padding: 1.5rem;
  /* p-6 */
}

/* Status card specific */
.status-card:hover {
  border-color: var(--color-moss);
  transition: border-color 200ms ease-in-out;
}

.status-title {
  justify-content: space-between;
}

.status-indicator {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  /* gap-1 */
}

.status-dot {
  width: 0.5rem;
  /* w-2 */
  height: 0.5rem;
  /* h-2 */
  background-color: var(--color-sage);
  border-radius: 9999px;
  /* rounded-full */
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.status-text {
  font-size: 0.75rem;
  /* text-xs */
  color: var(--color-sage);
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  /* gap-4 */
  font-size: 0.875rem;
  /* text-sm */
}

@media (min-width: 768px) {

  /* md */
  .status-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* gap-2 */
}

.icon-leaf {
  color: var(--color-leaf);
}

.icon-moss {
  color: var(--color-moss);
}

.icon-olive {
  color: var(--color-olive);
}

.icon-amber {
  color: #fbbf24;
}

/* amber-400 */
.icon-orange {
  color: #fb923c;
}

/* orange-400 */

.status-label {
  color: var(--text-medium);
}

.status-value {
  margin-left: 0.5rem;
  /* ml-2 */
  font-weight: bold;
}

.status-value.sage {
  color: var(--color-sage);
}

.status-value.leaf {
  color: var(--color-leaf);
}

.status-value.mint {
  color: var(--color-mint);
}

.status-value.moss {
  color: var(--color-moss);
}

.status-value.yellow {
  color: var(--status-yellow-text);
}

.status-value.orange {
  color: var(--status-orange-text);
}

.status-value.amber-300 {
  color: #fcd34d;
}

/* amber-300 */

/* Highlights card specific */
.highlight-card {
  background-color: var(--color-bark);
  /* bg-bark */
  border-color: var(--color-moss);
  /* border-moss */
}

.highlight-list {
  padding-top: 0;
  /* p-0 */
  padding-bottom: 1.5rem;
  /* pb-6 */
  padding-left: 1.5rem;
  /* px-6 */
  padding-right: 1.5rem;
  /* px-6 */
}

.highlight-item {
  display: block;
  padding: 0.5rem;
  /* p-2 */
  border-radius: 0.25rem;
  /* rounded */
  transition: background-color 200ms ease-in-out;
  text-decoration: none;
  color: inherit;
}

.highlight-item:hover {
  background-color: rgba(51, 65, 85, 0.5);
  /* hover:bg-slate-800/50 */
}

.highlight-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* gap-2 */
  margin-bottom: 0.25rem;
  /* mb-1 */
}

.highlight-category {
  font-size: 1.125rem;
  /* text-lg */
}

.highlight-name {
  font-size: 0.875rem;
  /* text-sm */
  font-weight: bold;
  color: var(--text-light);
}

.highlight-description {
  font-size: 0.75rem;
  /* text-xs */
  color: var(--text-medium);
  line-height: 1.5;
  /* leading-relaxed */
}

/* Recent commits section */
.section-spacing {
  margin-bottom: 3rem;
  /* mb-12 */
}

.recent-commits-card .card-content {
  padding-top: 0;
  /* p-0 */
  padding-bottom: 1.5rem;
  /* pb-6 */
  padding-left: 1.5rem;
  /* px-6 */
  padding-right: 1.5rem;
  /* px-6 */
}

.commit-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* gap-3 */
  font-size: 0.875rem;
  /* text-sm */
  font-family: "Menlo", "Monaco", "monospace", sans-serif;
  margin-bottom: 0.5rem;
  /* space-y-2 */
}

.commit-item:last-child {
  margin-bottom: 0;
}

.commit-date {
  color: var(--text-dark);
  width: 5rem;
  /* w-20 */
}

.commit-separator {
  color: #475569;
  /* slate-600 */
}

.commit-icon {
  font-size: 0.75rem;
  /* text-xs */
}

.commit-action {
  color: var(--text-medium);
}

.commit-target {
  color: var(--text-light);
}

/* Section headers */
.section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* gap-2 */
  margin-bottom: 1.5rem;
  /* mb-6 */
}

.section-title {
  font-size: 1.25rem;
  /* text-xl */
  font-weight: bold;
  color: var(--text-light);
}

.section-title.text-leaf {
  color: var(--color-leaf);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  /* rounded-md */
  border: 1px solid transparent;
  padding: 0.25rem 0.5rem;
  /* px-2.5 py-0.5 */
  font-size: 0.75rem;
  /* text-xs */
  font-weight: 600;
  /* font-semibold */
  transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out;
  gap: 0.25rem;
  /* gap-1 */
}

.badge-outline {
  border-color: var(--border-color);
  color: var(--text-medium);
  background-color: transparent;
}

.badge-secondary {
  background-color: var(--bg-medium);
  color: var(--text-light);
  border: 0;
}

.badge-secondary:hover {
  background-color: #334155;
  /* slate-700 */
}

/* Specific badge colors */
.badge.text-mint {
  color: var(--color-mint);
}

.badge.border-sage {
  border-color: var(--color-sage);
}

.badge.bg-sage\/30 {
  background-color: rgba(108, 174, 117, 0.3);
}

.badge.border-olive {
  border-color: var(--color-olive);
}

.badge.bg-olive\/30 {
  background-color: rgba(76, 129, 89, 0.3);
}

.badge.text-leaf {
  color: var(--color-leaf);
}

.badge.border-moss {
  border-color: var(--color-moss);
}

.badge.bg-moss\/30 {
  background-color: rgba(90, 124, 101, 0.3);
}

.badge.text-orange-200 {
  color: var(--status-orange-text);
}

.badge.border-orange-600 {
  border-color: var(--status-orange-border);
}

.badge.bg-orange-900\/40 {
  background-color: var(--status-orange-bg);
}

.badge.text-yellow-200 {
  color: var(--status-yellow-text);
}

.badge.border-yellow-600 {
  border-color: var(--status-yellow-border);
}

.badge.bg-yellow-900\/40 {
  background-color: var(--status-yellow-bg);
}

.badge.bg-moss {
  background-color: var(--color-moss);
}

.badge.text-mint {
  color: var(--color-mint);
}

.badge.bg-olive {
  background-color: var(--color-olive);
}

/* Projects grid */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  /* gap-6 */
}

@media (min-width: 768px) {

  /* md */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {

  /* lg */
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.project-card {
  background-color: var(--color-forest);
  border: 1px solid var(--color-bark);
  transition: all 200ms ease-in-out;
}

.project-card:hover {
  border-color: var(--color-moss);
  background-color: rgba(45, 63, 52, 0.8);
  /* bg-forest/80 */
}

.project-card .card-content {
  padding: 1rem;
  /* p-4 */
}

.project-image-container {
  width: 100%;
  height: 8rem;
  /* h-32 */
  background-color: var(--color-bark);
  border: 1px solid var(--color-moss);
  border-radius: 0.25rem;
  /* rounded */
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 1rem;
  /* mb-4 */
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 200ms ease-in-out;
}

.project-image:hover {
  opacity: 1;
}

.project-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  /* mb-3 */
}

.project-title-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* gap-2 */
}

.project-category {
  font-size: 1.25rem;
  /* text-xl */
}

.project-name {
  font-weight: bold;
  color: var(--text-light);
  font-size: 0.875rem;
  /* text-sm */
  text-decoration: none;
  transition: color 200ms ease-in-out;
}

.project-name:hover {
  color: var(--color-leaf);
}

.project-description {
  font-size: 0.75rem;
  /* text-xs */
  color: var(--text-medium);
  margin-bottom: 1rem;
  /* mb-4 */
  line-height: 1.5;
  /* leading-relaxed */
}

.project-meta {
  font-size: 0.75rem;
  /* text-xs */
  margin-bottom: 0.5rem;
  /* space-y-2 */
}

.project-meta-item {
  margin-bottom: 0.5rem;
  /* space-y-2 */
}

.project-meta-label {
  color: var(--text-medium);
}

.project-meta-value {
  color: var(--text-light);
  margin-left: 0.25rem;
  /* ml-1 */
  font-family: "Menlo", "Monaco", "monospace", sans-serif;
}

.project-tech-list {
  display: flex;
  gap: 0.25rem;
  /* gap-1 */
  margin-top: 0.25rem;
  /* mt-1 */
  flex-wrap: wrap;
}

.project-notes {
  margin-top: 0.25rem;
  /* mt-1 */
  line-height: 1.5;
  /* leading-relaxed */
}

/* Writings list */
.writings-list {
  margin-bottom: 0.75rem;
  /* space-y-3 */
}

.writing-card {
  background-color: var(--color-forest);
  border: 1px solid var(--color-bark);
  transition: all 200ms ease-in-out;
}

.writing-card:hover {
  border-color: var(--color-moss);
  background-color: rgba(45, 63, 52, 0.8);
  /* bg-forest/80 */
}

.writing-card .card-content {
  padding: 1rem;
  /* p-4 */
}

.writing-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0.5rem;
  /* p-2 */
  border-radius: 0.25rem;
  /* rounded */
  transition: background-color 200ms ease-in-out;
}

.writing-link:hover {
  background-color: rgba(51, 65, 85, 0.5);
  /* hover:bg-slate-800/50 */
}

.writing-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.writing-title-group {
  flex: 1;
}

.writing-title {
  font-weight: bold;
  color: var(--text-light);
  margin-bottom: 0.5rem;
  /* mb-2 */
  text-decoration: none;
  transition: color 200ms ease-in-out;
}

.writing-title:hover {
  color: var(--color-moss);
}

.writing-meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  /* gap-4 */
  font-size: 0.75rem;
  /* text-xs */
}

@media (min-width: 768px) {

  /* md */
  .writing-meta-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.writing-meta-item {
  display: flex;
  align-items: center;
}

.writing-meta-label {
  color: var(--text-medium);
}

.writing-meta-value {
  color: var(--text-light);
  margin-left: 0.5rem;
  /* ml-2 */
}

.writing-meta-value.font-mono {
  font-family: "Menlo", "Monaco", "monospace", sans-serif;
}

.writing-meta-value.font-bold {
  font-weight: bold;
}

/* About section */
.about-card .card-content {
  padding: 1.5rem;
  /* p-6 */
}

.about-content {
  font-size: 0.875rem;
  /* prose-sm */
  max-width: none;
}

.about-text {
  color: var(--text-medium);
  margin-bottom: 1rem;
  /* mb-4 */
}

.about-buttons {
  margin-top: 1.5rem;
  /* mt-6 */
  display: flex;
  gap: 1rem;
  /* gap-4 */
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  /* rounded-md */
  font-size: 0.875rem;
  /* text-sm */
  font-weight: 500;
  /* font-medium */
  height: 2.5rem;
  /* h-10 */
  padding: 0.5rem 1rem;
  /* px-4 py-2 */
  transition: all 200ms ease-in-out;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.button-primary {
  background-color: var(--color-sage);
  color: var(--color-soil);
  border-color: var(--color-sage);
}

.button-primary:hover {
  background-color: var(--color-olive);
  border-color: var(--color-olive);
}

.button-outline {
  border: 1px solid var(--border-color);
  color: var(--text-light);
  background-color: transparent;
}

.button-outline:hover {
  background-color: var(--bg-medium);
  color: white;
  border-color: #475569;
  /* slate-600 */
}

.button .icon-small {
  width: 0.75rem;
  /* h-3 w-3 */
  height: 0.75rem;
  margin-right: 0.25rem;
  /* mr-1 */
}

/* Project Detail Styles */
.project-detail-header {
  padding: 1.5rem;
  /* p-6 */
}

.project-detail-layout {
  display: flex;
  gap: 1.5rem;
  /* gap-6 */
}

.project-detail-image {
  flex-shrink: 0;
}

.project-detail-img {
  width: 12rem;
  /* w-48 */
  height: 8rem;
  /* h-32 */
  background-color: var(--color-bark);
  border: 1px solid var(--color-moss);
  border-radius: 0.25rem;
  /* rounded */
  overflow: hidden;
  object-fit: cover;
  opacity: 0.8;
}

.project-detail-info {
  flex: 1;
}

.project-detail-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
  /* mb-4 */
}

.project-detail-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* gap-3 */
}

.project-detail-category {
  font-size: 2rem;
  /* text-2xl */
}

.project-detail-title {
  font-size: 2rem;
  /* text-2xl */
  font-weight: bold;
  color: var(--text-light);
  margin-bottom: 0.5rem;
  /* mb-2 */
}

.project-detail-description {
  color: var(--text-medium);
  font-size: 1.125rem;
  /* text-lg */
}

.project-detail-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  /* gap-4 */
  font-size: 0.875rem;
  /* text-sm */
  margin-bottom: 1rem;
  /* mb-4 */
}

@media (min-width: 768px) {

  /* md */
  .project-detail-meta {
    grid-template-columns: repeat(3, 1fr);
  }
}

.project-detail-meta-item {
  display: flex;
  flex-direction: column;
}

.project-detail-meta-label {
  color: var(--text-medium);
}

.project-detail-meta-value {
  color: var(--text-medium);
  margin-top: 0.25rem;
  /* mt-1 */
  font-family: "Menlo", "Monaco", "monospace", sans-serif;
}

.project-detail-tech-list {
  display: flex;
  gap: 0.25rem;
  /* gap-1 */
  margin-top: 0.25rem;
  /* mt-1 */
  flex-wrap: wrap;
}

.project-detail-actions {
  display: flex;
  gap: 0.75rem;
  /* gap-3 */
}

/* Article Detail Styles */
.article-detail-header {
  padding-bottom: 1rem;
  /* pb-4 */
}

.article-detail-title {
  font-size: 3rem;
  /* text-3xl */
  font-weight: bold;
  color: var(--text-light);
  margin-bottom: 1rem;
  /* mb-4 */
  line-height: 1.2;
  /* leading-tight */
}

.article-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* gap-4 */
  font-size: 0.875rem;
  /* text-sm */
  color: var(--text-medium);
}

.article-detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  /* gap-4 */
}

.article-detail-meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  /* gap-1 */
}

.article-detail-meta-value {
  font-family: "Menlo", "Monaco", "monospace", sans-serif;
}

.article-detail-tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* gap-2 */
}

.article-detail-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  /* gap-2 */
}

/* README and Article Content */
.readme-title {
  color: var(--text-medium);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* gap-2 */
}

.readme-content {
  padding: 2rem;
  /* p-8 */
}

.article-content {
  padding: 2rem;
  /* p-8 */
}

/* Prose styles for README and article content */
.prose {
  max-width: none;
  color: var(--text-medium);
  line-height: 1.7;
}

.prose h1 {
  font-size: 2rem;
  /* text-2xl */
  font-weight: bold;
  color: var(--text-light);
  margin-bottom: 1.5rem;
  /* mb-6 */
  margin-top: 2rem;
  /* mt-8 */
}

.prose h1:first-child {
  margin-top: 0;
}

.prose h2 {
  font-size: 1.5rem;
  /* text-xl */
  font-weight: bold;
  color: var(--text-light);
  margin-bottom: 1rem;
  /* mb-4 */
  margin-top: 2rem;
  /* mt-8 */
}

.prose h3 {
  font-size: 1.25rem;
  /* text-lg */
  font-weight: bold;
  color: var(--text-light);
  margin-bottom: 0.75rem;
  /* mb-3 */
  margin-top: 1.5rem;
  /* mt-6 */
}

.prose h4 {
  font-size: 1rem;
  /* text-base */
  font-weight: bold;
  color: var(--text-medium);
  margin-bottom: 0.5rem;
  /* mb-2 */
  margin-top: 1rem;
  /* mt-4 */
}

.prose p {
  color: var(--text-medium);
  line-height: 1.6;
  /* leading-relaxed */
  margin-bottom: 1rem;
  /* mb-4 */
  max-width: 75ch;
}

.prose ul {
  color: var(--text-medium);
  margin-bottom: 1rem;
  /* mb-4 */
  margin-left: 1.5rem;
  /* ml-6 */
  list-style-type: disc;
}

.prose ol {
  color: var(--text-medium);
  margin-bottom: 1rem;
  /* mb-4 */
  margin-left: 1.5rem;
  /* ml-6 */
  list-style-type: decimal;
}

.prose li {
  margin-bottom: 0.25rem;
  /* mb-1 */
  line-height: 1.6;
  /* leading-relaxed */
}

.prose strong {
  color: var(--text-light);
  font-weight: bold;
}

.prose em {
  color: var(--text-light);
  font-style: italic;
}

.prose code {
  background-color: var(--color-bark);
  color: var(--color-sage);
  padding: 0.125rem 0.5rem;
  /* px-2 py-1 */
  border-radius: 0.25rem;
  /* rounded */
  font-size: 0.875rem;
  /* text-sm */
  font-family: "Menlo", "Monaco", "monospace", sans-serif;
}

.prose pre {
  background-color: var(--color-bark);
  border: 1px solid var(--border-color);
  border-radius: 0.25rem;
  /* rounded */
  padding: 1rem;
  /* p-4 */
  margin-bottom: 1rem;
  /* mb-4 */
  overflow-x: auto;
}

.prose pre code {
  background-color: transparent;
  padding: 0;
  color: var(--text-light);
}

.prose hr {
  border-color: var(--border-color);
  margin: 2rem 0;
  /* my-8 */
}

.prose blockquote {
  border-left: 4px solid var(--text-dark);
  padding-left: 1rem;
  /* pl-4 */
  font-style: italic;
  color: var(--text-medium);
}

/* Navigation footer */
.navigation-footer {
  padding: 1rem;
  /* p-4 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  /* text-sm */
}

.nav-info-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* gap-4 */
}

.nav-info-text {
  color: var(--text-dark);
}

.nav-info-badge {
  font-size: 0.75rem;
  /* text-xs */
  border-color: var(--border-color);
  color: var(--text-medium);
}

/* Footer */
.footer {
  border-top: 1px solid var(--color-bark);
  margin-top: 4rem;
  /* mt-16 */
  background-color: rgba(45, 63, 52, 0.5);
  /* bg-forest/50 */
  padding-top: 1rem;
  /* py-4 */
  padding-bottom: 1rem;
  /* py-4 */
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  /* gap-4 */
  font-size: 0.75rem;
  /* text-xs */
  color: var(--text-dark);
  text-align: center;
}

.footer-separator {
  color: #475569;
  /* slate-600 */
}

.footer-wabbi {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  /* gap-1 */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .project-detail-layout {
    flex-direction: column;
  }

  .project-detail-img {
    width: 100%;
    height: 12rem;
  }

  .article-detail-title {
    font-size: 2rem;
  }

  .article-detail-meta-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.dashboard-side-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .dashboard-side-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.prose pre {
  background-color: #1e1e1e; /* fond noir/gris foncé */
  color: #d1d5db;            /* texte clair */
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  background: none;
  padding: 0;
  color: inherit;
}

hr {
  border: none;
  border-top: 2px dashed var(--border-color);
  margin: 2rem 0;
}