/* =============================================================================
   components.css — Composants réutilisables legeek.tech
   Dépend de base.css (variables CSS). Ne pas importer base.css ici.
   ============================================================================= */


/* =============================================================================
   1. CARD ARTICLE (.card)
   ============================================================================= */

.card {
  background:     var(--bg-surface);
  border:         1px solid var(--border);
  border-radius:  var(--radius-lg);
  overflow:       hidden;
  box-shadow:     0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.07);
  transition:     border-color var(--transition-normal),
                  transform var(--transition-normal),
                  box-shadow var(--transition-normal);
}

.card:hover {
  border-color: var(--border-hover);
  transform:    translateY(-2px);
  box-shadow:   0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* En light mode, ombre plus douce */
[data-theme="light"] .card {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Image ratio 16:9 avec overflow masqué */
.card-image {
  position:      relative;
  width:         100%;
  aspect-ratio:  16 / 9;
  overflow:      hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card-image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.card:hover .card-image img {
  transform: scale(1.03);
}

/* Corps de la card */
.card-body {
  padding: var(--sp-4);
}

/* Badge rubrique en haut du body */
.card-badge {
  margin-bottom: var(--sp-2);
}

/* Titre */
.card-title {
  font-family:   'Space Grotesk', sans-serif;
  font-weight:   600;
  font-size:     1.1rem;
  color:         var(--text-primary);
  margin:        0 0 var(--sp-2) 0;
  line-height:   1.3;
}

/* Extrait avec clamp à 3 lignes */
.card-excerpt {
  font-family:       Inter, sans-serif;
  font-weight:       400;
  font-size:         0.9rem;
  color:             var(--text-secondary);
  line-height:       1.6;
  display:           -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:          hidden;
  margin:            0 0 var(--sp-3) 0;
}

/* Méta (date, lecture, auteur…) */
.card-meta {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  font-size:   0.8rem;
  color:       var(--text-muted);
}

.card-meta svg {
  width:  14px;
  height: 14px;
  flex-shrink: 0;
}

/* --- Variante featured : grid 2 colonnes, titre plus grand --- */
.card-featured {
  display:               grid;
  grid-template-columns: 1fr 1fr;
}

.card-featured .card-image {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  aspect-ratio:  auto;
  height:        100%;
}

.card-featured .card-body {
  padding: var(--sp-5);
}

.card-featured .card-title {
  font-size: 1.5rem;
}

.card-featured .card-excerpt {
  -webkit-line-clamp: 5;
}

/* Responsive featured */
@media (max-width: 768px) {
  .card-featured {
    grid-template-columns: 1fr;
  }

  .card-featured .card-image {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    aspect-ratio:  16 / 9;
    height:        auto;
  }
}


/* =============================================================================
   2. CARD HORIZONTALE (.card-horizontal)
   Pour les articles "Sous le Capot"
   ============================================================================= */

.card-horizontal {
  display:        flex;
  flex-direction: row;
  background:     var(--bg-surface);
  border:         1px solid var(--border);
  border-radius:  var(--radius-lg);
  overflow:       hidden;
  transition:     border-color var(--transition-normal),
                  transform var(--transition-normal);
}

.card-horizontal:hover {
  border-color: var(--border-hover);
  transform:    translateY(-2px);
}

.card-horizontal .card-image {
  flex-shrink:   0;
  width:         300px;
  aspect-ratio:  auto;
  height:        100%;
  border-radius: 0;
}

.card-horizontal .card-body {
  flex:    1;
  padding: var(--sp-5);
  min-width: 0; /* évite le dépassement flex */
}

/* Passage en vertical sous 600px */
@media (max-width: 600px) {
  .card-horizontal {
    flex-direction: column;
  }

  .card-horizontal .card-image {
    width:         100%;
    aspect-ratio:  16 / 9;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}


/* =============================================================================
   3. BADGE RUBRIQUE (.badge)
   ============================================================================= */

.badge {
  display:        inline-flex;
  align-items:    center;
  padding:        4px 12px;
  border-radius:  var(--radius-full);
  font-size:      0.75rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height:    1;
  white-space:    nowrap;
}

/* Péplite — orange */
.badge-pepite {
  background: var(--accent-subtle);
  color:      var(--accent);
}

/* Décryptage — violet */
.badge-decryptage {
  background: rgba(193, 128, 255, 0.12);
  color:      var(--secondary);
}

/* Tuto — vert */
.badge-tuto {
  background: #0d3320;
  color:      #4ade80;
}

/* Hors Radar — bleu */
.badge-hors-radar {
  background: #0c2d48;
  color:      #60a5fa;
}

/* Position — rouge */
.badge-position {
  background: #3b1010;
  color:      #f87171;
}

/* Coup de Gueule — rouge avec bordure */
.badge-coup-de-gueule {
  background: #3b1010;
  color:      #f87171;
  border:     1px solid #f87171;
}

/* Nouveau — accent plein, police mono */
.badge-nouveau {
  background:  var(--accent);
  color:       #ffffff;
  font-family: 'JetBrains Mono', monospace;
}


/* =============================================================================
   4. BOUTONS (.btn)
   ============================================================================= */

.btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           var(--sp-2);
  cursor:        pointer;
  font-family:   Inter, sans-serif;
  font-weight:   600;
  font-size:     0.95rem;
  border:        none;
  text-decoration: none;
  transition:    background var(--transition-fast),
                 color var(--transition-fast),
                 border-color var(--transition-fast);
  white-space:   nowrap;
}

/* Primaire */
.btn-primary {
  background:    var(--accent);
  color:         #ffffff;
  padding:       12px 24px;
  border-radius: var(--radius-md);
}

.btn-primary:hover {
  background: var(--accent-hover);
}

/* Secondaire */
.btn-secondary {
  background:    transparent;
  color:         var(--accent);
  padding:       11px 23px; /* -1px pour compenser la border */
  border-radius: var(--radius-md);
  border:        1px solid var(--accent);
}

.btn-secondary:hover {
  background: var(--accent-subtle);
}

/* Ghost */
.btn-ghost {
  background:    transparent;
  color:         var(--accent);
  padding:       12px 24px;
  border-radius: var(--radius-md);
}

.btn-ghost:hover {
  text-decoration: underline;
}


/* =============================================================================
   5. BLOC DE CODE (.code-block)
   ============================================================================= */

.code-block {
  background:    var(--bg-elevated);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  overflow:      hidden;
  margin:        var(--sp-4) 0;
}

/* En-tête : langue + bouton copier */
.code-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  background:      var(--bg-surface);
  padding:         8px 16px;
  border-bottom:   1px solid var(--border);
  font-size:       0.8rem;
}

.code-lang {
  color:       var(--accent);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.code-copy {
  background:    transparent;
  border:        none;
  color:         var(--text-muted);
  font-size:     0.8rem;
  font-family:   Inter, sans-serif;
  cursor:        pointer;
  padding:       2px 8px;
  border-radius: var(--radius-sm);
  transition:    color var(--transition-fast);
}

.code-copy:hover {
  color: var(--accent);
}

/* Contenu */
.code-block pre {
  padding:     var(--sp-4);
  overflow-x:  auto;
  font-family: 'JetBrains Mono', monospace;
  font-size:   0.9rem;
  line-height: 1.6;
  margin:      0;
  color:       var(--text-primary);
}

.code-block pre code {
  font-family: inherit;
  font-size:   inherit;
  background:  transparent;
  padding:     0;
}

/* Numérotation de lignes optionnelle */
.code-block.numbered pre {
  counter-reset: line;
  padding-left:  var(--sp-8);
  position:      relative;
}

.code-block.numbered pre .line {
  display: block;
}

.code-block.numbered pre .line::before {
  counter-increment: line;
  content:           counter(line);
  display:           inline-block;
  width:             2.5em;
  margin-left:       calc(-1 * var(--sp-8));
  padding-right:     var(--sp-3);
  color:             var(--text-muted);
  text-align:        right;
  user-select:       none;
}


/* =============================================================================
   6. POINT CLÉ (.key-point)
   ============================================================================= */

.key-point {
  background:    var(--bg-surface);
  border-left:   3px solid var(--accent);
  padding:       var(--sp-5);
  border-radius: var(--radius-md);
  margin:        var(--sp-4) 0;
}

/* Label overline */
.kp-label {
  display:        block;
  font-size:      0.75rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--accent);
  margin-bottom:  var(--sp-2);
}


/* =============================================================================
   7. BLOC STATS (.stats-block)
   ============================================================================= */

.stats-block {
  background:    var(--bg-surface);
  padding:       var(--sp-5);
  border-radius: var(--radius-md);
  border:        1px solid var(--border);
  margin:        var(--sp-4) 0;
}

.stats-block ul {
  list-style: none;
  margin:     0;
  padding:    0;
}

.stats-block li {
  padding-left: var(--sp-4);
  position:     relative;
  color:        var(--text-secondary);
  font-size:    0.95rem;
  line-height:  1.5;
}

/* Bullet custom accent */
.stats-block li::before {
  content:    "▸";
  position:   absolute;
  left:       0;
  color:      var(--accent);
  font-size:  0.85em;
  top:        1px;
}

.stats-block li + li {
  margin-top: 12px;
}


/* =============================================================================
   8. BOÎTE SOURCES (.source-box)
   ============================================================================= */

.source-box {
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  padding:       var(--sp-4);
  border-radius: var(--radius-md);
  margin:        var(--sp-6) 0 var(--sp-2);
  font-size:     0.85rem;
}

.source-box strong {
  display:       block;
  color:         var(--text-muted);
  font-size:     0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-2);
}

.source-box a {
  color:           var(--secondary);
  text-decoration: none;
  display:         block;
  margin-top:      var(--sp-1);
  line-height:     1.5;
  transition:      text-decoration var(--transition-fast);
}

.source-box a:hover {
  text-decoration: underline;
}


/* =============================================================================
   9. BLOCKQUOTE
   ============================================================================= */

blockquote {
  border-left:  3px solid var(--secondary);
  padding-left: var(--sp-5);
  margin:       var(--sp-6) 0;
  font-style:   italic;
  color:        var(--text-secondary);
}

blockquote p {
  margin: 0;
}

/* Attribution / cite */
blockquote cite,
blockquote .attribution {
  display:     block;
  margin-top:  var(--sp-2);
  font-style:  normal;
  font-size:   0.85rem;
  color:       var(--text-muted);
}

blockquote cite::before {
  content: "— ";
}


/* =============================================================================
   10. TAG (.tag)
   ============================================================================= */

.tag {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 10px;
  border-radius: var(--radius-full);
  background:    var(--bg-elevated);
  color:         var(--text-secondary);
  font-size:     0.8rem;
  border:        1px solid var(--border);
  text-decoration: none;
  transition:    border-color var(--transition-fast),
                 color var(--transition-fast);
}

.tag:hover {
  border-color: var(--border-hover);
  color:        var(--text-primary);
}

/* Groupe de tags */
.tag-list {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--sp-2);
}


