/* Fichier: assets/css/responsive-typography.css */
/* Standardisation des tailles de texte responsive pour tout le site */

/* ============================================
   RÈGLES DE BASE - TAILLES MINIMALES
   ============================================ */
/* Minimum 16px pour éviter le zoom automatique sur mobile */
body {
    font-size: 16px; /* Base mobile */
}

/* ============================================
   TITRES RESPONSIVE
   ============================================ */

/* H1 - Titres principaux */
h1, .h1 {
    font-size: 1.75rem; /* 28px mobile */
    line-height: 1.2;
}

@media (min-width: 640px) {
    h1, .h1 {
        font-size: 2rem; /* 32px tablette */
    }
}

@media (min-width: 1024px) {
    h1, .h1 {
        font-size: 2.5rem; /* 40px desktop */
    }
}

/* H2 - Sous-titres */
h2, .h2 {
    font-size: 1.5rem; /* 24px mobile */
    line-height: 1.3;
}

@media (min-width: 640px) {
    h2, .h2 {
        font-size: 1.75rem; /* 28px tablette */
    }
}

@media (min-width: 1024px) {
    h2, .h2 {
        font-size: 2rem; /* 32px desktop */
    }
}

/* H3 - Titres de section */
h3, .h3 {
    font-size: 1.25rem; /* 20px mobile */
    line-height: 1.4;
}

@media (min-width: 640px) {
    h3, .h3 {
        font-size: 1.5rem; /* 24px tablette */
    }
}

@media (min-width: 1024px) {
    h3, .h3 {
        font-size: 1.75rem; /* 28px desktop */
    }
}

/* ============================================
   TEXTES CORPS
   ============================================ */

/* Texte normal */
p, .text-body {
    font-size: 1rem; /* 16px mobile */
    line-height: 1.6;
}

@media (min-width: 1024px) {
    p, .text-body {
        font-size: 1.0625rem; /* 17px desktop */
    }
}

/* Texte petit (labels, infos) */
.text-small, .text-sm {
    font-size: 0.875rem; /* 14px mobile */
    line-height: 1.5;
}

@media (min-width: 640px) {
    .text-small, .text-sm {
        font-size: 0.9375rem; /* 15px tablette */
    }
}

/* Texte très petit (badges, tags) */
.text-xs {
    font-size: 0.75rem; /* 12px - minimum acceptable */
    line-height: 1.4;
}

/* Texte large (intros, citations) */
.text-large, .text-lg {
    font-size: 1.125rem; /* 18px mobile */
    line-height: 1.6;
}

@media (min-width: 640px) {
    .text-large, .text-lg {
        font-size: 1.25rem; /* 20px tablette */
    }
}

@media (min-width: 1024px) {
    .text-large, .text-lg {
        font-size: 1.375rem; /* 22px desktop */
    }
}

/* ============================================
   FORMULAIRES RESPONSIVE
   ============================================ */

/* Labels de formulaires */
label, .form-label {
    font-size: 0.9375rem; /* 15px mobile */
    font-weight: 600;
    line-height: 1.5;
}

@media (min-width: 640px) {
    label, .form-label {
        font-size: 1rem; /* 16px tablette+ */
    }
}

/* Inputs et champs de formulaire */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
    font-size: 1rem; /* 16px - évite le zoom sur iOS */
    line-height: 1.5;
    padding: 0.75rem 1rem; /* 12px 16px */
    min-height: 44px; /* Touch target minimum */
}

@media (min-width: 640px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        padding: 0.875rem 1.25rem; /* 14px 20px */
    }
}

/* ============================================
   BOUTONS RESPONSIVE
   ============================================ */

.btn {
    font-size: 0.9375rem; /* 15px mobile */
    padding: 0.75rem 1.5rem; /* 12px 24px */
    min-height: 44px; /* Touch target minimum */
    min-width: 44px;
    line-height: 1.5;
}

