/**
 * Styles pour le contenu riche côté public
 * Utilisé pour afficher les articles, pages, etc.
 */

/* Tokens typographiques globaux */
:root {
  --font-sans: 'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Lora', Georgia, serif;
  --color-title: #1a237e;
  --color-accent: #00bcd4;
  --color-body: #374151;
  --color-muted: #4b5563;
  --color-link: #0d47a1;
  --color-link-hover: #1a237e;
  --color-quote-accent: #00bcd4;
  --color-inverse: #ffffff;
  --color-inverse-soft: rgba(255, 255, 255, 0.9);
  --color-inverse-muted: rgba(255, 255, 255, 0.8);
  --type-eyebrow-mobile: 14px;
  --type-eyebrow-desktop: 14px;
  --type-eyebrow-weight: 600;
  --type-eyebrow-line-height: 1.42;
  --type-hero-title-mobile: 32px;
  --type-hero-title-desktop: 48px;
  --type-hero-title-weight: 700;
  --type-hero-title-line-height: 1.08;
  --type-section-title-mobile: 30px;
  --type-section-title-desktop: 38px;
  --type-section-title-weight: 700;
  --type-section-title-line-height: 1.14;
  --type-section-subtitle-mobile: 18px;
  --type-section-subtitle-desktop: 19px;
  --type-section-subtitle-weight: 600;
  --type-section-subtitle-line-height: 1.38;
  --type-lead-mobile: 19px;
  --type-lead-desktop: 20px;
  --type-lead-weight: 400;
  --type-lead-line-height: 1.46;
  --type-body-mobile: 16px;
  --type-body-desktop: 17px;
  --type-body-weight: 400;
  --type-body-line-height: 1.56;
  --type-small-mobile: 14px;
  --type-small-desktop: 14px;
  --type-small-weight: 400;
  --type-small-line-height: 1.42;
  --type-footer-heading-mobile: 18px;
  --type-footer-heading-desktop: 22px;
  --type-footer-heading-weight: 700;
  --type-footer-heading-line-height: 1.25;
  --type-footer-link-mobile: 15px;
  --type-footer-link-desktop: 17px;
  --type-footer-link-weight: 500;
  --type-footer-link-line-height: 1.45;
  --type-footer-meta-mobile: 14px;
  --type-footer-meta-desktop: 15px;
  --type-footer-meta-weight: 400;
  --type-footer-meta-line-height: 1.45;
  --type-subnav-mobile: 14px;
  --type-subnav-desktop: 16px;
  --type-subnav-weight: 600;
  --type-subnav-line-height: 1.35;
  --type-card-title-mobile: 21px;
  --type-card-title-desktop: 24px;
  --type-card-title-weight: 700;
  --type-card-title-line-height: 1.2;
  --type-team-name-mobile: 20px;
  --type-team-name-desktop: 22px;
  --type-team-name-weight: 700;
  --type-team-name-line-height: 1.2;
  --type-stat-value-mobile: 36px;
  --type-stat-value-desktop: 48px;
  --type-stat-value-weight: 700;
  --type-stat-value-line-height: 1;
  --type-prose-h2-mobile: 28px;
  --type-prose-h2-desktop: 32px;
  --type-prose-h2-weight: 700;
  --type-prose-h2-line-height: 1.16;
  --type-prose-h3-mobile: 22px;
  --type-prose-h3-desktop: 26px;
  --type-prose-h3-weight: 700;
  --type-prose-h3-line-height: 1.2;
  --type-prose-h4-mobile: 19px;
  --type-prose-h4-desktop: 21px;
  --type-prose-h4-weight: 600;
  --type-prose-h4-line-height: 1.24;
  --type-article-title-mobile: 36px;
  --type-article-title-desktop: 52px;
  --type-article-title-weight: 700;
  --type-article-title-line-height: 1.05;
  --type-article-lead-mobile: 20px;
  --type-article-lead-desktop: 22px;
  --type-article-lead-weight: 400;
  --type-article-lead-line-height: 1.44;
}

body {
  font-family: var(--font-sans);
  color: var(--color-body);
}

.font-sans {
  font-family: var(--font-sans);
}

.font-display {
  font-family: var(--font-display);
}

/* Hiérarchie standard */
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow-mobile);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: 0.16em;
  line-height: var(--type-eyebrow-line-height);
  text-transform: uppercase;
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--type-hero-title-mobile);
  font-weight: var(--type-hero-title-weight);
  letter-spacing: -0.02em;
  line-height: var(--type-hero-title-line-height);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--type-section-title-mobile);
  font-weight: var(--type-section-title-weight);
  letter-spacing: -0.02em;
  line-height: var(--type-section-title-line-height);
}

