h1, h2 {
    color: #7cb316 !important; /* Bleu JARS pour les grands titres */
    font-weight: 800;
}

h3, h4, h5 {
    color: #7cb316 !important; /* Vert pour les sous-titres et l'innovation */
}

.text-color-custom {
    color: #65a804; /* la couleur que tu veux */
}


.text-color-custom {
    color:  #65a804; /* Ta couleur */
}
.text-color-custom:hover {
    color: #30499b; /* Couleur au survol si tu veux */
}



/* Fond gris très clair pour toute la largeur */
.bg-light-jars {
    background-color: #f4f7f9 !important;
}

/* Bordure personnalisée JARS pour les cartes */
.border-custom-jars {
    border: 2px solid #e0e0e0 !important;
    border-radius: 15px !important;
    transition: all 0.3s ease;
}

/* Changement de bordure au survol (Bleu JARS) */
.custom-card-hover:hover {
    border-color: #1b67a4 !important;
    transform: translateY(-5px);
}

/* Bordure interne du cercle image (Vert JARS) */
.border-inner-jars {
    border: 3px solid #7cb316 !important;
}

/* Barre d'accentuation sous le titre */
.custom-hr {
    width: 70px;
    height: 3px;
    background: linear-gradient(90deg, #1b67a4 0%, #7cb316 100%);
    border: none;
    opacity: 1;
}

/* Couleur du texte des titres (Bleu JARS) */
.text-color-primary {
    color: #1b67a4 !important;
}

/* Même hauteur pour tous les items du carousel */
.owl-carousel .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Le corps de la carte prend toute la hauteur */
.owl-carousel .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Le texte reste aligné en bas */
.owl-carousel .card-body .card-body {
    margin-top: auto;
}

/* Taille identique pour toutes les images */
.owl-carousel .card-img-top {
    width: 100%;
    height: 180px; /* ajuste si tu veux plus grand */
    object-fit: cover;
}

/* --- STYLE SOLUTIONS JARS --- */

.custom-solution-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border-radius: 15px !important;
    background: #fff !important;
}

.custom-solution-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 25px rgba(0,0,0,0.1) !important;
}

.solution-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    min-height: 250px !important;
}

.solution-text-container {
    overflow-y: auto;
    max-height: 120px !important; /* Hauteur fixe pour aligner les boutons */
    padding-right: 8px !important;
}

/* Scrollbar Vert Jars */
.solution-text-container::-webkit-scrollbar {
    width: 4px !important;
}
.solution-text-container::-webkit-scrollbar-thumb {
    background: #7DB523 !important;
    border-radius: 10px !important;
}

/* Boutons */
.btn-jars-primary {
    background-color: #161f4a !important;
    color: white !important;
    border: none !important;
}
.btn-jars-primary:hover {
    background-color: #7DB523 !important;
}

.btn-jars-outline {
    border: 1px solid #7DB523 !important;
    color: #161f4a !important;
}
.btn-jars-outline:hover {
    background-color: #7DB523 !important;
    color: white !important;
}

.jars-separator {
    width: 70px !important;
    height: 3px !important;
    background-color: #7DB523 !important;
    border: none !important;
    opacity: 1 !important;
    margin: 0 auto !important;
}


/* --- SECTION COMPTEURS AVEC IMAGE --- */

.custom-counter-section {
    position: relative;
    /* Remplacez l'URL si vous n'utilisez pas le mode parallax de Porto */
    background-image: url('../img/clients/client-5.jpg'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Effet parallax simple si pas de JS */
    padding: 60px 0;
}

/* Overlay sombre pour faire ressortir le texte blanc */
.custom-counter-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(22, 31, 74, 0.85); /* Bleu JARS très sombre avec transparence */
    z-index: 1;
}

/* On remet le contenu au dessus de l'overlay */
.custom-counter-section .container {
    position: relative;
    z-index: 2;
}

/* Style des items du compteur */
.custom-counter-item {
    transition: transform 0.3s ease;
}

.custom-counter-item:hover {
    transform: translateY(-5px);
}

.custom-counter-item strong {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Optionnel : petite barre verte sous les chiffres */
.custom-counter-item::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background: #7DB523; /* Vert Jars */
    margin: 10px auto 0;
    border-radius: 10px;
}




/* Espacement de la section globale */
body .custom-counter-section {
    padding: 80px 0 !important; /* Augmente l'espace en haut et en bas de la section */
}

