/**
 * TEXT ALIGNMENT IMPROVEMENTS - Frontend Afrokwary
 * =================================================
 * Règles d'alignement intelligent pour une meilleure lisibilité
 * Respecte 100% la charte graphique (couleurs, typographie, backgrounds)
 * Focus uniquement sur l'alignement des textes
 */

/* ========================================================= */
/* RÈGLES GÉNÉRALES D'ALIGNEMENT                            */
/* ========================================================= */

/* Par défaut : alignement à gauche pour meilleure lisibilité */
body,
p,
li,
div {
    text-align: left;
}

/* ========================================================= */
/* HERO SECTION - Alignement spécial                        */
/* ========================================================= */

.hero {
    text-align: left;
}

.hero h1,
.hero-content h1 {
    text-align: left;
}

.hero p,
.hero-content p {
    text-align: left;
    max-width: 600px;
}

/* CTA buttons centrés dans le hero */
.hero .cta-button-container {
    text-align: left;
}

/* ========================================================= */
/* TITRES - Toujours alignés à gauche                       */
/* ========================================================= */

h1, h2, h3, h4, h5, h6,
.section-title h1,
.section-title h2,
.section-header h1,
.section-header h2 {
    text-align: left;
}

/* Exception : Titres centrés pour certaines sections */
.latest-news .section-title h2,
.text-center h1,
.text-center h2,
.text-center h3 {
    text-align: center;
}

/* ========================================================= */
/* PARAGRAPHES - Alignement intelligent selon contexte      */
/* ========================================================= */

/* Paragraphes courts (< 3 lignes estimées) : left */
p {
    text-align: left;
    hyphens: manual;
}

/* Paragraphes longs (contenu éditorial) : justify sur desktop uniquement */
.article-content p,
.long-content p,
.editorial-content p,
.content-section p,
.about-content p,
.main-content-px p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* Premier paragraphe après titre : toujours left pour impact */
h1 + p,
h2 + p,
h3 + p {
    text-align: left;
    hyphens: manual;
}

/* Paragraphes courts (dans cards, hero, etc) : left */
.news-card p,
.program-card p,
.programme-item p,
.hero p,
.hero-content p {
    text-align: left;
    hyphens: manual;
}

/* ========================================================= */
/* LISTES - Toujours alignées à gauche                      */
/* ========================================================= */

ul, ol,
.styled-list,
ul li,
ol li {
    text-align: left;
}

/* Exception pour listes centrées explicitement */
.text-center ul,
.text-center ol {
    text-align: center;
}

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

/* ========================================================= */
/* SECTIONS SPÉCIFIQUES                                      */
/* ========================================================= */

/* About Section */
.about-us p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.about-us h1,
.about-us h2,
.about-us h3 {
    text-align: left;
}

/* Why Afrokwary - Slider */
.why-afrokwary .slide-content h3 {
    text-align: left;
}

.why-afrokwary .slide-content p {
    text-align: left;
    max-width: 100%;
}

/* Programmes Section */
.our-programmes .section-title {
    text-align: left;
}

.programme-item h3 {
    text-align: left;
}

.programme-item p {
    text-align: left;
}

/* Latest News Section */
.latest-news .section-title {
    text-align: center;
}

.news-card h3 {
    text-align: left;
}

.news-card p,
.news-date {
    text-align: left;
}

/* ========================================================= */
/* PAGES DE PROGRAMMES ET DÉTAILS                           */
/* ========================================================= */

.page-container-px {
    text-align: left;
}

.page-container-px h1,
.page-container-px h2,
.page-container-px h3 {
    text-align: left;
}

/* Contenu long : justify sur desktop */
.page-container-px .main-content-px p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.page-container-px .styled-list li {
    text-align: left;
}

/* Section header action */
.section-header-action h2 {
    text-align: left;
}

/* ========================================================= */
/* FOOTER                                                    */
/* ========================================================= */

footer,
.footer-main {
    text-align: left;
}

.footer-main h2,
.footer-main h3 {
    text-align: left;
}

.footer-main p {
    text-align: left;
}

/* Copyright - centré */
.copyright-content {
    text-align: center;
}

/* ========================================================= */
/* FORMS                                                     */
/* ========================================================= */

form {
    text-align: left;
}

.form-label,
label {
    text-align: left;
}

.form-control,
input,
textarea,
select {
    text-align: left;
}

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

nav,
.navbar,
header {
    text-align: left;
}

.nav-link {
    text-align: left;
}

