*{
    /* border: solid 1px; */
}

/* Défilement fluide vers les ancres + petit décalage haut */
html{
    scroll-behavior: smooth;
}
:target{
    scroll-margin-top: 20px;
}


/* ============================================================
   Qui nous sommes(division générale
   ============================================================ */
.qui_sommes_nous{
    display: flex;
    justify-content: center;
    gap: 4%;
}







/* ============================================================
   Barre latérale d'ancres (.ancres)
   ============================================================ */
.qui_sommes_nous .ancres{
    width: 210px;
    background: #ffffff;          /* fond gris clair du panneau */
    padding: 30px 16px;
    /* Panneau figé au défilement, sans s'étirer sur toute la hauteur */
    align-self: flex-start;       /* garde sa hauteur de contenu + sa position haute */
    position: sticky;
    /* Aligné sur le padding-top de .main_view (90px) : dégage l'en-tête
       fixe (~74px) ET évite tout saut au défilement (position naturelle
       = seuil du sticky). */
    top: 90px;
}

/* Liste : empilée, les <li> occupent toute la largeur du panneau */
.qui_sommes_nous .ancres nav ul{
    list-style:  none;
    margin: 0;
    padding: 10px 12px;           /* petit espacement latéral : les liens ne collent pas aux bords */
    display: flex;
    flex-direction: column;
    align-items: stretch;         /* les <li> s'étirent sur toute la largeur */
    background-color: rgb(245, 245, 245);
}

.qui_sommes_nous .ancres nav li{
    margin-bottom: 14px;
}

/* Liens (état par défaut) : texte gris centré, largeur pleine et uniforme.
   box-sizing: border-box -> le padding reste inclus dans les 100 %, donc
   tous les liens (et donc le pavé .active) ont exactement la même largeur */
.qui_sommes_nous .ancres nav a{
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 14px 20px;
    border-radius: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
    color: #8a8a8a;
    text-decoration: none;
    transition: color .2s, background .2s;
}

.qui_sommes_nous .ancres nav a:hover{
    color: #111;
}

/* Ancre active (déterminée dynamiquement par qui_nous_sommes.js) :
   pavé blanc arrondi */
.qui_sommes_nous .ancres nav a.active{
    background: #fff;
    color: #111;
    /* faux gras via text-shadow : épaissit sans élargir la boîte,
       donc l'ancre occupe la même largeur active ou non (pas de décalage) */
    text-shadow: 0 0 .6px currentColor, 0 0 .6px currentColor;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* ============================================================
   Section "Nous connaître ?" (.nous_connaitre)
   ============================================================ */

/* Largeur de la zone de contenu (porte la division) */
.qui_sommes_nous .sections{
    width: 60%;          /* élargie (~+20 %) ; ajustable */
    padding: 2% 0;      /* dégagement bas aligné sur le haut */
}

/* Espace uniforme entre les différentes parties (remplace les margin-top
   individuels des sections) */
.qui_sommes_nous .sections > div + div{
    margin-top: var(--espace-rubriques);
}

/* Écart réduit entre l'intro (Nous connaître ?) et les domaines d'activité */
.qui_sommes_nous .sections > .domaines_activite_qns{
    margin-top: calc(var(--espace-rubriques) * 0.7);
}
.qui_sommes_nous .nous_connaitre{
    width: 100%;         /* remplit .sections */
}

/* Titre vert-teal */
.qui_sommes_nous .nous_connaitre h2{
    margin: 0 0 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 34px;
    color: #2e9b8a;
}

/* Trait de séparation */
.qui_sommes_nous .nous_connaitre hr{
    border: none;
    border-top: 1px solid #e3e3e3;
    margin: 0 0 35px;
}

/* Bloc deux colonnes : encadré citation + image */
.qui_sommes_nous .introduction_section{
    display: flex;
    align-items: stretch;        /* colonnes de même hauteur */
}

/* ----- Colonne gauche : encadré gris avec citation ----- */
.qui_sommes_nous .texte_description{
    flex: 42;                    /* ~42 % de la largeur */
    background: #ededed;
    padding: 55px 45px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* contenu aligné en haut */
}

/* Guillemet vert (SVG de marque) au-dessus du texte */
.qui_sommes_nous .texte_description::before{
    content: "";
    display: block;
    width: 46px;
    height: 34px;
    margin-bottom: 22px;
    background: url("Images/Icones/quotes.svg") no-repeat left center;
    background-size: contain;
}

.qui_sommes_nous .texte_description p{
    margin: 0;
    max-width: 250px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #5a5a5a;
}

/* ----- Colonne droite : image + barre verte verticale ----- */
.qui_sommes_nous .image_description{
    flex: 58;                    /* ~58 % de la largeur */
    border-left: 7px solid #8dc63f;
}

.qui_sommes_nous .image_description img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;           /* l'image remplit la colonne */
}