/* =============================================================================
   11. BARRE DE LECTURE (.reading-progress)
   Largeur pilotée par JS : style.width = "42%"
   ============================================================================= */

.reading-progress {
  position:   fixed;
  top:        0;
  left:       0;
  height:     3px;
  background: var(--accent);
  z-index:    1000;
  width:      0%;
  transition: width var(--transition-fast);
}


/* =============================================================================
   12. TABLE DES MATIÈRES STICKY (.toc)
   ============================================================================= */

.toc {
  position: sticky;
  top:      100px;
}

.toc-title {
  font-family:    'Space Grotesk', sans-serif;
  font-size:      0.75rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--text-muted);
  margin:         0 0 var(--sp-3) 0;
}

.toc ol,
.toc ul {
  list-style: none;
  margin:     0;
  padding:    0;
}

.toc-item a {
  display:         block;
  padding:         4px 0 4px var(--sp-3);
  color:           var(--text-muted);
  font-size:       0.85rem;
  line-height:     2;
  text-decoration: none;
  border-left:     2px solid transparent;
  transition:      color var(--transition-fast),
                   border-color var(--transition-fast);
}

.toc-item a:hover {
  color: var(--text-secondary);
}

/* Élément actif mis en avant */
.toc-item.active a {
  color:        var(--accent);
  border-color: var(--accent);
  font-weight:  500;
}