/* Force l'empilement et l'espacement des éléments */
body .custom-counter-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px !important; /* Espace interne pour chaque bloc */
}

/* Style de l'icône avec plus d'espace en dessous */
body .counter-icon {
    display: block !important;
    font-size: 3.5rem !important;
    color: #7DB523 !important;
    margin-bottom: 25px !important; /* Espace généreux sous l'icône */
}

/* Espace entre le chiffre et le texte du bas */
body .custom-counter-item strong {
    display: block !important;
    margin-bottom: 15px !important; /* Espace entre le chiffre (100+) et le texte (Réalisations) */
    font-size: 3.5rem !important;
}

/* Style du label (le texte) */
body .custom-counter-item label {
    margin-top: 5px !important;
    letter-spacing: 2px !important; /* Rend le texte plus élégant */
    text-transform: uppercase;
}


/* Supprime tout espace sous la section des compteurs */
body .custom-counter-section {
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

/* Supprime tout espace au-dessus du footer */
body #footer {
    margin-top: 0 !important;
    border-top: none !important;
}

/* Réduction de la hauteur globale de la section */
body .custom-counter-section {
    padding: 30px 0 !important; /* On passe de 80px à 30px */
}

/* On réduit l'espace interne des items */
body .custom-counter-item {
    padding: 10px !important; /* On passe de 20px à 10px */
}

/* On réduit la taille de l'icône et son espace */
body .counter-icon {
    font-size: 2.2rem !important; /* Plus petit */
    margin-bottom: 10px !important; /* Moins d'espace sous l'icône */
}

/* On réduit la taille du chiffre et son espace */
body .custom-counter-item strong {
    font-size: 2.5rem !important; /* On passe de 3.5rem à 2.5rem */
    margin-bottom: 5px !important;  /* Espace réduit */
}

/* On réduit la taille du texte */
body .custom-counter-item label {
    font-size: 0.8rem !important;
    letter-spacing: 1px !important;
}









/* Taille fixe pour les drapeaux du footer */
.flag-icon {
    width: 35px !important;
    height: auto !important;
    border: 1px solid #ddd; /* Petit contour pour faire ressortir le drapeau */
    border-radius: 2px;
    display: inline-block;
    margin-bottom: 10px !important;
}

/* Amélioration de la visibilité des numéros */
.text-color-dark strong {
    color: #161f4a !important; /* Bleu foncé pour contraste */
    font-size: 1.1rem;
}

/* Alignement mobile */
@media (max-width: 767px) {
    .col-md-4 {
        margin-bottom: 30px !important;
    }
}








/* Couleur Vert Vif pour la visibilité */
.btn-jars-visible {
    background-color: #7DB523 !important; /* Vert JARS */
    border-color: #7DB523 !important;
    color: #FFFFFF !important; /* Texte en blanc pour le contraste */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important; /* Ombre pour le faire ressortir */
}

/* Effet au survol */
.btn-jars-visible:hover {
    background-color: #FFFFFF !important; /* Devient blanc au survol */
    border-color: #FFFFFF !important;
    color: #161f4a !important; /* Texte devient bleu foncé au survol */
}



/* --- CONFIGURATION DES CARTES JARS (OPTIMISÉE) --- */

/* 1. Structure du Carrousel : Force la hauteur égale sur toutes les colonnes */
.owl-carousel .owl-stage {
    display: flex !important;
}

.owl-carousel .owl-item {
    display: flex !important;
    height: auto !important;
}

/* 2. Style de la Carte : Bordure Bleue JARS par défaut */
.custom-card-style-1 {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100% !important;
    background-color: #ffffff;
    border-radius: 15px !important;
    transition: all 0.4s ease-in-out;
    
    /* Bordure initiale en BLEU JARS */
    border: 3px solid #161f4a !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 3. Contenu de la Carte : Alignement vertical */
.custom-card-style-1 .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 30px !important;
}

/* 4. États au Survol (Hover) : Passage au VERT JARS */
.custom-card-style-1:hover {
    border-color: #7DB523 !important; 
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(22, 31, 74, 0.2);
}

/* 5. Éléments graphiques (Chiffres et Icônes) */
.custom-card-style-1 h2 {
    color: #161f4a !important; /* Bleu JARS */
    font-size: 3rem !important;
    font-weight: 800;
}

