/* ==========================================================
   NGAZI TECHNOLOGIES
   THÈME OFFICIEL DU SITE
   Compatible Bootstrap 5

   IMPORTANT :
   - Les couleurs officielles NGAZI sont conservées.
   - Ce fichier centralise l'identité visuelle générale.
   - Les tailles des titres ont été harmonisées afin
     d'éviter des titres disproportionnés.
   ========================================================== */


/* ==========================================================
   1. PALETTE OFFICIELLE NGAZI
   ========================================================== */

:root {
    /* Bleu pétrole foncé du logo */
    --ngazi-navy: #003B57;
    /* Turquoise principal */
    --ngazi-primary: #006A70;
    /* Variante sombre du turquoise principal */
    --ngazi-primary-dark: #005258;
    /* Turquoise moyen */
    --ngazi-secondary: #008E97;
    /* Turquoise clair / accent */
    --ngazi-accent: #12B8AD;
    /* Fond turquoise très clair */
    --ngazi-accent-light: #E8FAF8;
    /* Texte principal */
    --ngazi-text: #2E3B42;
    /* Texte secondaire */
    --ngazi-muted: #707E85;
    /* Bordures */
    --ngazi-border: #DCE5E8;
    /* Fond clair des sections */
    --ngazi-surface: #F6FAFA;
    /* Blanc */
    --ngazi-white: #FFFFFF;
    /* Ombres */
    --ngazi-shadow-sm: 0 5px 15px rgba(0, 59, 87, 0.06);
    --ngazi-shadow-md: 0 10px 30px rgba(0, 59, 87, 0.10);
    --ngazi-shadow-lg: 0 18px 45px rgba(0, 59, 87, 0.16);
}


/* ==========================================================
   2. BASE DU SITE
   ========================================================== */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--ngazi-white);
    color: var(--ngazi-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.6;
}

img {
    max-width: 100%;
}

a {
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}


/* ==========================================================
   3. NAVBAR
   ========================================================== */

.navbar-ngazi {
    background: linear-gradient( 90deg, var(--ngazi-primary-dark) 0%, var(--ngazi-primary) 55%, var(--ngazi-accent) 100% );
}


    /* ----------------------------------------------------------
   Logo et nom de l'entreprise
   ---------------------------------------------------------- */

    .navbar-ngazi .navbar-brand {
        color: var(--ngazi-white) !important;
        font-weight: 700;
        letter-spacing: 0.03em;
    }

        .navbar-ngazi .navbar-brand:hover,
        .navbar-ngazi .navbar-brand:focus {
            color: var(--ngazi-white) !important;
        }

        .navbar-ngazi .navbar-brand img {
            width: 42px;
            height: 42px;
            object-fit: contain;
        }

    .navbar-ngazi .navbar-brand-name {
        color: var(--ngazi-white);
        font-weight: 800;
        letter-spacing: 0.015em;
    }


    /* ----------------------------------------------------------
   Liens de navigation
   ---------------------------------------------------------- */

    .navbar-ngazi .nav-link {
        position: relative;
        margin-left: 0.35rem;
        color: rgba(255, 255, 255, 0.94) !important;
        font-weight: 500;
    }

        .navbar-ngazi .nav-link:hover,
        .navbar-ngazi .nav-link:focus {
            color: var(--ngazi-white) !important;
        }


        /*
   Petite ligne blanche affichée sous un lien
   lorsque l'utilisateur passe la souris dessus.
*/
        .navbar-ngazi .nav-link::after {
            content: "";
            position: absolute;
            right: 0.75rem;
            bottom: 0.3rem;
            left: 0.75rem;
            height: 2px;
            background-color: var(--ngazi-white);
            transform: scaleX(0);
            transform-origin: center;
            transition: transform 160ms ease;
        }

        .navbar-ngazi .nav-link:hover::after,
        .navbar-ngazi .nav-link:focus::after {
            transform: scaleX(1);
        }


    /* ----------------------------------------------------------
   Menu mobile
   ---------------------------------------------------------- */

    .navbar-ngazi .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.55);
    }

        .navbar-ngazi .navbar-toggler:focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
        }

    .navbar-ngazi .navbar-toggler-icon {
        filter: brightness(0) invert(1);
    }


    /* ----------------------------------------------------------
   Bouton Administration dans la navbar
   ---------------------------------------------------------- */

    .navbar-ngazi .btn-outline-light {
        font-size: 0.84rem;
        padding: 0.42rem 0.95rem;
        border-color: rgba(255, 255, 255, 0.65);
    }

        .navbar-ngazi .btn-outline-light:hover,
        .navbar-ngazi .btn-outline-light:focus {
            color: var(--ngazi-primary-dark);
            background-color: var(--ngazi-white);
            border-color: var(--ngazi-white);
        }