/* =============================================================================
   13. INSCRIPTION NEWSLETTER (.newsletter)
   ============================================================================= */

.newsletter {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--sp-2);
  align-items: stretch;
}

.newsletter-input {
  flex:          1;
  min-width:     200px;
  background:    var(--bg-elevated);
  border:        1px solid var(--border);
  padding:       12px 16px;
  border-radius: var(--radius-md);
  color:         var(--text-primary);
  font-family:   Inter, sans-serif;
  font-size:     0.95rem;
  transition:    border-color var(--transition-fast);
  outline:       none;
}

.newsletter-input::placeholder {
  color: var(--text-muted);
}

.newsletter-input:focus {
  border-color: var(--accent);
}

.newsletter .btn-primary {
  flex-shrink: 0;
}


/* =============================================================================
   14. PROSE — Contenu éditorial (.prose)
   ============================================================================= */

.prose {
  max-width:   720px;
  margin:      0 auto;
  color:       var(--text-secondary);
  font-family: Inter, sans-serif;
  font-size:   1rem;
  line-height: 1.75;
}

.prose p {
  margin-bottom: 1.5em;
}

.prose h2 {
  font-family:   'Space Grotesk', sans-serif;
  font-weight:   700;
  color:         var(--text-primary);
  font-size:     1.6rem;
  margin-top:    2.5em;
  margin-bottom: 0.75em;
  line-height:   1.25;
}

.prose h3 {
  font-family:   'Space Grotesk', sans-serif;
  font-weight:   600;
  color:         var(--text-primary);
  font-size:     1.25rem;
  margin-top:    2em;
  margin-bottom: 0.5em;
  line-height:   1.3;
}

.prose a {
  color:           var(--accent);
  text-decoration: none;
  transition:      text-decoration var(--transition-fast);
}

.prose a:hover {
  text-decoration: underline;
}

.prose ul,
.prose ol {
  padding-left:  1.5em;
  margin-bottom: 1.5em;
}

.prose li + li {
  margin-top: 0.5em;
}

.prose img {
  border-radius: var(--radius-md);
  margin:        2em 0;
  max-width:     100%;
  height:        auto;
}

/* Code inline */
.prose code {
  background:  var(--bg-elevated);
  padding:     2px 6px;
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size:   0.9em;
  color:       var(--text-primary);
}

/* Séparateur */
.prose hr {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     3em 0;
}

/* Strong et em dans la prose */
.prose strong {
  color:       var(--text-primary);
  font-weight: 600;
}

.prose em {
  color: var(--text-secondary);
}