.svg-fill-color-primary {
    fill: #7DB523 !important; /* Vert JARS */
}







/* Empêche le titre de toucher le haut sur mobile */
@media (max-width: 991px) {
    .position-absolute {
        padding: 40px 15px !important;
    }
    h1 {
        font-size: 2.5rem !important;
        margin-top: 20px;
    }
}

/* Style du bouton pour qu'il respire */
.custom-btn-jars {
    background-color: #7DB523 !important;
    border: none !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.custom-btn-jars:hover {
    transform: translateY(-3px);
    background-color: #161f4a !important;
}




















/* Palette de couleurs basée sur un logo type Tech/Corporate */
:root {
    --primary-color: #0056b3;    /* Bleu Logo */
    --accent-color: #00d4ff;     /* Cyan pour le survol */
    --bg-light-grey: #f4f7f6;    /* Fond des cartes */
    --text-dark: #212529;
}

/* Container des cartes */
.custom-card {
    transition: all 0.3s ease-in-out;
    background-color: var(--bg-light-grey) !important;
    border-radius: 12px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.custom-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}

/* TAILLE UNIQUE DES IMAGES */
.card-img-container {
    height: 200px; /* Hauteur fixe imposée */
    width: 100%;
    overflow: hidden;
    background: #e0e0e0;
}

.card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Important: remplit l'espace sans déformer */
    transition: transform 0.5s ease;
}

.custom-card:hover .card-img-top {
    transform: scale(1.1);
}

/* ALIGNEMENT DU CONTENU */
.card-body-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Force le corps à prendre toute la place */
}

.card-title-link {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s;
    font-size: 1.1rem;
}

.card-title-link:hover {
    color: var(--primary-color);
}

.card-text {
    font-size: 0.9rem;
    color: #666;
    flex-grow: 1; /* Pousse le footer/lien vers le bas */
}

/* Petit trait décoratif sous le titre */
.title-divider {
    width: 30px;
    height: 3px;
    background-color: var(--primary-color);
    margin-bottom: 15px;
}




/* carriere */






:root {
    --jars-blue: #0274be;
    --jars-green: #7dbb00;
    --jars-dark: #1a1a1a;
    --jars-bg: #f4f7f6;
}

/* Section & Background */
.section-jteam {
    background-color: var(--jars-bg) !important;
    padding: 80px 0;
}

/* Carte du formulaire */
.card-recruitment {
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
    overflow: hidden;
}

/* En-tête de la carte avec une ligne verte */
.card-recruitment::before {
    content: "";
    display: block;
    height: 8px;
    background: var(--jars-green);
}

/* Style des champs (Inputs) */
.custom-input {
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #cbd5e0 !important; /* Bordure grise par défaut */
    border-radius: 8px !important;
    padding: 12px 15px !important;
    transition: all 0.3s ease;
    background: #ffffff !important;
}

.custom-input:focus {
    border-left-color: var(--jars-green) !important; /* Devient vert au clic */
    box-shadow: 0 5px 15px rgba(125, 187, 0, 0.1) !important;
    transform: translateX(5px);
}

/* Bouton "Postuler" */
.btn-jteam {
    background: var(--jars-blue) !important;
    border: none !important;
    color: white !important;
    padding: 15px 40px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 20px rgba(2, 116, 190, 0.3) !important;
}

.btn-jteam:hover {
    background: var(--jars-green) !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(125, 187, 0, 0.4) !important;
}

/* Badge Carrières */
.career-badge {
    background: white;
    color: var(--jars-blue);
    padding: 5px 15px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    font-size: 0.8rem;
    display: inline-block;
}


/* contact */

:root {
    --jars-blue: #0274be;
    --jars-green: #7dbb00;
}

/* Style des champs de saisie */
.form-control {
    border: 1px solid #ececec !important;
    background-color: #f9f9f9 !important;
    border-radius: 10px !important;
    padding: 12px 18px !important;
    transition: all 0.3s ease;
}

.form-control:focus {
    background-color: #fff !important;
    border-color: var(--jars-blue) !important;
    box-shadow: 0 10px 20px rgba(2, 116, 190, 0.05) !important;
    transform: translateY(-2px);
}

/* Bouton Envoyer avec dégradé */
.btn-send {
    background: linear-gradient(135deg, var(--jars-blue) 0%, #014a7a 100%) !important;
    border: none !important;
    border-radius: 50px !important;
    color: white !important;
    letter-spacing: 1px;
    box-shadow: 0 8px 15px rgba(2, 116, 190, 0.2) !important;
    transition: all 0.3s ease !important;
}

.btn-send:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 20px rgba(2, 116, 190, 0.3) !important;
}