@media (min-width: 640px) {
    .btn {
        font-size: 1rem; /* 16px tablette+ */
        padding: 0.875rem 2rem; /* 14px 32px */
    }
}

.btn-sm {
    font-size: 0.875rem; /* 14px mobile */
    padding: 0.625rem 1.25rem; /* 10px 20px */
    min-height: 40px;
}

@media (min-width: 640px) {
    .btn-sm {
        font-size: 0.9375rem; /* 15px tablette+ */
        padding: 0.75rem 1.5rem; /* 12px 24px */
    }
}

.btn-lg {
    font-size: 1rem; /* 16px mobile */
    padding: 1rem 2rem; /* 16px 32px */
    min-height: 48px;
}

@media (min-width: 640px) {
    .btn-lg {
        font-size: 1.125rem; /* 18px tablette+ */
        padding: 1.125rem 2.5rem; /* 18px 40px */
    }
}

/* ============================================
   NAVIGATION RESPONSIVE
   ============================================ */

.nav-link {
    font-size: 0.9375rem; /* 15px mobile */
    padding: 0.625rem 0.875rem; /* 10px 14px */
    min-height: 44px;
    display: flex;
    align-items: center;
}

@media (min-width: 640px) {
    .nav-link {
        font-size: 1rem; /* 16px tablette+ */
        padding: 0.75rem 1rem; /* 12px 16px */
    }
}

/* ============================================
   TABLEAUX RESPONSIVE
   ============================================ */

table {
    font-size: 0.875rem; /* 14px mobile */
}

@media (min-width: 640px) {
    table {
        font-size: 0.9375rem; /* 15px tablette */
    }
}

@media (min-width: 1024px) {
    table {
        font-size: 1rem; /* 16px desktop */
    }
}

th {
    font-size: 0.8125rem; /* 13px mobile */
    font-weight: 600;
}

@media (min-width: 640px) {
    th {
        font-size: 0.875rem; /* 14px tablette+ */
    }
}

td {
    font-size: 0.875rem; /* 14px mobile */
}

@media (min-width: 640px) {
    td {
        font-size: 0.9375rem; /* 15px tablette+ */
    }
}

/* ============================================
   CARTES & COMPOSANTS
   ============================================ */

.card-title {
    font-size: 1.25rem; /* 20px mobile */
    line-height: 1.3;
}

@media (min-width: 640px) {
    .card-title {
        font-size: 1.5rem; /* 24px tablette+ */
    }
}

.card-text {
    font-size: 0.9375rem; /* 15px mobile */
    line-height: 1.6;
}

@media (min-width: 640px) {
    .card-text {
        font-size: 1rem; /* 16px tablette+ */
    }
}

/* ============================================
   ESPACEMENTS RESPONSIVE
   ============================================ */

/* Espacements entre sections */
.section-spacing {
    margin-top: 2rem; /* 32px mobile */
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .section-spacing {
        margin-top: 3rem; /* 48px tablette */
        margin-bottom: 3rem;
    }
}

@media (min-width: 1024px) {
    .section-spacing {
        margin-top: 4rem; /* 64px desktop */
        margin-bottom: 4rem;
    }
}

/* ============================================
   UTILITAIRES RESPONSIVE
   ============================================ */

/* Container responsive */
.container-responsive {
    width: 100%;
    padding-left: 1rem; /* 16px mobile */
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {
    .container-responsive {
        padding-left: 1.5rem; /* 24px tablette */
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container-responsive {
        padding-left: 2rem; /* 32px desktop */
        padding-right: 2rem;
        max-width: 1280px;
    }
}

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

/* Éviter les textes trop petits sur mobile */
@media (max-width: 639px) {
    .text-xs {
        font-size: 0.8125rem !important; /* 13px minimum sur mobile */
    }
    
    /* Forcer les inputs à 16px minimum */
    input, select, textarea {
        font-size: 16px !important; /* Évite le zoom iOS */
    }
}

/* Améliorer la lisibilité sur petits écrans */
@media (max-width: 639px) {
    body {
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}