/* ==========================================================
   4. HERO DE LA PAGE D'ACCUEIL
   ========================================================== */

.ngazi-hero {
    position: relative;
    padding: 3rem 4rem;
    color: var(--ngazi-white);
    border-radius: 18px;
    background: radial-gradient( circle at 90% 18%, rgba(255, 255, 255, 0.14), transparent 26% ), linear-gradient( 120deg, var(--ngazi-primary-dark) 0%, var(--ngazi-primary) 48%, var(--ngazi-accent) 100% );
    box-shadow: var(--ngazi-shadow-md);
}


    /*
   Titre principal du site.

   Il doit rester le titre le plus important visuellement,
   mais nous limitons sa taille pour qu'il ne paraisse
   pas disproportionné par rapport au reste de la page.
*/
    .ngazi-hero h1 {
        max-width: 760px;
        margin-bottom: 1rem;
        font-size: clamp(2.25rem, 3.5vw, 3rem);
        font-weight: 800;
        line-height: 1.10;
        letter-spacing: -0.02em;
    }


/*
   Petit texte situé au-dessus du titre du Hero.
*/
.ngazi-eyebrow {
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.84);
}


/*
   Description principale située sous le titre du Hero.
*/
.ngazi-hero-description {
    max-width: 780px;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.91);
}


/*
   Slogan NGAZI.
*/
.ngazi-slogan {
    margin-bottom: 1.5rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.90);
}


/* ==========================================================
   5. BOUTONS NGAZI
   ========================================================== */

.btn-ngazi {
    color: var(--ngazi-white);
    background-color: var(--ngazi-primary);
    border-color: var(--ngazi-primary);
}

    .btn-ngazi:hover,
    .btn-ngazi:focus {
        color: var(--ngazi-white);
        background-color: var(--ngazi-primary-dark);
        border-color: var(--ngazi-primary-dark);
    }


/* ----------------------------------------------------------
   Bouton Bootstrap principal
   ---------------------------------------------------------- */

.btn-primary {
    color: var(--ngazi-white);
    background-color: var(--ngazi-primary);
    border-color: var(--ngazi-primary);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        color: var(--ngazi-white);
        background-color: var(--ngazi-primary-dark);
        border-color: var(--ngazi-primary-dark);
    }


/* ----------------------------------------------------------
   Bouton outline principal
   ---------------------------------------------------------- */

