@charset "UTF-8";
/* Page Content Styles - Ares Design */
.content-page {
  padding: 8rem 0 4rem;
  /* Augmenté pour éviter le chevauchement avec la navbar fixe */
  min-height: 80vh; }

/* Page Header */
.page-header {
  margin-bottom: 4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--theme-border);
  text-align: center; }

.page-title {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--theme-text-primary);
  font-size: 3rem;
  margin-bottom: 1rem; }

.page-description {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--theme-text-secondary);
  font-size: 1.25rem;
  margin-bottom: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto; }

.page-meta {
  font-size: 0.85rem;
  color: var(--theme-text-light);
  margin-top: 1rem; }

/* Page Content */
.page-content {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--theme-text-primary);
  font-size: 1rem;
  line-height: 1.7; }

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 600;
  color: var(--theme-text-primary);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  letter-spacing: -0.01em; }

.page-content h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-top: 3rem; }

.page-content h2 {
  font-size: 2rem;
  line-height: 1.3;
  margin-top: 2.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--theme-border); }

.page-content h3 {
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--theme-nav-hover); }

.page-content h4 {
  font-size: 1.25rem;
  line-height: 1.4; }

.page-content h5,
.page-content h6 {
  font-size: 1.1rem;
  line-height: 1.4; }

.page-content p {
  margin-bottom: 1.5rem;
  color: var(--theme-text-primary); }

.page-content strong {
  font-weight: 600;
  color: var(--theme-text-primary); }

.page-content em {
  font-style: italic;
  color: var(--theme-text-secondary); }

/* Lists */
.page-content ul,
.page-content ol {
  margin-bottom: 1.5rem;
  padding-left: 2rem; }

.page-content li {
  margin-bottom: 0.5rem;
  color: var(--theme-text-primary); }

.page-content ul li {
  list-style-type: none;
  position: relative; }

.page-content ul li::before {
  content: '•';
  color: var(--theme-nav-hover);
  font-weight: bold;
  position: absolute;
  left: -1.5rem; }

/* Links */
.page-content a {
  color: var(--theme-nav-hover);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease; }

.page-content a:hover {
  color: var(--theme-nav-hover);
  border-bottom-color: var(--theme-nav-hover);
  text-decoration: none; }

/* Blockquotes */
.page-content blockquote {
  border-left: 4px solid var(--theme-nav-hover);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--theme-text-secondary);
  background: var(--theme-bg-secondary);
  padding: 1.5rem;
  border-radius: 0 8px 8px 0; }

/* Code */
.page-content code {
  background: var(--theme-bg-secondary);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.9em;
  color: var(--theme-nav-hover); }

.page-content pre {
  background: var(--theme-bg-secondary);
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--theme-border); }

.page-content pre code {
  background: none;
  padding: 0;
  color: var(--theme-text-primary); }

/* Tables */
.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  background: var(--theme-bg-primary);
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  overflow: hidden; }

.page-content th,
.page-content td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--theme-border); }

.page-content th {
  background: var(--theme-bg-secondary);
  font-weight: 600;
  color: var(--theme-text-primary); }

.page-content tr:last-child td {
  border-bottom: none; }

/* Special Elements */
.page-content hr {
  border: none;
  height: 2px;
  background: var(--theme-border);
  margin: 3rem 0;
  border-radius: 1px; }

/* Callout Boxes */
.page-content .callout {
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0; }

.page-content .callout.info {
  border-left: 4px solid var(--theme-nav-hover); }

.page-content .callout.warning {
  border-left: 4px solid #f59e0b; }

.page-content .callout.success {
  border-left: 4px solid #10b981; }

/* Navigation */
.page-navigation {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--theme-border);
  text-align: center; }

.btn-back {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: var(--theme-bg-secondary);
  color: var(--theme-text-primary);
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-weight: 500;
  border: 1px solid var(--theme-border); }

.btn-back:hover {
  background: var(--theme-nav-hover);
  color: white;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px var(--theme-shadow-medium); }

/* Responsive Design */
@media (max-width: 768px) {
  .content-page {
    padding: 8rem 0 3rem;
    /* Augmenté pour éviter le chevauchement sur mobile */ }
  .page-header {
    margin-bottom: 3rem; }
  .page-title {
    font-size: 2.25rem; }
  .page-description {
    font-size: 1.1rem; }
  .page-content h1 {
    font-size: 2rem; }
  .page-content h2 {
    font-size: 1.75rem; }
  .page-content h3 {
    font-size: 1.25rem; } }

@media (max-width: 576px) {
  .content-page {
    padding: 8rem 0 2rem;
    /* Augmenté pour éviter le chevauchement sur très petit écran */ }
  .page-title {
    font-size: 1.75rem; }
  .page-content {
    font-size: 0.95rem; }
  .page-content h1 {
    font-size: 1.75rem; }
  .page-content h2 {
    font-size: 1.5rem; } }