/* ==========================================================
   NGAZI TECHNOLOGIES
   PAGES PUBLIQUES DU MINI-CMS

   Exemples :
   /p/a-propos
   /p/services
   /p/realisations

   Ce fichier contient :
   - la présentation générale des pages du Mini-CMS ;
   - la hiérarchie typographique ;
   - les styles spécifiques utilisés par la page À propos ;
   - les règles responsive.

   IMPORTANT :
   Les couleurs utilisées correspondent uniquement
   à la palette officielle NGAZI.
   ========================================================== */


/* ==========================================================
   CONTENEUR PRINCIPAL
   ========================================================== */

.ngazi-cms-page {
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
}


/* ==========================================================
   EN-TÊTE DE LA PAGE CMS
   ========================================================== */

.ngazi-cms-page-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 2rem;
    padding: 2.25rem 2.5rem;
    background: radial-gradient( circle at 90% 10%, rgba(18, 184, 173, 0.12), transparent 30% ), var(--ngazi-surface, #F5FAFA);
    border: 1px solid var(--ngazi-border, #DCE5E8);
    border-radius: 1.2rem;
    box-shadow: 0 10px 26px rgba(0, 59, 87, 0.05);
}


    .ngazi-cms-page-header::after {
        position: absolute;
        z-index: -1;
        top: -100px;
        right: -90px;
        width: 250px;
        height: 250px;
        border: 38px solid rgba(18, 184, 173, 0.05);
        border-radius: 50%;
        content: "";
    }


    /* ==========================================================
   TITRE PRINCIPAL DE LA PAGE
   ==========================================================

   La taille reste importante, car il s'agit du H1,
   mais elle est volontairement limitée afin de ne pas
   écraser le reste du contenu.
   ========================================================== */

    .ngazi-cms-page-header h1 {
        max-width: 850px;
        margin-top: 0.45rem;
        margin-bottom: 0.7rem;
        color: var(--ngazi-text, #27343A);
        font-size: clamp(2rem, 3.5vw, 2.8rem);
        font-weight: 800;
        letter-spacing: -0.025em;
        line-height: 1.08;
    }


/* ==========================================================
   RÉSUMÉ DE LA PAGE
   ==========================================================

   Le résumé reste légèrement secondaire, mais doit
   conserver un contraste confortable.
   ========================================================== */

.ngazi-cms-page-summary {
    max-width: 850px;
    margin-bottom: 0;
    color: var(--ngazi-text, #27343A);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
}


/* ==========================================================
   CONTENU GÉNÉRAL DU MINI-CMS
   ========================================================== */

.ngazi-cms-page-content {
    color: var(--ngazi-text, #27343A);
    font-size: 1rem;
    line-height: 1.65;
}


    /* ==========================================================
   SECTIONS GÉNÉRIQUES

   Ces règles servent de présentation de secours pour
   les pages du CMS qui utilisent simplement <section>.
   ========================================================== */

    .ngazi-cms-page-content > section {
        margin-bottom: 2rem;
        padding: 1.75rem 2rem;
        background-color: var(--ngazi-white, #FFFFFF);
        border: 1px solid var(--ngazi-border, #DCE5E8);
        border-radius: 1rem;
        box-shadow: 0 7px 20px rgba(0, 59, 87, 0.04);
    }


        .ngazi-cms-page-content > section:last-child {
            margin-bottom: 0;
        }


    /* ==========================================================
   TITRES H2
   ========================================================== */

    .ngazi-cms-page-content h2 {
        position: relative;
        margin-top: 0;
        margin-bottom: 0.9rem;
        padding-left: 0.9rem;
        color: var(--ngazi-primary-dark, #00545A);
        font-size: clamp(1.45rem, 2.2vw, 1.85rem);
        font-weight: 800;
        letter-spacing: -0.015em;
        line-height: 1.2;
    }


        .ngazi-cms-page-content h2::before {
            position: absolute;
            top: 0.15em;
            bottom: 0.15em;
            left: 0;
            width: 3px;
            background: linear-gradient( 180deg, var(--ngazi-primary, #006A70), var(--ngazi-accent, #12B8AD) );
            border-radius: 999px;
            content: "";
        }


    /* ==========================================================
   TITRES H3
   ========================================================== */

    .ngazi-cms-page-content h3 {
        margin-top: 1rem;
        margin-bottom: 0.45rem;
        color: var(--ngazi-text, #27343A);
        font-size: 1.08rem;
        font-weight: 750;
        line-height: 1.3;
    }


    /* ==========================================================
   PARAGRAPHES
   ==========================================================

   CORRECTION IMPORTANTE :

   Le contenu principal n'utilise plus --ngazi-muted.

   #27343A est la couleur officielle principale du texte
   NGAZI et offre une lecture beaucoup plus confortable.

   --ngazi-muted reste réservé aux informations réellement
   secondaires.
   ========================================================== */

    .ngazi-cms-page-content p {
        margin-bottom: 0.9rem;
        color: var(--ngazi-text, #27343A);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.68;
    }


    .ngazi-cms-page-content section > p:last-child {
        margin-bottom: 0;
    }


    /* ==========================================================
   PETITS LABELS DE SECTION
   ========================================================== */

    .ngazi-cms-page-content .ngazi-section-eyebrow,
    .ngazi-cms-page-content .ngazi-card-label,
    .ngazi-cms-page-content .ngazi-about-positioning-label {
        color: var(--ngazi-primary, #006A70);
        font-size: 0.75rem;
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }


    /* ==========================================================
   LIENS
   ========================================================== */

    .ngazi-cms-page-content a {
        color: var(--ngazi-primary, #006A70);
        font-weight: 700;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }


        .ngazi-cms-page-content a:hover,
        .ngazi-cms-page-content a:focus {
            color: var(--ngazi-primary-dark, #00545A);
        }


    /* ==========================================================
   LISTES
   ========================================================== */

    .ngazi-cms-page-content ul,
    .ngazi-cms-page-content ol {
        margin-bottom: 0;
        padding-left: 1.4rem;
    }


    .ngazi-cms-page-content li {
        margin-bottom: 0.5rem;
        color: var(--ngazi-text, #27343A);
        line-height: 1.6;
    }


        .ngazi-cms-page-content li::marker {
            color: var(--ngazi-accent, #12B8AD);
        }


    /* ==========================================================
   PAGE À PROPOS
   INTRODUCTION / QUI SOMMES-NOUS
   ========================================================== */

    .ngazi-cms-page-content > .ngazi-about-intro-section {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.65fr);
        gap: 1.5rem;
        align-items: stretch;
        padding: 2rem;
    }


/* ==========================================================
   COLONNE PRINCIPALE
   ========================================================== */

.ngazi-about-intro-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


    .ngazi-about-intro-content h2 {
        max-width: 720px;
        margin: 0.5rem 0 1rem;
        font-size: clamp(1.45rem, 2.2vw, 1.85rem);
    }


    .ngazi-about-intro-content p {
        max-width: 760px;
        color: var(--ngazi-text, #27343A);
        font-size: 1rem;
        line-height: 1.68;
    }


    .ngazi-about-intro-content .ngazi-about-lead {
        color: var(--ngazi-text, #27343A);
        font-size: 1.03rem;
        font-weight: 500;
    }


/* ==========================================================
   BLOC NOTRE POSITIONNEMENT
   ========================================================== */

.ngazi-about-positioning {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 1.6rem;
    background: var(--ngazi-surface, #F5FAFA);
    border: 1px solid var(--ngazi-border, #DCE5E8);
    border-radius: 0.9rem;
}


    .ngazi-about-positioning::after {
        position: absolute;
        right: -55px;
        bottom: -55px;
        width: 130px;
        height: 130px;
        border: 22px solid var(--ngazi-accent-soft, #DDF7F4);
        border-radius: 50%;
        content: "";
        pointer-events: none;
    }


    .ngazi-about-positioning h3 {
        position: relative;
        z-index: 1;
        margin: 0 0 0.8rem;
        color: var(--ngazi-primary-dark, #00545A);
        font-size: 1.12rem;
        font-weight: 800;
        line-height: 1.3;
    }


    .ngazi-about-positioning p {
        position: relative;
        z-index: 1;
        color: var(--ngazi-text, #27343A);
        font-size: 0.96rem;
        line-height: 1.65;
    }


/* ==========================================================
   ÉTIQUETTES DU POSITIONNEMENT
   ========================================================== */

.ngazi-about-positioning-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.3rem;
}


    .ngazi-about-positioning-tags span {
        padding: 0.4rem 0.65rem;
        color: var(--ngazi-primary-dark, #00545A);
        background: var(--ngazi-white, #FFFFFF);
        border: 1px solid var(--ngazi-border, #DCE5E8);
        border-radius: 0.5rem;
        font-size: 0.78rem;
        font-weight: 700;
    }


/* ==========================================================
   MISSION + VISION
   ========================================================== */

.ngazi-cms-page-content > .ngazi-mission-vision-section {
    padding: 2rem;
}


.ngazi-mission-vision-section .ngazi-section-heading {
    max-width: 720px;
    margin: 0 auto 1.5rem;
    text-align: center;
}


    .ngazi-mission-vision-section .ngazi-section-heading h2 {
        margin: 0.4rem 0 0.55rem;
        padding-left: 0;
        font-size: clamp(1.4rem, 2vw, 1.7rem);
    }


        .ngazi-mission-vision-section .ngazi-section-heading h2::before {
            display: none;
        }


    .ngazi-mission-vision-section .ngazi-section-heading p {
        color: var(--ngazi-text, #27343A);
        font-size: 0.96rem;
        line-height: 1.6;
    }


/* ==========================================================
   GRILLE MISSION / VISION
   ========================================================== */

.ngazi-mission-vision-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}


/* ==========================================================
   CARTES MISSION / VISION
   ========================================================== */

.ngazi-mission-vision-card {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    background: var(--ngazi-surface, #F5FAFA);
    border: 1px solid var(--ngazi-border, #DCE5E8);
    border-radius: 0.85rem;
}


    .ngazi-mission-vision-card::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--ngazi-accent, #12B8AD);
        content: "";
    }


.ngazi-about-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 28px;
    margin-bottom: 0.8rem;
    padding: 0 0.55rem;
    color: var(--ngazi-primary, #006A70);
    background: var(--ngazi-accent-soft, #DDF7F4);
    border-radius: 0.45rem;
    font-size: 0.76rem;
    font-weight: 800;
}


.ngazi-mission-vision-card h3 {
    margin-top: 0.25rem;
    margin-bottom: 0.65rem;
    color: var(--ngazi-text, #27343A);
    font-size: 1.08rem;
    font-weight: 800;
}


.ngazi-mission-vision-card p {
    color: var(--ngazi-text, #27343A);
    font-size: 0.95rem;
    line-height: 1.62;
}


    .ngazi-mission-vision-card p:last-child {
        margin-bottom: 0;
    }


/* ==========================================================
   SECTIONS À PROPOS GÉNÉRIQUES
   ========================================================== */

.ngazi-cms-page-content > .ngazi-about-section {
    padding: 2rem;
}


.ngazi-about-section .ngazi-section-heading {
    margin-bottom: 1.4rem;
}


    .ngazi-about-section .ngazi-section-heading h2 {
        margin-top: 0.4rem;
        margin-bottom: 0.6rem;
        font-size: clamp(1.4rem, 2vw, 1.75rem);
    }


    .ngazi-about-section .ngazi-section-heading p {
        color: var(--ngazi-text, #27343A);
        font-size: 0.97rem;
        line-height: 1.65;
    }


/* ==========================================================
   GRILLE DES VALEURS / APPROCHE / EXPERTISES
   ========================================================== */

.ngazi-about-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}


/* Variante à deux colonnes. */
.ngazi-about-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* ==========================================================
   CARTES À PROPOS
   ========================================================== */

.ngazi-about-card {
    padding: 1.25rem;
    background: var(--ngazi-surface, #F5FAFA);
    border: 1px solid var(--ngazi-border, #DCE5E8);
    border-radius: 0.8rem;
}


    .ngazi-about-card h3 {
        margin-top: 0.15rem;
        margin-bottom: 0.5rem;
        color: var(--ngazi-text, #27343A);
        font-size: 1rem;
        font-weight: 800;
    }


    .ngazi-about-card p {
        margin-bottom: 0;
        color: var(--ngazi-text, #27343A);
        font-size: 0.92rem;
        line-height: 1.6;
    }


/* ==========================================================
   APPROCHE À 6 ÉTAPES
   ==========================================================

   Lorsque la section contient 6 cartes, la grille passe
   naturellement sur trois colonnes grâce à cette classe
   lorsqu'elle est ajoutée au HTML.
   ========================================================== */

.ngazi-about-grid.ngazi-about-process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* ==========================================================
   EXPERTISES
   ========================================================== */

.ngazi-about-grid.ngazi-about-expertise-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* ==========================================================
   BLOC ENGAGEMENT
   ========================================================== */

.ngazi-cms-page-content > .ngazi-about-commitment {
    padding: 1.75rem 2rem;
    background: var(--ngazi-surface, #F5FAFA);
}


.ngazi-about-commitment h2 {
    font-size: clamp(1.45rem, 2vw, 1.8rem);
}


.ngazi-about-commitment p {
    color: var(--ngazi-text, #27343A);
    font-size: 0.96rem;
}


/* ==========================================================
   CTA FINAL
   ========================================================== */

.ngazi-cms-page-content > .ngazi-about-cta {
    padding: 1.75rem 2rem;
    color: var(--ngazi-white, #FFFFFF);
    background: radial-gradient( circle at 90% 10%, rgba(18, 184, 173, 0.25), transparent 35% ), linear-gradient( 135deg, var(--ngazi-navy, #003B57), var(--ngazi-primary, #006A70) );
    border-color: transparent;
}


.ngazi-about-cta h2 {
    color: var(--ngazi-white, #FFFFFF);
    font-size: clamp(1.45rem, 2.1vw, 1.8rem);
}


.ngazi-about-cta p {
    color: var(--ngazi-white, #FFFFFF);
    font-size: 0.97rem;
    line-height: 1.6;
}


.ngazi-about-cta-button {
    display: inline-flex;
    min-height: 42px;
    margin-top: 0.25rem;
    padding: 0.6rem 1rem;
    align-items: center;
    justify-content: center;
    color: var(--ngazi-primary-dark, #00545A) !important;
    background: var(--ngazi-white, #FFFFFF);
    border-radius: 0.6rem;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none !important;
}


    .ngazi-about-cta-button:hover,
    .ngazi-about-cta-button:focus {
        color: var(--ngazi-primary-dark, #00545A) !important;
        background: var(--ngazi-accent-soft, #DDF7F4);
    }


/* ==========================================================
   IMAGES
   ========================================================== */

.ngazi-cms-page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.9rem;
    box-shadow: 0 10px 30px rgba(0, 59, 87, 0.08);
}


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

.ngazi-cms-page-content table {
    width: 100%;
    margin: 1.5rem 0;
    overflow: hidden;
    border-collapse: collapse;
    background: var(--ngazi-white, #FFFFFF);
    border: 1px solid var(--ngazi-border, #DCE5E8);
    border-radius: 0.8rem;
}


.ngazi-cms-page-content th,
.ngazi-cms-page-content td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--ngazi-border, #DCE5E8);
    text-align: left;
}


.ngazi-cms-page-content th {
    color: var(--ngazi-primary-dark, #00545A);
    background: var(--ngazi-surface, #F5FAFA);
    font-weight: 800;
}


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

.ngazi-cms-page-content a:focus-visible {
    outline: 3px solid rgba(18, 184, 173, 0.45);
    outline-offset: 3px;
}


/* ==========================================================
   RESPONSIVE — TABLETTES
   ========================================================== */

@media (max-width: 991.98px) {

    .ngazi-cms-page-header {
        padding: 2rem;
    }


    .ngazi-cms-page-content > section {
        padding: 1.5rem;
    }


    .ngazi-cms-page-content > .ngazi-about-intro-section {
        grid-template-columns: 1fr;
    }


    .ngazi-about-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


        .ngazi-about-grid.ngazi-about-process-grid,
        .ngazi-about-grid.ngazi-about-expertise-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
}


/* ==========================================================
   RESPONSIVE — PETITES TABLETTES
   ========================================================== */

@media (max-width: 767.98px) {

    .ngazi-mission-vision-grid {
        grid-template-columns: 1fr;
    }


    .ngazi-about-grid,
    .ngazi-about-grid-two,
    .ngazi-about-grid.ngazi-about-process-grid,
    .ngazi-about-grid.ngazi-about-expertise-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   RESPONSIVE — TÉLÉPHONES
   ========================================================== */

@media (max-width: 575.98px) {

    .ngazi-cms-page {
        width: 100%;
    }


    .ngazi-cms-page-header {
        margin-bottom: 1.25rem;
        padding: 1.4rem;
        border-radius: 1rem;
    }


        .ngazi-cms-page-header h1 {
            font-size: 2rem;
        }


    .ngazi-cms-page-summary {
        font-size: 0.96rem;
    }


    .ngazi-cms-page-content > section {
        margin-bottom: 1.25rem;
        padding: 1.25rem;
        border-radius: 0.9rem;
    }


    .ngazi-cms-page-content h2 {
        font-size: 1.4rem;
    }


    .ngazi-cms-page-content p {
        font-size: 0.96rem;
    }


    .ngazi-about-positioning {
        padding: 1.25rem;
    }


    .ngazi-about-cta-button {
        width: 100%;
    }
}


/* ==========================================================
   RÉDUCTION DES ANIMATIONS
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .ngazi-cms-page-content a {
        scroll-behavior: auto;
    }
}