.btn-outline-primary {
    color: var(--ngazi-primary);
    border-color: var(--ngazi-primary);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active {
        color: var(--ngazi-white);
        background-color: var(--ngazi-primary);
        border-color: var(--ngazi-primary);
    }


/* ----------------------------------------------------------
   Bouton secondaire
   ---------------------------------------------------------- */

.btn-outline-secondary {
    color: var(--ngazi-primary-dark);
    border-color: var(--ngazi-border);
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:active {
        color: var(--ngazi-white);
        background-color: var(--ngazi-primary-dark);
        border-color: var(--ngazi-primary-dark);
    }


/* ----------------------------------------------------------
   Actions destructives
   ---------------------------------------------------------- */

.btn-outline-danger {
    color: #B42318;
    border-color: #D92D20;
}

    .btn-outline-danger:hover,
    .btn-outline-danger:focus,
    .btn-outline-danger:active {
        color: var(--ngazi-white);
        background-color: #B42318;
        border-color: #B42318;
    }


/* ----------------------------------------------------------
   Boutons du Hero
   ---------------------------------------------------------- */

.ngazi-hero .btn {
    min-width: 180px;
}

.ngazi-hero .btn-outline-light:hover,
.ngazi-hero .btn-outline-light:focus {
    color: var(--ngazi-primary-dark);
    background-color: var(--ngazi-white);
}


/* ==========================================================
   6. CARTES DES POINTS FORTS
   ========================================================== */

.ngazi-highlight-card {
    height: 100%;
    padding: 1.5rem 1rem;
    background-color: var(--ngazi-white);
    border: 1px solid var(--ngazi-border);
    border-radius: 14px;
    box-shadow: var(--ngazi-shadow-sm);
}


/*
   Valeurs importantes :
   15+, .NET, Azure, 360°, etc.
*/
.ngazi-highlight-value {
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 800;
    line-height: 1;
    color: var(--ngazi-primary);
}

.ngazi-highlight-label {
    margin-top: 0.65rem;
    font-size: 0.92rem;
    color: var(--ngazi-muted);
}


/* ==========================================================
   7. TITRES DES SECTIONS
   ========================================================== */

/*
   Petit titre situé au-dessus du H2.

   Exemples :
   - Nos domaines d'intervention
   - Secteurs d'activité
   - Notre méthodologie
*/
.ngazi-section-kicker {
    display: inline-block;
    color: var(--ngazi-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/*
   Titre principal standard des sections.

   Cette taille remplace visuellement la taille très grande
   fournie par Bootstrap avec "display-6".

   Cela permet d'avoir la même hiérarchie typographique
   sur toute la page d'accueil.
*/
.ngazi-title {
    color: var(--ngazi-text);
    font-size: clamp(1.8rem, 2.6vw, 2.25rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.015em;
}


/*
   Description située sous les titres des sections.
*/
.ngazi-section-description {
    max-width: 720px;
    color: var(--ngazi-muted);
}


/* ==========================================================
   8. HARMONISATION DES AUTRES H2
   ========================================================== */

/*
   Certaines sections utilisent directement la classe
   Bootstrap "display-6" sans la classe .ngazi-title.

   Nous harmonisons donc ces titres avec les autres H2.

   IMPORTANT :
   Cette règle ne modifie aucune couleur.
*/
.ngazi-why-section h2,
.ngazi-cta h2,
.ngazi-careers-section h2 {
    font-size: clamp(1.8rem, 2.6vw, 2.25rem);
    line-height: 1.18;
}


/* ==========================================================
   9. CARTES DES SERVICES
   ========================================================== */

.ngazi-service-card {
    height: 100%;
    overflow: hidden;
    background-color: var(--ngazi-white);
    border: 1px solid var(--ngazi-border);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 59, 87, 0.05);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

    .ngazi-service-card:hover {
        transform: translateY(-6px);
        border-color: var(--ngazi-accent);
        box-shadow: var(--ngazi-shadow-md);
    }


/*
   Numéros 01, 02, 03...
*/
.ngazi-service-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1.1rem;
    color: var(--ngazi-primary);
    background-color: var(--ngazi-accent-light);
    border-radius: 12px;
    font-weight: 800;
}


/* ==========================================================
   10. TITRES DES CARTES
   ========================================================== */

/*
   Titres importants des cartes Innovation et Réalisations.
   Ils restent volontairement plus petits que les H2.
*/
.ngazi-innovation-card h3,
.ngazi-project-card h3 {
    font-size: 1.35rem;
    line-height: 1.30;
}


/*
   Titres standards des autres cartes.
*/
.ngazi-service-card h3,
.ngazi-industry-card h3,
.ngazi-benefit h3,
.ngazi-process-step h3,
.ngazi-career-option h3 {
    line-height: 1.30;
}


/* ==========================================================
   11. POURQUOI NGAZI
   ========================================================== */

.ngazi-why-section {
    background-color: var(--ngazi-surface);
    border: 1px solid var(--ngazi-border);
    border-radius: 18px;
}

.ngazi-benefit {
    height: 100%;
    padding: 1.25rem;
    background-color: var(--ngazi-white);
    border-left: 5px solid var(--ngazi-accent);
    border-radius: 12px;
    box-shadow: var(--ngazi-shadow-sm);
}


/* ==========================================================
   12. APPEL À L'ACTION
   ========================================================== */

.ngazi-cta {
    color: var(--ngazi-white);
    background: linear-gradient( 120deg, var(--ngazi-navy), var(--ngazi-primary), var(--ngazi-secondary) );
    border-radius: 18px;
    box-shadow: var(--ngazi-shadow-md);
}


    /*
   Le titre doit rester blanc sur le fond NGAZI.
*/
    .ngazi-cta h2 {
        color: var(--ngazi-white);
    }


    /*
   Texte descriptif du CTA.
*/
    .ngazi-cta p {
        max-width: 780px;
        color: rgba(255, 255, 255, 0.88);
    }


/* ==========================================================
   13. CARTES GÉNÉRIQUES
   ========================================================== */

.card {
    border-radius: 15px;
}


/* ==========================================================
   14. FOOTER
   ========================================================== */

.ngazi-footer {
    margin-top: 4rem;
    color: rgba(255, 255, 255, 0.84);
    background: linear-gradient( 110deg, var(--ngazi-navy) 0%, var(--ngazi-primary-dark) 55%, var(--ngazi-primary) 100% );
}


    /*
   Titres du footer.
*/
    .ngazi-footer h2,
    .ngazi-footer h5,
    .ngazi-footer .fw-bold {
        color: var(--ngazi-white);
    }


    /*
   Paragraphes du footer.
*/
    .ngazi-footer p {
        color: rgba(255, 255, 255, 0.80);
    }


.ngazi-footer-tagline {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.72);
}


.ngazi-footer-links {
    margin-bottom: 0;
}


    .ngazi-footer-links li {
        margin-bottom: 0.55rem;
        color: rgba(255, 255, 255, 0.80);
    }


    .ngazi-footer-links a {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
    }


        .ngazi-footer-links a:hover,
        .ngazi-footer-links a:focus {
            color: var(--ngazi-white);
            text-decoration: underline;
        }


.ngazi-footer-separator,
.ngazi-footer hr {
    margin: 2rem 0 1.25rem;
    border-color: rgba(255, 255, 255, 0.20);
}


/* ==========================================================
   15. FORMULAIRES
   ========================================================== */

.form-control,
.form-select {
    border-color: var(--ngazi-border);
    border-radius: 0.65rem;
}


    .form-control:focus,
    .form-select:focus {
        border-color: var(--ngazi-accent);
        box-shadow: 0 0 0 0.2rem rgba(18, 184, 173, 0.18);
    }


/* ==========================================================
   16. RESPONSIVE — TABLETTES
   ========================================================== */

@media (max-width: 991.98px) {

    /*
       Menu de navigation mobile/tablette.
    */
    .navbar-ngazi .navbar-collapse {
        padding-top: 1rem;
        padding-bottom: 0.5rem;
    }


    .navbar-ngazi .nav-link {
        margin-left: 0;
        padding: 0.65rem 0;
    }


        /*
       Sur mobile/tablette, la ligne animée sous
       les liens de navigation n'est pas nécessaire.
    */
        .navbar-ngazi .nav-link::after {
            display: none;
        }


    /*
       Hero plus compact.
    */
    .ngazi-hero {
        padding: 2.5rem 2rem;
        text-align: center;
    }


        .ngazi-hero h1,
        .ngazi-hero-description {
            margin-right: auto;
            margin-left: auto;
        }


        /*
       Centre les boutons du Hero.
    */
        .ngazi-hero .d-flex {
            justify-content: center;
        }


    /*
       Réduit légèrement l'espace avant le footer.
    */
    .ngazi-footer {
        margin-top: 3rem;
    }
}


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

@media (max-width: 575.98px) {

    /*
       Nom de l'entreprise dans la navbar.
    */
    .navbar-ngazi .navbar-brand-name {
        max-width: 185px;
        font-size: 0.88rem;
        line-height: 1.1;
        white-space: normal;
    }


    /*
       Logo légèrement plus petit sur téléphone.
    */
    .navbar-ngazi .navbar-brand img {
        width: 36px;
        height: 36px;
    }


    /*
       Hero adapté aux petits écrans.
    */
    .ngazi-hero {
        padding: 2rem 1.25rem;
        border-radius: 14px;
    }


        /*
       Titre principal du Hero sur téléphone.
    */
        .ngazi-hero h1 {
            font-size: 2.05rem;
            line-height: 1.12;
        }


    /*
       Description du Hero.
    */
    .ngazi-hero-description {
        font-size: 1rem;
        line-height: 1.55;
    }


    /*
       Les boutons occupent toute la largeur disponible.
    */
    .ngazi-hero .btn {
        width: 100%;
        min-width: 0;
    }


    /*
       Cartes des points forts.
    */
    .ngazi-highlight-card {
        padding: 1.2rem 0.75rem;
    }


    .ngazi-highlight-label {
        font-size: 0.84rem;
    }


    /*
       Titres des sections sur téléphone.
    */
    .ngazi-title,
    .ngazi-why-section h2,
    .ngazi-cta h2,
    .ngazi-careers-section h2 {
        font-size: 1.75rem;
        line-height: 1.20;
    }


    /*
       Cartes de la section Pourquoi NGAZI.
    */
    .ngazi-benefit {
        padding: 1rem;
    }


    /*
       CTA légèrement moins arrondi sur téléphone.
    */
    .ngazi-cta {
        border-radius: 14px;
    }


    /*
       Footer plus proche du contenu sur téléphone.
    */
    .ngazi-footer {
        margin-top: 2.5rem;
    }
}


/* ==========================================================
   18. ACCESSIBILITÉ
   ========================================================== */

/*
   Si l'utilisateur a demandé à son système de réduire
   les animations, nous respectons cette préférence.
*/
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}