/* ============================================================
   HISTOIRE.HTML - TYPOGRAPHIE MOBILE/TABLETTE PROFESSIONNELLE
   ============================================================

   Objectif : Adapter les tailles de H2 et P pour un rendu plus
   professionnel, standard et chic en mobile/tablette

   IMPORTANT : Ne modifie PAS la section .service-hero
   ============================================================ */

/* ============================================================
   TABLETTE (768px - 1024px)
   ============================================================ */

@media (min-width: 768px) and (max-width: 1024px) {

    /* Exclure explicitement service-hero */
    .page-histoire main > section:not(.service-hero) h2 {
        font-size: 1.8rem !important;
        line-height: 1.3;
        margin-bottom: 1.2rem;
        font-weight: 600;
        letter-spacing: -0.5px;
    }

    .page-histoire main > section:not(.service-hero) p {
        font-size: 0.95rem !important;
        line-height: 1.7;
        margin-bottom: 1rem;
        color: #444;
        font-weight: 400;
    }

    /* Paragraphes avec classe gold-subtitle */
    .page-histoire main > section:not(.service-hero) .gold-subtitle {
        font-size: 0.85rem !important;
        letter-spacing: 2px;
    }

    /* H3 dans les cards */
    .page-histoire .challenge-card h3,
    .page-histoire .commitment-item h4 {
        font-size: 1.3rem !important;
        line-height: 1.4;
    }

    /* Paragraphes dans les cards */
    .page-histoire .challenge-card p,
    .page-histoire .commitment-item p {
        font-size: 0.9rem !important;
        line-height: 1.65;
    }

    /* Citation (quote) */
    .page-histoire .quote-text {
        font-size: 1.6rem !important;
        line-height: 1.5;
    }
}

/* ============================================================
   MOBILE (max 767px)
   ============================================================ */

@media (max-width: 767px) {

    /* H2 - Plus petits et élégants */
    .page-histoire main > section:not(.service-hero) h2 {
        font-size: 1.5rem !important;
        line-height: 1.3;
        margin-bottom: 1rem;
        font-weight: 600;
        letter-spacing: -0.3px;
    }

    /* Paragraphes standards - Taille réduite */
    .page-histoire main > section:not(.service-hero) p {
        font-size: 0.9rem !important;
        line-height: 1.65;
        margin-bottom: 0.9rem;
        color: #444;
        font-weight: 400;
        text-align: justify;
        text-justify: inter-word;
    }

    /* Gold subtitle - Plus discret */
    .page-histoire main > section:not(.service-hero) .gold-subtitle {
        font-size: 0.75rem !important;
        letter-spacing: 1.5px;
        margin-bottom: 0.8rem;
    }

    /* H3 dans les challenge cards - Réduit */
    .page-histoire .challenge-card h3 {
        font-size: 1.15rem !important;
        line-height: 1.4;
        margin-bottom: 0.8rem;
    }

    /* Paragraphes dans les challenge cards */
    .page-histoire .challenge-card p {
        font-size: 0.85rem !important;
        line-height: 1.6;
    }

    /* H4 dans les commitment items */
    .page-histoire .commitment-item h4 {
        font-size: 1.2rem !important;
        line-height: 1.4;
        margin-bottom: 0.8rem;
    }

    /* Paragraphes dans les commitment items */
    .page-histoire .commitment-item p {
        font-size: 0.87rem !important;
        line-height: 1.6;
    }

    /* Citation (quote) - Adapté mobile */
    .page-histoire .quote-text {
        font-size: 1.3rem !important;
        line-height: 1.5;
        padding: 0 1rem;
    }

    /* Icônes dans les cards - Légèrement réduites */
    .page-histoire .gold-icon {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }
}

/* ============================================================
   PETITS MOBILES (max 480px)
   ============================================================ */

@media (max-width: 480px) {

    /* H2 encore plus compact */
    .page-histoire main > section:not(.service-hero) h2 {
        font-size: 1.35rem !important;
        line-height: 1.25;
    }

    /* Paragraphes très lisibles */
    .page-histoire main > section:not(.service-hero) p {
        font-size: 0.88rem !important;
        line-height: 1.6;
    }

    /* H3 dans cards */
    .page-histoire .challenge-card h3 {
        font-size: 1.1rem !important;
    }

    /* Citation ultra-compacte */
    .page-histoire .quote-text {
        font-size: 1.15rem !important;
        line-height: 1.45;
    }
}

/* ============================================================
   AJUSTEMENTS SPÉCIFIQUES PAR SECTION
   ============================================================ */

/* Section "Une immersion au cœur du conseil" */
@media (max-width: 1024px) {
    .page-histoire .histoire-section:first-of-type h2 {
        text-align: left !important;
        margin-bottom: 1.5rem;
    }

    .page-histoire .histoire-section:first-of-type .text-content {
        padding-left: 20px !important;
        border-left-width: 2px !important;
    }
}

/* Section "Une mission : le conseil pour tous" */
@media (max-width: 1024px) {
    .page-histoire .histoire-section h2[style*="text-align: center"] {
        margin-bottom: 1.5rem !important;
    }
}

/* Commitment items - Padding réduit mobile */
@media (max-width: 767px) {
    .page-histoire .commitment-item {
        padding: 25px !important;
    }

    .page-histoire .challenge-card {
        padding: 30px 20px !important;
    }
}

/* ============================================================
   AMÉLIORATION GÉNÉRALE DE LA LISIBILITÉ
   ============================================================ */

@media (max-width: 1024px) {

    /* Espacement uniforme entre sections */
    .page-histoire .histoire-section {
        padding: 50px 0 !important;
    }

    /* Container étroit mieux adapté */
    .page-histoire .container-narrow {
        max-width: 100%;
        padding: 0 20px;
    }

    /* Meilleur contraste pour la lisibilité */
    .page-histoire main > section:not(.service-hero) p {
        color: #333 !important;
    }

    /* Titres plus élégants */
    .page-histoire main > section:not(.service-hero) h2 {
        color: #0B243E;
        font-family: 'Playfair Display', serif;
    }
}

/* Responsive pour très petits écrans */
@media (max-width: 360px) {
    .page-histoire main > section:not(.service-hero) h2 {
        font-size: 1.25rem !important;
    }

    .page-histoire main > section:not(.service-hero) p {
        font-size: 0.85rem !important;
    }
}