.section-subtitle {
  font-family: var(--font-sans);
  font-size: var(--type-section-subtitle-mobile);
  font-weight: var(--type-section-subtitle-weight);
  line-height: var(--type-section-subtitle-line-height);
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--type-lead-mobile);
  font-weight: var(--type-lead-weight);
  line-height: var(--type-lead-line-height);
}

.article-title {
  font-family: var(--font-display);
  font-size: var(--type-article-title-mobile);
  font-weight: var(--type-article-title-weight);
  letter-spacing: -0.03em;
  line-height: var(--type-article-title-line-height);
}

.article-lead {
  font-family: var(--font-sans);
  font-size: var(--type-article-lead-mobile);
  font-weight: var(--type-article-lead-weight);
  line-height: var(--type-article-lead-line-height);
}

.body {
  font-family: var(--font-sans);
  font-size: var(--type-body-mobile);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
}

.small {
  font-family: var(--font-sans);
  font-size: var(--type-small-mobile);
  font-weight: var(--type-small-weight);
  line-height: var(--type-small-line-height);
}

.footer-heading {
  font-family: var(--font-sans);
  font-size: var(--type-footer-heading-mobile);
  font-weight: var(--type-footer-heading-weight);
  line-height: var(--type-footer-heading-line-height);
}

.footer-link {
  font-family: var(--font-sans);
  font-size: var(--type-footer-link-mobile);
  font-weight: var(--type-footer-link-weight);
  line-height: var(--type-footer-link-line-height);
}

.footer-meta {
  font-family: var(--font-sans);
  font-size: var(--type-footer-meta-mobile);
  font-weight: var(--type-footer-meta-weight);
  line-height: var(--type-footer-meta-line-height);
}

.subnav-text {
  font-family: var(--font-sans);
  font-size: var(--type-subnav-mobile);
  font-weight: var(--type-subnav-weight);
  letter-spacing: -0.01em;
  line-height: var(--type-subnav-line-height);
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--type-card-title-mobile);
  font-weight: var(--type-card-title-weight);
  letter-spacing: -0.01em;
  line-height: var(--type-card-title-line-height);
}

.team-name {
  font-family: var(--font-sans);
  font-size: var(--type-team-name-mobile);
  font-weight: var(--type-team-name-weight);
  letter-spacing: -0.015em;
  line-height: var(--type-team-name-line-height);
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--type-stat-value-mobile);
  font-weight: var(--type-stat-value-weight);
  letter-spacing: -0.03em;
  line-height: var(--type-stat-value-line-height);
}

/* Rôles de couleur */
.tone-title {
  color: var(--color-title);
}

.tone-accent {
  color: var(--color-accent);
}

.tone-body {
  color: var(--color-body);
}

.tone-muted {
  color: var(--color-muted);
}

.tone-link {
  color: var(--color-link);
}

.tone-inverse {
  color: var(--color-inverse);
}

.tone-inverse-soft {
  color: var(--color-inverse-soft);
}

.tone-inverse-muted {
  color: var(--color-inverse-muted);
}

/* Compatibilité avec les vues publiques encore en classes Tailwind */
.hero-title.text-white,
.section-title.text-white,
.card-title.text-white {
  color: var(--color-inverse);
}

.lead[class*="text-white/90"] {
  color: var(--color-inverse-soft);
}

.lead[class*="text-white/80"],
.lead[class*="text-slate-400"] {
  color: var(--color-inverse-muted);
}

.section-title[class*="text-stjo-navy"],
.section-subtitle[class*="text-stjo-navy"],
.card-title[class*="text-stjo-navy"],
.small[class*="text-stjo-navy"] {
  color: var(--color-title);
}

.eyebrow[class*="text-stjo-cyan"],
.section-subtitle[class*="text-stjo-blue"],
.section-subtitle[class*="text-stjo-cyan"],
.card-title[class*="text-[#00bcd4]"],
.stat-value[class*="text-stjo-cyan"] {
  color: var(--color-accent);
}

.section-title[class*="text-gray-600"],
.section-subtitle[class*="text-gray-600"],
.section-subtitle[class*="text-gray-700"],
.lead[class*="text-gray-600"],
.lead[class*="text-gray-700"],
.card-title[class*="text-gray-700"],
.small[class*="text-gray-500"],
.small[class*="text-gray-600"] {
  color: var(--color-muted);
}

.body[class*="text-gray-600"],
.body[class*="text-gray-700"] {
  color: var(--color-body);
}

.group:hover .card-title[class*="group-hover:text-stjo-blue"],
.group:hover .card-title[class*="group-hover:text-stjo-cyan"],
.group:hover .body[class*="group-hover:text-[#00bcd4]"] {
  color: var(--color-accent);
}