/* Icônes de contact personnalisées */
.contact-icon-box {
    width: 45px;
    height: 45px;
    background: rgba(2, 116, 190, 0.1);
    color: var(--jars-blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.d-flex:hover .contact-icon-box {
    background: var(--jars-green);
    color: white;
}

.location-title {
    color: var(--jars-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
}

/* Conteneur du drapeau (Cercle) */
.flag-box {
    width: 35px;      /* Taille réduite pour ne pas être trop grande */
    height: 35px;
    min-width: 35px;  /* Empêche l'écrasement en responsive */
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* L'image à l'intérieur du cercle */
.flag-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Important : remplit le cercle sans déformer le drapeau */
    object-position: center;
}

/* Style des titres de pays */
.location-title {
    color: #0274be; /* Ton bleu JARS */
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
}

/* Ajustement de l'icône email pour qu'elle soit assortie aux drapeaux */
.contact-icon-box {
    width: 35px;
    height: 35px;
    background: #f4f7f6;
    color: #0274be;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}






/* Conteneur de l'image (Cercle parfait) */
.process-image-wrapper {
    width: 120px;           /* Largeur fixe */
    height: 120px;          /* Hauteur fixe identique */
    margin: 0 auto;         /* Centrage horizontal */
    overflow: hidden;       /* Coupe ce qui dépasse */
    border-radius: 50%;     /* Rend le conteneur rond */
    border: 4px solid #7dbb00; /* Bordure Vert JARS */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    background-color: #fff;
}

/* L'image à l'intérieur */
.process-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* Remplissage intelligent sans déformation */
    object-position: center; /* Centre la partie visible de l'image */
    transition: transform 0.5s ease;
}

/* Effet au survol de la carte */
.custom-card-style-1:hover .process-image-wrapper img {
    transform: scale(1.1); /* Zoom léger sur l'image */
}

.custom-card-style-1:hover .process-image-wrapper {
    border-color: #0274be; /* La bordure devient bleue au survol */
}

/* Ajustement responsive (optionnel) */
@media (max-width: 576px) {
    .process-image-wrapper {
        width: 100px;
        height: 100px;
    }
}



 /* nos activites  */

 /* Style de la carte avec bordure */
.custom-card-bordered {
    border: 2px solid #e9e9e9 !important; /* Bordure grise claire par défaut */
    background: #ffffff;
    transition: all 0.3s ease-in-out;
    position: relative;
}

/* Effet au survol de la carte */
.custom-card-bordered:hover {
    transform: translateY(-10px);
    border-color: #7dbb00 !important; /* La bordure devient VERT JARS */
    box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important;
}

/* Style de l'image circulaire */
.card-img-top-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-circle-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 50%;
    transition: all 0.4s ease;
}

.custom-card-bordered:hover .image-circle-bg {
    background: #7dbb00;
    opacity: 0.1;
    border-color: #7dbb00;
}

.card-img-top-wrapper img {
    width: 70px !important;
    height: auto;
    z-index: 2;
    transition: all 0.4s ease;
}

/* Animation titre */
.custom-card-bordered:hover h4 a {
    color: #0274be !important; /* Le titre devient BLEU JARS */
}



/* realisation */


/* Style Global des Cartes */
.custom-card-style {
    background: #ffffff;
    border-radius: 10px !important;
    transition: all 0.3s ease;
    border: 1px solid #eee !important;
}

.custom-card-style:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
    border-color: #0274be !important;
}

/* Conteneur Image avec Hauteur Fixe */
.card-img-container {
    height: 190px;
    background: #f8f9fa;
}

.card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.custom-card-style:hover .card-img-top {
    transform: scale(1.1);
}

/* Petite ligne décorative */
.custom-short-line {
    width: 35px;
    height: 3px;
    background: linear-gradient(90deg, #7dbb00 0%, #0274be 100%);
    border-radius: 3px;
}

/* Typographie */
.card-title {
    color: #1c223a;
    transition: color 0.3s ease;
}

.custom-card-style:hover .card-title {
    color: #0274be;
}

.card-text {
    color: #777;
    font-size: 0.95rem;
    line-height: 1.6;
}