/* Améliorations typographiques pour respecter les bonnes pratiques */

/* ===== TAILLES DE BASE RESPONSIVES ===== */

/* Taille de base du body avec minimum 16px sur mobile */
body {
    font-size: 1rem; /* 16px par défaut */
    line-height: 1.6;
}

/* ===== TITRES RESPONSIVES ===== */

/* Titres avec clamp() pour une adaptation fluide */
h1, .h1 {
    font-size: clamp(1.5rem, 4vw, 2.5rem); /* Entre 24px et 40px */
    line-height: 1.2;
    margin-bottom: 1rem;
}

h2, .h2 {
    font-size: clamp(1.25rem, 3vw, 2rem); /* Entre 20px et 32px */
    line-height: 1.3;
    margin-bottom: 0.875rem;
}

h3, .h3 {
    font-size: clamp(1.125rem, 2.5vw, 1.75rem); /* Entre 18px et 28px */
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

h4, .h4 {
    font-size: clamp(1rem, 2vw, 1.5rem); /* Entre 16px et 24px */
    line-height: 1.4;
    margin-bottom: 0.625rem;
}

h5, .h5 {
    font-size: clamp(0.875rem, 1.8vw, 1.25rem); /* Entre 14px et 20px */
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

h6, .h6 {
    font-size: clamp(0.8125rem, 1.5vw, 1rem); /* Entre 13px et 16px */
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

/* ===== CLASSES DISPLAY RESPONSIVES ===== */

.display-1 {
    font-size: clamp(2rem, 6vw, 5rem);
    line-height: 1.1;
}

.display-2 {
    font-size: clamp(1.875rem, 5.5vw, 4.5rem);
    line-height: 1.1;
}

.display-3 {
    font-size: clamp(1.75rem, 5vw, 4rem);
    line-height: 1.2;
}

.display-4 {
    font-size: clamp(1.625rem, 4.5vw, 3.5rem);
    line-height: 1.2;
}

.display-5 {
    font-size: clamp(1.5rem, 4vw, 3rem);
    line-height: 1.3;
}

.display-6 {
    font-size: clamp(1.375rem, 3.5vw, 2.5rem);
    line-height: 1.3;
}

/* ===== TEXTE CORPS RESPONSIVE ===== */

.lead {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
    line-height: 1.6;
}

p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* ===== TAILLES SPÉCIALES ===== */

/* Texte petit mais lisible */
.small, small {
    font-size: clamp(0.8125rem, 1.5vw, 0.875rem); /* Minimum 13px */
    line-height: 1.5;
}

/* Texte très petit pour les métadonnées */
.text-meta {
    font-size: clamp(0.75rem, 1.2vw, 0.8125rem); /* Minimum 12px */
    line-height: 1.4;
}

/* ===== AMÉLIORATIONS SPÉCIFIQUES POUR LES PAGES NATINF ===== */

/* Optimisations pour les éléments de la page detail.php */
.natinf-code-number {
    font-size: clamp(2rem, 6vw, 3rem) !important;
    line-height: 1.1;
}

.natinf-title {
    font-size: clamp(1.25rem, 3.5vw, 1.8rem) !important;
    line-height: 1.2;
}

.section-title {
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    line-height: 1.3;
}

.info-label {
    font-size: clamp(0.75rem, 1.8vw, 0.9rem);
    line-height: 1.4;
}

.info-value {
    font-size: clamp(0.875rem, 2.2vw, 1rem);
    line-height: 1.6;
}

.badge-clean {
    font-size: clamp(0.75rem, 1.8vw, 0.9rem);
    line-height: 1.3;
}

.code-snippet {
    font-size: clamp(0.75rem, 1.8vw, 0.9rem);
    line-height: 1.4;
}

.tag-clean {
    font-size: clamp(0.6875rem, 1.6vw, 0.85rem);
    line-height: 1.3;
}

/* ===== CORRECTIONS SPÉCIFIQUES ===== */

/* Correction pour le bouton retour en haut */
#myBtn {
    font-size: 1.125rem; /* 18px en rem */
}

/* Correction pour les boutons ronds */
.btn-circle.btn-xl {
    font-size: 1.5rem; /* 24px en rem */
}

/* Correction pour les icônes dans les tiles */
.tile i {
    font-size: clamp(2rem, 4vw, 2.6rem);
}

/* Correction pour les étoiles de notation */
.rating-stars {
    font-size: 1rem; /* 16px en rem */
}

/* Correction pour le texte de chargement */
.loading-text {
    font-size: 1rem; /* 16px en rem */
}

/* Correction pour les cartes d'actualités */
.news-card .card-body small {
    font-size: clamp(0.75rem, 1.2vw, 0.875rem); /* Minimum 12px */
}

.news-card .card-body p {
    font-size: clamp(0.8125rem, 1.5vw, 0.9rem); /* Minimum 13px */
}

/* ===== RESPONSIVE MOBILE ===== */

@media (max-width: 768px) {
    /* Assurer une taille minimum de 16px pour le texte principal */
    body {
        font-size: 1rem;
    }
    
    /* Ajuster les étoiles sur mobile */
    .rating-stars {
        font-size: 0.875rem; /* 14px minimum */
    }
    
    .rating-stars small {
        font-size: 0.75rem; /* 12px minimum */
    }
    
    /* Ajuster le texte de chargement */
    .loading-text {
        font-size: 0.875rem; /* 14px minimum */
    }
    
    /* Améliorer la lisibilité des cartes d'actualités */
    .news-card .card-body p {
        font-size: 0.875rem; /* 14px minimum */
        line-height: 1.4;
    }
    
    /* Optimisations spécifiques pour les pages Natinf */
    .natinf-code-number {
        font-size: clamp(2rem, 5vw, 2.5rem) !important;
    }
    
    .natinf-title {
        font-size: clamp(1.25rem, 4vw, 1.5rem) !important;
    }
    
    .section-title {
        font-size: clamp(1.1rem, 3vw, 1.3rem);
    }
    
    .info-value {
        font-size: clamp(0.875rem, 2.5vw, 1rem);
    }
    
    .info-label {
        font-size: clamp(0.75rem, 2vw, 0.9rem);
    }
}

@media (max-width: 576px) {
    /* Optimisations pour très petits écrans */
    .lead {
        font-size: 1.125rem; /* 18px minimum */
    }
    
    /* Assurer que les boutons restent lisibles */
    .btn {
        font-size: 0.875rem; /* 14px minimum */
        padding: 0.5rem 1rem;
    }
    
    .btn-lg {
        font-size: 1rem; /* 16px minimum */
        padding: 0.75rem 1.5rem;
    }
    
    /* Optimisations spécifiques pour les pages Natinf sur très petits écrans */
    .natinf-code-number {
        font-size: clamp(1.75rem, 4.5vw, 2rem) !important;
    }
    
    .natinf-title {
        font-size: clamp(1.125rem, 3.5vw, 1.25rem) !important;
    }
    
    .action-btn,
    .action-btn-success,
    .action-btn-secondary,
    .action-btn-favori,
    .action-btn-outline {
        font-size: clamp(0.875rem, 2.5vw, 1rem);
        padding: clamp(0.5rem, 2vw, 0.75rem) clamp(1rem, 3vw, 1.5rem);
    }
}

/* ===== AMÉLIORATIONS D'ACCESSIBILITÉ ===== */

/* Améliorer le contraste pour les petits textes */
.text-muted {
    color: #6c757d !important;
    font-weight: 400;
}

/* Assurer une bonne lisibilité des liens */
a {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Améliorer la lisibilité du code */
code {
    font-size: 0.875rem;
    background-color: #f8f9fa;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
}

/* ===== OPTIMISATIONS POUR LES ÉCRANS HAUTE RÉSOLUTION ===== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Améliorer le rendu des polices sur les écrans Retina */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
} 