.hover-accent:hover,
.group:hover .group-hover-accent {
  color: var(--color-accent);
}

.hover-title:hover,
.group:hover .group-hover-title {
  color: var(--color-title);
}

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

/* Container de contenu */
.prose {
  font-family: var(--font-sans);
  font-size: var(--type-body-mobile);
  line-height: var(--type-body-line-height);
  color: var(--color-body);
}

.prose-lg {
  font-size: var(--type-lead-mobile);
}

.article-prose {
  margin-left: auto;
  margin-right: auto;
  max-width: 70ch;
}

/* Titres */
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--type-prose-h2-mobile);
  font-weight: var(--type-prose-h2-weight);
  color: var(--color-title);
  margin-top: 1.85rem;
  margin-bottom: 0.85rem;
  line-height: var(--type-prose-h2-line-height);
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #e5e7eb;
}

.prose h3 {
  font-family: var(--font-display);
  font-size: var(--type-prose-h3-mobile);
  font-weight: var(--type-prose-h3-weight);
  color: var(--color-title);
  margin-top: 1.5rem;
  margin-bottom: 0.65rem;
  line-height: var(--type-prose-h3-line-height);
}

.prose h4 {
  font-family: var(--font-sans);
  font-size: var(--type-prose-h4-mobile);
  font-weight: var(--type-prose-h4-weight);
  color: var(--color-title);
  margin-top: 1.2rem;
  margin-bottom: 0.45rem;
  line-height: var(--type-prose-h4-line-height);
}

/* Paragraphes */
.prose p {
  margin-bottom: 1rem;
}

.prose p:last-child {
  margin-bottom: 0;
}

/* Premier paragraphe en lead */
.prose > p:first-child {
  font-size: var(--type-lead-mobile);
  color: var(--color-muted);
  line-height: var(--type-lead-line-height);
}

.article-prose.prose > p:first-child {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

/* Listes */
.prose ul,
.prose ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

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

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

.prose li {
  margin-bottom: 0.35rem;
}

.prose li::marker {
  color: var(--color-accent);
}

/* Liens */
.prose a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 2px;
  transition: all 0.2s ease;
}

.prose a:hover {
  color: var(--color-link-hover);
  text-decoration-color: var(--color-link-hover);
}

/* Images */
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin: 1.25rem 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.prose img.align-left {
  float: left;
  margin: 0.5rem 1.5rem 1rem 0;
  max-width: 50%;
}

.prose img.align-right {
  float: right;
  margin: 0.5rem 0 1rem 1.5rem;
  max-width: 50%;
}

.prose img.align-center {
  display: block;
  margin: 2rem auto;
}

/* Figure avec caption */
.prose figure {
  margin: 1.5rem 0;
}

.prose figure img {
  margin: 0;
}

.prose figcaption {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-muted);
  text-align: center;
}

/* Citation simple */
.prose blockquote {
  border-left: 4px solid var(--color-quote-accent);
  padding: 0.9rem 1.25rem;
  margin: 1.25rem 0;
  font-style: italic;
  color: var(--color-muted);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 0 0.75rem 0.75rem 0;
}

.prose blockquote p {
  margin: 0;
}

.prose blockquote.quote {
  position: relative;
  padding-left: 3rem;
}

.prose blockquote.quote::before {
  content: '"';
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  font-size: 3rem;
  color: var(--color-quote-accent);
  font-family: Georgia, serif;
  line-height: 1;
  opacity: 0.5;
}