/* ============================================================
   Domaines d'activité (.domaines_activite_qns)
   3 colonnes : icône cerclée + titre + texte justifié
   ============================================================ */
.qui_sommes_nous .domaines_activite_qns{
    display: flex;
    justify-content: space-between;
    gap: 8%;
    margin-top: 65px;
}

/* Une colonne */
.qui_sommes_nous .domaines_activite_qns > div{
    flex: 1;
    text-align: center;   /* centre l'icône et le titre */
}

/* Cercle vert (conteneur) : taille fixe, icône centrée */
.qui_sommes_nous .domaines_activite_qns .cercle_icone{
    width: 110px;
    height: 110px;
    margin: 0 auto;
    border: 2px solid #8dc63f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icône : garde son ratio natif, jamais rognée (couleur d'origine) */
.qui_sommes_nous .domaines_activite_qns .cercle_icone img{
    max-width: 52%;
    max-height: 52%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Titre vert-teal */
.qui_sommes_nous .domaines_activite_qns h3{
    margin: 18px 0 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #1a8f7a;
}

/* Paragraphe justifié */
.qui_sommes_nous .domaines_activite_qns p{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    color: #6a6a6a;
}

/* ============================================================
   Une présence dans plusieurs pays (.plusieurs_pays)
   Titre + trait, puis [citation à gauche | carte à droite]
   ============================================================ */
.qui_sommes_nous .plusieurs_pays{
    margin-top: 70px;
}

/* Titre vert-teal (même style que les autres sections) */
.qui_sommes_nous .plusieurs_pays h2{
    margin: 0 0 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 34px;
    color: #2e9b8a;
}

/* Trait de séparation */
.qui_sommes_nous .plusieurs_pays hr{
    border: none;
    border-top: 1px solid #e3e3e3;
    margin: 0 0 40px;
}

/* Ligne : texte (gauche) + carte (droite) */
.qui_sommes_nous .contenu_pays{
    display: flex;
    align-items: flex-start;     /* texte aligné en haut */
    gap: 40px;
}

/* Colonne gauche : guillemet + texte */
.qui_sommes_nous .icone_et_texte{
    flex: 0 0 30%;
}

.qui_sommes_nous .icone_et_texte .quote{
    display: block;
    width: 46px;
    height: auto;
    margin-bottom: 20px;
}

/* ============================================================
   Scroll motion : icônes "quotes"
   Zoom + dézoom à la 1re apparition de la section à l'écran.
   La classe .in-view est ajoutée par qui_nous_sommes.js
   ============================================================ */
.qui_sommes_nous .icone_et_texte .quote,
.qui_sommes_nous .texte_description::before{
    transform-origin: left center;   /* zoom ancré à gauche */
}

@keyframes quote_pop{
    0%   { transform: scale(1);    }
    45%  { transform: scale(1.45); }   /* zoom */
    100% { transform: scale(1);    }   /* dézoom (taille initiale) */
}

.qui_sommes_nous .quote.in-view{
    animation: quote_pop 1.6s ease both;
}
/* L'intro "Nous connaître ?" affiche son guillemet via ::before */
.qui_sommes_nous .texte_description.in-view::before{
    animation: quote_pop 1.6s ease both;
}

@media (prefers-reduced-motion: reduce){
    .qui_sommes_nous .quote.in-view,
    .qui_sommes_nous .texte_description.in-view::before{ animation: none; }
}

.qui_sommes_nous .icone_et_texte p{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #9a9a9a;              /* gris clair, comme la capture */
}

/* Colonne droite : carte d'Afrique */
.qui_sommes_nous .contenu_pays .carte{
    flex: 1;
    min-width: 0;
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   Nous en chiffres (.nous_en_chiffres)
   Citation puis grille de statistiques (icône + chiffre + texte)
   ============================================================ */
.qui_sommes_nous .nous_en_chiffres{
    margin-top: 70px;
}

/* Titre + trait (cohérents avec les autres sections) */
.qui_sommes_nous .nous_en_chiffres h2{
    margin: 0 0 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 34px;
    color: #2e9b8a;
}
.qui_sommes_nous .nous_en_chiffres hr{
    border: none;
    border-top: 1px solid #e3e3e3;
    margin: 0 0 40px;
}

/* Bloc citation au-dessus de la grille */
.qui_sommes_nous .contenu_chiffres .icone_et_texte{
    margin-bottom: 55px;
}
.qui_sommes_nous .contenu_chiffres .icone_et_texte p{
    max-width: 420px;
}

/* Grille des statistiques : 3 colonnes, léger retrait */
.qui_sommes_nous .grille_chiffres{
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 45px 75px;
    padding-left: 110px;
    transform: scale(1.15);        /* agrandit toute la grille de ~15 % */
    transform-origin: top left;    /* s'étend vers la droite/le bas */
}

/* Un décompte : icône à gauche, texte à droite */
.qui_sommes_nous .asset_decompte{
    display: flex;
    align-items: center;
    gap: 16px;
}

.qui_sommes_nous .asset_decompte img{
    width: 68px;
    height: auto;
    flex: none;
}

/* Préfixe ("Plus de"), grand chiffre, description */
.qui_sommes_nous .texte_chiffre .prefixe{
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #16365c;
}
.qui_sommes_nous .texte_chiffre .nombre{
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    color: #1a8fd1;
}
.qui_sommes_nous .texte_chiffre p{
    margin: 6px 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.3;
    color: #16365c;
}

/* ============================================================
   Notre vision (.contenu_vision)
   Gauche : encadré citation (haut) + image (bas)
   Droite : grande image qui donne la hauteur de la rangée
   ============================================================ */
.qui_sommes_nous .contenu_vision .division_generale{
    display: flex;
    align-items: stretch;        /* les deux colonnes même hauteur */
    gap: 0;
}

/* Colonne gauche, empilée verticalement */
.qui_sommes_nous .contenu_vision .gauche{
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Encadré citation (haut) ; réinitialise le flex hérité de .icone_et_texte */
.qui_sommes_nous .contenu_vision .icone_et_texte{
    flex: none;
    background: #ededed;
    padding: 45px;
}

/* Image du bas : remplit la hauteur restante de la colonne */
.qui_sommes_nous .contenu_vision .gauche > .vision_bas{
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: cover;
    display: block;
}

/* Colonne droite : grande image (définit la hauteur) */
.qui_sommes_nous .contenu_vision .droite{
    flex: 1;
    min-width: 0;
}
.qui_sommes_nous .contenu_vision .droite img{
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* ============================================================
   Nos valeurs (.nos_valeurs)
   Encadré citation, bandeau 3 valeurs, puis grande image
   ============================================================ */
.qui_sommes_nous .nos_valeurs{
    margin-top: 70px;
}

/* Titre + trait (cohérents avec les autres sections) */
.qui_sommes_nous .nos_valeurs h2{
    margin: 0 0 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 34px;
    color: #2e9b8a;
}
.qui_sommes_nous .nos_valeurs hr{
    border: none;
    border-top: 1px solid #e3e3e3;
    margin: 0 0 35px;
}

/* Encadré citation : pleine largeur, fond gris */
.qui_sommes_nous .nos_valeurs .icone_et_texte{
    flex: none;
    background: #efefef;
    padding: 45px 55px;
}
.qui_sommes_nous .nos_valeurs .icone_et_texte p{
    max-width: none;             /* le texte occupe toute la largeur */
}

/* Bandeau des 3 valeurs */
.qui_sommes_nous .valeurs_grille{
    display: flex;
    background: #f7f7f7;
    padding: 35px 0 45px;
}
.qui_sommes_nous .valeur{
    flex: 1;
    text-align: center;
    padding: 0 30px;
}
.qui_sommes_nous .valeur img{
    width: 72px;
    height: auto;
    margin-bottom: 18px;
}
.qui_sommes_nous .valeur h5{
    margin: 0 0 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1a8f7a;
}
.qui_sommes_nous .valeur p{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: #7a7a7a;
}

/* Grande image du bas avec liseré vert */
.qui_sommes_nous .image_valeurs{
    border-top: 4px solid #8dc63f;
}
.qui_sommes_nous .image_valeurs img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ============================================================
   Des dizaines de clients satisfaits (.nos_clients)
   Gauche : encadré citation ; droite : colonne de logos
   ============================================================ */
.qui_sommes_nous .nos_clients{
    margin-top: 70px;
}

/* Titre + trait (cohérents avec les autres sections) */
.qui_sommes_nous .nos_clients h2{
    margin: 0 0 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 34px;
    color: #2e9b8a;
}
.qui_sommes_nous .nos_clients hr{
    border: none;
    border-top: 1px solid #e3e3e3;
    margin: 0 0 35px;
}

/* Panneau deux colonnes de même hauteur */
.qui_sommes_nous .nos_clients .conteneur_principal{
    display: flex;
    align-items: stretch;
}

/* Colonne gauche : encadré gris + citation */
.qui_sommes_nous .nos_clients .icone_et_texte{
    flex: 0 0 60%;
    background: #ededed;
    padding: 55px 60px;
}
.qui_sommes_nous .nos_clients .icone_et_texte p{
    max-width: none;
    color: #6f6f6f;
}

/* Colonne droite : carrousel vertical des logos */
.qui_sommes_nous .logos{
    flex: 1;
    background: #f7f7f7;
    position: relative;          /* repère pour les logos en absolu */
    overflow: hidden;            /* masque les logos hors de la colonne */
    min-height: 600px;           /* + de hauteur = + d'écart entre les logos */
}

/* Chaque logo : positionné en absolu, centré horizontalement, animé */
.qui_sommes_nous .logos img{
    position: absolute;
    left: 50%;
    top: 0;
    max-width: 65px;
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
    transform: translate(-50%, 40px);    /* état de départ */
    opacity: 0;
    animation: defile_logo 14s linear infinite;
}

/* Défilement échelonné : chaque logo démarre à un moment différent
   du cycle (delay négatif) -> ils se suivent dans la file */
.qui_sommes_nous .logos img:nth-child(1){ animation-delay:  0s;    }
.qui_sommes_nous .logos img:nth-child(2){ animation-delay: -2.8s;  }
.qui_sommes_nous .logos img:nth-child(3){ animation-delay: -5.6s;  }
.qui_sommes_nous .logos img:nth-child(4){ animation-delay: -8.4s;  }
.qui_sommes_nous .logos img:nth-child(5){ animation-delay: -11.2s; }

/* Descente continue + zoom au centre puis retour à la taille initiale */
@keyframes defile_logo{
    0%   { transform: translate(-50%, 40px)  scale(1);    opacity: 0; }  /* haut, encore invisible */
    12%  { transform: translate(-50%, 110px) scale(1);    opacity: 1; }  /* fondu d'apparition, bien sous le haut */
    45%  { transform: translate(-50%, 280px) scale(1);    opacity: 1; }
    50%  { transform: translate(-50%, 300px) scale(1.85); opacity: 1; }  /* zoom au centre */
    54%  { transform: translate(-50%, 320px) scale(1.85); opacity: 1; }
    60%  { transform: translate(-50%, 350px) scale(1);    opacity: 1; }  /* taille initiale retrouvée */
    88%  { transform: translate(-50%, 500px) scale(1);    opacity: 1; }  /* encore visible, bien au-dessus du bas */
    100% { transform: translate(-50%, 560px) scale(1);    opacity: 0; }  /* fondu de disparition, puis reboucle */
}

/* Respect des préférences d'accessibilité : pas d'animation */
@media (prefers-reduced-motion: reduce){
    .qui_sommes_nous .logos img{ animation: none; }
}