/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  --ml-bg:        #faf9f7;
  --ml-surface:   #ffffff;
  --ml-text:      #1a1a1a;
  --ml-muted:     #6b6b6b;
  --ml-accent:    #b45309;
  --ml-accent-alt:#d97706;
  --ml-danger:    #b3261e;
  --ml-border:    #e5e2dc;
  --ml-radius:    8px;
  --ml-shadow:    0 2px 12px rgba(0, 0, 0, .08);
  --ml-transition: 0.2s ease;
}

/* ============================================================
   2. THÈME ALTERNATIF
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --ml-bg:      #16140f;
    --ml-surface: #221f18;
    --ml-text:    #f2ede1;
    --ml-muted:   #a89f8c;
    --ml-border:  #33301f;
  }
}
[data-theme="dark"] {
  --ml-bg:      #16140f;
  --ml-surface: #221f18;
  --ml-text:    #f2ede1;
  --ml-muted:   #a89f8c;
  --ml-border:  #33301f;
}
[data-theme="light"] {
  --ml-bg:      #faf9f7;
  --ml-surface: #ffffff;
  --ml-text:    #1a1a1a;
  --ml-muted:   #6b6b6b;
  --ml-border:  #e5e2dc;
}

/* ============================================================
   3. LAYOUT APP PRINCIPAL
   ============================================================ */
#ml-hero, #ml-livres, #ml-closing { color: var(--ml-text); }

/* ============================================================
   4. ZONE A — HERO
   ============================================================ */
.ml-hero {
  text-align: center;
  padding: 2.5rem 0 2rem;
  max-width: 640px;
  margin: 0 auto;
  animation: fadeUp 0.5s ease-out backwards;
}

.ml-hero__author { margin-bottom: 1rem; }

.ml-hero__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--ml-shadow);
}

.ml-hero__eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ml-accent);
  margin-bottom: 0.5rem;
}

.ml-hero__title {
  margin-bottom: 1rem;
}

.ml-hero__subtitle {
  color: var(--ml-muted);
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}

.ml-hero__badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.ml-hero__badges li {
  border: 1px solid var(--ml-border);
  border-radius: 100px;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  color: var(--ml-muted);
}

/* ============================================================
   5. ZONE B — GRILLE DES LIVRES
   ============================================================ */
.ml-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.75rem;
  padding: 1rem 0 2rem;
}

.ml-card {
  background: var(--ml-surface);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--ml-transition), transform var(--ml-transition);
  animation: fadeUp 0.5s ease-out backwards;
}

.ml-card:hover {
  box-shadow: var(--ml-shadow);
  transform: translateY(-2px);
}

.ml-card__cover-link { display: block; }

.ml-card__cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
}

.ml-card__body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ml-card__title {
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

.ml-card__subtitle {
  font-size: 0.88rem;
  color: var(--ml-muted);
  font-style: italic;
  margin-bottom: 0.75rem;
}

.ml-card__hook {
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  flex: 1;
}

.ml-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ml-card__price {
  font-weight: 600;
  color: var(--ml-text);
}

.ml-card__ctas {
  display: flex;
  gap: 0.5rem;
}

/* ============================================================
   6. COMPOSANTS GÉNÉRIQUES — BOUTONS
   ============================================================ */
.ml-btn {
  display: inline-block;
  border-radius: var(--ml-radius);
  padding: 0.6rem 1.2rem;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background var(--ml-transition), color var(--ml-transition), transform var(--ml-transition);
  cursor: pointer;
}

.ml-btn--primary {
  background: var(--ml-accent);
  color: #fff;
}
.ml-btn--primary:hover { background: var(--ml-accent-alt); }

.ml-btn--secondary {
  background: none;
  border: 1px solid var(--ml-border);
  color: var(--ml-text);
}
.ml-btn--secondary:hover { border-color: var(--ml-accent); color: var(--ml-accent); }

.ml-hero .ml-btn--primary { padding: 0.75rem 2rem; font-size: 0.95rem; }

.ml-badge-soon {
  display: inline-block;
  border-radius: var(--ml-radius);
  padding: 0.6rem 1.2rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ml-muted);
  border: 1px dashed var(--ml-border);
}

/* ============================================================
   7. ÉTATS
   ============================================================ */
.ml-btn:active { transform: scale(0.97); }

/* ============================================================
   8. ZONE C — CLOSING
   ============================================================ */
.ml-closing {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding-bottom: 2.5rem;
}

.ml-closing h2 { margin-bottom: 0.75rem; }

.ml-closing p { color: var(--ml-muted); }

/* ============================================================
   9. RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  .ml-hero { padding: 1.5rem 0 1.25rem; }
  .ml-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .ml-card__footer { flex-direction: column; align-items: flex-start; }
  .ml-card__ctas { width: 100%; }
  .ml-btn { flex: 1; }
}