/* Navigation mobile - peut être centrée */
@media (max-width: 991px) {
    .navbar-collapse {
        text-align: center;
    }

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

/* ========================================================= */
/* SIDEBAR NAVIGATION                                        */
/* ========================================================= */

.sidebar-nav-px {
    text-align: left;
}

.sidebar-nav-px .nav-link {
    text-align: left;
}

/* ========================================================= */
/* CARDS ET COMPOSANTS                                       */
/* ========================================================= */

/* Cards - contenu aligné à gauche */
.card,
.news-card,
.program-card,
.programme-item {
    text-align: left;
}

.card-title,
.card-text {
    text-align: left;
}

/* ========================================================= */
/* BOUTONS ET CTA                                            */
/* ========================================================= */

/* Boutons : texte centré à l'intérieur */
button,
.btn,
.btn-action,
.btn-submit,
.read-more-btn,
.contact-btn,
.cta-button {
    text-align: center;
}

/* Container de boutons : peut être left, center ou right selon contexte */
.button-container {
    text-align: left;
}

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

/* ========================================================= */
/* RESPONSIVE - MOBILE FIRST                                 */
/* ========================================================= */

/* Mobile : JAMAIS de justify (mauvaise lisibilité) */
@media (max-width: 768px) {
    /* Désactive justify sur mobile */
    p,
    .article-content p,
    .long-content p,
    .editorial-content p,
    .content-section p,
    .about-content p,
    .main-content-px p,
    .about-us p,
    .page-container-px .main-content-px p {
        text-align: left !important;
        hyphens: manual !important;
        text-justify: none !important;
    }

    /* Paragraphes dans cards : left */
    .program-card p,
    .news-card p,
    .programme-item p {
        text-align: left !important;
    }

    /* Why section */
    .why-afrokwary .slide-content h3,
    .why-afrokwary .slide-content p {
        text-align: left !important;
    }

    /* Titres : left sur mobile */
    h1, h2, h3, h4, h5, h6 {
        text-align: left !important;
    }

    /* Exception : titres explicitement centrés */
    .latest-news .section-title h2,
    .text-center h1,
    .text-center h2 {
        text-align: center !important;
    }
}

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

@media (min-width: 768px) and (max-width: 991px) {
    /* Justify autorisé sur tablette pour contenu long */
    .article-content p,
    .long-content p,
    .main-content-px p,
    .page-container-px .main-content-px p {
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
    }

    /* Mais pas pour les cards */
    .program-card p,
    .news-card p,
    .programme-item p {
        text-align: left;
    }
}

/* ========================================================= */
/* DESKTOP (> 992px)                                         */
/* ========================================================= */

@media (min-width: 992px) {
    /* Justify pour contenu éditorial long */
    .article-content p,
    .long-content p,
    .editorial-content p,
    .content-section p,
    .about-content p,
    .main-content-px p,
    .about-us p,
    .page-container-px .main-content-px p {
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    }

    /* Limite largeur pour paragraphes longs */
    .article-content p,
    .long-content p {
        max-width: 75ch; /* 75 caractères max pour lisibilité optimale */
    }

    /* Paragraphes courts : left */
    .hero p,
    .news-card p,
    .program-card p,
    .programme-item p {
        text-align: left;
    }
}

/* ========================================================= */
/* ACCESSIBILITÉ                                             */
/* ========================================================= */

/* Pour les utilisateurs avec dyslexie : toujours left */
@media (prefers-reduced-motion: reduce) {
    * {
        text-align: left !important;
        hyphens: manual !important;
    }

    /* Exceptions pour éléments centrés par design */
    .text-center,
    .copyright-content,
    .latest-news .section-title {
        text-align: center !important;
    }

    /* Boutons restent centrés */
    button,
    .btn,
    .read-more-btn {
        text-align: center !important;
    }
}

/* ========================================================= */
/* CLASSES UTILITAIRES                                       */
/* ========================================================= */

/* Classes pour forcer l'alignement si nécessaire */
.text-left {
    text-align: left !important;
}

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

.text-right {
    text-align: right !important;
}

.text-justify {
    text-align: justify !important;
    text-justify: inter-word !important;
    hyphens: auto !important;
}

/* Classes responsive */
@media (max-width: 768px) {
    .text-left-mobile {
        text-align: left !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }
}

@media (min-width: 769px) {
    .text-left-desktop {
        text-align: left !important;
    }

    .text-center-desktop {
        text-align: center !important;
    }

    .text-justify-desktop {
        text-align: justify !important;
        hyphens: auto !important;
    }
}

/* ========================================================= */
/* PRINT STYLES                                              */
/* ========================================================= */

@media print {
    /* Pour l'impression : tout à gauche sauf titres centrés */
    * {
        text-align: left !important;
    }

    h1, h2 {
        text-align: left !important;
    }

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

/* ========================================================= */
/* NOTES IMPORTANTES                                         */
/* ========================================================= */

/*
RÈGLES D'ALIGNEMENT INTELLIGENT APPLIQUÉES :

1. TITRES (H1-H6) : Toujours LEFT
   - Meilleure lisibilité
   - Standard web moderne
   - Exception : Titres de sections centrés explicitement

2. PARAGRAPHES COURTS (< 3 lignes) : LEFT
   - Hero, cards, intro
   - Meilleure lisibilité
   - Évite les espaces irréguliers

3. PARAGRAPHES LONGS (contenu éditorial) : JUSTIFY
   - Sur desktop uniquement (> 992px)
   - Avec hyphens auto
   - Apparence professionnelle
   - Meilleure utilisation de l'espace

4. MOBILE (< 768px) : TOUJOURS LEFT
   - Justify illisible sur petits écrans
   - Espaces irréguliers problématiques
   - Standard UX mobile

5. LISTES : TOUJOURS LEFT
   - Clarity et scannabilité
   - Standard de design

6. BOUTONS : CENTER (texte à l'intérieur)
   - Container de boutons : selon contexte

7. NAVIGATION : LEFT (desktop) / CENTER (mobile)

8. FOOTER : LEFT (contenu) / CENTER (copyright)

COULEURS, TYPOGRAPHIE, BACKGROUNDS : 100% INCHANGÉS
Seul l'alignement des textes est amélioré.
*/