/* Citation avec source */
.prose figure.citation {
  margin: 1.6rem 0;
  padding: 1.3rem 1.75rem;
  background: linear-gradient(135deg, #f8fafc 0%, #e0f2f1 100%);
  border-radius: 1rem;
  border-left: 4px solid var(--color-quote-accent);
  position: relative;
}

.prose figure.citation::before {
  content: '"';
  position: absolute;
  left: 1.5rem;
  top: 1rem;
  font-size: 4rem;
  color: var(--color-quote-accent);
  font-family: Georgia, serif;
  line-height: 1;
  opacity: 0.3;
}

.prose figure.citation blockquote {
  font-size: var(--type-lead-mobile);
  font-style: italic;
  margin: 0 0 0.85rem 0;
  padding: 0 0 0 2rem;
  border: none;
  background: none;
  color: var(--color-body);
}

.prose figure.citation figcaption {
  text-align: right;
  color: var(--color-muted);
  font-size: 0.9rem;
  font-style: normal;
  padding-right: 0.5rem;
}

.prose figure.citation figcaption::before {
  content: "— ";
  color: var(--color-quote-accent);
}

/* Encadré info */
.prose .info-box {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-left: 4px solid var(--color-title);
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
  border-radius: 0 0.75rem 0.75rem 0;
}

.prose .info-box h3,
.prose .info-box h4 {
  color: var(--color-title);
  margin-top: 0;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.prose .info-box h3::before,
.prose .info-box h4::before {
  content: 'ℹ️';
}

.prose .info-box p:last-child,
.prose .info-box ul:last-child {
  margin-bottom: 0;
}

/* Encadré alerte */
.prose .alert-box {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-left: 4px solid #ff9800;
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
  border-radius: 0 0.75rem 0.75rem 0;
}

.prose .alert-box h3,
.prose .alert-box h4 {
  color: #e65100;
  margin-top: 0;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.prose .alert-box h3::before,
.prose .alert-box h4::before {
  content: '⚠️';
}

.prose .alert-box p:last-child,
.prose .alert-box ul:last-child {
  margin-bottom: 0;
}

/* Encadré succès */
.prose .success-box {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border-left: 4px solid #4caf50;
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
  border-radius: 0 0.75rem 0.75rem 0;
}

.prose .success-box h3,
.prose .success-box h4 {
  color: #2e7d32;
  margin-top: 0;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.prose .success-box h3::before,
.prose .success-box h4::before {
  content: '✅';
}

.prose .success-box p:last-child,
.prose .success-box ul:last-child {
  margin-bottom: 0;
}

/* Info événement */
.prose .event-info {
  background: #f8fafc;
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.prose .event-info p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Tableau */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.prose table th,
.prose table td {
  border: 1px solid #e5e7eb;
  padding: 0.75rem 1rem;
  text-align: left;
}

.prose table th {
  background: var(--color-title);
  color: var(--color-inverse);
  font-weight: 600;
}

.prose table tr:nth-child(even) {
  background: #f9fafb;
}

.prose table tr:hover {
  background: #f3f4f6;
}

/* Séparateur */
.prose hr {
  border: none;
  border-top: 2px solid #e5e7eb;
  margin: 2.5rem 0;
}

/* Code inline */
.prose code {
  background: #f1f5f9;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 0.875em;
  color: #1e293b;
}

/* Bloc de code */
.prose pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1.25rem;
  border-radius: 0.75rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.875rem;
}

.prose pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Responsive */
@media (min-width: 1024px) {
  .eyebrow {
    font-size: var(--type-eyebrow-desktop);
  }

  .hero-title {
    font-size: var(--type-hero-title-desktop);
  }

  .section-title {
    font-size: var(--type-section-title-desktop);
  }

  .section-subtitle {
    font-size: var(--type-section-subtitle-desktop);
  }

  .lead {
    font-size: var(--type-lead-desktop);
  }

  .article-title {
    font-size: var(--type-article-title-desktop);
  }

  .article-lead {
    font-size: var(--type-article-lead-desktop);
  }

  .body,
  .prose {
    font-size: var(--type-body-desktop);
  }

  .small {
    font-size: var(--type-small-desktop);
  }

  .footer-heading {
    font-size: var(--type-footer-heading-desktop);
  }

  .footer-link {
    font-size: var(--type-footer-link-desktop);
  }

  .footer-meta {
    font-size: var(--type-footer-meta-desktop);
  }

  .subnav-text {
    font-size: var(--type-subnav-desktop);
  }

  .card-title {
    font-size: var(--type-card-title-desktop);
  }

  .team-name {
    font-size: var(--type-team-name-desktop);
  }

  .stat-value {
    font-size: var(--type-stat-value-desktop);
  }

  .prose h2 {
    font-size: var(--type-prose-h2-desktop);
  }

  .prose h3 {
    font-size: var(--type-prose-h3-desktop);
  }

  .prose h4 {
    font-size: var(--type-prose-h4-desktop);
  }

  .prose > p:first-child {
    font-size: var(--type-lead-desktop);
  }
}

@media (max-width: 640px) {
  .prose img.align-left,
  .prose img.align-right {
    float: none;
    max-width: 100%;
    margin: 1.5rem 0;
  }

  .prose figure.citation {
    padding: 1rem 1.25rem;
  }

  .prose figure.citation blockquote {
    padding-left: 1.5rem;
  }

  .prose figure.citation::before {
    font-size: 3rem;
    left: 1rem;
  }

  .prose .event-info {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Clear float après contenu */
.prose::after {
  content: '';
  display: table;
  clear: both;
}

/* Listes enrichies avec icônes SVG */
.prose li:has(> svg) {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  list-style: none;
}

.prose ul:has(> li > svg) {
  list-style: none;
  padding-left: 0;
}

.prose li > svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
}