/**
 * Main Stylesheet — Maison Manival
 * ═══════════════════════════════════════════════════════════════════════════
 * Site de boulangerie artisanale premium
 * Palette personnalisée "Boulangerie" + Typographie T6 (Elegant)
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* Base */
@import 'base/variables.css';
@import 'base/reset.css';

/* Components */
@import 'components/header.css';
@import 'components/hero.css';
@import 'components/sections.css';
@import 'components/cards.css';
@import 'components/grid.css';
@import 'components/footer.css';

/* ═══════════════════════════════════════════════════════════════════════════
 * ARTICLE SINGLE PAGE
 * ═══════════════════════════════════════════════════════════════════════════ */

.article {
  padding-top: 100px;
}

.article__header {
  max-width: var(--container-md);
  margin: 0 auto var(--space-10);
  padding: 0 var(--space-6);
  text-align: center;
}

.article__category {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-primary);
  background-color: rgba(139, 105, 20, 0.1);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.article__category:hover {
  background-color: rgba(139, 105, 20, 0.2);
}

.article__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.article__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.article__meta-icon {
  width: 16px;
  height: 16px;
}

/* Featured image */
.article__image {
  max-width: var(--container-lg);
  margin: 0 auto var(--space-10);
  padding: 0 var(--space-6);
}

.article__image img {
  width: 100%;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}

/* Content */
.article__content {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.article__content h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-top: var(--space-12);
  margin-bottom: var(--space-6);
}

.article__content h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.article__content p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.article__content ul,
.article__content ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-6);
}

.article__content ul {
  list-style-type: disc;
}

.article__content ol {
  list-style-type: decimal;
}

.article__content li {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.article__content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.article__content a:hover {
  color: var(--color-primary-dark);
}

.article__content blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-6) var(--space-8);
  background-color: var(--color-background-alt);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.article__content blockquote p {
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-text);
  margin-bottom: 0;
}

.article__content img {
  border-radius: var(--radius-xl);
  margin: var(--space-8) 0;
}

.article__content table {
  width: 100%;
  margin: var(--space-8) 0;
  border-collapse: collapse;
}

.article__content th,
.article__content td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.article__content th {
  font-weight: var(--font-semibold);
  color: var(--color-text);
  background-color: var(--color-background-alt);
}

.article__content td {
  color: var(--color-text-secondary);
}

/* Author box */
.article__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-16);
  padding: var(--space-8);
  background-color: var(--color-background-alt);
  border-radius: var(--radius-xl);
  text-align: center;
}

@media (min-width: 640px) {
  .article__author {
    flex-direction: row;
    text-align: left;
  }
}

.article__author-avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-inverse);
}

.article__author-info {
  flex: 1;
}

.article__author-name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.article__author-bio {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* Related articles */
.article__related {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LIST PAGE (Categories)
 * ═══════════════════════════════════════════════════════════════════════════ */

.list-page {
  padding-top: 100px;
  padding-bottom: var(--space-16);
}

.list-page__header {
  text-align: center;
  margin-bottom: var(--space-12);
  padding: var(--space-16) var(--space-6);
  background-color: var(--color-background-alt);
}

.list-page__title {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.list-page__description {
  max-width: 600px;
  margin: 0 auto;
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.list-page__count {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PAGES LÉGALES
 * ═══════════════════════════════════════════════════════════════════════════ */

.legal-page {
  padding: 140px var(--space-6) var(--space-16);
}

.legal-page__container {
  max-width: var(--content-width);
  margin: 0 auto;
}

.legal-page__title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-8);
  text-align: center;
}

.legal-page__content h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.legal-page__content p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ANIMATIONS
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Fade in up */
.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger delay utility classes */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* ═══════════════════════════════════════════════════════════════════════════
 * RESPONSIVE UTILITIES
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .hide-tablet { display: none !important; }
}

@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PRINT STYLES
 * ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  .site-header,
  .site-footer,
  .footer__back-to-top {
    display: none !important;
  }
  
  .article {
    padding-top: 0;
  }
  
  body {
    background: white;
    color: black;
  }
}