/* ============================================
   GLOBAL.CSS - Styles transversaux
   ============================================
   
   Ce fichier contient les styles globaux qui s'appliquent
   à toute l'application (reset, typographie de base, etc.)
   
   Ordre de chargement CSS :
   1. variables.css (variables uniquement)
   2. global.css (ce fichier - reset + base)
   3. main.css (structure layout)
   4. Autres fichiers spécifiques
   ============================================ */

/* ============================================
   RESET CSS
   ============================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================
   HTML & BODY
   ============================================ */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* Typographie */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--color-text, #2d3748);
}

h1 {
    font-size: var(--font-size-4xl, 2.25rem);
}

h2 {
    font-size: var(--font-size-3xl, 1.875rem);
}

h3 {
    font-size: var(--font-size-2xl, 1.5rem);
}

h4 {
    font-size: var(--font-size-xl, 1.25rem);
}

h5 {
    font-size: var(--font-size-lg, 1.125rem);
}

h6 {
    font-size: var(--font-size-base, 1rem);
}

p {
    margin-bottom: 1rem;
}

/* Liens */
a {
    text-decoration: none;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Boutons */
button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
    transition: all var(--transition-fast, 150ms ease-in-out);
}

button:focus {
    outline: 2px solid var(--color-primary, #365957);
    outline-offset: 2px;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Formulaires */
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--color-primary, #365957);
    outline-offset: 0;
}

/* Listes */
ul,
ol {
    list-style: none;
}

/* Tables */
table {
    border-collapse: collapse;
    width: 100%;
}

/* Scrollbar personnalisée (webkit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg, #f8f9fa);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border, #e2e8f0);
    border-radius: var(--radius-sm, 0.25rem);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted, #a0aec0);
}

/* Selection */
::selection {
    background-color: var(--color-accent-1, #96D9D7);
    color: var(--color-text, #2d3748);
}

::-moz-selection {
    background-color: var(--color-accent-1, #96D9D7);
    color: var(--color-text, #2d3748);
}

/* Focus visible (accessibilité) */
:focus-visible {
    outline: 2px solid var(--color-primary, #365957);
    outline-offset: 2px;
}

/* Classes utilitaires globales */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive utilities */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 13px;
    }
     /* Hero stats responsive */
    .hero-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }
    .hero-stat {
        font-size: var(--font-size-xs);
    }
}

/* Print styles */
@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a,
    a:visited {
        text-decoration: underline;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
    }
    
    img {
        max-width: 100% !important;
    }
    
    @page {
        margin: 0.5cm;
    }
    
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    
    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ============================================
   CENTERED CONTAINER - Conteneur centré
   ============================================ */
.centered-container {
    min-height: calc(100vh - var(--topbar-height, 64px) - 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* ============================================
   CARD - Carte générique
   ============================================ */
.card {
    background: var(--color-surface, #ffffff);
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
    width: 100%;
    animation: fadeInUp 0.4s ease-out;
}

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

.card--centered {
    max-width: 480px;
    text-align: center;
}

.card--medium {
    max-width: 560px;
}

.card--large {
    max-width: 720px;
}

/* ============================================
   STATUS ICON - Icône de statut
   ============================================ */
.status-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
}

.status-icon--success {
    color: var(--color-success, #48bb78);
}

.status-icon--error {
    color: var(--color-error, #f56565);
}

.status-icon--warning {
    color: var(--color-warning, #ed8936);
}

.status-icon--info {
    color: var(--color-info, #4299e1);
}

/* ============================================================================
   ALERT SYSTEM - Système d'alertes et messages réutilisables
   ============================================================================
   
   Structure BEM : .alert, .alert--{type}, .alert__icon, .alert__content
   Types disponibles : success, error, warning, info
   
   Usage : 
   <div class="alert alert--success">
       <i class="alert__icon fas fa-check-circle"></i>
       <div class="alert__content">Message de succès</div>
   </div>
   
   ============================================================================ */

/* Base Alert */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md, 0.5rem);
    border-left: 4px solid;
    margin: 1rem 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    animation: alertSlideIn 0.3s ease-out;
}

@keyframes alertSlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Alert Icon */
.alert__icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    margin-top: 0.125rem;
}

/* Alert Content */
.alert__content {
    flex: 1;
    margin: 0;
}

.alert__content p {
    margin: 0;
}

.alert__content strong {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

/* Alert Success */
.alert--success {
    background: rgba(72, 187, 120, 0.1);
    color: #2f855a;
    border-color: var(--color-success, #48bb78);
}

.alert--success .alert__icon {
    color: var(--color-success, #48bb78);
}

/* Alert Error */
.alert--error {
    background: rgba(245, 101, 101, 0.1);
    color: #c53030;
    border-color: var(--color-error, #f56565);
}

.alert--error .alert__icon {
    color: var(--color-error, #f56565);
}

/* Alert Warning */
.alert--warning {
    background: rgba(237, 137, 54, 0.1);
    color: #c05621;
    border-color: var(--color-warning, #ed8936);
}

.alert--warning .alert__icon {
    color: var(--color-warning, #ed8936);
}

/* Alert Info */
.alert--info {
    background: rgba(66, 153, 225, 0.1);
    color: #2c5282;
    border-color: var(--color-info, #4299e1);
}

.alert--info .alert__icon {
    color: var(--color-info, #4299e1);
}

/* Alert Compact (sans icône) */
.alert--compact {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

.alert--compact .alert__icon {
    display: none;
}

/* Alert Dismissible */
.alert--dismissible {
    position: relative;
    padding-right: 3rem;
}

.alert__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: currentColor;
    opacity: 0.6;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.25rem;
    transition: opacity var(--transition-fast, 150ms);
}

.alert__close:hover {
    opacity: 1;
}

/* ============================================
   SECTION FOOTER - Pied de section
   ============================================ */
.section-footer {
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-divider, #edf2f7);
    text-align: center;
}

.section-footer__text {
    font-size: 0.9rem;
    color: var(--color-text-muted, #a0aec0);
    margin: 0.5rem 0;
}

/* ============================================
   LINKS - Liens génériques
   ============================================ */
.link {
    color: var(--color-primary, #365957);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition-fast, 150ms) ease-in-out;
}

.link:hover {
    color: var(--color-primary-dark, #2a4443);
    text-decoration: underline;
}

.link--secondary {
    color: var(--color-text-muted, #a0aec0);
    font-weight: 500;
}

.link--secondary:hover {
    color: var(--color-text, #2d3748);
}

.link--icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   TEXT UTILITIES - Utilitaires de texte
   ============================================ */
.text--muted {
    color: var(--color-text-muted, #a0aec0);
}

.text--secondary {
    color: var(--color-text-light, #718096);
}

.text--small {
    font-size: 0.875rem;
}

.text--center {
    text-align: center;
}

/* ============================================
   AVATARS & PLACEHOLDERS
   ============================================ */

/**
 * Placeholder d'avatar générique
 * @deprecated Utiliser entity-cell__avatar + entity-cell__avatar--initials
 *             via AvatarHelper::render() côté PHP.
 *             Conservé pour rétrocompatibilité JS (topbar toggle).
 */
.avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-primary, #365957);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    user-select: none;
    flex-shrink: 0;
}

.avatar-placeholder--sm {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
}

.avatar-placeholder--lg {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
}

.avatar-placeholder--xl {
    width: 96px;
    height: 96px;
    font-size: 2.5rem;
}

/* ============================================
   CONTENT DETAILS - Sections de détails génériques
   ============================================
   Classes réutilisables pour afficher des détails
   structurés (rôles, permissions, utilisateurs, etc.)
   ============================================ */

/* Conteneur principal */
.content-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
}

/* Bloc utilisateur (avatar + infos) dans un content-details__header */
.content-details__user {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}

.content-details__avatar {
    flex-shrink: 0;
}

.content-details__user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* En-tête avec badge */
.content-details__header {
    margin-bottom: var(--spacing-xs, 0.25rem);
}

/* Titre principal */
.content-details__title {
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: 600;
    color: var(--color-text, #2d3748);
    margin: 0 0 var(--spacing-xs, 0.25rem) 0;
}

/* Clé technique / code */
.content-details__code {
    margin-bottom: var(--spacing-sm, 0.5rem);
}

/* Section de contenu */
.content-details__section {
    padding-top: var(--spacing-md, 1rem);
    border-top: 1px solid var(--color-divider, #edf2f7);
}

.content-details__section:first-of-type {
    border-top: none;
    padding-top: 0;
}

/* Titre de section */
.content-details__section-title {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-secondary, #718096);
    margin: 0 0 var(--spacing-sm, 0.5rem) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
}

.content-details__section-title i {
    color: var(--color-primary, #365957);
    font-size: 0.75rem;
}

/* Texte de description */
.content-details__text {
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text, #2d3748);
    line-height: 1.6;
    margin: 0;
}

.content-details__text--muted {
    color: var(--color-text-muted, #a0aec0);
    font-style: italic;
}

/* Boîte mise en valeur (description, citation, etc.) */
.content-details__box {
    background-color: var(--color-gray-50, #f8fafc);
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    border-radius: var(--radius-sm, 0.25rem);
    border-left: 3px solid var(--color-primary, #365957);
}

.content-details__box--muted {
    border-left-color: var(--color-text-muted, #a0aec0);
}

/* Valeur statistique (compteur, etc.) */
.content-details__stat {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text, #2d3748);
}

.content-details__stat i {
    color: var(--color-primary, #365957);
}

/* Liste de tags/badges groupés par catégorie */
.content-details__tags-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
}

.content-details__tags-category {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

.content-details__tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs, 0.25rem);
    padding-left: var(--spacing-sm, 0.5rem);
}

/* Tag individuel avec icône */
.content-details__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, #718096);
    background-color: var(--color-gray-50, #f8fafc);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-xs, 0.125rem);
    border: 1px solid var(--color-border, #e2e8f0);
}

.content-details__tag i {
    color: var(--color-success, #48bb78);
    font-size: 0.625rem;
}

/* Image preview */
.content-details__image {
    width: 100%;
    max-width: 300px;
    margin: 0 auto var(--spacing-md);
    display: block;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

/* Actions section */
.content-details__actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

/* Aperçu (image + métadonnées) */
.content-details__preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md, 1rem);
    margin-bottom: var(--spacing-md, 1rem);
}

/* Métadonnées sous l'image (badges, infos compactes) */
.content-details__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 0.5rem);
    justify-content: center;
}

/* Grille de détails (label/value pairs) */
.content-details__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
}

@media (max-width: 480px) {
    .content-details__grid {
        grid-template-columns: 1fr;
    }
}

/* Item individuel dans la grille */
.content-details__item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs, 2px);
}

/* Label (clé) */
.content-details__label {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    color: var(--color-text-muted, #a0aec0);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Valeur */
.content-details__value {
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text, #2d3748);
}

/* Code badge générique */
.code-badge {
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: var(--font-size-sm, 0.875rem);
    background-color: var(--color-gray-100, #f1f5f9);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-xs, 0.125rem);
    color: var(--color-primary, #365957);
}

/* ============================================
   TYPOGRAPHY - Classes de typographie réutilisables
   ============================================
   Classes génériques pour les titres, paragraphes,
   citations et éléments de texte dans toute l'application.
   ============================================ */

/* === HEADINGS - Titres avec variantes === */

/* Titre de page principal */
.page-title {
    font-size: var(--font-size-3xl, 1.875rem);
    font-weight: 700;
    color: var(--color-text, #2d3748);
    margin: 0 0 var(--spacing-md, 1rem) 0;
    line-height: 1.2;
}

.page-title--primary {
    color: var(--color-primary, #365957);
}

.page-title--center {
    text-align: center;
}

/* Titre de section */
.section-title {
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: 600;
    color: var(--color-text, #2d3748);
    margin: 0 0 var(--spacing-md, 1rem) 0;
    line-height: 1.3;
}

.section-title--with-icon {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}

.section-title--with-icon i {
    color: var(--color-primary, #365957);
}

.section-title--bordered {
    padding-bottom: var(--spacing-sm, 0.5rem);
    border-bottom: 2px solid var(--color-border, #e2e8f0);
}

/* Sous-titre */
.subtitle {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: 500;
    color: var(--color-text-secondary, #718096);
    margin: 0 0 var(--spacing-sm, 0.5rem) 0;
    line-height: 1.4;
}

/* ============================================
   HERO STATS (statistiques sous le hero - réutilisable)
   Copié de story.css pour cohérence
   ============================================ */
.hero-stats {
    grid-column: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md) var(--spacing-xl);
    padding: var(--spacing-lg) var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.hero-stat {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.hero-stat i {
    font-size: var(--font-size-base);
    color: var(--color-primary);
    opacity: 0.8;
}

.hero-stat__relative {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* ================================================================
   SECTION HEADER - En-têtes de section avec titre + actions
   Utilisé sur : story, chapter, dashboard, etc.
   ================================================================ */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md, 1rem);
    flex-wrap: wrap;
}

.section-header__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: 600;
    color: var(--color-text, #2d3748);
    margin: 0;
    margin-top: var(--spacing-xl);
    line-height: 1.3;
}

.section-header__title i {
    color: var(--color-primary, #365957);
    font-size: 1em;
}

.section-header__count {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: 400;
    color: var(--color-text-muted, #a0aec0);
    margin-left: var(--spacing-xs, 0.25rem);
}

.section-header__subtitle {
    margin: 0;
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text-secondary, #718096);
}

/* Titre de groupe/catégorie */
.group-title {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-muted, #a0aec0);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--spacing-sm, 0.5rem) 0;
}

/* === PARAGRAPHS - Paragraphes === */

/* Paragraphe standard */
.paragraph {
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text, #2d3748);
    line-height: 1.7;
    margin: 0 0 var(--spacing-md, 1rem) 0;
}

.paragraph:last-child {
    margin-bottom: 0;
}

/* Paragraphe d'introduction (lead) */
.lead {
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--color-text-secondary, #718096);
    line-height: 1.7;
    margin: 0 0 var(--spacing-lg, 1.5rem) 0;
}

/* Texte secondaire / description */
.description {
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text-muted, #a0aec0);
    line-height: 1.6;
    margin: 0;
}

/* Texte petit / caption */
.caption {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted, #a0aec0);
    line-height: 1.5;
    margin: 0;
}

/* Texte très petit / fine print */
.fine-print {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted, #a0aec0);
    line-height: 1.4;
    margin: 0;
}

/* === QUOTES - Citations === */

/* Citation simple */
.quote {
    font-size: var(--font-size-lg, 1.125rem);
    font-style: italic;
    color: var(--color-text-secondary, #718096);
    line-height: 1.7;
    margin: var(--spacing-md, 1rem) 0;
    padding-left: var(--spacing-lg, 1.5rem);
    border-left: 3px solid var(--color-primary, #365957);
}

/* Citation mise en avant (blockquote stylé) */
.blockquote {
    font-size: var(--font-size-lg, 1.125rem);
    font-style: italic;
    color: var(--color-text, #2d3748);
    line-height: 1.7;
    margin: var(--spacing-lg, 1.5rem) 0;
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
    background-color: var(--color-gray-50, #f8fafc);
    border-left: 4px solid var(--color-primary, #365957);
    border-radius: 0 var(--radius-sm, 0.25rem) var(--radius-sm, 0.25rem) 0;
}

.blockquote__author {
    display: block;
    font-size: var(--font-size-sm, 0.875rem);
    font-style: normal;
    font-weight: 500;
    color: var(--color-text-muted, #a0aec0);
    margin-top: var(--spacing-sm, 0.5rem);
}

.blockquote__author::before {
    content: "— ";
}

/* === HIGHLIGHTED TEXT - Texte mis en valeur === */

/* Texte surligné */
.highlight {
    background-color: rgba(150, 217, 215, 0.3);
    padding: 0.125rem 0.25rem;
    border-radius: var(--radius-xs, 0.125rem);
}

/* Texte accent */
.accent {
    color: var(--color-primary, #365957);
    font-weight: 600;
}

/* Texte success */
.text-success {
    color: var(--color-success, #48bb78);
}

/* Texte error */
.text-error,
.text-danger {
    color: var(--color-error, #f56565);
}

/* Texte warning */
.text-warning {
    color: var(--color-warning, #ed8936);
}

/* Texte info */
.text-info {
    color: var(--color-info, #4299e1);
}

/* === INLINE CODE - Code inline === */

.inline-code {
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: 0.9em;
    background-color: var(--color-gray-100, #f1f5f9);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-xs, 0.125rem);
    color: var(--color-primary, #365957);
}

/* === LISTS - Listes stylées === */

.list {
    margin: 0 0 var(--spacing-md, 1rem) 0;
    padding-left: var(--spacing-lg, 1.5rem);
}

.list li {
    margin-bottom: var(--spacing-xs, 0.25rem);
    line-height: 1.6;
}

.list--bullet {
    list-style-type: disc;
}

.list--number {
    list-style-type: decimal;
}

.list--check li {
    list-style: none;
    position: relative;
    padding-left: var(--spacing-md, 1rem);
}

.list--check li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-success, #48bb78);
    font-weight: bold;
}

/* === DIVIDERS - Séparateurs === */

.divider {
    border: none;
    border-top: 1px solid var(--color-border, #e2e8f0);
    margin: var(--spacing-lg, 1.5rem) 0;
}

.divider--thick {
    border-top-width: 2px;
}

.divider--dashed {
    border-top-style: dashed;
}

.divider--primary {
    border-top-color: var(--color-primary, #365957);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .page-title {
        font-size: var(--font-size-2xl, 1.5rem);
    }
    
    .section-title {
        font-size: var(--font-size-xl, 1.25rem);
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .section-header__title {
        font-size: var(--font-size-lg, 1.125rem);
    }
    
    .lead {
        font-size: var(--font-size-base, 1rem);
    }
    
    .blockquote {
        padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
        font-size: var(--font-size-base, 1rem);
    }
    
    .centered-container {
        padding: 1rem;
    }
    
    .card {
        padding: 1.5rem;
    }
    
    .status-icon {
        font-size: 3rem;
    }
    
    .message-box,
    .alert {
        font-size: 0.875rem;
        padding: 0.875rem 1rem;
    }
    
    .alert__icon {
        font-size: 1.125rem;
    }

    /* Hero stats responsive */
    .hero-stats {
        flex-direction: row;
        justify-content: space-between;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }
}