* {


international standard-using apriory software +experience we are usually use 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
	
}

body {
    font-family: "Inter", sans-serif;
    color: #101820;
    background: #fff;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font-family: inherit;
}




/* =========================
GLOBAL
========================= */

.container {
    width: min(1240px, 90%);
    margin: auto;
}

.section {
    padding: 120px 0;
}

.section-light {
    padding: 120px 0;
    background: #f5f8fa;
}

.dark-section {
    background: #061b2b;
    color: #fff;
}

.section-label {
    display: block;
    color: #087bc1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 22px;
}

.section-heading {
    margin-bottom: 60px;
}

.section-heading h2,
.intro h2,
.about-content h2,
.why h2,
.africa-content h2,
.contact h2 {
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1;
    letter-spacing: -3px;
    font-weight: 700;
}

.split-heading {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    align-items: flex-end;
}

.split-heading > p {
    max-width: 420px;
    color: #72818b;
    line-height: 1.8;
}


/* ====================================================================
   CORRECTIF STRUCTUREL UNIFIÉ — SYNCHRONISATION SUR LE MODÈLE WATER.HTML
==================================================================== */

/* ====================================================================
   CORRECTIF STRUCTUREL UNIFIÉ — SYNCHRONISATION ABSOLUE INDEX & PROJECT
==================================================================== */

/* Force TOUS les types de headers (ID ou Classe) à adopter la même taille de 92px */
#header,
.header,
#header.scrolled, 
header#header.scrolled,
.header.scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 92px !important; /* Hauteur unique et verrouillée pour bloquer la taille */
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important; /* Supprime les micro-saccades et zooms au scroll */
}

/* Force le conteneur interne à occuper 100% de la hauteur de 92px */
.header-inner {
    width: min(1450px, 94%) !important;
    height: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important; /* Centre verticalement les éléments sur le même axe */
    justify-content: space-between !important;
    gap: 20px !important;
    background: transparent !important;
}

/* Supprime définitivement la règle alternative qui écrasait la hauteur au défilement */
.header.scrolled {
    height: 92px !important; /* Aligné sur 92px pour neutraliser le bug des 76px */
}

/* 2. LE MODÈLE DE RÉFÉRENCE DE LA CLASSE HEADER-INNER (ZÉRO MODIFICATION HTML DIRECTE) */
.header-inner {
    width: min(1450px, 94%) !important; /* Épouse strictement l'alignement de la page water */
    height: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important; /* Centre scrupuleusement le logo et le menu sur le même axe vertical */
    justify-content: space-between !important;
    gap: 20px !important;
    background: transparent !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* 3. Alignement typographique homogène des liens du menu */
#header .nav-link,
.header .nav-link,
#header.scrolled .nav-link,
.header-inner .nav-link,
.desktop-nav .nav-link {
    color: #101820 !important;
    font-family: "Inter", sans-serif !important;
    font-size: 11px !important;       /* Rétablit la taille fine de la page water */
    font-weight: 600 !important;      /* Épaisseur équilibrée semi-bold (neutralise le 800) */
    letter-spacing: 0.8px !important; /* Interlettrage aéré corporate */
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    transition: color 0.25s ease !important;
}

/* Changement de couleur au survol de la souris */
#header .nav-link:hover,
.header .nav-link:hover,
.header-inner .nav-link:hover {
    color: #087bc1 !important;
}


.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 92px;
    z-index: 1000;
    color: #fff;
    transition: .35s ease;
}

.header.scrolled {
    height: 76px;
    background: rgba(255,255,255,.97);
    color: #101820;
    box-shadow: 0 10px 35px rgba(0,0,0,.08);
    backdrop-filter: blur(12px);
}
*/
.header-inner {
    width: min(1450px, 94%);
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


/* LOGO */

.logo {
    display: flex;
    align-items: center;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -2px;
}

.logo-box {
    width: 34px;
    height: 34px;
    margin-right: 3px;
    display: grid;
    place-items: center;
    background: #087bc1;
    color: #fff;
    font-size: 23px;
}


/* NAV */

.desktop-nav {
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-dropdown {
    height: 100%;
    position: relative;
}

.nav-link {
    height: 100%;
    padding: 0 13px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-link:hover {
    color: #087bc1;
}

.nav-link span {
    font-size: 14px;
}


/* MEGA MENU */

.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-35%, 15px);
    background: #fff;
    color: #101820;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .25s ease;
    box-shadow: 0 30px 80px rgba(0,0,0,.17);
    border-top: 3px solid #087bc1;
}

.nav-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-35%, 0);
}


/* SERVICES MENU */

.mega-services {
    width: 1400px;
    display: grid;
    grid-template-columns: 320px 1fr;
}

.mega-services1 {
    width: 700px;
    display: grid;
    grid-template-columns: 320px 1fr;
}

.mega-dark {
    background: #061b2b;
    color: #fff;
    padding: 50px 40px;
}

.mega-dark small,
.industry-intro small,
.location-text small,
.about-image small {
    color: #1595df;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.mega-dark h3 {
    font-size: 31px;
    line-height: 1.1;
    margin: 22px 0;
}

.mega-dark p {
    color: #94a7b4;
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 28px;
}

.mega-dark a {
    color: #1595df;
    font-size: 11px;
    font-weight: 700;
}

/* =====================================================
   CORRECTIF : LARGEUR DU MÉGA-MENU ET COMPACITÉ DU TEXTE
   ===================================================== */

/* 1. Ajustement de la barre de fond globale du méga-menu */
.mega-menu.mega-services {
    width: max-content !important;    /* ◄ Force la barre blanche à s'élargir selon le texte */
    max-width: 95vw !important;       /* Évite que le menu ne sorte de l'écran du PC */
    min-width: 1100px !important;     /* Largeur minimale confortable pour caler les colonnes */
    display: grid !important;
    grid-template-columns: 320px 1fr !important; /* Conserve le volet sombre à gauche et le texte à droite */
    box-sizing: border-box !important;
}

/* 2. Zone de droite contenant les colonnes de rubriques */
.mega-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;          /* Interdit strictement le retour à la ligne */
    justify-content: flex-start !important;
    gap: 45px !important;                  /* Espace horizontal de sécurité entre vos colonnes */
    padding: 50px 60px !important;         /* Légère réduction pour gagner de l'espace */
    width: auto !important;
    overflow-x: auto !important;           /* Défilement horizontal de secours si l'écran est très petit */
}

/* 3. Verrouillage de chaque colonne de texte */
.mega-content > div, 
.mega-content article {
    flex: 0 0 240px !important;            /* Fixe la taille de la colonne pour condenser le texte */
    width: 240px !important;
    min-width: 240px !important;           /* Empêche le texte de se recroqueviller */
}

/* 4. Gestion des liens pour qu'ils s'adaptent à la colonne */
.mega-content a {
    display: block !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #edf0f2 !important;
    font-size: 12px !important;            /* Taille de police idéale et lisible */
    font-weight: 600 !important;
    white-space: nowrap !important;        /* Garde le texte sur une seule ligne */
    overflow: hidden !important;
    text-overflow: ellipsis !important;    /* Ajoute "..." si un intitulé dépasse exceptionnellement */
}


.mega-content a:hover {
    color: #087bc1;
    padding-left: 6px;
}


/* INDUSTRIES MENU */

.industry-menu {
    width: 1050px;
    display: grid;
    grid-template-columns: 320px 1fr;
}

.industry-intro {
    padding: 50px 40px;
    background: #f3f7fa;
}

.industry-intro h3 {
    font-size: 28px;
    line-height: 1.15;
    margin: 20px 0;
}

.industry-intro p {
    color: #71808a;
    font-size: 12px;
    line-height: 1.8;
}

.industry-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 30px;
}

.industry-list a {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #edf0f2;
    transition: .25s;
}

.industry-list a:hover {
    background: #f5f9fc;
}

.industry-list b {
    color: #087bc1;
    font-size: 10px;
}

.industry-list strong {
    display: block;
    font-size: 13px;
    margin-bottom: 5px;
}

.industry-list span span {
    color: #89959c;
    font-size: 10px;
}


/* ABOUT */

.about-menu {
    width: 900px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.about-image {
    min-height: 330px;
    padding: 45px;
    display: flex;
    align-items: flex-end;
    color: #fff;
    background:
        linear-gradient(rgba(2,20,32,.2), rgba(2,20,32,.85)),
        url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1600&q=85") center/cover;
}

.about-image h3 {
    font-size: 30px;
    line-height: 1.1;
    margin-top: 15px;
}

.about-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 35px;
}

.about-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid #edf0f2;
    font-size: 12px;
    font-weight: 600;
}

.about-links a:hover {
    color: #087bc1;
}


/* LOCATIONS */

.locations-menu {
    width: 900px;
    display: grid;
    grid-template-columns: 330px 1fr;
}

.location-text {
    padding: 50px;
    background: #061b2b;
    color: #fff;
}

.location-text h3 {
    font-size: 27px;
    line-height: 1.2;
    margin-top: 20px;
}

.location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 35px;
}

.location-grid a {
    padding: 25px;
    border-bottom: 1px solid #edf0f2;
    font-size: 14px;
    font-weight: 700;
}

.location-grid a:hover {
    background: #f5f9fc;
    color: #087bc1;
}

.location-grid small {
    display: block;
    margin-top: 7px;
    color: #8b979e;
    font-size: 9px;
}


/* RESOURCES */

.resource-menu {
    width: 700px;
    padding: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.resource-menu a {
    padding: 25px;
    border-bottom: 1px solid #edf0f2;
}

.resource-menu a:hover {
    background: #f5f9fc;
}

.resource-menu small {
    display: block;
    color: #087bc1;
    margin-bottom: 10px;
}

.resource-menu strong {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
}

.resource-menu span {
    color: #89959c;
    font-size: 10px;
}


/* CONTACT */

.header-contact {
    background: #087bc1;
    padding: 14px 20px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.header-contact span {
    margin-left: 8px;
}


/* =========================
HERO
========================= */

.hero {
    height: 100vh;
    min-height: 720px;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(1,17,29,.92),
            rgba(1,17,29,.35)
        );
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(1240px, 90%);
    margin: auto;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 50px;
}

.hero-label {
    color: #45b4f5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 25px;
}

.hero h1 {
    max-width: 900px;
    font-size: clamp(52px, 7vw, 100px);
    line-height: .93;
    letter-spacing: -5px;
}

.hero h1 span {
    display: block;
    color: #168fd7;
}

.hero p {
    max-width: 650px;
    color: rgba(255,255,255,.73);
    line-height: 1.8;
    margin: 30px 0;
    font-size: 15px;
}

.hero-buttons {
    display: flex;
    gap: 15px;
}

.btn-primary,
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 17px 23px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.btn-primary {
    background: #087bc1;
    color: #fff;
}

.btn-primary.blue {
    margin-top: 20px;
}

.btn-outline {
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
}

.btn-outline:hover {
    background: #fff;
    color: #061b2b;
}

.hero-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: rgba(3,19,31,.7);
    backdrop-filter: blur(10px);
}

.hero-bottom div {
    padding: 18px 30px;
    border-right: 1px solid rgba(255,255,255,.12);
    font-size: 10px;
    font-weight: 600;
}

.hero-bottom strong {
    color: #168fd7;
    margin-right: 12px;
}

.video-controls {
    position: absolute;
    right: 30px;
    bottom: 115px;
    z-index: 5;
    display: flex;
    gap: 8px;
}

.video-controls button {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(0,0,0,.3);
    color: #fff;
    cursor: pointer;
}


/* =========================
INTRO
========================= */

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}

.large-text {
    font-size: 22px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.intro p:not(.large-text) {
    color: #6f7d85;
    line-height: 1.8;
    margin-bottom: 25px;
}

.text-link {
    display: inline-block;
    color: #087bc1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* =====================================================
   LIFECYCLE — AFFICHAGE BORD À BORD SÉCURISÉ (V4)
===================================================== */

.cycle-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    
    width: 100% !important; /* ◄ Prend nativement toute la largeur de l'écran */
    margin: 40px 0 0 0 !important; /* Crée l'espace nécessaire sous le titre */
    
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}

.cycle-grid::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.cycle-card {
    flex: 1 0 20% !important; /* Découpe l'écran en 5 colonnes parfaites de 20% chacune */
    min-width: 250px !important; /* Taille minimale de sécurité sur tablette/mobile */
    height: 320px !important; /* Hauteur confortable pour le texte et les visuels */
    padding: 35px 25px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.cycle-card:last-child {
    border-right: none;
}

/* --- DEGRADES ET EFFETS CONSERVÉS --- */
.cycle-grid .bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -2;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.cycle-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.85;
    transition: opacity 0.3s ease, background 0.4s ease;
}

/* Couleurs extraites de vos captures */
.cycle-grid .cycle-card:nth-of-type(1)::before { background: linear-gradient(180deg, rgba(14, 93, 157, 0.65) 0%, rgba(6, 27, 43, 0.9) 100%); }
.cycle-grid .cycle-card:nth-of-type(2)::before { background: linear-gradient(180deg, rgba(32, 149, 183, 0.65) 0%, rgba(6, 27, 43, 0.9) 100%); }
.cycle-grid .cycle-card:nth-of-type(3)::before { background: linear-gradient(180deg, rgba(24, 61, 107, 0.65) 0%, rgba(6, 27, 43, 0.9) 100%); }
.cycle-grid .cycle-card:nth-of-type(4)::before { background: linear-gradient(180deg, rgba(19, 90, 143, 0.65) 0%, rgba(6, 27, 43, 0.9) 100%); }
.cycle-grid .cycle-card:nth-of-type(5)::before { background: linear-gradient(180deg, rgba(74, 53, 147, 0.65) 0%, rgba(6, 27, 43, 0.9) 100%); }

.card-content {
    position: relative;
    z-index: 2;
}

.card-content h3 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.card-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

.see-more-arrow {
    display: inline-block;
    align-self: flex-start;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 20px;
    transition: transform 0.3s ease, color 0.3s ease;
    pointer-events: none;
}

/* --- ANIMATIONS AU SURVOL --- */
.cycle-card:hover .bg-image {
    transform: scale(1.08);
}
.cycle-card:hover::before {
    opacity: 0.60;
}
.cycle-card:hover .see-more-arrow {
    color: #ffffff;
    transform: translate(3px, -3px);
}

@media(max-width: 1024px) {
    .cycle-card {
        flex: 0 0 260px !important; /* Permet le défilement tactile fluide sur mobile */
    }
}

/* =========================
SERVICES
========================= */

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #e2e7ea;
}

.services-grid article {
    padding: 35px 25px;
    min-height: 280px;
    border-right: 1px solid #e2e7ea;
    border-bottom: 1px solid #e2e7ea;
    transition: .3s;
}

.services-grid article:hover {
    background: #061b2b;
    color: #fff;
}

.services-grid article > span {
    color: #087bc1;
    font-size: 10px;
}

.services-grid h3 {
    font-size: 19px;
    margin: 55px 0 15px;
}

.services-grid p {
    color: #71808a;
    font-size: 11px;
    line-height: 1.8;
}

.services-grid article:hover p {
    color: #91a2ad;
}

.services-grid a {
    display: block;
    margin-top: 20px;
    color: #087bc1;
    font-size: 10px;
    font-weight: 700;
}


/* =========================
INDUSTRIES
========================= */

.industry-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.industry-cards > a {
    background: #fff;
    transition: .3s;
}

.industry-cards > a:hover {
    transform: translateY(-7px);
}

.industry-image {
    height: 260px;
    background-size: cover;
    background-position: center;
}

.image-1 {
    background-image: url("https://images.unsplash.com/photo-1581094794329-c8112a89af12?auto=format&fit=crop&w=1400&q=85");
}

.image-2 {
    background-image: url("https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=1400&q=85");
}

.image-3 {
    background-image: url("https://images.unsplash.com/photo-1565610222536-ef125c59da2e?auto=format&fit=crop&w=1400&q=85");
}

.image-4 {
    background-image: url("https://images.unsplash.com/photo-1565793298595-6a879b1d9492?auto=format&fit=crop&w=1600&q=85");
}

.image-5 {
    background-image: url("https://images.unsplash.com/photo-1513828583688-c52646db42da?auto=format&fit=crop&w=1600&q=85");
}

.image-6 {
    background-image: url("https://images.unsplash.com/photo-1531058020387-3be344556be6?auto=format&fit=crop&w=1600&q=85");
}

.industry-card-content {
    padding: 25px;
}

.industry-card-content span {
    color: #087bc1;
    font-size: 10px;
}

.industry-card-content h3 {
    margin: 14px 0 7px;
    font-size: 19px;
}

.industry-card-content p {
    color: #7b878e;
    font-size: 11px;
}

/* =========================
PROJECTS
========================= */

/* Crée 3 colonnes de tailles strictement identiques */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.project {
    display: flex;
    flex-direction: column;
}

/* 📐 Le projet de gauche occupe la 1ère colonne et s'étale sur 2 lignes de la grille */
.project-large {
    grid-column: 1;
    grid-row: span 2;
}

/* Hauteur fixe des images de droite pour obtenir de beaux rectangles */
.project-image {
    height: 240px; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}

/* L'image de gauche calcule sa hauteur dynamiquement pour s'aligner sur les autres */
.project-large .project-image {
    height: auto;
    flex-grow: 1;
}

/* Styles des textes */
.project-info {
    padding: 15px 0 25px 0;
}

.project-info span {
    color: #087bc1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.project-info h3 {
    font-size: 20px;
    margin: 6px 0;
    font-weight: 700;
    color: #1e293b;
}

.project-info p {
    color: #7b878e;
    font-size: 12px;
}



/* =========================
WHY
========================= */

.why {
    padding: 120px 0;
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}

.why p {
    max-width: 500px;
    margin-top: 30px;
    color: #91a3af;
    line-height: 1.8;
}

.why-list div {
    display: flex;
    gap: 30px;
    align-items: center;
    padding: 25px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.why-list strong {
    color: #087bc1;
    font-size: 11px;
}

.why-list span {
    font-size: 14px;
}


/* =========================
STATS
========================= */


.stats {
    background: #087bc1;
    color: #fff;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.stats-grid div {
    padding: 65px 25px;
    border-right: 1px solid rgba(255,255,255,.2);
}

/* AJOUT ICI : Supprime la bordure droite uniquement sur le dernier bloc de la grille */
.stats-grid div:last-child {
    border-right: none;
}

.stats strong {
    display: block;
    font-size: 55px;
    letter-spacing: -3px;
}

.stats span {
    font-size: 10px;
    opacity: .8;
}

/* =========================
AFRICA
========================= */

.africa-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 100px;
    align-items: center;
}

.africa-map {
    min-height: 520px;
    position: relative;
    background:
        radial-gradient(
            circle,
            #d9eef9 1px,
            transparent 1px
        );
    background-size: 20px 20px;
}

.map-title {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 100px;
    font-weight: 800;
    letter-spacing: -6px;
    color: #d9e8ef;
}

.map-dot {
    position: absolute;
    width: 13px;
    height: 13px;
    background: #087bc1;
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(8,123,193,.1);
}

.dot-1 {
    top: 28%;
    left: 43%;
}

.dot-2 {
    top: 39%;
    left: 51%;
}

.dot-3 {
    top: 52%;
    left: 48%;
}

.dot-4 {
    top: 68%;
    left: 58%;
}

.africa-content p {
    margin: 30px 0;
    color: #6f7d85;
    line-height: 1.8;
}

.country-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.country-list span {
    padding: 10px 13px;
    background: #f2f6f8;
    font-size: 10px;
    font-weight: 600;
}


/* =========================
ABOUT
========================= */

.about {
    background: #f4f7f9;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}

.about-image {
    min-height: 600px;
    background:
        linear-gradient(
            rgba(4,23,37,.1),
            rgba(4,23,37,.2)
        ),
        url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1600&q=85")
        center/cover;
}

.about-content p {
    margin: 25px 0;
    color: #6f7d85;
    line-height: 1.8;
}


/* =========================
CAREERS
========================= */

.careers {
    background:
        linear-gradient(
            rgba(3,22,35,.88),
            rgba(3,22,35,.88)
        ),
        url("https://images.unsplash.com/photo-1531058020387-3be344556be6?auto=format&fit=crop&w=1600&q=85")
        center/cover;
    color: #fff;
    text-align: center;
}

.careers-inner {
    max-width: 800px;
}

.careers h2 {
    font-size: clamp(45px, 6vw, 80px);
    line-height: 1;
    letter-spacing: -4px;
}

.careers p {
    max-width: 550px;
    margin: 25px auto 35px;
    color: #9badb8;
    line-height: 1.8;
}


/* =========================
CONTACT
========================= */

.contact-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 100px;
}

.contact p {
    margin-top: 25px;
    color: #75828a;
}

form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

form input,
form textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #ccd5da;
    padding: 17px 0;
    outline: none;
    font-size: 12px;
    resize: vertical;
}

form input:focus,
form textarea:focus {
    border-color: #087bc1;
}

form button {
    align-self: flex-start;
    margin-top: 15px;
    border: 0;
    background: #087bc1;
    color: #fff;
    padding: 17px 25px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
}


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

footer {
    background: #041621;
    color: #fff;
}

.footer-main {
    padding: 80px 0;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 50px;
}

.footer-brand p {
    max-width: 280px;
    margin-top: 20px;
    color: #718590;
    font-size: 11px;
    line-height: 1.7;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.footer-column h4 {
    color: #087bc1;
    font-size: 9px;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.footer-column a {
    color: #91a1a9;
    font-size: 11px;
}

.footer-column a:hover {
    color: #fff;
}

.footer-bottom {
    padding: 25px 0;
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex;
    justify-content: space-between;
    color: #64747d;
    font-size: 9px;
}

.footer-bottom div {
    display: flex;
    gap: 25px;
}


/* =========================
MOBILE
========================= */

.mobile-button {
    display: none;
    border: 0;
    background: transparent;
    color: #101820;
    cursor: pointer;
}

.mobile-button i {
    display: block;
    width: 25px;
    height: 2px;
    margin: 5px;
    background: currentColor;
}

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: #061b2b;
    color: #fff;
    transform: translateX(100%);
    transition: .4s ease;
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-container {
    padding: 110px 30px 40px;
}

.mobile-container > a,
.mobile-dropdown button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

.mobile-sub {
    display: none;
    padding: 8px 0 12px 15px;
}

.mobile-dropdown.active .mobile-sub {
    display: block;
}

.mobile-sub a {
    display: block;
    padding: 10px 0;
    color: #8195a2;
    font-size: 12px;
}

.mobile-contact {
    margin-top: 25px;
    background: #087bc1;
    padding: 18px !important;
    justify-content: center !important;
}


/* =========================
RESPONSIVE
========================= */

@media(max-width:1150px) {

    .desktop-nav,
    .header-contact {
        display: none;
    }

    .mobile-button {
        display: block;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cycle-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .cycle-grid a {
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

}


@media(max-width:800px) {

    .section,
    .section-light,
    .why,
    .lifecycle {
        padding: 80px 0;
    }

    .hero {
        min-height: 680px;
    }

    .hero h1 {
        letter-spacing: -3px;
    }

    .hero-bottom {
        grid-template-columns: 1fr 1fr;
    }

    .hero-bottom div {
        padding: 12px 15px;
    }

    .intro-grid,
    .why-grid,
    .about-grid,
    .africa-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .split-heading {
        display: block;
    }

    .split-heading > p {
        margin-top: 25px;
    }

    .cycle-grid {
        grid-template-columns: 1fr 1fr;
    }

    .industry-cards {
        grid-template-columns: 1fr 1fr;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-large {
        grid-row: auto;
    }

    .project-large .project-image {
        min-height: 400px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
    }

}


@media(max-width:550px) {

    .hero {
        min-height: 650px;
    }

    .hero-content {
        padding-top: 60px;
    }

    .hero h1 {
        font-size: 50px;
    }

    .hero p {
        font-size: 13px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-bottom {
        display: none;
    }

    .video-controls {
        bottom: 25px;
        right: 20px;
    }

    .services-grid,
    .industry-cards,
    .stats-grid,
    .footer-main,
    .form-row {
        grid-template-columns: 1fr;
    }

    .cycle-grid {
        grid-template-columns: 1fr;
    }

    .cycle-grid a {
        min-height: 180px;
    }

    .cycle-grid h3 {
        margin-top: 45px;
    }

    .industry-image {
        height: 220px;
    }

    .map-title {
        font-size: 60px;
    }

    .about-image {
        min-height: 400px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
    }

}





/* =====================================================
   IAPS V2 POLISH & ACCESSIBILITY
===================================================== */

:root {
    --iaps-blue: #087bc1;
    --iaps-dark: #061b2b;
    --iaps-ink: #101820;
    --iaps-muted: #72818b;
    --iaps-line: rgba(16, 24, 32, .10);
}

.site-anchor {
    position: relative;
    top: -90px;
    height: 1px;
    pointer-events: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(2, 15, 25, .24), transparent 55%), linear-gradient(0deg, rgba(2, 15, 25, .30), transparent 45%);
}

.hero-content, .hero-bottom, .video-controls {
    z-index: 2;
}

.hero-content {
    max-width: 920px;
}

.services-grid article,
.industry-cards > a,
.project,
.why-list > div {
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.services-grid article:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 55px rgba(6, 27, 43, .10);
}

.industry-cards > a:hover,
.project:hover {
    transform: translateY(-6px);
}

.industry-cards > a:hover .industry-image,
.project:hover .project-image {
    transform: scale(1.035);
}

.industry-image, .project-image {
    transition: transform .6s cubic-bezier(.2,.65,.2,1);
}

.contact form input:focus,
.contact form textarea:focus {
    outline: none;
    border-color: var(--iaps-blue);
    box-shadow: 0 0 0 3px rgba(8,123,193,.10);
}

.btn-primary, .btn-outline, .header-contact, .text-link {
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}

.btn-primary:hover, .btn-outline:hover, .header-contact:hover {
    transform: translateY(-2px);
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Intégration de la carte graphique */
.contact-map-block {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.map-wrapper {
    position: relative;
    width: 100%;
    flex-grow: 1;
    min-height: 350px; /* Hauteur minimale de sécurité */
    border: 1px solid #ccd5da;
    box-shadow: 0 10px 30px rgba(6, 27, 43, 0.05);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.map-wrapper:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(6, 27, 43, 0.1);
}

.map-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-info {
    margin-top: 15px;
    font-size: 13px;
    line-height: 1.5;
}

.map-info strong {
    color: #061b2b;
    font-weight: 700;
}

.map-info p {
    color: #75828a;
    margin-top: 2px !important;
}

/* Ajustement responsive pour petits écrans */
@media (max-width: 800px) {
    .map-wrapper {
        min-height: 300px;
    }
}


@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

@media (max-width: 800px) {
    .site-anchor { top: -70px; }
}


/* =========================
   IAPS V3 ENHANCEMENTS
========================= */
.resource-cards{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #dfe6ea}.resource-card{padding:32px 25px;min-height:260px;background:#fff;border-right:1px solid #dfe6ea;border-bottom:1px solid #dfe6ea;transition:.3s;position:relative}.resource-card:hover{background:#061b2b;color:#fff;transform:translateY(-4px)}.resource-card span{font-size:10px;color:#087bc1;font-weight:800}.resource-card h3{font-size:20px;margin:55px 0 14px}.resource-card p{font-size:11px;line-height:1.8;color:#71808a;max-width:240px}.resource-card:hover p{color:#a8b5bd}.resource-card b{display:block;margin-top:24px;color:#087bc1;font-size:10px;letter-spacing:.5px}.location-cards{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #e0e7ea}.location-cards a{min-height:170px;padding:28px;border-right:1px solid #e0e7ea;border-bottom:1px solid #e0e7ea;transition:.3s;background:#fff}.location-cards a:hover{background:#087bc1;color:#fff}.location-cards strong{display:block;font-size:22px}.location-cards span{display:block;margin-top:10px;font-size:11px;color:#71808a}.location-cards a:hover span,.location-cards a:hover em{color:rgba(255,255,255,.75)}.location-cards em{display:block;margin-top:30px;font-style:normal;text-transform:uppercase;font-size:9px;font-weight:800;letter-spacing:1px;color:#087bc1}.site-note{font-size:11px;color:#71808a;line-height:1.8}.cycle-grid article{scroll-margin-top:100px}
@media (max-width:900px){.resource-cards,.location-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.resource-cards,.location-cards{grid-template-columns:1fr}.resource-card,.location-cards a{border-right:0}.hero h1{letter-spacing:-3px}.section{padding:80px 0}.section-heading{margin-bottom:38px}}




/* =====================================================
   METHODOLOGY GRID — DESIGN 3 COLONNES PREMIUM (IAPS)
===================================================== */

.methodology {
    background-color: #ffffff !important;
    padding: 100px 0 !important;
}

.methodology-header {
    text-align: left;
    margin-bottom: 45px;
    width: 100%;
}

.methodology-label {
    display: block;
    font-family: "Inter", sans-serif;
    color: #087bc1;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.methodology-main-title {
    font-family: "Inter", sans-serif;
    color: #061b2b;
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -2px;
    margin: 0 0 20px 0;
}

.methodology-intro-text {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333333;
  max-width: 800px; /* Évite que le texte ne s'étale trop sur les grands écrans */
  margin: 20px auto; /* Centre le paragraphe et ajoute de l'espace vertical */
  padding: 0 15px; /* Évite que le texte colle aux bords sur mobile */
  text-align: center; /* Optionnel : alignement centré pour une intro */
  font-style: italic; /* Optionnel : met en valeur le style citation/intro */
}

/* Grille calibrée à 3 colonnes égales comme sur la figure */
.methodology-grid-v4 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    width: 100%;
    box-sizing: border-box;
}

/* Style de base d'un bloc de service */
.method-card-item {
    position: relative;
    height: 280px; /* Proportions idéales rectangulaires */
    padding: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Aligne le texte tout en bas */
    align-items: flex-start;  /* Aligne le texte à gauche */
    z-index: 1;
    box-sizing: border-box;
}

/* Image d'arrière-plan isolée pour gérer le zoom */
.method-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -2;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Filtres de teintes semi-transparents superposés (Couleurs exactes de la figure) */
.method-card-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.82; /* Force l'intensité de la couleur pour teinter la photo */
    transition: opacity 0.3s ease;
}

/* Couleurs spécifiques par pavé */
.methodology-grid-v4 .method-card-item:nth-child(1)::after { background: #007bb6; } /* PM : Bleu azur */
.methodology-grid-v4 .method-card-item:nth-child(2)::after { background: #3b2a82; } /* Consulting : Violet nuit */
.methodology-grid-v4 .method-card-item:nth-child(3)::after { background: #1a8241; } /* Sustainable : Vert nature */
.methodology-grid-v4 .method-card-item:nth-child(4)::after { background: #c66218; } /* Safety : Orange sécurité */
.methodology-grid-v4 .method-card-item:nth-child(5)::after { background: #4b5866; } /* Architecture : Gris technique */
.methodology-grid-v4 .method-card-item:nth-child(6)::after { background: #10599a; } /* Engineering : Bleu ingénierie */

/* Typographie des titres blancs */
.method-card-item h3 {
    color: #ffffff !important;
    font-family: "Inter", sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); /* Légère ombre pour détacher le texte */
}

/* --- COMPORTEMENT AU SURVOL (HOVER) --- */
.method-card-item:hover .method-card-bg {
    transform: scale(1.04); /* Zoom discret de l'image */
}

.method-card-item:hover::after {
    opacity: 0.75; /* Laisse transparaître un peu plus la photo au survol */
}

/* --- ADAPTATION RESPONSIVE FLUIDE --- */
@media (max-width: 992px) {
    .methodology-grid-v4 {
        grid-template-columns: repeat(2, 1fr) !important; /* Pas de 2 colonnes sur tablette */
    }
}

@media (max-width: 600px) {
    .methodology-grid-v4 {
        grid-template-columns: 1fr !important; /* 1 seule colonne empilée sur mobile */
        gap: 15px !important;
    }
    .method-card-item {
        height: 220px; /* Hauteur réduite pour mobile */
        padding: 20px;
    }
    .method-card-item h3 {
        font-size: 1.25rem;
    }
}






/* Base et Typographie */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

h1 {
    color: #1a365d;
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

h2 {
    color: #2b6cb0;
    text-align: center;
    font-size: 1.8rem;
    margin-top: 0;
}

.intro-text {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
    font-size: 1.1rem;
    color: #4a5568;
}

/* Grille des Avantages */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

.benefit-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-top: 4px solid #2b6cb0;
}

.benefit-card h3 {
    color: #2d3748;
    margin-top: 0;
    font-size: 1.2rem;
}

/* =====================================================
   infrastructure affichage
===================================================== */
/* Conteneur du lien : aligne l'icône et le texte sur la même ligne */
.infrastructure-link-item {
    display: inline-flex;
    align-items: center; /* Centre verticalement l'icône et le texte */
    gap: 15px;           /* Espace horizontal entre l'icône et le texte */
    text-decoration: none;
    color: #000000;      /* Ajustez selon la couleur de votre texte */
}


/* Force une zone d'affichage strictement identique pour toutes les icônes */
.list-icon {
    width: 45px !important;   /* Ajustez cette valeur selon vos besoins */
    height: 45px !important;  /* Doit être identique à la largeur */
    object-fit: contain;      /* Force le SVG à entrer dans la boîte sans se déformer */
}


/* =====================================================
   ISO CERTIFICATIONS SECTION — PREMIUM ENGLISH STYLE
===================================================== */

.certificates-section {
    padding: 60px 0;
    text-align: center;
}

.main-title {
    color: #061b2b;
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.sub-title {
    color: #087bc1;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.intro-text {
    max-width: 850px;
    margin: 0 auto 50px auto;
    font-size: 15px;
    line-height: 1.7;
    color: #6f7d85;
}

/* Grille alignant les 3 cartes côte à côte */
.certificates-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    text-align: left; /* Aligne le texte des cartes à gauche */
}

/* Style de chaque carte individuelle */
.certificate-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 35px 30px;
    box-shadow: 0 10px 30px rgba(6, 27, 43, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 420px; /* Aligne la hauteur des boutons en bas */
    border: 1px solid #edf0f2;
}

.card-header h3 {
    font-size: 22px;
    color: #061b2b;
    font-weight: 700;
    margin-bottom: 8px;
}

.card-header .subtitle {
    font-size: 13px;
    font-style: italic;
    color: #84929a;
    margin-bottom: 25px;
}

/* Liste des détails */
.cert-details {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.cert-details li {
    font-size: 13px;
    color: #4a5568;
    margin-bottom: 12px;
    line-height: 1.5;
}

.cert-details strong {
    color: #061b2b;
    font-weight: 700;
}

/* Le badge vert "Valid" */
.status-badge {
    background-color: #c6f6d5;
    color: #22543d;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
    display: inline-block;
    margin-left: 5px;
}

/* Le bouton bleu "Download PDF" */
.download-btn {
    background-color: #087bc1;
    color: #ffffff;
    border: none;
    padding: 14px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.25s, transform 0.2s;
}

.download-btn:hover {
    background-color: #066099;
    transform: translateY(-1px);
}

/* --- ADAPTATION RESPONSIVE --- */
@media (max-width: 992px) {
    .certificates-grid {
        grid-template-columns: repeat(2, 1fr); /* Passe à 2 colonnes sur tablette */
    }
}

@media (max-width: 650px) {
    .certificates-grid {
        grid-template-columns: 1fr; /* S'empile sur une seule colonne sur mobile */
        gap: 20px;
    }
    .certificate-card {
        min-height: auto;
        padding: 25px;
    }
}


/* =====================================================
   MENU SECTORIEL CIRCULAIRE UNIQUE — PREMIUM STYLE la cercle infrastructure et industrie 
===================================================== */
/* =====================================================
   CORRECTIF ALIGNEMENT INTERFACE SECTORIELLE MAQUETTE
===================================================== */

.sectoriel-wrapper {
    display: grid !important;
    /* Aligne 450px fixes à gauche pour la roue, et donne l'espace restant (1fr) à la liste de droite */
    grid-template-columns: 450px 1fr !important;
    gap: 60px !important;
    
    /* Bloque le haut de la roue et le haut du menu de droite sur la même ligne supérieure */
    align-items: start !important; 
    margin-bottom: 80px !important; 
    width: 100%;
    box-sizing: border-box;
}

/* Panneau de DROITE (Onglets + Listes de rubriques) */
.lists-panel {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 25px !important;
    height: 100% !important;
    min-height: 360px !important; /* Calibré sur le diamètre de la roue donut chart */
    width: 100% !important;
}

/* Alignement horizontal et espacement de la barre des onglets */
.panel-tabs {
    display: flex !important;
    gap: 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 12px !important;
    width: 100% !important;
}

/* Structure et dimensionnement de la Roue Donut (À GAUCHE) */
.donut-chart {
    position: relative !important;
    width: 360px !important;
    height: 360px !important;
    border-radius: 50% !important;
    background: transparent !important;
    line-height: 0 !important;
    box-shadow: none !important;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Traitement chirurgical du trou central pour caler la rosace ODD en grand */
.donut-center-hole {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 44% !important; /* Diamètre de découpe idéal pour cacher la bordure blanche */
    height: 44% !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 5 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.donut-center-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    scale: 1.18 !important; /* Zoom millimétré pour afficher tous les logos colorés */
}

/* Typographie des textes courbés blancs de la roue */
.donut-wheel-text textPath {
    font-family: "Inter", sans-serif !important;
    font-size: 22px !important; /* Texte de grande taille très lisible */
    font-weight: 800 !important;
    fill: #ffffff !important;
    letter-spacing: 0.5px !important;
    dominant-baseline: middle !important;
}

/* Opacités des portions de cercle gérées par le JavaScript */
.donut-group {
    cursor: pointer !important;
    opacity: 0.22 !important; /* Estompe les portions inactives */
    transition: opacity 0.35s ease !important;
}

.donut-group.active {
    opacity: 1 !important; /* Rend la portion cliquée totalement lumineuse */
}

.donut-group:hover {
    opacity: 0.85 !important;
}

/* Style des lignes de rubriques avec icônes alignées à gauche */
.list-item {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 14px 20px !important;
    border-left: 4px solid var(--theme-color) !important;
    background: #f8fafc !important;
    border-radius: 0 6px 6px 0 !important;
    transition: transform 0.25s ease, background 0.25s ease !important;
}

/* Sécurité de taille pour empêcher les icônes de se déformer */
.list-icon-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 42px !important;
    height: 42px !important;
    flex-shrink: 0 !important;
}

.list-icon {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* --- ADAPTATION TABLETTES & MOBILES --- */
@media (max-width: 992px) {
    .sectoriel-wrapper {
        grid-template-columns: 1fr !important; /* Aligne le cercle au-dessus de la liste */
        justify-items: center !important;
        gap: 40px !important;
    }
    .lists-panel {
        width: 100% !important;
    }
}


/* =====================================================
   DONUT CHART — STRUCTURE VECTORIELLE ET TEXTES FIXED (V4)
===================================================== */

.visual-donut-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.donut-chart {
    position: relative;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: transparent;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 15px 45px rgba(6, 27, 43, 0.06);
}

.donut-svg-master {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Gestion des états de transparence au clic et au survol */
.donut-group {
    cursor: pointer;
    opacity: 0.18; /* Mode inactif par défaut */
    transition: opacity 0.3s ease;
}

.donut-group.active {
    opacity: 1 !important; /* Totalement opaque si actif */
}

.donut-group:hover {
    opacity: 0.85;
}

/* SYSTÈME DE POSITIONNEMENT STABLE DES TEXTES SUR L'ANNEAU */
.donut-wheel-text {
    position: absolute;
    z-index: 10; /* Force le texte au premier plan au-dessus des arcs SVG */
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #101820; /* Couleur sombre d'origine de la marque */
    letter-spacing: 0.5px;
    white-space: nowrap;
    pointer-events: none; /* Permet aux clics de traverser le texte sans bloquer la roue */
    transition: color 0.3s ease;
}

/* Placement individuel au milieu de chaque zone de couleur (120° chacune) */
.label-industries {
    top: 25%;
    right: 14%;
    transform: rotate(30deg); /* Aligné sur l'axe du tiers haut-droit */
}

.label-infrastructure {
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%); /* Reste parfaitement à l'endroit, horizontal au centre en bas */
}

.label-realestate {
    top: 25%;
    left: 14%;
    transform: rotate(-30deg); /* Aligné sur l'axe du tiers haut-gauche */
}

/* SYNC COULEURS : Rend le texte blanc uniquement si son secteur associé est actif */
.donut-group.sector-industries.active ~ .label-industries { color: #ffffff; }
.donut-group.sector-infrastructure.active ~ .label-infrastructure { color: #ffffff; }
.donut-group.sector-realestate.active ~ .label-realestate { color: #ffffff; }

/* Masque central blanc (Donut) */
.donut-center-hole {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: #ffffff;
    border-radius: 50%;
    z-index: 5;
    box-shadow: inset 0 5px 15px rgba(0,0,0,0.02);
    pointer-events: none;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.donut-center-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Force le SVG à prendre tout l'espace pour aligner ses coordonnées */
.donut-text-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Style de la typographie du texte courbé */
.donut-text-svg text {
    font-family: "Inter", sans-serif;
    font-size: 18px; /* Ajustement précis de la taille */
    font-weight: 700;
    fill: #101820; /* Couleur par défaut */
    letter-spacing: 0.5px;
}

/* Ajustement au survol et état actif */
.donut-sector.active {
    opacity: 1;
    z-index: 3;
}

/* Changement de couleur dynamique : le texte passe en blanc sur le secteur actif pour être très lisible */
.donut-sector.active .donut-text-svg text {
    fill: #ffffff;
}

.donut-sector:hover {
    opacity: 0.85;
}

/* Trou central Donut */
.donut-center-hole {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: #ffffff;
    border-radius: 50%;
    z-index: 5;
    box-shadow: inset 0 5px 15px rgba(0,0,0,0.02);
    pointer-events: none;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.donut-center-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =====================================================
   DONUT CHART — ARCHITECTURE VECTORIELLE SVG (V4)
===================================================== */

.visual-donut-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.donut-chart {
    position: relative;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: transparent;
    /* La rotation globale animée lors du clic fonctionne toujours sur le conteneur principal */
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 15px 45px rgba(6, 27, 43, 0.06);
}

.donut-svg-master {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Gestion de l'opacité par groupe (actif vs inactif) */
.donut-group {
    cursor: pointer;
    opacity: 0.18; /* Mode semi-transparent par défaut pour les tiers en sommeil */
    transition: opacity 0.3s ease;
}

.donut-group.active {
    opacity: 1; /* Pleine couleur pour le groupe sélectionné */
}

.donut-group:hover {
    opacity: 0.85;
}

/* Style de la typographie curviligne */
.donut-label textPath {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 700;
    fill: #101820; /* Teinte foncée textuelle de votre charte */
    letter-spacing: 0.3px;
    transition: fill 0.3s ease;
}

/* Éclaircissement du texte en blanc lorsque la catégorie est sélectionnée */
.donut-group.active .donut-label textPath {
    fill: #ffffff;
}

/* Le disque central blanc (Donut) */
.donut-center-hole {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: #ffffff;
    border-radius: 50%;
    z-index: 5;
    box-shadow: inset 0 5px 15px rgba(0,0,0,0.02);
    pointer-events: none; /* Permet aux clics de traverser le trou central blanc */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.donut-center-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* PANNEAU DROIT - INTERFACE ET LISTES */
.lists-panel {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.panel-tabs {
    display: flex;
    gap: 12px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 15px;
}

.tab-btn {
    border: none;
    background: transparent;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    color: #71808a;
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--tab-color);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.tab-btn.active {
    color: var(--tab-color);
}

.tab-btn.active::after {
    transform: scaleX(1);
}

/* APPARENCE DES LISTES INTERACTIVES */
.list-content {
    display: none;
    flex-direction: column;
    gap: 10px;
    animation: fadeIn 0.4s ease forwards;
}

.list-content.active {
    display: flex;
}

/* Modifie l'élément de la liste pour accueillir l'icône à gauche */
.list-item {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border-left: 4px solid var(--theme-color);
    padding: 12px 20px; /* Légère réduction du padding pour équilibrer avec l'icône */
    font-size: 14px;
    font-weight: 600;
    color: #101820;
    border-radius: 0 6px 6px 0;
    transition: transform 0.2s ease, background 0.2s ease;
    gap: 20px; /* Espace régulier entre l'icône et le texte */
}

/* Conteneur de l'icône pour lui garantir une taille fixe et un centrage parfait */
.list-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0; /* Empêche l'icône de se déformer si le texte est long */
}

/* Style de l'icône image */
.list-icon {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Conserve les proportions d'origine de l'icône */
}

.list-item span {
    display: inline-block;
}

.list-item:hover {
    background: #f1f5f9;
    transform: translateX(4px);
}

.list-item:hover {
    background: #f1f5f9;
    transform: translateX(4px);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
/* =====================================================
   DONUT CHART — TRUE SVG TEXT PATH ARCHITECTURE (V4)
===================================================== */

.visual-donut-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.donut-chart {
    position: relative;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: transparent;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 15px 45px rgba(6, 27, 43, 0.06);
}

.donut-svg-master {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Gestion fine des opacités interactives */
.donut-group {
    cursor: pointer;
    opacity: 0.18; /* Mode semi-transparent par défaut pour les inactifs */
    transition: opacity 0.3s ease;
}

.donut-group.active {
    opacity: 1 !important; /* Force la luminosité sur le tiers actif */
}

.donut-group:hover {
    opacity: 0.85;
}

/* TYPOGRAPHIE DES ARCS TEXTE SVG */
.donut-wheel-text textPath {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 700;
    fill: #101820; /* Couleur sombre institutionnelle par défaut */
    letter-spacing: 0.4px;
    pointer-events: none; /* Laisse passer le clic à travers l'écriture */
    transition: fill 0.3s ease;
}

/* Le texte bascule automatiquement en blanc sur le secteur actif */
.donut-group.active .donut-wheel-text textPath {
    fill: #ffffff !important;
}

/* LE TROU CENTRAL (MASQUE ET IMAGE BLANCHE CONCENTRIQUE) */
.donut-center-hole {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: #ffffff;
    border-radius: 50%;
    z-index: 5;
    box-shadow: inset 0 5px 15px rgba(0,0,0,0.02);
    pointer-events: none;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.donut-center-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}





/* images affiché avec drop  */
.markets-section {
    width: 100%;
    padding: 40px 0;
    overflow: hidden;
    background-color: #fff;
}

.markets-container {
    display: flex;
    gap: 15px;
    padding: 0 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    cursor: grab;
    user-select: none;
    /* Masquer la barre de défilement standard */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Masquer la barre de défilement pour Chrome, Safari et Opera */
.markets-container::-webkit-scrollbar {
    display: none;
}

.markets-container:active {
    cursor: grabbing;
}

/* --- Mise en page globale de la section --- */
.markets-section {
    width: 100%;
    padding: 50px 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* --- Conteneur Slider --- */
.markets-container {
    display: flex;
    gap: 16px;
    padding: 0 30px;
    overflow-x: auto;
    scroll-behavior: smooth;
    cursor: grab;
    user-select: none;
    /* Masquer les barres de défilement par défaut */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.markets-container::-webkit-scrollbar {
    display: none;
}

.markets-container:active {
    cursor: grabbing;
}

/* --- Structure d'une carte --- */
.market-card {
    position: relative;
    flex: 0 0 320px; /* Largeur optimale pour les listes */
    height: 480px;
    border-radius: 6px;
    overflow: hidden;
    background-color: #000000;
}

.market-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Crucial pour le fonctionnement fluide du Drag */
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* --- Bouton d'action supérieur (Flèche de modèle) --- */
.market-action-btn {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 32px;
    height: 32px;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    opacity: 0.8;
}

.market-action-btn svg {
    width: 18px;
    height: 18px;
    fill: #ffffff;
}

/* --- Zone de texte (Contenu) --- */
.market-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 85px 25px 30px 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 2;
    background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.85));
    transition: background 0.5s ease;
}

/* --- Titres --- */
.market-title {
    margin: 0 0 20px 0;
    color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Ajustements pour les longs titres */
.market-card:nth-child(3) .market-title,
.market-card:nth-child(4) .market-title,
.market-card:nth-child(5) .market-title {
    font-size: 1.45rem;
}

/* --- Menus Roulants de Liens --- */
.market-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.market-links-list li {
    margin-bottom: 12px;
    line-height: 1.3;
}

.market-links-list li a {
    color: #e5e5e5;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    display: inline-block;
    transition: color 0.2s ease;
}

.market-links-list li a:hover {
    color: #ffffff;
}

.market-links-list .arrow {
    font-size: 0.7rem;
    margin-left: 5px;
    vertical-align: middle;
    display: inline-block;
    transition: transform 0.2s ease;
}

.market-links-list li a:hover .arrow {
    transform: translateX(3px);
}

/* ===================================================
   EFFETS HOVER (SURVOL SOURIS)
   =================================================== */

/* Zoom et effacement partiel de la photo */
.market-card:hover img {
    transform: scale(1.04);
    opacity: 0.15;
}

/* Métamorphose en bleu */
.market-card:hover .market-content {
    background: linear-gradient(135deg, rgba(14, 53, 94, 0.96), rgba(17, 91, 150, 0.92));
}

/* Révélation de la liste des liens */
.market-card:hover .market-links-list {
    opacity: 1;
    transform: translateY(0);
}




/* page project*/
/* =====================================================
   CUSTOM PROJECT HERO (IMAGE AU LIEU DE VIDEO)
===================================================== */

/* Conteneur principal de la bannière */
.project-hero-custom {
    position: relative;
    background: #041621; /* Fond sombre pour combler les bords vides si la largeur est réduite */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Nouveau conteneur qui gère la largeur réduite de l'image */
.hero-image-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%; /* ◄ MODIFIEZ CETTE VALEUR POUR ADAPTER LA LARGEUR (ex: 70%, 90vw, etc.) */
    height: 100%;
    z-index: 1;
}

/* L'image statique qui remplace la vidéo */
.hero-static-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ajustement de l'overlay pour qu'il épouse uniquement la largeur de l'image */
.hero-image-wrapper .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(1,17,29,0.95) 0%, rgba(1,17,29,0.4) 100%);
    z-index: 2;
}

/* On s'assure que le contenu textuel s'aligne bien sur l'image */
.project-hero-custom .hero-content {
    position: relative;
    z-index: 3;
    width: min(1240px, 75%); /* Légèrement réduit pour rester dans le cadre de l'image */
    margin: auto;
}

/* --- ADAPTATION MOBILE --- */
@media(max-width: 800px) {
    .hero-image-wrapper {
        width: 100%; /* Repasse à 100% sur mobile pour éviter les bandes noires latérales */
    }
    .project-hero-custom .hero-content {
        width: min(1240px, 90%);
    }
}

/* =====================================================
   BANNIÈRE PROJETS — RENDU CINÉMA COMPACT (V4)
===================================================== */


/* L'image statique qui remplace proprement la vidéo */
.hero-static-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* L'overlay d'assombrissement épouse uniquement le cadre cinéma */
.hero-cinema-screen .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(1,17,29,0.95) 0%, rgba(1,17,29,0.35) 100%);
    z-index: 2;
}

/* Alignement du texte par rapport au cadre */
.project-hero-cinema .hero-content {
    position: relative;
    z-index: 3;
    width: min(1240px, 75%);       /* Reste proportionnel à la zone de l'image */
    margin: auto;
    padding-top: 20px;
}

/* --- ADAPTATION MOBILE RESPONSIVE --- */
@media(max-width: 900px) {
    .hero-cinema-screen {
        width: 100%;               /* Disparition des bandes noires sur mobile pour maximiser l'espace */
    }
    .project-hero-cinema .hero-content {
        width: min(1240px, 90%);
    }
    .project-hero-cinema {
        height: 50vh !important;   /* Légère réduction de hauteur sur petit écran */
        min-height: 400px !important;
    }
}
/* =====================================================
   BANNIÈRE PROJETS — RENDU CINÉMA COMPACT (V4)
===================================================== */

.project-hero-cinema {
    height: 55vh !important;       /* Hauteur réduite à 55% de l'écran pour un look compact */
    min-height: 480px !important;  /* Hauteur minimale de sécurité */
    background: #041621;           /* Fond noir cinéma qui habille les bandes latérales */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* Structure de "l'écran" centré à 80% de largeur */
.hero-cinema-screen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;                    /* ◄ Ajustez ce pourcentage si vous voulez élargir ou rétrécir l'image */
    height: 100%;
    z-index: 1;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); /* Ombre subtile sur les bords de l'image */
}

/* L'image statique qui remplace proprement la vidéo */
.hero-static-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* L'overlay d'assombrissement épouse uniquement le cadre cinéma */
.hero-cinema-screen .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(1,17,29,0.95) 0%, rgba(1,17,29,0.35) 100%);
    z-index: 2;
}

/* Alignement du texte par rapport au cadre */
.project-hero-cinema .hero-content {
    position: relative;
    z-index: 3;
    width: min(1240px, 75%);       /* Reste proportionnel à la zone de l'image */
    margin: auto;
    padding-top: 20px;
}

/* --- ADAPTATION MOBILE RESPONSIVE --- */
@media(max-width: 900px) {
    .hero-cinema-screen {
        width: 100%;               /* Disparition des bandes noires sur mobile pour maximiser l'espace */
    }
    .project-hero-cinema .hero-content {
        width: min(1240px, 90%);
    }
    .project-hero-cinema {
        height: 50vh !important;   /* Légère réduction de hauteur sur petit écran */
        min-height: 400px !important;
    }
}

/* =====================================================
   BANNIÈRE PROJETS — PLEINE LARGEUR COMPACTE (V4)
===================================================== */

.project-hero-full {
    height: 55vh !important;       /* Hauteur compacte préservée */
    min-height: 480px !important;  
    background: #041621 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100% !important;
}

/* Réaligne l'overlay global pour couvrir toute la bannière uniformément */
.project-hero-full::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(4, 22, 33, 0.85), transparent 65%) !important;
    z-index: 2;
}

/* Conteneur étendu à 100% (suppression des bandes noires) */
.hero-full-screen {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

/* Image statique avec transition de zoom */
.hero-static-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Effet de zoom fluide au survol de la bannière */
.project-hero-full:hover .hero-static-image {
    transform: scale(1.03);
}

/* Masque d'assombrissement complémentaire pour la lisibilité du texte */
.hero-full-screen .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 22, 33, 0.2) !important;
    z-index: 2;
    pointer-events: none;
}

/* Contenu textuel aligné sur la grille globale du site */
.project-hero-full .hero-content {
    position: relative;
    z-index: 3;
    width: min(1240px, 90%); /* Aligné sur la largeur standard du container */
    margin: auto;
}

/* --- RESPONSIVE MOBILES --- */
@media(max-width: 600px) {
    .project-hero-full {
        height: 50vh !important;
        min-height: 400px !important;
    }
}

/*fin page project*/
/* --- Styles de Base & Conteneur Principal --- */
.projects-filter-section {
    width: 100%;
    padding: 60px 0;
    background-color: #fcfcfc;
    font-family: Arial, sans-serif;
}

.projects-main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.projects-section-title {
    font-size: 2.8rem;
    font-weight: bold;
    color: #1a1a1a;
    margin: 0 0 15px 0;
}

.projects-section-subtitle {
    font-size: 1.1rem;
    color: #666;
    margin: 0 0 45px 0;
}

/* --- Barre de Filtres --- */
/* --- Structure Principale des Filtres --- */
.filter-bar {
    display: flex;
    align-items: flex-end; /* Aligne le bas des inputs avec le bas des boutons */
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 50px;
    width: 100%;
    box-sizing: border-box;
}

.filter-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le titre au-dessus de la ligne */
}

/* --- Style des Libellés (INDUSTRIES / LOCATIONS) --- */
.filter-group label {
    font-family: Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #004b87; /* Bleu marine corporate */
    letter-spacing: 1.5px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

/* --- Zone de Sélection et Ligne Basse Épurée --- */
.select-wrapper {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #e0e0e0; /* Ligne fine sous la sélection */
    padding-bottom: 4px;
}

.select-wrapper select {
    width: 100%;
    padding: 8px 30px 8px 0;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    color: #888888;
    outline: none;
    cursor: pointer;
    appearance: none; /* Supprime le style natif du navigateur */
    -webkit-appearance: none;
}

/* Style du texte indicatif par défaut */
.select-wrapper select option:disabled {
    color: #b5b5b5;
}

/* --- Icône de filtre à droite de la ligne --- */
.filter-icon {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Laisse le clic traverser vers le select */
    display: flex;
    align-items: center;
}

.filter-icon svg {
    width: 12px;
    height: 12px;
    fill: #333333; /* Couleur grise foncée pour le picto entonnoir */
}

/* --- Bloc Boutons FILTER & RESET --- */
.filter-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 2px; /* Ajustement d'alignement avec la bordure basse */
}

.btn-filter {
    background-color: #008cd3; /* Bleu ciel vif */
    color: #ffffff;
    border: none;
    padding: 14px 40px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-filter:hover {
    background-color: #0074b0;
}

.btn-reset {
    background-color: #ffffff;
    color: #666666;
    border: 1px solid #e0e0e0;
    padding: 13px 40px; /* 1px de moins pour compenser la bordure */
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reset:hover {
    background-color: #f9f9f9;
    color: #333333;
    border-color: #cccccc;
}

/* --- Adaptation écrans mobiles --- */
@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 25px;
    }
    .filter-actions {
        justify-content: stretch;
        margin-top: 10px;
    }
    .btn-filter, .btn-reset {
        flex: 1;
        text-align: center;
    }
}

/* --- Grille et Cartes Projets --- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}

.project-card {
    background-color: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.project-image-box {
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-top: 4px solid #008cd3; /* Ligne bleue supérieure sur chaque photo */
}

.project-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-card-body {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.project-tags {
    font-size: 0.75rem;
    font-weight: bold;
    color: #008cd3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.project-card-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #222;
    margin: 0 0 30px 0;
    line-height: 1.3;
}

.project-client {
    font-size: 0.85rem;
    color: #999;
    margin-top: auto; /* Aligne le client tout en bas de la carte */
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* --- Version sécurisée et isolée pour éviter les conflits --- */
form.filter-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto !important;
    column-gap: 50px !important;
    row-gap: 20px !important;
    align-items: flex-end !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto 50px auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

form.filter-bar .filter-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* --- Libellés (INDUSTRIES / LOCATIONS) --- */
form.filter-bar .filter-group label {
    font-family: Arial, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #004b87 !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    display: block !important;
}

/* --- Wrapper de sélection avec ligne basse forcée --- */
form.filter-bar .select-wrapper {
    position: relative !important;
    width: 100% !important;
    border-bottom: 1px solid #cccccc !important; /* Ligne grise visible */
    padding-bottom: 6px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

form.filter-bar .select-wrapper select {
    width: 100% !important;
    padding: 8px 30px 4px 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 0.95rem !important;
    color: #7c7c7c !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* --- Positionnement strict de l'icône entonnoir --- */
form.filter-bar .filter-icon {
    position: absolute !important;
    right: 5px !important;
    bottom: 10px !important; /* Calé juste au-dessus de la ligne */
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

form.filter-bar .filter-icon svg {
    width: 11px !important;
    height: 11px !important;
    fill: #333333 !important;
}

/* --- Boutons d'actions --- */
form.filter-bar .filter-actions {
    display: flex !important;
    gap: 15px !important;
    margin: 0 !important;
    padding-bottom: 2px !important; /* Alignement parfait sur la ligne */
    box-sizing: border-box !important;
}

form.filter-bar .btn-filter {
    background-color: #008cd3 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 45px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

form.filter-bar .btn-reset {
    background-color: #ffffff !important;
    color: #666666 !important;
    border: 1px solid #e0e0e0 !important;
    padding: 13px 45px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    cursor: pointer;
    white-space: nowrap !important;
}

/* --- Passage en mode colonne sur petits écrans --- */
@media (max-width: 900px) {
    form.filter-bar {
        grid-template-columns: 1fr !important;
        column-gap: 0 !important;
    }
    form.filter-bar .filter-actions {
        width: 100% !important;
    }
    form.filter-bar .btn-filter, 
    form.filter-bar .btn-reset {
        flex: 1 !important;
        text-align: center !important;
    }
}





/* =====================================================
   STYLE DE PAGINATION AVEC PREVIOUS & NEXT
===================================================== */
.projects-pagination-container {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 60px !important;
    margin-bottom: 40px !important;
}

ul.projects-pagination {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

ul.projects-pagination li.page-item,
ul.projects-pagination li.page-dots {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Style commun à tous les boutons rectangulaires et carrés */
ul.projects-pagination .page-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    height: 42px !important;
    box-sizing: border-box !important;
    padding: 0 14px !important; /* Ajout de padding latéral pour text */
    border: 1px solid #c2d1e0 !important;
    color: #005691 !important;
    text-decoration: none !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
}

/* Forcer la largeur carrée uniquement pour les chiffres de 1 caractère */
ul.projects-pagination .page-item[data-page] a {
    padding: 0 8px !important;
}

/* Effet Hover au survol des liens cliquables */
ul.projects-pagination .page-item:not(.active) a:hover {
    border-color: #0074b0 !important;
    background-color: #f4f8fb !important;
    color: #003a61 !important;
}

/* État Actif (Comme l'élément 3 de votre image : fond gris, texte sombre, non cliquable) */
ul.projects-pagination .page-item.active a {
    background-color: #f2f2f2 !important;
    border-color: #d1d1d1 !important;
    color: #444444 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* Points de suspension (...) */
ul.projects-pagination .page-dots {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    min-width: 25px !important;
    height: 42px !important;
    padding-bottom: 8px !important;
    color: #444444 !important;
    font-size: 1.1rem !important;
    box-sizing: border-box !important;
}


/* Classe de sécurité pour forcer le masquage des projets via JavaScript */
.project-card.is-hidden {
    display: none !important;
}






/* ====================================================================
   MODULE COHÉRENT : CARROUSEL DES PARTENAIRES LOGOS COULISSANT ( les logos a la page at a galance)
==================================================================== */
/* ====================================================================
   STRUCTURE WEB PRO : CALIBRAGE HORIZONTAL POUR 6 LOGOS DE MARQUES
==================================================================== */

.partners-carousel-section {
    width: 100% !important;
    background-color: #ffffff !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    border-top: 1px solid #edf0f2 !important;
    box-sizing: border-box !important;
    overflow: hidden;
}

.carousel-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important; /* Aligne les icônes vectorielles de flèches au centre vertical des images */
    justify-content: space-between !important;
    width: min(1340px, 96%) !important; /* Largeur augmentée pour afficher proprement les 6 éléments côte à côte */
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Le rail coulissant */
.logos-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Interdit formellement l'empilage vertical */
    align-items: center !important; 
    justify-content: space-between !important; /* Répartit uniformément les logos sur la ligne */
    gap: 25px !important; /* Espacement compact réduisant le vide blanc entre les capsules */
    overflow-x: auto !important;
    scroll-behavior: smooth !important; /* Rend la bascule fluide et douce à l'œil lors du clic */
    width: 100% !important;
    scrollbar-width: none !important; /* Masque la barre de défilement Firefox */
    padding: 15px 0 !important;
}

.logos-track::-webkit-scrollbar {
    display: none !important; /* Masque la barre de défilement Chrome, Edge et Safari */
}

/* 📐 CELLULE D'ACCUEIL DES MARQUES À DIMENSIONS HARMONISÉES */
.logo-item {
    flex: 0 0 170px !important;  /* Largeur fixe sécurisée pour chaque marque */
    width: 170px !important;
    height: 95px !important;   /* Hauteur proportionnelle bloquant l'effet géant */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 🖼️ DIMENSIONNEMENT ET NETTETÉ DES LOGOS (MABRUK, HAROUGE, ENI, ETC.) */
.logo-item img {
    display: block !important;
    width: 100% !important;        /* Force l'image à occuper la largeur de la cellule */
    max-height: 75px !important;   /* Augmente la taille verticale sans jamais déformer le dessin original */
    object-fit: contain !important; /* Redimensionne de manière uniforme : les cercles restent ronds */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Effet interactif au survol */
.logo-item img:hover {
    transform: scale(1.06) !important;
}

/* Design fin et épuré des flèches */
.carousel-arrow {
    background: none !important;
    border: none !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    color: #087bc1 !important; /* Bleu corporate IAPS */
    cursor: pointer !important;
    padding: 0 15px !important;
    user-select: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.carousel-arrow:hover {
    color: #061b2b !important;
    transform: scale(1.15);
}

/* --- SUPPORTS MOBILES ET TACTILES (RESPONSIVE SYSTEM) --- */
@media (max-width: 1100px) {
    .logos-track {
        justify-content: flex-start !important; /* Active le défilement horizontal infini si l'écran rétrécit */
    }
    .logo-item {
        flex: 0 0 140px !important;
        width: 140px !important;
        height: 80px !important;
    }
    .logo-item img {
        max-height: 60px !important;
    }
}

@media (max-width: 768px) {
    .carousel-arrow {
        display: none !important; /* Masque les flèches sur smartphone pour laisser place au glissement tactile natif */
    }
    .logo-item {
        flex: 0 0 120px !important;
        width: 120px !important;
        height: 70px !important;
    }
}



/* =====================================================
Supprime l'espace
===================================================== */
/* 1. Force la suppression de tout espace sur la section Contact */
#contact, 
.contact.section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2. Force la suppression de tout espace sur la section Carrousel */
.partners-carousel-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  /* Garde uniquement un espace en bas pour ne pas coller à la section suivante */
  padding-bottom: 30px !important; 
  
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}

/* 3. Sécurité : Supprime les marges parasites du dernier et premier élément interne */
#contact > *:last-child,
.partners-carousel-section > *:first-child {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* =====================================================
   BANNIÈRE HERO — ALIGNEMENT EN BAS DE L'IMAGE
===================================================== */

/* Conteneur de contenu textuel superposé */
.project-hero-full .hero-content.align-bottom {
    position: relative;
    z-index: 3;
    width: min(1240px, 90%);
    margin: auto;
    height: 100%;
    
    /* MODIFICATIONS CRITIQUES : Pousse tout le texte vers le bas de la photo */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    padding-bottom: 50px; /* Espace de sécurité entre le paragraphe et le bord bas de la photo */
}

/* Style affiné et minimisé pour le titre Chemicals */
.project-hero-full .hero-content h1.hero-main-title {
    font-family: "Inter", sans-serif;
    
    /* MODIFICATION DE TAILLE : Rendu un peu plus petit et élégant */
    font-size: clamp(36px, 4.5vw, 50px) !important; 
    
    font-weight: 800;
    color: #ffffff !important; /* Force la couleur en blanc pur */
    line-height: 0.95;
    letter-spacing: -3px;
    margin-top: 10px;
    margin-bottom: 15px;
    
    /* Ombre portée discrète pour détacher parfaitement les lettres blanches du fond */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); 
}


/* =====================================================
   2026 MODERN TAGS — CAPSULES ÉPURÉES
===================================================== */
.chem-tags-modern-section {
    padding: 80px 0 40px 0;
    background: #ffffff;
}

.modern-tags-wrapper {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
}

.modern-tag {
    background: #f4f7f9;
    color: #51626e;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 24px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* État actif ou survolé : transition douce et moderne */
.modern-tag:hover, .modern-tag.active {
    background: #168fd7;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(22, 143, 215, 0.2);
}

/* =====================================================
   2026 SHOWCASE — GRILLE COMPOSÉE EN SUPOSITION (LAYERING)
===================================================== */
.chem-showcase-section {
    padding: 40px 0 120px 0;
    background: #ffffff;
}

.showcase-container {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 520px;
}
/* =====================================================
   UNIFORM SHOWCASE IMAGE BOX (CHEMICALS & WATER STYLE)
===================================================== */
.showcase-visual-box {
    width: 60%;
    height: 500px;              /* Hauteur de référence commune */
    border-radius: 8px;
    overflow: hidden;           /* Sécurité absolue anti-débordement */
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
}

/* Règle unifiée pour toutes les images du showcase */
.showcase-visual-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;       /* Recadre proprement sans déformer */
    object-position: center !important; /* Centre l'image verticalement et horizontalement */
    display: block;
}

/* Voile d'ambiance harmonisé */
.visual-tint-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(6, 27, 43, 0.1), rgba(6, 27, 43, 0));
    pointer-events: none;
}

/* =====================================================
   RESPONSIVE DESIGN STANDARD POUR TOUTES LES PAGES
===================================================== */
@media (max-width: 992px) {
    .showcase-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .showcase-visual-box {
        width: 100% !important;
        height: 320px !important; /* Hauteur responsive stable sur mobile */
        margin-bottom: -30px;
    }
}





/* Bloc Texte : chevauche l'image sur la droite */

/* =====================================================
   2026 UNIFORM SHOWCASE — ZONE TEXTE ULTRA-COMPACTE
===================================================== */

/* 1. Le conteneur parent modifié */
.showcase-container {
    display: flex !important;
    flex-direction: row !important;
    
    /* MODIFICATION CRITIQUE : Aligne au centre verticalement et empêche 
       la carte de texte de s'étirer de force sur toute la hauteur de l'image */
    align-items: center !important; 
    
    justify-content: space-between !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 2. La carte de texte avec hauteur minimisée */
.showcase-content-card {
    position: relative !important;
    width: 37% !important;
    background: #ffffff;
    
    /* Réduction du padding interne pour minimiser encore plus l'espace */
    padding: 25px 30px !important; 
    
    border-radius: 12px !important;
    border-top: 4px solid #168fd7;
    box-shadow: 0 15px 40px rgba(6, 27, 43, 0.04);
    
    /* ÉTAPE CLÉ : La boîte prend uniquement la hauteur nécessaire à son texte */
    height: fit-content !important; 
    
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
}

/* Ajustement des marges intérieures du texte pour compacter le tout */
.card-mini-label {
    font-size: 9px !important;
    font-weight: 800;
    color: #168fd7;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px !important; /* Espace réduit */
}

.editorial-lead {
    font-size: 14.5px !important;
    line-height: 1.4 !important;
    color: #061b2b !important;
    font-weight: 600;
    margin-bottom: 10px !important; /* Espace réduit */
}

.body-editorial-modern,
.stream-meta-content .body-editorial-modern,
.editorial-body {
    text-align: justify !important;   /* Justifie le texte à droite et à gauche */
    
    /* SYSTÈME DE CÉSURE ULTRA-COMPACT ANTI-ESPACES GÉANTS */
    -webkit-hyphens: auto !important; /* Active les coupures de mots sur Safari/Chrome */
    -ms-hyphens: auto !important;     /* Active les coupures de mots sur Internet Explorer */
    hyphens: auto !important;         /* Active les coupures de mots standard (Firefox/Edge) */
    
    /* SÉCURITÉS GLOBALES DE FLUX TEXTUEL */
    word-break: normal !important;    /* Évite les coupures sauvages au milieu des lettres */
    word-wrap: break-word !important; /* Force le retour à la ligne si nécessaire */
    overflow-wrap: break-word !important;
    
    line-height: 1.6 !important;      /* Interligne aéré et lisible */
}


/* =====================================================
   RESPONSIVE DESIGN (EMPILAGE PROPRE SUR MOBILE)
===================================================== */
@media (max-width: 992px) {
    .showcase-container {
        flex-direction: column !important; /* Passe en colonne sur tablette/mobile */
        gap: 20px !important;
    }
    
    .showcase-visual-box.modern-2026-wrapper,
    .showcase-content-card {
        width: 100% !important;         /* Prennent toute la largeur sur écran mobile */
    }
    
    .showcase-visual-box.modern-2026-wrapper {
        height: 320px !important;       /* Hauteur mobile optimisée */
    }
}




/* =====================================================
   OIL & GAS — HIGH-END UI DESIGN (V2026)
===================================================== */
/* Force le masquage strict à l'état initial */
#panel-oil-gas, 
.oil-gas-dropdown-panel {
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important; /* Évite que le padding de 80px ne crée une bande blanche */
    transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1), padding 0.6s ease;
}

/* Rétablit les valeurs uniquement lorsque la classe 'is-open' est ajoutée */
#panel-oil-gas.is-open, 
.oil-gas-dropdown-panel.is-open {
    max-height: 1000px !important; /* Augmenté à 1000px pour ne pas couper la timeline */
    padding: 80px 0 !important;
}


.oil-gas-v2026-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Répartition 50/50 parfaitement équilibrée */
    gap: 120px;
    max-width: 960px !important;
    margin: 0 auto;
    align-items: center;
}

/* --- TEXTE EDITORIAL GAUCHE --- */
.oil-gas-brand-editorial {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.oil-gas-brand-editorial .editorial-subtitle {
    font-size: 11px;
    font-weight: 700;
    color: #168fd7; /* Bleu signature */
    letter-spacing: 2px;
    text-transform: uppercase;
}

.oil-gas-brand-editorial h2 {
    font-family: "Inter", sans-serif;
    font-size: clamp(38px, 4.5vw, 54px);
    font-weight: 800;
    color: #061b2b; /* Noir bleuté premium */
    letter-spacing: -2px;
    margin: 0;
}

/* --- STRUCTURE TIMELINE DROITE --- */
.oil-gas-timeline-stream {
    display: flex;
    flex-direction: column;
    gap: 0; /* Collés pour former la ligne continue fine */
    position: relative;
}

.stream-row-item {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 24px 0;
    cursor: pointer;
    position: relative;
}

/* LA LIGNE FINE MULTI-PIXELS : Remplace l'arc épais obsolète */
.stream-row-item::before {
    content: "";
    position: absolute;
    left: 7.5px; /* Aligné pile au centre du nœud */
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #edf2f7; /* Ligne de guidage grise ultra-fine */
    z-index: 1;
}

/* Masque la ligne qui dépasse sur le premier et le dernier élément */
.stream-row-item:first-child::before { top: 50%; }
.stream-row-item:last-child::before { bottom: 50%; }

/* LE NOEUD LUMINEUX (PUCE) */
.indicator-node {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.node-core {
    width: 6px;
    height: 6px;
    background-color: #cbd5e1;
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* DESCRIPTION TEXTUELLE DROITE */
.stream-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.3s ease;
}

.stream-title-text {
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #94a3b8; /* Légèrement estompé si inactif */
    letter-spacing: -0.5px;
    transition: color 0.3s ease;
}

.stream-caption-small {
    font-size: 13px;
    color: #94a3b8;
    opacity: 0; /* Masqué par défaut, apparaît si actif */
    transform: translateY(4px);
    transition: all 0.3s ease;
}

/* =====================================================
   ÉTATS INTERACTIFS (ACTIVE & HOVER)
===================================================== */
.stream-row-item:hover .stream-title-text,
.stream-row-item.active .stream-title-text {
    color: #061b2b; /* Devient noir profond */
}

.stream-row-item:hover .indicator-node,
.stream-row-item.active .indicator-node {
    border-color: #087bc1;
    box-shadow: 0 0 0 4px rgba(8, 123, 193, 0.1);
}

.stream-row-item:hover .node-core,
.stream-row-item.active .node-core {
    background-color: #087bc1; /* Devient bleu éclatant */
    transform: scale(1.2);
}

.stream-row-item:hover .stream-meta,
.stream-row-item.active .stream-meta {
    transform: translateX(4px); /* Léger décalage dynamique */
}

/* Déploiement de la légende sur l'élément sélectionné */
.stream-row-item.active .stream-caption-small {
    opacity: 1;
    transform: translateY(0);
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .oil-gas-v2026-layout {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .oil-gas-dropdown-panel.is-open {
        padding: 50px 0;
    }
}

/* =====================================================
  
===================================================== */
/* --- NOUVEAU BLOC ÉDITORIAL GAUCHE --- */
.oil-gas-editorial-showcase {
    position: relative;
    height: 480px; /* Aligné sur la hauteur de la timeline droite */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(6, 27, 43, 0.08);
}

/* Conteneur absolu des images */
.showcase-bg-images {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Style de base de chaque image d'arrière-plan */
.bg-step-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* Masqué par défaut */
    transform: scale(1.05);
    transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1), transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

/* Image active : transition de fondu + léger zoom arrière */
.bg-step-img.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

/* Filtre sombre pour garder le texte lisible */
.editorial-dark-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(6, 27, 43, 0.85) 0%, rgba(6, 27, 43, 0.4) 100%);
    z-index: 3;
    pointer-events: none;
}

/* Contenu textuel poussé au premier plan */
.editorial-text-content {
    position: relative;
    z-index: 4;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    box-sizing: border-box;
}

.oil-gas-editorial-showcase .editorial-subtitle {
    color: #45b4f5; /* Bleu clair contrasté sur fond sombre */
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.oil-gas-editorial-showcase .editorial-main-title {
    color: #ffffff !important; /* Blanc pur */
    font-size: clamp(36px, 5vw, 48px) !important;
    font-weight: 800;
    letter-spacing: -2px;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* --- RESPONSIVE ADAPTATION --- */
@media (max-width: 768px) {
    .oil-gas-editorial-showcase {
        height: 260px; /* Hauteur réduite sur mobile */
    }
}




/* =====================================================
   POP-UP MODALE — ANIMATION SMOOTH ZOOM & FADE (V2026)
===================================================== */
/* Par défaut, l'overlay est totalement invisible et cliquable au travers */
.stream-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(6, 27, 43, 0.65); /* Ombre d'arrière-plan */
    justify-content: center;
    align-items: center;
    z-index: 99999999 !important; /* Force l'affichage au premier plan absolu */
}

/* Elle ne s'affiche et ne bloque l'écran que lorsqu'elle devient active */
.stream-modal-overlay.is-visible {
    display: flex !important;
    pointer-events: auto !important;
}

/* Boîtier central de la Pop-up avec état initial masqué */
.stream-modal-box {
    background: #ffffff;
    width: min(900px, 92%) !important; 
    padding: 0 !important; 
    border-radius: 8px;
    position: relative;
    box-shadow: 0 30px 70px rgba(6, 27, 43, 0.28);
    overflow: visible !important; /* ◄ MODIFIÉ : Permet à la croix de déborder proprement du cadre */
    
    /* ÉTAT INITIAL POUR L'ANIMATION : Légèrement plus petit et invisible */
    opacity: 0;
    transform: scale(0.92) translateY(10px);
    
    /* Courbe de transition cubique haut de gamme (effet ressort/fluide) */
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

/* ÉTAT ACTIF : Déploiement automatique lors de l'ouverture */
.stream-modal-overlay.is-visible .stream-modal-box {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Conteneur et Image (Parfaitement sécurisés) */
.modal-image-box {
    width: 100% !important;
    height: auto !important; 
    line-height: 0; 
    background: #061b2b;
    border-radius: 8px; /* Épouse l'arrondi du boîtier */
    overflow: hidden;   /* Coupe les angles vifs de l'image interne */
}

.modal-image-box img {
    width: 100%;
    height: auto !important; 
    max-height: 80vh !important; 
    object-fit: contain; 
    display: block;
}

/* =====================================================
   AJOUT CRITIQUE : BOUTON DE FERMETURE UNIFORME
===================================================== */
.stream-modal-box .stream-modal-close {
    position: absolute !important;
    top: -15px !important;   /* Place la croix à cheval sur la bordure supérieure */
    right: -15px !important; /* Place la croix à cheval sur la bordure droite */
    width: 38px !important;
    height: 38px !important;
    background: #7a8b99 !important; /* Pastille grise ardoise d'origine */
    border: none !important;
    border-radius: 50% !important; /* Cercle parfait */
    color: #ffffff !important; /* Croix blanche */
    font-size: 22px !important;
    line-height: 36px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    padding-bottom: 2px !important; /* Centrage vertical précis du caractère '×' */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    z-index: 10100 !important;
}

.stream-modal-box .stream-modal-close:hover {
    background-color: #087bc1 !important; /* Passe au bleu de votre marque au survol */
    transform: scale(1.08) !important;
}

/* Adaptation responsive pour smartphones */
@media (max-width: 768px) {
    .stream-modal-box .stream-modal-close {
        top: 12px !important; /* Ramène le bouton à l'intérieur sur mobile pour éviter la sortie d'écran */
        right: 12px !important;
        width: 34px !important;
        height: 34px !important;
        font-size: 18px !important;
    }
}


/* Bouton Fermer (Inchangé) */
/* =====================================================
   BOUTON DE FERMETURE UNIFORME — CERCLE GRIS & CROIX BLANCHE
===================================================== */
button.stream-modal-close,
.stream-modal-box .stream-modal-close,
#popup-steel .stream-modal-close,
#popup-non-ferrous .stream-modal-close {
    position: absolute !important;
    top: 20px !important;    /* Positionnement aéré dans le coin supérieur droit */
    right: 20px !important;
    width: 40px !important;   /* Largeur stricte du boîtier */
    height: 40px !important;  /* Hauteur identique pour garantir un cercle parfait */
    
    /* Configuration du disque d'arrière-plan de votre capture */
    background: #7a8b99 !important; 
    background-color: #7a8b99 !important; /* Teinte grise ardoise exacte */
    border: none !important;
    border-radius: 50% !important; /* Forçage de la géométrie en cercle parfait */
    
    /* Alignement chirurgical de la croix blanche au centre */
    color: #ffffff !important; /* Force la couleur blanche sur le symbole X */
    font-size: 22px !important;
    font-family: Arial, sans-serif !important;
    line-height: 40px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* Propriétés de comportement et d'accessibilité */
    cursor: pointer !important;
    z-index: 10150 !important; /* Reste toujours visible au premier plan */
    padding: 0 !important;
    padding-bottom: 2px !important; /* Micro-ajustement vertical pour caler le 'X' pile au centre */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important; /* Légère ombre portée pour détacher le bouton */
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

/* Effet interactif discret lors du survol de la souris */
button.stream-modal-close:hover {
    background-color: #617280 !important; /* Assombrit légèrement la pastille grise */
    transform: scale(1.05) !important;     /* Micro-zoom dynamique de 5% */
}

/* Adaptation de sécurité pour les écrans tactiles et smartphones */
@media (max-width: 600px) {
    button.stream-modal-close {
        top: 15px !important;
        right: 15px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }
}







/* =====================================================
   2026 UNIFORM IMAGES — ZERO ESPACE BLANC (COVER) page water et chemical image a gauche et texte a droite 
===================================================== */
.modern-2026-wrapper {
    position: relative;
    width: 60%;
    /* Suppression du padding pour que le cadre de l'image épouse les bords du fond bleu */
    padding: 0 !important; 
    background-color: #087bc1 !important; 
    border-radius: 12px !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    
    /* ÉTAPE 1 : On donne une hauteur fixe au bloc pour que toutes les pages soient identiques */
    height: 480px !important; 
}

/* Le cadre qui contient l'image */
.image-cinema-frame {
    position: relative;
    width: 100% !important;
    height: 100% !important; /* Force le cadre à prendre toute la hauteur du conteneur */
    background: #ffffff;
    border: none;
    border-radius: 12px !important; 
    overflow: hidden;
    z-index: 2;
}

/* ÉTAPE 2 : Forcer le SVG et le JPG à remplir 100% de l'espace sans déformation */
.image-cinema-frame img {
    width: 100% !important;
    height: 100% !important;
    
    /* object-fit: cover supprime les bandes blanches en zoomant légèrement si nécessaire */
    object-fit: cover !important; 
    
    object-position: center !important; /* Maintient le centre de l'image visible */
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =====================================================
   INTERACTIONS & RESPONSIVE
===================================================== */
.modern-2026-wrapper:hover img {
    transform: scale(1.03); /* Léger effet de zoom élégant au survol */
}

@media (max-width: 992px) {
    .modern-2026-wrapper {
        width: 100% !important;
        height: 320px !important; /* Hauteur responsive stable et uniforme sur mobile */
    }
}

/* =====================================================
 
===================================================== */

/* =====================================================
   PRE-FOOTER GALLERY — 7 COLONNES UNIFORMES (V2026) page water pour les 7 images 
===================================================== */

.pre-footer-gallery-rollup {
    width: 100%;
    margin-top: 60px;
    margin-bottom: 60px !important; /* Espacement net au-dessus du footer */
    overflow: hidden;               /* Cache les éléments en dehors du cadre de l'écran */
    position: relative;
    display: flex;
}

/* Le rail d'entraînement de l'animation */
.rollup-track {
    display: flex !important;
    width: max-content;
    gap: 20px !important;
    /* Animation matérielle fluide de 32 secondes par révolution */
    animation: iapsRollUpMarquee7 32s linear infinite !important;
}

/* Les groupes de listes alignés côte à côte */
.rollup-group {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    flex-shrink: 0;
}

/* Structure verticale propre (Image + Légende) */
.gallery-block-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 260px;
}

/* Boîtier d'image fixé à vos dimensions strictes (260x180) */
.gallery-column-item {
    position: relative;
    width: 260px !important;
    height: 180px !important;
    border-radius: 6px;
    overflow: hidden;
    background-color: #061b2b;
    box-shadow: 0 10px 25px rgba(6, 27, 43, 0.04);
}

.gallery-column-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Pas d'écrasement ni d'espace blanc */
    display: block;
    transition: transform 0.4s ease;
}

/* Légendes sous les visuels */
.column-caption {
    font-family: "Inter", sans-serif;
    font-size: 12px !important;
    font-weight: 600;
    color: #72818b;
    text-align: center;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    line-height: 1.3;
}

/* =====================================================
   INTERACTIONS & SÉCURITÉ DE SURVOL
===================================================== */
/* MET EN PAUSE l'avancement automatique dès que la souris survole le rail */
.pre-footer-gallery-rollup:hover .rollup-track {
    animation-play-state: paused !important;
}

/* Éléments actifs au survol */
.gallery-block-wrapper:hover .column-caption {
    color: #168fd7; /* La légende s'éclaire au survol de la carte */
}
.gallery-block-wrapper:hover .gallery-column-item img {
    transform: scale(1.04); /* Micro-zoom discret de l'infrastructure */
}

/* =====================================================
   TRAJECTOIRE ET SÉCURITÉ MATÉRIELLE DE L'ANIMATION
===================================================== */
@keyframes iapsRollUpMarquee7 {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        /* Se déplace précisément de la moitié du conteneur (Groupe 1 complet) 
           avant de réinitialiser le cycle de façon invisible */
        transform: translate3d(calc(-50% - 10px), 0, 0);
    }
}


/* Supprime l'espace sous la section showcase */
.chem-showcase-section {
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
}

/* Supprime l'espace au-dessus du bloc pre-footer */
.pre-footer-gallery-rollup {
    margin-top: 10px !important;
    padding-top: 0 !important;
}




/* =====================================================
   CORRECTIF FINAL ALIGNEMENT GLOBAL SHOWCASE (WATER)
===================================================== */

.chem-showcase-section {
    padding: 60px 0;
    background-color: #ffffff;
}

/* =====================================================
   BARRAGE SÉCURISÉ : ÉGALITÉ DE HAUTEUR STRICTE (480px)
===================================================== */

/* 1. Force le conteneur parent à étirer ses enfants à la même hauteur */
.showcase-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;     /* ◄ CRITIQUE : Force l'image et la carte à avoir la même hauteur */
    justify-content: space-between !important;
    gap: 40px !important;               
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* 2. Bloc Visuel de l'image (Fixé à 480px) */
.showcase-visual-box {
    position: relative !important;
    width: 48% !important;              
    height: 480px !important;           /* Hauteur cinéma de référence */
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 15px 35px rgba(6, 27, 43, 0.05);
}

/* 3. Carte de texte de droite : ÉPOUSE RIGOUREUSEMENT LA HAUTEUR DE L'IMAGE */
.showcase-content-card {
    position: relative !important;
    width: 48% !important;              
    
    /* MODIFICATIONS CRITIQUES POUR REPRENDRE LES 480PX */
    height: 480px !important;           /* ◄ Remplace fit-content pour bloquer la hauteur à 480px */
    max-height: 480px !important;       /* Sécurité anti-débordement */
    
    background: #ffffff !important;
    padding: 40px 40px !important;      /* Padding interne ajusté pour aérer l'espace fixe */
    border-radius: 12px !important;
    border-top: 5px solid #087bc1 !important; /* Ligne supérieure bleu signature (Mettre #ff6b00 pour chemicals) */
    box-shadow: 0 15px 40px rgba(6, 27, 43, 0.04) !important;
    
    /* Distribution du texte sur toute la hauteur fixe disponible */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* ◄ Répartit joliment les paragraphes du haut vers le bas */
    box-sizing: border-box !important;
}


/* Typographie interne */
.card-mini-label {
    font-size: 11px !important;
    font-weight: 800;
    color: #087bc1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px !important;
}

.editorial-lead {
    font-size: 26px !important;
    font-weight: 700;
    color: #061b2b;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
}

.showcase-content-card .editorial-body {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: #6f7d85 !important;
    margin-bottom: 15px !important;
}

.editorial-pillars h5 {
    font-size: 15.5px !important;
    font-weight: 700;
    color: #061b2b;
    margin: 8px 0 !important;
}

/* =====================================================
   CENTREMENT CHIRURGICAL DE L'IMAGE SUR LA PAGE
===================================================== */
.showcase-bottom-infrastructure-grid {
    width: 100% !important;
    max-width: 1200px !important;
    
    /* Le "auto" à gauche et à droite pousse le bloc entier au centre de la page */
    margin: 50px auto 0 auto !important; 
    
    border-top: 1px solid #e2e8f0;
    padding-top: 35px;
    box-sizing: border-box !important;
    
    /* Aligne le contenu interne (l'image) pile au milieu horizontal */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Style de l'image centrée */
.infra-marquee-static-img {
    max-width: 80% !important; /* L'empêche de déborder sur petit écran */
    height: auto !important;
    display: block !important;
    
    /* Sécurité : force l'image à se positionner au centre */
    margin: 0 auto !important; 
    object-fit: contain !important; 
}


/* =====================================================
   JUSTIFICATION DU TEXTE ÉDITORIAL (WATER & CHEMICALS)
===================================================== */

/* Force le texte principal à se bloquer aux extrémités droites et gauches */
.showcase-content-card .editorial-body {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: #6f7d85 !important;
    margin-bottom: 15px !important;
    
    /* INTERVENTION : Aligne le texte sur les deux bords au pixel près */
    text-align: justify !important; 
}

/* Applique le même alignement chirurgical sur le paragraphe de conclusion gris */
.showcase-content-card .editorial-body.text-muted {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: #84929a !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    
    /* INTERVENTION : Justifie également le texte d'accompagnement du bas */
    text-align: justify !important; 
}

/* =====================================================
   CORRECTIF D'AFFICHAGE DU BOUTON FERMER (CROIX MODALE)
===================================================== */

/* 1. Force le bouton fermer à être TOTALEMENT MASQUÉ par défaut lorsque la modale est fermée */
.stream-modal-overlay .stream-modal-close {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important; /* Rend le bouton invisible et non cliquable */
}

/* 2. Affiche la croix UNIQUEMENT lorsque la classe 'is-visible' est ajoutée à la modale */
.stream-modal-overlay.is-visible .stream-modal-close {
    display: flex !important; /* Utilise flex pour un centrage parfait de la croix 'X' */
    opacity: 1 !important;
    pointer-events: auto !important; /* Réactive l'interactivité du bouton */
}



/* =====================================================
   EFFET SURVOL ET CURSEUR CLIQUABLE (ACCESSIBILITÉ POP-UP)
===================================================== */

/* Règle appliquée à l'image via sa classe de déclenchement cliquable-pop */
.cliquable-pop {
    /* MODIFICATION ESSENTIELLE : Transforme la flèche de la souris en main cliquable */
    cursor: pointer !important; 
    
    /* Ajoute une transition fluide pour adoucir les effets visuels ci-dessous */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease !important;
}

/* Comportement précis de l'image AU MOMENT du survol (Hover) */
.cliquable-pop:hover {
    transform: scale(1.02) !important;       /* Élevage / Micro-zoom très subtil et élégant de 2% */
    filter: brightness(0.97) !important;     /* Micro-variation de luminosité pour simuler un bouton enfoncé */
}

/* =====================================================
   ADAPTATION RESPONSIVE FORCÉE (TABLETTES & MOBILE)
===================================================== */
@media (max-width: 992px) {
    
    /* 1. Aligne le conteneur en colonne verticale */
    .showcase-container {
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    /* 2. L'image de gauche prend 100% de la largeur et réduit sa hauteur */
    .showcase-visual-box {
        width: 100% !important;
        height: 300px !important; /* Hauteur compacte adaptée aux tablettes */
    }
    
    /* 3. La carte blanche brise ses 480px fixes pour s'adapter au texte */
    .showcase-content-card {
        width: 100% !important;
        height: auto !important;       /* Libère la hauteur pour éviter les coupures de texte */
        max-height: none !important;
        padding: 30px 25px !important;  /* Réduit légèrement les paddings internes */
        justify-content: flex-start !important; /* Aligne le texte de manière naturelle */
        gap: 20px !important;           /* Crée des espaces réguliers entre les paragraphes */
    }
    
    /* 4. Adapte la taille des gros titres sur petit écran */
    .editorial-lead {
        font-size: 22px !important;
        line-height: 1.4 !important;
    }
    
    /* 5. Aligne le texte naturellement à gauche sur smartphone pour un meilleur confort de lecture */
    .showcase-content-card .editorial-body {
        text-align: left !important;
    }
    
    /* 6. Empêche la grille du bas d'être écrasée ou tronquée sur mobile */
    .showcase-bottom-infrastructure-grid {
        margin-top: 40px !important;
        overflow-x: auto !important; /* Active le défilement tactile horizontal si l'écran est trop petit */
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }
    
    .infra-marquee-static-img {
        width: auto !important;
        min-width: 850px !important; /* Verrouille la largeur de l'image pour garder les icônes lisibles */
        height: 80px !important;     /* Hauteur fixe propre pour mobile */
    }
}

@media (max-width: 576px) {
    /* Ajustements extrêmes pour petits smartphones (ex: iPhone SE) */
    .showcase-visual-box {
        height: 220px !important;
    }
    .editorial-lead {
        font-size: 19px !important;
    }
}




/* =====================================================
   CALIBRAGE ET POSITIONNEMENT DU LOGO INTEGRAL IAPS
===================================================== */
.logo {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 5px 0 !important;
}

/* Force le logo à respecter scrupuleusement la hauteur de la Navbar */
.logo-brand-img {
    height: 65px !important;       /* Hauteur idéale pour une barre de navigation élégante */
    width: auto !important;        /* Conserve les proportions d'origine (anti-écrasement) */
    object-fit: contain !important;/* Sécurité d'ajustement vectoriel */
    display: block !important;
    transition: transform 0.3s ease !important;
}

/* Effet discret et haut de gamme au survol */
.logo:hover .logo-brand-img {
    transform: scale(1.02) !important;
}

/* Ajustement de sécurité lorsque la Navbar rétrécit au défilement (Scroll) */
.header.scrolled .logo-brand-img {
    height: 46px !important;       /* Devient légèrement plus compact au scroll */
}

/* --- ADAPTATION SMARTPHONE --- */
@media (max-width: 550px) {
    .logo-brand-img {
        height: 34px !important;   /* Légèrement plus petit sur mobile pour laisser la place au menu burger */
    }
}



/* =====================================================
  
===================================================== */



/* =====================================================
   ALIGNEMENT HORIZONTAL DES PILES DE TEXTE EN UNE LIGNE paragraphe a droite pour la page science life
===================================================== */

.editorial-pillars-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
}

.inline-pillar-item {
    display: flex !important;
    flex-direction: row !important; /* Force l'alignement sur une seule ligne au départ */
    align-items: flex-start !important; /* Aligne le haut du titre et le haut du texte */
    gap: 6px !important; /* Petit espace horizontal fixe entre les deux éléments */
    margin-bottom: 14px !important; /* Espace vertical régulier entre chaque puce */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Formatage strict du titre (Gras et non coupé) */
.inline-pillar-item h5 {
    display: inline-block !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #061b2b !important;
    white-space: nowrap !important; /* ◄ Le titre reste TOUJOURS sur un seul bloc */
    margin: 0 !important;
    padding: 0 !important;
}

/* Formatage de la description avec retour à la ligne automatique forcé */
.inline-pillar-item .editorial-body {
    display: block !important; /* Repasse en block pour autoriser le retour à la ligne */
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    color: #6f7d85 !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* ◄ LES VALEURS TECHNIQUES CRITIQUES POUR FORCER LE RETOUR À LA LIGNE */
    white-space: normal !important; /* Autorise le texte à se couper */
    word-wrap: break-word !important; /* Sécurité anti-débordement */
    overflow-wrap: break-word !important;
    text-align: justify !important; /* Aligne proprement à droite et à gauche */
}

/* --- ADAPTATION RESPONSIVE DESIGN (SMARTPHONES) --- */
@media (max-width: 600px) {
    .inline-pillar-item {
        flex-direction: column !important; /* Passe le titre au-dessus de la description sur mobile */
        align-items: flex-start !important;
        gap: 4px !important;
    }
}







/* =====================================================
   MODULE INFOGRAPHIES AGROALIMENTAIRES (2 LIGNES IMAGES) pour page html food.html a l entete de la page
===================================================== */

/* Conteneur des onglets (boutons arrondis) */
.food-tabs-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    max-width: 1200px;
    margin: 0 auto 35px auto !important;
    padding: 0 20px;
}

/* Style des boutons "Pilules" */
.food-tab-btn {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: none !important;
    padding: 10px 22px !important;
    font-family: "Inter", sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.food-tab-btn:hover {
    background-color: #e2e8f0 !important;
    color: #087bc1 !important;
}

/* Onglet Sélectionné : Bleu Corporate #087bc1 */
.food-tab-btn.active {
    background-color: #087bc1 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(8, 123, 193, 0.15) !important;
}

/* Gestion de l'affichage des conteneurs d'onglets */
.food-tab-content {
    display: none !important; /* Masqué par défaut */
    width: 100%;
}

.food-tab-content.active {
    display: block !important; /* Activé par JavaScript */
    animation: fadeTabBanner 0.4s ease-out;
}

/* Empilage vertical des deux grandes lignes d'images */
.food-image-matrix-stack {
    max-width: 1240px;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important; /* Espace régulier entre la ligne 1 et la ligne 2 */
    padding: 0 20px !important;
}

.food-matrix-row-img-box {
    width: 100% !important;
    overflow: hidden;
}

/* Calibrage chirurgical des bannières d'images globales */
.food-matrix-banner-img {
    width: 100% !important;
    height: auto !important; /* Garde les proportions d'origine sans écraser les icônes */
    max-height: 290px !important; /* Hauteur maximale de sécurité conforme à votre maquette */
    object-fit: contain !important; /* Empêche le recadrage ou la déformation des textes */
    display: block !important;
    margin: 0 auto !important;
}

/* Animation d'apparition en fondu */
@keyframes fadeTabBanner {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- LOGIQUE RESPONSIVE DESIGN (TABLETTES & SMARTPHONES) --- */
@media (max-width: 992px) {
    .food-image-matrix-stack {
        overflow-x: auto !important; /* Active le défilement tactile horizontal sur petit écran */
        -webkit-overflow-scrolling: touch;
    }
    
    .food-matrix-banner-img {
        min-width: 950px !important; /* Verrouille la largeur minimale pour que les textes de l'image restent lisibles */
        max-height: 230px !important;
    }
}






/* =====================================================
   CORRECTIF ALIGNEMENT : DEUXIÈME BANNIÈRE AGROALIMENTAIRE //la 1 ere  images de sous domaines
===================================================== */

/* 1. Assure que le conteneur prend 100% de la largeur du bloc de droite */
.food-post-carousel-banner,
.food-matrix-row-img-box {
    width: 100% !important;
    max-width: 1240px !important;
    margin: 25px auto 0 auto !important; /* Ajoute un espace propre sous le carrousel */
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    clear: both !important; /* Sécurité anti-flottement */
}

/* 2. Empêche la déformation, l'écrasement ou le flou de l'image de la ligne 2 */
.food-bottom-banner-img {
    width: 100% !important;
    height: auto !important; /* ◄ Crucial : Conserve les proportions d'origine (pas d'écrasement) */
    max-height: 290px !important; /* Bride la hauteur maximale pour rester compact */
    object-fit: contain !important; /* Force le respect des icônes et des textes de l'image */
    display: block !important;
    margin: 0 auto !important;
}

/* 3. Sécurité d'adaptation pour les tablettes et smartphones */
@media (max-width: 992px) {
    .food-post-carousel-banner,
    .food-matrix-row-img-box {
        overflow-x: auto !important; /* Active le défilement tactile si nécessaire */
        -webkit-overflow-scrolling: touch;
    }
    
    .food-bottom-banner-img {
        min-width: 950px !important; /* Verrouille la lisibilité des icônes sur petit écran */
        max-height: 220px !important;
    }
}
/* =====================================================
   CORRECTIF AFFICHAGE : PREMIÈRE BANNIÈRE AGROALIMENTAIRE la 2 eme  image de sous domaines
===================================================== */

/* 1. Recalibrage du boîtier de la première ligne d'image */
.food-matrix-row-img-box {
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important; /* Centre parfaitement le bloc */
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* 2. Bridage chirurgical anti-déformation et anti-écrasement */
.food-matrix-banner-img {
    width: 100% !important;
    height: auto !important;       /* ◄ CRUCIAL : Préserve le ratio d'origine (les cercles restent ronds) */
    max-height: 290px !important;  /* Limite la hauteur pour éviter un rendu géant */
    object-fit: contain !important;/* ◄ FORCE l'intégralité de l'infographie à rester visible sans coupure */
    display: block !important;
    margin: 0 auto !important;
}

/* 3. Sécurité d'affichage pour les terminaux mobiles et tablettes */
@media (max-width: 992px) {
    .food-matrix-row-img-box {
        overflow-x: auto !important; /* Active le balayage horizontal sur smartphone */
        -webkit-overflow-scrolling: touch;
    }
    
    .food-matrix-banner-img {
        min-width: 950px !important; /* Verrouille la largeur minimale pour que les textes restent lisibles */
        max-height: 220px !important;
    }
}
 
 
 
 /* =====================================================
   CORRECTIF CHIRURGICAL : SLIDER INFINI SANS TEMPS D'ARRÊT pour l affichage des images grains & bakery
===================================================== */


 
 /* =====================================================
   masquer l affichage des images grains & bakery
===================================================== */

  
 
 /* Le conteneur de contenu est masqué par défaut à l'ouverture */
.food-contents-wrapper {
    display: none;
    width: 100%;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

/* Il s'affiche uniquement lorsqu'il reçoit la classe active */
.food-contents-wrapper.active {
    display: block;
    opacity: 1;
}







 
 /* =====================================================
  pour l affichage du fish & mealt
===================================================== */


/* Boîtier de la pop-up de choix personnalisé */
.sector-choice-box {
    width: min(650px, 90%) !important;
    padding: 40px !important;
    text-align: center;
}

.choice-modal-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: #061b2b;
    margin-bottom: 8px;
}

.choice-modal-content p {
    font-size: 14px;
    color: #72818b;
    margin-bottom: 30px;
}

/* Grille des deux boutons alignés côte à côte */
.choice-buttons-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
}

/* Style des cartes-boutons cliquables */
.choice-card-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 30px 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s;
}

.choice-icon {
    font-size: 40px; /* Taille des émojis indicatifs */
}

.choice-card-btn span {
    font-size: 13px;
    font-weight: 700;
    color: #061b2b;
    letter-spacing: 0.5px;
}

/* Effets de survol premium alignés sur votre charte */
.choice-card-btn:hover {
    border-color: #087bc1;
    background-color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(8, 123, 193, 0.08);
}

.choice-card-btn:hover span {
    color: #087bc1;
}

/* Classe utilitaire pour masquer les sous-sections */
.meat-fish-sub-section.is-hidden {
    display: none !important;
}

/* Responsive smartphone */
@media (max-width: 550px) {
    .choice-buttons-container {
        grid-template-columns: 1fr; /* S'empile sur une colonne sur petit écran */
    }
    .sector-choice-box {
        padding: 30px 20px !important;
    }
}
 /* =====================================================
 pop up du mealt and fish centralisé
===================================================== */


/* 1. L'overlay doit couvrir 100% de l'écran et centrer son contenu */
.stream-modal-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(6, 27, 43, 0) !important; /* Transparent par défaut */
    backdrop-filter: blur(0px);
    z-index: 2500 !important;
    
    /* ◄ LES PROPRIÉTÉS CRITIQUES DE CENTRAGE FLUIDE */
    display: none; /* Remplacé par flex via le script et la classe active */
    justify-content: center; /* Centre horizontalement */
    align-items: center;     /* Centre verticalement */
    
    pointer-events: none;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
}

/* 2. Lorsque la modale s'ouvre, elle force l'affichage en mode Flexbox */
.stream-modal-overlay.is-visible {
    display: flex !important; /* ◄ Active le centrage Flexbox immédiat */
    background-color: rgba(6, 27, 43, 0.65) !important;
    backdrop-filter: blur(6px);
    pointer-events: auto !important;
}

/* 3. Ajustement de la boîte de choix pour qu'elle se positionne au pixel près */
.sector-choice-box {
    background: #ffffff;
    width: min(650px, 92%) !important;
    padding: 40px !important;
    border-radius: 12px;
    box-shadow: 0 30px 70px rgba(6, 27, 43, 0.28);
    position: relative;
    
    /* Supprime les marges parasites ou positionnements absolus qui décaleraient la boîte */
    margin: 0 auto !important; 
    top: 0 !important;
    left: 0 !important;
    transform: none !important; 
}

/* 4. Contenu intérieur de votre choix */
.choice-modal-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre les titres et les textes à l'intérieur */
    justify-content: center;
}


/* =====================================================
   CORRECTIF ULTRA-PRIORITAIRE POUR L'OVERLAY MEAT & FISH
===================================================== */

/* Force l'overlay à apparaître INSTANTANÉMENT sans aucun retard */
#meat-fish-choice-modal.stream-modal-overlay {
    transition: none !important; /* ◄ Supprime le temps d'attente et le fondu */
    backdrop-filter: blur(6px) !important; /* Applique le flou immédiatement */
    background-color: rgba(6, 27, 43, 0.65) !important; /* Applique le fond sombre immédiatement */
    
    /* ◄ Sécurité absolue : passe au premier plan au-dessus de .showcase-container et de la Navbar */
    z-index: 999999 !important; 
}

/* Force également la boîte intérieure de choix à s'afficher sans transition de retard */
#meat-fish-choice-modal .stream-modal-box {
    transition: none !important; /* ◄ Supprime l'effet de ressort ou de zoom lent */
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
}



/* =====================================================
   MOTEUR DE DÉFILEMENT EN BOUCLE LINÉAIRE CONTINUE (Unifié) pour le bouclage des images
===================================================== */

/* 1. Le conteneur parent qui coupe les images débordant de la page web */
.food-figures-carousel-container {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important; /* Empêche l'apparition d'un scroll horizontal sur le site */
    position: relative !important;
    padding: 15px 0 !important;
    background: transparent !important;
    clear: both !important;
}

/* 2. LE RAIL D'ENTRAÎNEMENT : Force l'alignement horizontal strict anti-coupure */
.food-figures-carousel-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Interdit formellement le retour à la ligne des vignettes */
    width: max-content !important; /* Calcule la vraie largeur cumulée de toutes les images */
    gap: 12px !important; /* Espace horizontal régulier */
    
    /* Appel unique et synchronisé vers les Keyframes du bas */
    animation: smoothLinearLoopScroll 26s linear infinite !important; 
    will-change: transform; /* Optimisation matérielle anti-saccades */
}

/* 3. LES COMPOSANTS EN FORMAT CARTES UNIFORMES */
.food-figure-item {
    width: 236px !important; /* Largeur fixe verrouillée */
    height: 145px !important; /* Hauteur fixe verrouillée */
    flex-shrink: 0 !important; /* Interdit au navigateur d'écraser la photo sur petit écran */
    overflow: hidden !important;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

.food-figure-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Recadre sans déformer ni écraser le ratio */
    display: block !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Micro-zoom élégant au survol d'une vignette */
.food-figure-item:hover img {
    transform: scale(1.05) !important;
}

/* Met sur pause le défilement dès que la souris entre sur une usine */
.food-figures-carousel-container:hover .food-figures-carousel-track {
    animation-play-state: paused !important;
}

/* =====================================================
   LA LOGIQUE MATHÉMATIQUE DE RACCORD SANS SAUT VISUEL (-50%)
===================================================== */
@keyframes smoothLinearLoopScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        /* Recule de la moitié exacte du rail. Le retour à 0% devient invisible à l'œil. */
        transform: translate3d(calc(-50% - 6px), 0, 0); /* Équilibre le gap horizontal de 12px */
    }
}

/* =====================================================
   AFFICHAGE INSTANTANÉ ABSOLU (0 SÉCONDE D'ATTENTE)
===================================================== */

/* EXTRACTEUR DE CONTEXTE : FORCE L'OVERLAY GLOBAL À PASSER AU-DESSUS DE TOUT LE SITE */
.stream-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999999 !important; /* Augmenté d'un cran pour écraser les sections du bas */
    display: none;
    align-items: center !important;
    justify-content: center !important;
}

/* ÉTAT ACTIF : AFFICHAGE IMMÉDIAT EN PREMIER PLAN ABSOLU */
.stream-modal-overlay.is-visible,
#meat-fish-choice-modal.is-visible,
.stream-modal-overlay.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99999999 !important; /* Force le passage au-dessus des blocs Water Engineering */
    transition: none !important;
    animation: none !important;
}

/* SÉCURITÉ POUR LA BOÎTE DE CHOIX BLANCHE INTERNE */
.stream-modal-overlay.is-visible .sector-choice-box,
#meat-fish-choice-modal.is-visible .sector-choice-box {
    position: relative !important;
    z-index: 100000000 !important; /* Reste au premier plan par rapport au fond grisé */
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
}

/* =====================================================
  Meat photo
===================================================== */
/* =====================================================
  Meat photo — Pleine largeur (0 droite 0 gauche)
===================================================== */

/* 1. Force le conteneur du carrousel à briser les marges et prendre 100% de l'écran */
.food-figures-carousel-container {
    position: relative !important;
    width: 100vw !important; /* Prend toute la largeur de la fenêtre du navigateur */
    
    /* Centre chirurgicalement le bloc par rapport à l'écran, peu importe les parents */
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    /* Coupe proprement les images qui défilent en dehors de l'écran */
    overflow: hidden !important; 
    
    /* Élimine les marges parasites */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 15px 0 !important;
}

/* 2. Assure l'alignement horizontal strict de la piste de défilement */
.food-figures-carousel-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
}

/* 3. Sécurité globale anti-débordement horizontal sur le site */
body, html {
    overflow-x: hidden !important;
}



/* =====================================================
partage bloc images meat en deux divisions images equales  
===================================================== */


.food-matrix-banner-split {
    display: flex;
    width: 100%;
    gap: 10px; /* Espace optionnel entre les deux images (mettez 0 si vous voulez qu'elles se touchent) */
}

.food-matrix-banner-split .food-matrix-banner-img {
    flex: 1;          /* Force les deux images à avoir exactement la même largeur (50/50) */
    width: 50%;       
    height: auto;     /* Conserve le ratio de l'image */
    object-fit: cover;
}



/* Centrage du conteneur global de la sous-section */
#sub-meat {
    display: flex;
    flex-direction: column;
    align-items: center; 
    width: 100%;
}

/* Bloc contenant les deux images */
.food-matrix-banner-split {
    display: flex;
    flex-direction: row;     /* Aligne les images horizontalement par défaut */
    justify-content: center; 
    align-items: center;
    width: 100%;
    max-width: 1200px;       /* Ajustez selon la largeur souhaitée sur ordinateur */
    margin: 0 auto;          
    gap: 0;                  /* SUPPRIME L'ESPACE pour créer l'illusion d'une bannière unique */
}

/* Style des images pour le format ordinateur */
.food-matrix-banner-split .food-matrix-banner-img {
    flex: 1;
    width: 50%;              /* Prend la moitié exacte du conteneur */
    height: auto;            
    display: block;          /* Supprime les espaces résiduels sous l'image */
}

/* ADAPTATION MOBILE (Écrans inférieurs à 768px) */
@media (max-width: 768px) {
    .food-matrix-banner-split {
        flex-direction: column; /* Superpose les images l'une en dessous de l'autre */
    }

    .food-matrix-banner-split .food-matrix-banner-img {
        width: 100%;         /* Force l'image à prendre toute la largeur en mode vertical */
    }
}

/* Style du split à l'intérieur de la modale */
.modal-banner-split {
    display: flex;
    flex-direction: row;     /* Côte à côte par défaut sur ordinateur */
    width: 100%;
    gap: 0;                  /* Pas d'espace pour l'effet bannière continue */
}

.modal-banner-split img {
    flex: 1;
    width: 50%;
    height: auto;
    display: block;          /* Supprime les espaces blancs sous les images */
    max-height: 80vh;        /* Évite que les images dépassent de l'écran en hauteur */
    object-fit: contain;     /* Conserve les proportions sans déformer */
}

.modal-banner-split {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 100%; /* S'assure que la bannière ne dépasse pas de la boîte modale */
    gap: 0;
}

.modal-banner-split img {
    flex: 1;
    flex-basis: 50%; /* Force chaque image à occuper exactement la moitié de l'espace disponible */
    width: 50%;
    height: auto;
    max-height: 80vh;
    display: block;
    object-fit: contain;
    background: transparent; /* Évite un fond noir ou blanc parasite */
}

/* Adaptation mobile */
@media (max-width: 768px) {
    .modal-banner-split {
        flex-direction: column;
    }
    .modal-banner-split img {
        flex-basis: 100%;
        width: 100%;
        max-height: 40vh;
    }
}




/* =====================================================
au dessous chaque image son nom pour images mealt
===================================================== */



/* Style de l'élément de liste configuré en colonne */
.food-figure-item {
    width: 236px !important;    /* Conserve la largeur fixe d'origine */
    height: auto !important;    /* Libère la hauteur pour inclure le texte dessous */
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important; /* Empile l'image puis le texte */
    align-items: center !important;    /* Centre horizontalement l'image et la légende */
    overflow: hidden !important;
}

/* Fixation stricte des dimensions de l'image uniquement */
.food-figure-item img {
    width: 100% !important;
    height: 145px !important;   /* Force l'image à garder son format d'origine */
    object-fit: cover !important;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    display: block !important;
}

/* Style de la légende sous le visuel */
.carousel-caption {
    font-family: "Inter", sans-serif;
    font-size: 13px !important;
    font-weight: 600;
    color: #101820;             /* Couleur foncée corporate de votre site */
    text-align: center;
    margin-top: 10px !important;/* Écartement net sous l'image */
    margin-bottom: 0 !important;
    line-height: 1.3;
    white-space: normal !important; /* Autorise le retour à la ligne si le nom est long */
}

/* Changement de couleur au survol de la carte (Optionnel) */
.food-figure-item:hover .carousel-caption {
    color: #087bc1;             /* Éclaire le texte en bleu au survol */
}






/* =====================================================
pour le bloc fish
===================================================== */

/* Sécurité : le conteneur coupe le débordement de l'écran et s'étend sur toute la largeur */
#sub-fish .food-figures-carousel-container {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    overflow: hidden !important; 
    padding: 20px 0 !important;
    margin: 15px 0 0 0 !important;
}

/* LE RAIL : Aligne obligatoirement les images et textes sur une seule ligne infinie */
#sub-fish .food-figures-carousel-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Interdit formellement l'affichage vertical */
    width: max-content !important;
    gap: 16px !important; /* Espace horizontal fixe entre chaque carte */
    animation: fishLinearLoopScroll 28s linear infinite !important; /* Défilement continu */
    will-change: transform;
}

/* Structure de chaque bloc (Vignette + Légende dessous) */
#sub-fish .food-figure-item {
    width: 250px !important; /* Largeur fixe de la carte */
    height: auto !important; /* Libère la hauteur pour accueillir le texte */
    flex-shrink: 0 !important; /* Empêche le navigateur d'écraser la cellule */
    display: flex !important;
    flex-direction: column !important; /* Empile l'image, puis le texte en dessous */
    align-items: center !important;
}

/* Redimensionnement de l'image seule */
#sub-fish .food-figure-item img {
    width: 100% !important;
    height: 150px !important; /* Hauteur fixe identique pour harmoniser les visuels */
    object-fit: cover !important;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    display: block !important;
}

/* Style de la légende sous la photo */
#sub-fish .carousel-caption {
    font-family: "Inter", sans-serif;
    font-size: 12.5px !important;
    font-weight: 600;
    color: #101820;
    text-align: center;
    margin-top: 12px !important; /* Écartement propre sous l'image */
    margin-bottom: 0 !important;
    line-height: 1.4;
    white-space: normal !important; /* Permet le retour à la ligne si le texte est long */
}

/* Met en pause le défilement au survol de la souris */
#sub-fish .food-figures-carousel-container:hover .food-figures-carousel-track {
    animation-play-state: paused !important;
}

/* ANIMATION : Raccord chirurgical invisible à la moitié exacte (-50%) */
@keyframes fishLinearLoopScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(calc(-50% - 8px), 0, 0); /* Soude parfaitement l'espace (gap de 16px / 2) */
    }
}






/* =====================================================
pour le bloc vegetables_fruit
===================================================== */


/* Rappel de la sécurité d'affichage déjà présente dans votre fichier pour les lignes uniques */
#fruit-vegetables .food-matrix-banner-img {
    width: 100% !important;
    height: auto !important;       /* Préserve rigoureusement le ratio d'origine */
    max-height: 290px !important;  /* Bride la hauteur maximale pour rester compact */
    object-fit: contain !important;/* Empêche toute coupure ou déformation */
    display: block !important;
    margin: 0 auto !important;
}

@media (max-width: 992px) {
    #fruit-vegetables .food-image-matrix-stack {
        overflow-x: auto !important; /* Active le balayage horizontal sur smartphone */
        -webkit-overflow-scrolling: touch;
    }
    #fruit-vegetables .food-matrix-banner-img {
        min-width: 950px !important; /* Maintient la lisibilité des textes et icônes */
    }
}


/* =====================================================
force l affichage du pop up fish ou mealt
===================================================== */
/* FORCE L'AFFICHAGE INSTANTANÉ DE L'OVERLAY SOMBRE ET BLOC PARENT */
.stream-modal-overlay.is-visible,
#meat-fish-choice-modal.is-visible {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;  /* Supprime l'attente et le délai */
    animation: none !important;   /* Désactive les animations parasites */
}

/* FORCE LA BOÎTE BLANCHE DE CHOIX À ÊTRE COMPLÈTE ET VISIBLE IMMÉDIATEMENT */
.stream-modal-overlay.is-visible .sector-choice-box,
#meat-fish-choice-modal .sector-choice-box {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;   /* Empêche les effets d'étirement ou de zoom lents */
    transition: none !important;  /* Supprime la transition en deux temps */
    animation: none !important;
    height: auto !important;      /* S'assure que la boîte prend sa taille finale d'un coup */
}

/* SÉCURITÉ POUR QUE TOUT LE CONTENU (TEXTES, ICÔNES, BOUTONS) S'AFFICHE SANS DÉLAI */
.sector-choice-box .choice-modal-content,
.sector-choice-box .choice-buttons-container,
.sector-choice-box .choice-card-btn,
.sector-choice-box .choice-icon,
.sector-choice-box span {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important; /* Neutralise le délai de chargement interne */
}

/* CONSERVE UNIQUEMENT L'EFFET AU SURVOL SUR LES BOUTONS UNE FOIS VISIBLES */
.sector-choice-box .choice-card-btn:hover {
    transition: background 0.2s ease, border-color 0.2s ease !important;
}
/* marge des page html*/

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Empêche le défilement horizontal indésirable */
}

/* Si votre barre de navigation utilise une classe spécifique, assurez-vous qu'elle prend toute la largeur */
.votre-barre-de-navigation {
    width: 100%;
    box-sizing: border-box;
}











/* =====================================================
   CONTACT TOP BLOCK STYLES — MODERNE & RESPONSIVE page contact la premiere section
===================================================== */
.contact-top-module-container {
    width: 100%;
    background-color: #ffffff;
    padding-top: 50px;
    box-sizing: border-box;
}

/* Alignement des 3 piliers */
.contact-cards-info-row {
    max-width: 1200px;
    margin: 0 auto 60px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0 20px;
}

.contact-info-pill-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Les Cercles Bleus avec les Picto blancs */
.info-circle-icon-blue {
    width: 60px;
    height: 60px;
    background-color: #087bc1; /* Votre bleu corporate signature */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
    box-shadow: 0 4px 15px rgba(8, 123, 193, 0.15);
}

.contact-info-pill-box h4 {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0b4e8c;
    margin: 0 0 10px 0;
}

.contact-info-pill-box p {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #72818b;
    max-width: 250px;
    margin: 0;
}

/* Zone réseaux sociaux miniature */
.social-mini-icons-row {
    display: flex;
    gap: 12px;
    margin-top: 2px;
}

.social-mini-icons-row a {
    color: #72818b;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.social-mini-icons-row a:hover {
    color: #087bc1;
}

/* --- BANNIÈRE BLEUE STYLE CINÉMA --- */
.editorial-blue-banner-strip {
    width: 100%;
    background: linear-gradient(135deg, #061b2b 0%, #0a334a 100%); /* Dégradé premium sombre */
    padding: 50px 20px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
}

.banner-inner-content {
    max-width: 850px;
    margin: 0 auto;
}

.editorial-blue-banner-strip h3 {
    font-family: "Inter", sans-serif;
    color: #ffffff !important;
    font-size: clamp(20px, 3vw, 26px) !important;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0 0 12px 0;
}

.editorial-blue-banner-strip p {
    font-family: "Inter", sans-serif;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* --- LOGIQUE RESPONSIVE (MOBILE) --- */
@media (max-width: 800px) {
    .contact-cards-info-row {
        grid-template-columns: 1fr; /* Empilement vertical sur smartphone */
        gap: 40px;
        margin-bottom: 40px;
    }
    .editorial-blue-banner-strip {
        padding: 40px 20px;
    }
}




/* =====================================================
icon contact
===================================================== */


.social-mini-icons-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.social-mini-icons-row a {
    color: #72818b; /* Teinte grise discrète de base */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.25s ease, transform 0.2s ease;
}

/* Effet dynamique premium au survol */
.social-mini-icons-row a:hover {
    color: #087bc1; /* Votre bleu signature */
    transform: scale(1.1); /* Micro-zoom fluide */
}

.social-svg-icon {
    display: block;
}




/* Ciblage chirurgical par classe dédiée */
h1.locations-main-title {
    color: #087bc1 !important;
    font-weight: 800;
    letter-spacing: -1px;
}





/* =====================================================
   ANIMATION PREMIUM 2026 : CASCADING STAGGER & SPATIAL FADE
===================================================== */

/* --- 1. CONFIGURATION DU BLOC DE TEXTE (GAUCHE) --- */
/* Effet d'apparition par lissage et micro-zoom cinématique */
#contact .contact-grid.reveal > div {
    opacity: 0 !important;
    filter: blur(10px) brightness(1.2); /* Flou artistique initial */
    transform: scale(0.96) translate3d(-30px, 0, 0) !important;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
                filter 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, opacity, filter;
}

/* --- 2. CONFIGURATION DU FORMULAIRE ET DES CHAMPS (DROITE) --- */
/* Neutralise l'animation par défaut sur le conteneur du formulaire */
#contact .contact-grid.reveal,
#contact .contact-grid.reveal #contactForm {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Sécurise l'état initial masqué de chaque élément interne du formulaire */
#contact #contactForm .form-row,
#contact #contactForm > input,
#contact #contactForm > textarea,
#contact #contactForm > button {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(25px, 8px, 0); /* Déplacement diagonal subtil */
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
                filter 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity, filter;
}

/* --- 3. DÉCLENCHEMENT DE L'ANIMATION AU SCROLL --- */

/* Apparition du bloc de texte à gauche */
#contact .contact-grid.reveal.is-visible > div {
    opacity: 1 !important;
    filter: blur(0) brightness(1) !important;
    transform: translate3d(0, 0, 0) !important;
}

/* --- 4. EFFET STAGGER (Apparition en cascade des champs) --- */
#contact .contact-grid.reveal.is-visible #contactForm .form-row,
#contact .contact-grid.reveal.is-visible #contactForm > input,
#contact .contact-grid.reveal.is-visible #contactForm > textarea,
#contact .contact-grid.reveal.is-visible #contactForm > button {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

/* Calcul précis des délais pour l'effet cascade séquentiel (2026) */
#contact .contact-grid.reveal.is-visible #contactForm .form-row { transition-delay: 0.15s; }
#contact .contact-grid.reveal.is-visible #contactForm > input[id="company"] { transition-delay: 0.25s; }
#contact .contact-grid.reveal.is-visible #contactForm > input[id="subject"] { transition-delay: 0.35s; }
#contact .contact-grid.reveal.is-visible #contactForm > textarea { transition-delay: 0.45s; }
#contact .contact-grid.reveal.is-visible #contactForm > button { transition-delay: 0.55s; }













/* =====================================================
   DISPOSITION DOUBLE POP-UP SYNC & FLÈCHE INDICATIVE
===================================================== */

/* Conteneur qui aligne les deux boîtes blanches */
.double-popup-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 50px; /* Écartement pour laisser la place à la flèche */
    max-width: 95vw;
    width: max-content;
    position: relative;
}

/* Ajustement des proportions des boîtes pour qu'elles tiennent sur l'écran */
.double-popup-container .master-box {
    width: 600px !important;
    flex-shrink: 0;
}

.double-popup-container .slave-box {
    width: 480px !important;
    flex-shrink: 0;
    /* Conserve vos animations d'origine Smooth Zoom */
    opacity: 0;
    transform: scale(0.9) translateX(30px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

/* Déploiement de la deuxième pop-up quand l'overlay est actif */
.stream-modal-overlay.is-visible .slave-box {
    opacity: 1;
    transform: scale(1) translateX(0);
}

/* CONCEPTION DE LA FLÈCHE INDICATIVE EN PUR CSS */
.indicator-arrow-link {
    position: absolute;
    right: -42px; /* Positionnée pile au milieu du gap entre les deux boîtes */
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 4px;
    background-color: #087bc1; /* Votre bleu signature #087bc1 */
    z-index: 1000;
}

/* La pointe de la flèche pointant vers l'Aluminium (à droite) */
.indicator-arrow-link::after {
    content: '';
    position: absolute;
    right: -2px;
    top: -5px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid #087bc1; /* Pointe triangulaire bleue */
}

/* --- ADAPTATION RESPONSIVE DESIGN (MOBILES) --- */
@media (max-width: 1024px) {
    .double-popup-container {
        flex-direction: column !important; /* Empilement vertical sur tablette/smartphone */
        gap: 30px;
        overflow-y: auto;
        max-height: 90vh;
        width: 90%;
    }
    .double-popup-container .master-box,
    .double-popup-container .slave-box {
        width: 100% !important;
    }
    /* On masque la flèche sur mobile car les boîtes sont l'une sous l'autre */
    .indicator-arrow-link {
        display: none !important;
    }
}
/* =====================================================
   MOTEUR DE NAVIGATION SLIDER POUR DOUBLE POP-UP
===================================================== */

/* Configuration de la boîte blanche principale */
.stream-modal-box.slider-layout {
    background: #ffffff !important;
    width: min(900px, 92%) !important;
    padding: 0 !important;
    border-radius: 8px !important;
    position: relative !important; /* Ancre pour positionner la flèche et la croix */
    box-shadow: 0 30px 70px rgba(6, 27, 43, 0.28) !important;
    overflow: visible !important; /* Autorise la flèche à déborder sur le côté */
}

/* Fenêtre de découpe d'image */
.modal-slider-viewport {
    width: 100%;
    overflow: hidden; /* Cache la deuxième image qui attend à droite */
    border-radius: 8px;
}

/* Le rail de glissement horizontal */
.modal-slider-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 200%; /* Contient 2 slides de 100% de largeur chacun */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* Glissement fluide cinéma */
}

/* Chaque diapositive prend exactement la largeur du viewport parent */
.modal-slide-item {
    width: 50%; /* Soit 100% de l'espace visible du viewport */
    flex-shrink: 0;
}

/* LA FLÈCHE BLEUE (Fidèle à votre capture d'écran) */
.modal-nav-arrow.next {
    position: absolute !important;
    top: 50% !important;
    right: -20px !important; /* Calée pile à cheval sur la bordure droite */
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    background-color: #087bc1 !important; /* Votre bleu signature #087bc1 */
    border: none !important;
    border-radius: 4px !important; /* Format légèrement carré ou faiblement arrondi */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    z-index: 10010 !important;
    box-shadow: 0 4px 10px rgba(8, 123, 193, 0.3) !important;
    transition: background-color 0.2s, transform 0.2s, opacity 0.3s ease !important;
}

.modal-nav-arrow.next:hover {
    background-color: #05598d !important; /* Devient bleu foncé au survol */
    transform: translateY(-50%) scale(1.05) !important;
}

/* Rotation de la flèche en sens inverse lorsqu'on est sur le deuxième slide */
.modal-nav-arrow.next.back-direction-arrow {
    transform: translateY(-50%) rotate(180deg) !important;
}
.modal-nav-arrow.next.back-direction-arrow:hover {
    transform: translateY(-50%) rotate(180deg) scale(1.05) !important;
}

/* Ajustement responsive smartphone */
@media (max-width: 600px) {
    .modal-nav-arrow.next {
        right: 10px !important; /* Ramène la flèche à l'intérieur sur petit écran */
        background-color: rgba(8, 123, 193, 0.8) !important;
    }
}





/* =====================================================
   AFFICHAGE INFRASTRUCTURE (DOUBLE COLONNE COMPACTE)
===================================================== */

/* Conteneur principal en grille à 2 colonnes égales */
.infrastructure-display-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Sépare en deux colonnes parfaites */
    gap: 40px !important; /* Espace horizontal entre les deux blocs de colonnes */
    width: 100%;
    box-sizing: border-box;
}

/* Structure verticale de chaque colonne */
.infra-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important; /* Espace vertical régulier entre les lignes */
}

/* Surcharge de l'élément de liste pour correspondre à la capture */
#list-infrastructure .list-item {
    display: flex !important;
    align-items: center !important;
    background: transparent !important; /* Fond blanc ou transparent selon votre maquette */
    border-left: 4px solid #2fb574 !important; /* Force la bordure verte spécifique à l'infrastructure */
    padding: 10px 15px !important;
    font-size: 15px !important;
    font-weight: 600;
    color: #101820;
    border-radius: 0 !important; /* Ligne droite sans arrondi sur le côté gauche */
    gap: 25px !important; /* Écartement entre l'icône et le texte */
    transition: transform 0.25s ease !important;
}

/* Effet au survol des lignes */
#list-infrastructure .list-item:hover {
    transform: translateX(6px) !important;
    background: rgba(47, 181, 116, 0.04) !important; /* Léger voile vert au survol */
}

/* Conteneur de l'icône */
#list-infrastructure .list-icon-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
}

/* L'icône elle-même */
#list-infrastructure .list-icon {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* --- ADAPTATION MOBILE (RESPONSIVE) --- */
@media (max-width: 768px) {
    .infrastructure-display-grid {
        grid-template-columns: 1fr !important; /* Passe sur une seule colonne verticale sur smartphone */
        gap: 15px !important;
    }
}



/* Applique dynamiquement la couleur définie par la variable inline --theme-color */
.list-content .list-item {
    border-left: 4px solid var(--theme-color) !important;
}

.list-content .list-item:hover {
    background: rgba(var(--theme-color), 0.04) !important; /* Optionnel : adapte le fond au survol */
}









/* =====================================================
   RESPONSIVE DESIGN SYSTEM — TELECOMMUNICATIONS (2026)
===================================================== */

@media (max-width: 992px) {
    /* 1. Force les blocs à s'empiler verticalement sur tablette et mobile */
    .showcase-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 24px !important; /* Espace régulier et aéré entre l'image et le texte */
        padding: 0 15px;
    }

    /* 2. Redimensionne les deux zones à 100% de la largeur disponible */
    .showcase-visual-box, 
    .showcase-content-card {
        width: 100% !important;
        height: auto !important; /* Libère la hauteur pour éviter les coupures de texte */
    }

    /* 3. Donne une hauteur fixe stable et esthétique à la zone image sur mobile */
    .showcase-visual-box {
        height: 240px !important; /* Proportions idéales pour les photos de câblages et pylônes */
        order: -1 !important; /* Force l'image à toujours apparaître AU-DESSUS du texte sur mobile */
    }

    /* 4. Ajuste le rembourrage interne de la carte de texte pour les petits écrans */
    .showcase-content-card {
        padding: 20px 22px !important;
    }

    /* 5. Adapte la taille des titres pour une lisibilité optimale sur smartphone */
    .editorial-lead {
        font-size: 22px !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }

    /* 6. Repasse l'alignement des listes en colonne si le titre du composant est trop long */
    .inline-pillar-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
}

@media (max-width: 576px) {
    /* Ajustements extrêmes pour les très petits smartphones */
    .showcase-visual-box {
        height: 180px !important;
    }
    .editorial-lead {
        font-size: 19px !important;
    }
}













/* Sécurité de taille pour empêcher les icônes de se déformer */
.list-icon-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 45px !important;   /* Largeur verrouillée */
    height: 45px !important;  /* Hauteur identique pour un rendu carré parfait */
    flex-shrink: 0 !important;
}

.list-icon {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Force le respect des proportions de l'image */
}

/* Alignement et comportement de la liste interactive */
.infrastructure-display-grid .list-item {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 18px 20px !important;
    background: #f8fafc !important;
    border-radius: 4px !important;
    transition: transform 0.25s ease, background 0.25s ease !important;
    border-left: 4px solid var(--theme-color) !important;
}

.infrastructure-display-grid .list-item:hover {
    background: #f1f5f9 !important;
    transform: translateX(5px) !important; /* Léger décalage dynamique haut de gamme */
}







/* =====================================================
   HIGH-END MODULE: SERVICES LAYERING SYSTEM (V2026 FIXED)
===================================================== */
.section-modern-services-2026 {
    padding: 120px 0;
    background-color: #ffffff;
    width: 100%;
    overflow: hidden;
}

.container-modern-services {
    width: min(1200px, 90%);
    margin: 0 auto;
}

/* Structure globale d'une ligne */
.block-modern-row {
    position: relative;
    width: 100%;
    height: 480px; /* Fixe la hauteur totale du bloc pour le centrage vertical */
    margin-bottom: 140px;
    display: flex;
    align-items: center;
}

.block-modern-row:last-child {
    margin-bottom: 0;
}

/* --- LE CADRE DE L'IMAGE (Prend 65% de la largeur du conteneur) --- */
.block-modern-row .block-visual-frame {
    position: absolute;
    left: 0;
    top: 0;
    width: 65%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(6, 27, 43, 0.03);
    z-index: 1;
}

/* Inversion pour le bloc 2 : l'image se cale à droite */
.block-modern-row.row-inverse-modern .block-visual-frame {
    left: auto;
    right: 0;
}

.img-fluid-modern {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.overlay-tint-modern {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(6, 27, 43, 0.02), transparent);
    pointer-events: none;
}

/* --- LA CARTE BLANCHE FLOTTANTE À DROITE (Morde sur l'image à gauche) --- */
.block-floating-card-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* ◄ CRITIQUE : Centre verticalement pile au milieu de la photo */
    width: 50%; /* Largeur idéale pour créer la superposition */
    background: #ffffff;
    padding: 55px 60px;
    border-radius: 16px;
    border-top: 4px solid #087bc1; /* Bordure bleue haut de gamme */
    box-shadow: 0 30px 60px rgba(6, 27, 43, 0.08);
    z-index: 10;
    box-sizing: border-box;
}

/* --- LA CARTE BLANCHE FLOTTANTE À GAUCHE (Morde sur l'image à droite) --- */
.block-floating-card-left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* ◄ CRITIQUE : Centre verticalement pile au milieu de la photo */
    width: 50%;
    background: #ffffff;
    padding: 55px 60px;
    border-radius: 16px;
    border-top: 4px solid #087bc1;
    box-shadow: 0 30px 60px rgba(6, 27, 43, 0.08);
    z-index: 10;
    box-sizing: border-box;
}

/* --- CONTENU TYPOGRAPHIQUE TEXTE --- */
.indicator-mini-modern {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #087bc1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.title-hero-modern {
    font-family: "Inter", sans-serif;
    color: #061b2b;
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin: 0 0 20px 0;
    white-space: nowrap; /* Aligne le titre sur une seule ligne comme sur votre capture */
}

.body-editorial-modern {
    font-family: "Inter", sans-serif;
    color: #6f7d85;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}

/* =====================================================
   RESPONSIVE DESIGN SYSTEM (PASSAGE AUTOMATIQUE MOBILE)
===================================================== */
@media (max-width: 992px) {
    .block-modern-row {
        height: auto;
        display: flex;
        flex-direction: column !important; /* Empile l'image et le texte verticalement */
        margin-bottom: 80px;
    }

    .block-modern-row .block-visual-frame,
    .block-modern-row.row-inverse-modern .block-visual-frame {
        position: relative !important;
        width: 100% !important;
        height: 280px !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .block-floating-card-right,
    .block-floating-card-left {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important; /* Annule le décalage absolu */
        width: 100% !important;
        padding: 35px 25px !important;
        border-radius: 0 0 16px 16px !important;
        box-shadow: 0 15px 30px rgba(6, 27, 43, 0.04) !important;
    }

    .title-hero-modern {
        white-space: normal; /* Permet le retour à la ligne du titre uniquement sur mobile */
        font-size: 1.8rem;
    }

    .body-editorial-modern {
        text-align: left;
    }
}














/* =====================================================
 des liens avec les figures consulting/project managerment et ect.....
===================================================== */

/* =====================================================
   METHODOLOGY CARDS — LINK WRAPPER (V2026)
===================================================== */
.method-card-link {
    text-decoration: none !important; /* Supprime le soulignement automatique */
    color: inherit !important;          /* Conserve la couleur blanche des titres <h3> */
    display: block;                   /* Force le lien à prendre toute la surface du bloc */
    width: 100%;
}

/* Optionnel : Ajoute un curseur cliquable (main) sur tout le bloc */
.method-card-item {
    cursor: pointer;
}








/* =====================================================
   CAPSULES SUB-DOMAINS STYLES (EXACTLY AS CAPTURE) pour les affiches comme des boutons dans la page consulting
===================================================== */
.subdomains-tags-section {
    padding: 60px 0 100px 0; /* Espacement aéré pour clore la page avec élégance */
    background-color: #ffffff;
    width: 100%;
}

/* Conteneur principal empilant les lignes */
.tags-modern-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px; /* Écartement vertical entre les deux lignes de badges */
    width: 100%;
}

/* Lignes horizontales de capsules */
.tags-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px; /* Écartement horizontal précis entre chaque capsule */
}

/* Style unitaire d'une capsule (Badge arrondi blanc) */
.capsule-tag-item {
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: #7c8b96; /* Teinte grise institutionnelle ultra-pro de la capture */
    letter-spacing: 0.5px;
    background-color: #ffffff;
    padding: 11px 28px; /* Rembourrage intérieur idéal pour le format pilule */
    border: 1px solid #e2e8f0; /* Bordure fine et discrète */
    border-radius: 30px; /* Force l'arrondi complet en forme de gélule */
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Micro-interaction haut de gamme v2026 au survol de la souris */
.capsule-tag-item:hover {
    color: #087bc1; /* Devient bleu signature au survol */
    border-color: #087bc1;
    transform: translateY(-2px); /* Léger effet de lévitation mécanique */
    box-shadow: 0 10px 20px rgba(8, 123, 193, 0.05); /* Ombre douce bleue */
    cursor: default;
}

/* =====================================================
   RESPONSIVE DESIGN (ADAPTATION MOBILES & TABLETTES)
===================================================== */
@media (max-width: 768px) {
    .subdomains-tags-section {
        padding: 40px 0 60px 0;
    }
    
    .tags-row {
        gap: 12px; /* Rapproche légèrement les capsules sur petit écran */
        padding: 0 10px;
    }
    
    .capsule-tag-item {
        padding: 9px 20px; /* Rendu légèrement plus compact sur smartphone */
        font-size: 10.5px;
    }
}


/* =====================================================
   CORRECTIF D'ESPACEMENT COMPACT INTER-SECTIONS (V2026)
===================================================== */

/* 1. Réduit au minimum l'espace sous les capsules */
.subdomains-tags-section {
    padding-top: 50px !important;    /* Conserve un espace propre en haut */
    padding-bottom: 10px !important; /* ◄ RÉDUIT AU MINIMUM : Rapproche du bloc suivant */
    background-color: #ffffff;
    margin-bottom: 0 !important;     /* Supprime toute marge externe basse */
    clear: both !important;
}

/* 2. Élimine l'espace au-dessus du module de services à cheval */
.section-modern-services-2026 {
    padding-top: 20px !important;    /* ◄ DRASTIQUEMENT RÉDUIT : Supprime la grande bande blanche supérieure */
    padding-bottom: 120px !important;/* Conserve l'espace en bas de la section */
    background-color: #ffffff;
    margin-top: 0 !important;        /* Supprime toute marge externe haute */
}

/* 3. Ajustement de sécurité sur la première ligne de superposition */
.section-modern-services-2026 .block-modern-row:first-child {
    margin-top: 0 !important;        /* Empêche le premier bloc de pousser vers le haut */
}











/* =====================================================
   MODULE EXTRAIT VALUES & POLICIES — NOUVEAU STYLE EN 2026 page at_a_glance.html
===================================================== */
.iaps-foundations-section {
    background-color: #ffffff;
    padding-top: 100px;
    padding-bottom: 30px !important; /* ◄ RÉDUIT DE 100px À 30px POUR RAPPROCHER LE BAS */
    font-family: "Inter", sans-serif;
}


.iaps-main-title {
    font-size: clamp(32px, 4vw, 46px);
    color: #061b2b;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -2px;
    margin: 0 0 45px 0;
}

.policy-separator {
    margin-top: 100px;
    margin-bottom: 60px;
}

/* --- LE SYSTÈME DE GRILLE DES VALEURS --- */
.iaps-values-grid-v2026 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100%;
    box-sizing: border-box;
}

.value-card-item {
    background-color: #f4f7f9;
    padding: 40px 35px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

/* Propriétés d'isolation requises pour le calque d'arrière-plan */
.value-card-item.card-dynamic-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.value-card-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(6, 27, 43, 0.05);
}

.value-card-item h3 {
    color: #087bc1;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 0 0 20px 0;
    text-transform: uppercase;
}

.value-card-item p {
    color: #101820;
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}

/*  page at a galance .html/
/* --- LE SYSTÈME DE BLOCS POLICIES (ALIGNEMENT HORIZONTAL FORCÉ) --- */
.iaps-policies-row-v2026 {
    display: flex !important;           /* Aligne les éléments sur une ligne horizontale */
    flex-direction: row !important;     /* Force la direction horizontale (gauche à droite) */
    justify-content: center !important; /* Centre horizontalement le groupe de 3 blocs */
    align-items: flex-start !important; /* Aligne les icônes par le haut */
    gap: 50px !important;               /* Espace horizontal de 50px entre chaque document */
    width: 100%;                        /* Occupe toute la largeur disponible */
    margin: 0 auto !important;          /* Centre le conteneur dans la page */
    box-sizing: border-box;
}

.policy-download-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    text-decoration: none !important;
    color: inherit !important;
    width: 200px !important;            /* Fixe une largeur précise pour chaque bloc */
    flex-shrink: 0 !important;          /* Empêche les blocs de se déformer */
    box-sizing: border-box;
}


.policy-icon-wrapper {
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #72818b;
    margin-bottom: 16px;
    transition: color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.policy-icon-wrapper svg {
    width: 100%;
    height: 100%;
}

.policy-download-link span {
    font-size: 13.5px;
    font-weight: 700;
    color: #087bc1;
    border-bottom: 1.5px solid transparent;
    padding-bottom: 2px;
    transition: color 0.25s ease, border-color 0.25s ease;
}

/* Interactions inter-reliées au survol */
.policy-download-link:hover .policy-icon-wrapper {
    color: #061b2b;
    transform: scale(1.06);
}

.policy-download-link:hover span {
    color: #061b2b;
    border-color: #061b2b;
}

/* --- COMPORTEMENT MEDIA QUERIES (RESPONSIVE MODIFIÉ) --- */
@media (max-width: 1024px) {
    .iaps-values-grid-v2026 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* La ligne se gère seule grâce à flex-wrap */
}

@media (max-width: 680px) {
    .iaps-values-grid-v2026 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .value-card-item {
        padding: 35px 25px;
    }
    .iaps-policies-row-v2026 {
        flex-direction: column !important; /* Empile les documents à la verticale sur mobile */
        align-items: center !important;
        gap: 45px !important;
    }
}



/* ====================================================================
   MODULE TIMELINE CHRONOLOGIQUE — INTEGRATION DU MODÈLE AVEC OGIVE 2011
==================================================================== */

.iaps-history-timeline-section {
    background-color: #ffffff;
    padding-top: 20px !important;  /* ◄ RÉDUIT DE 100px À 20px POUR SUPPRIMER LA BANDE BLANCHE SUPÉRIEURE */
    padding-bottom: 140px; 
    width: 100%;
    overflow: hidden;
}
/* --- AJUSTEMENT RESPONSIVE DE SÉCURITÉ --- */
@media (max-width: 800px) {
    .iaps-foundations-section {
        padding-top: 80px;
        padding-bottom: 20px !important;
    }
    .iaps-history-timeline-section {
        padding-top: 15px !important;
    }
}
/* Zone d'isolation de la frise */
.timeline-container-v2026 {
    position: relative;
    width: 100%;
    margin-top: 80px;
    padding-bottom: 20px;
    box-sizing: border-box;
}

/* Axe horizontal central fléché (Bleu Corporate) */
.timeline-axis-line {
    position: absolute;
    top: 52px; /* Aligné pile sur le centre des puces de repères */
    left: 0;
    width: calc(100% - 20px);
    height: 6px;
    background-color: #087bc1;
    z-index: 1;
}

/* Pointe de la flèche vectorielle de l'axe (droite) */
.timeline-axis-line::after {
    content: '';
    position: absolute;
    right: -16px;
    top: -8px;
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 18px solid #087bc1;
}

/* Rail d'alignement horizontal des jalons historique */
.timeline-track-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Unité de jalon (Année + Point d'ancrage + Descriptif) */
.timeline-milestone-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 105px;
    text-align: center;
}

/* Typographie standard des années */
.timeline-milestone-node .milestone-year {
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-weight: 700;
    font-style: italic;
    color: #087bc1;
    margin-bottom: 12px;
    transition: transform 0.3s ease;
}

/* Point de repère carré sur l'axe horizontal */
.timeline-milestone-node .axis-pointer-dot {
    width: 14px;
    height: 14px;
    background-color: #061b2b; /* Carré bleu nuit sur la capture */
    margin-bottom: 20px;
    z-index: 3;
    transition: background-color 0.3s ease;
}

/* Légendes descriptives sous l'axe */
.timeline-milestone-node .milestone-caption {
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    line-height: 1.5;
    color: #72818b;
    padding: 0 4px;
    word-wrap: break-word;
}

.timeline-milestone-node .milestone-caption strong {
    color: #061b2b;
}

/* ====================================================================
   TRATEMENT CHIRURGICAL ET FORMATAGE EN OGIVE POUR L'ANNÉE 2011
==================================================================== */
.timeline-milestone-node.milestone-ogive-highlight {
    position: relative;
    transform: translateY(-8px); /* Élève légèrement le jalon pour l'isoler */
}

/* Transformation de l'année 2011 en capsule de type Ogive */
.timeline-milestone-node.milestone-ogive-highlight .milestone-year {
    color: #ffffff;
    background-color: #087bc1;
    padding: 6px 16px;
    /* Courbure asymétrique complexe simulant une ogive/arche */
    border-radius: 50% 50% 4px 4px / 100% 100% 4px 4px;
    font-size: 24px;
    box-shadow: 0 6px 15px rgba(8, 123, 193, 0.25);
    transform: scale(1.08);
}

/* Distinction de la puce d'ancrage pour 2011 */
.timeline-milestone-node.milestone-ogive-highlight .axis-pointer-dot {
    background-color: #087bc1;
    transform: scale(1.3) rotate(45deg); /* Devient un losange proéminent */
    box-shadow: 0 0 0 4px #ffffff; /* Anneau blanc d'isolation */
}

/* Renforcement de la visibilité du texte associé à IAPS Africa */
.timeline-milestone-node.milestone-ogive-highlight .milestone-caption {
    color: #061b2b;
    font-size: 12px;
    font-weight: 500;
}

/* --- ADAPTATION RESPONSIVE DE SÉCURITÉ (TABLETTES & MOBILES) --- */
@media (max-width: 1024px) {
    .timeline-container-v2026 {
        overflow-x: auto; /* Active le balayage horizontal pour ne pas écraser les dates */
        padding-top: 10px;
        -webkit-overflow-scrolling: touch;
    }
    .timeline-axis-line {
        width: 1100px; /* Conserve la ligne horizontale fixe pendant le défilement mobile */
    }
    .timeline-track-wrapper {
        width: 1100px;
    }
}




/* ====================================================================
   MODULE HUMAIN : MISE EN PAGE DE LA COHORTÉ ÉDITORIALE DES ÉQUIPES  pour la page team.html
==================================================================== */
/* ====================================================================
   MODULE TEAM V2 : COMPTEURS INTERACTIFS ET CADRAGE PREMIUM
==================================================================== */

.iaps-team-mission-block {
    background-color: #f5f8fa !important;
    border-top: 1px solid #edf0f2;
    border-bottom: 1px solid #edf0f2;
    padding: 100px 0 !important;
}

.iaps-mission-split {
    align-items: flex-start !important;
    margin-bottom: 60px !important;
}

.iaps-team-main-title {
    color: #061b2b;
    margin: 0;
    font-size: clamp(32px, 4vw, 46px) !important;
    letter-spacing: -2px !important;
    font-weight: 700;
}

.mission-text-area {
    max-width: 700px !important;
}

.mission-text-area .large-text {
    color: #101820;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    margin-bottom: 15px;
}

.mission-text-area .body-text {
    color: #72818b;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    text-align: justify !important;
}

/* --- BANDEAU DES CHIFFRES CLÉS (COMPTEURS) --- */
.iaps-team-stats-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 50px !important;
    padding: 30px 40px !important;
    background-color: #ffffff !important; /* Bloc blanc détaché en suspension */
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(6, 27, 43, 0.03);
    box-sizing: border-box;
}

.stat-team-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.stat-team-item:not(:last-child) {
    border-right: 1px solid #e2e8f0; /* Ligne fine de séparation verticale */
}

.stat-number {
    font-size: clamp(32px, 3.5vw, 44px) !important;
    font-weight: 800 !important;
    color: #087bc1 !important; /* Bleu éclatant signature */
    line-height: 1.1 !important;
    margin-bottom: 6px;
    letter-spacing: -1px;
}

.stat-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #72818b !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- LE CADRE CINÉMA SÉCURISÉ --- */
.iaps-team-visual-frame {
    position: relative;
    width: 100% !important;
    height: 540px !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(6, 27, 43, 0.05);
    background-color: #061b2b;
}

.iaps-team-visual-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Remplissage plein cadre anti-déformation */
    object-position: center 32% !important; /* Calage millimétré sur les visages de la photo */
    display: block !important;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.team-frame-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 27, 43, 0.1), transparent 30%);
    pointer-events: none;
    z-index: 2;
}

.iaps-team-visual-frame:hover img {
    transform: scale(1.02) !important; /* Effet de zoom fluide élégant */
}

/* --- LOGIQUE RESPONSIVE DESIGN SYSTEM --- */
@media (max-width: 992px) {
    .iaps-team-stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Grille 2x2 sur tablette */
        gap: 30px !important;
    }
    .stat-team-item:not(:last-child) {
        border-right: none !important;
    }
    .iaps-team-visual-frame {
        height: 380px !important;
    }
}

@media (max-width: 800px) {
    .iaps-mission-split {
        flex-direction: column !important;
        gap: 25px !important;
    }
    .mission-text-area {
        max-width: 100% !important;
    }
    .mission-text-area .body-text {
        text-align: left !important;
    }
}

@media (max-width: 550px) {
    .iaps-team-stats-row {
        grid-template-columns: 1fr !important; /* 1 seule colonne sur smartphone */
        gap: 25px !important;
        padding: 30px 20px !important;
    }
    .iaps-team-visual-frame {
        height: 250px !important;
    }
}
/* ====================================================================
   MODULE TEAM : COUPE EN DEUX RECTANGLES ALIGNÉS HORIZONTALEMENT
==================================================================== */

.iaps-team-visual-row-horizontal {
    display: flex !important;
    flex-direction: row !important; /* Force l'alignement côte à côte */
    flex-wrap: nowrap !important;   /* Interdit le retour à la ligne automatique */
    justify-content: space-between !important;
    gap: 25px !important;           /* Crée un espace régulier et aéré entre les deux rectangles */
    width: 100% !important;
    box-sizing: border-box;
    margin-top: 30px;
}

/* 📐 LE CADRE RECTANGULAIRE FIXE AVEC PROPORTIONS PANORAMIQUES COUPE EN DEUX */
.team-rectangle-item {
    position: relative;
    flex: 1 !important;             /* Force les deux blocs à avoir exactement la même largeur (50/50) */
    width: 50% !important;
    height: 340px !important;       /* Hauteur rectangulaire idéale pour les écrans de bureau */
    border-radius: 6px;
    overflow: hidden;               /* Sécurité absolue anti-débordement */
    box-shadow: 0 10px 30px rgba(6, 27, 43, 0.04);
    background-color: #061b2b;
}

/* Forçage du ratio de l'image interne */
.team-rectangle-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;       /* Remplissage plein cadre sans déformer les visages */
    object-position: center 35% !important; /* Ajuste l'axe vertical pour cibler les visages */
    display: block !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Voile d'ambiance discret */
.team-rectangle-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 27, 43, 0.15), transparent 40%);
    pointer-events: none;
    z-index: 2;
}

/* Micro-zoom élégant au survol individuel de chaque rectangle */
.team-rectangle-item:hover img {
    transform: scale(1.025) !important;
}

/* --- LOGIQUE DE SÉCURITÉ RESPONSIVE (MOBILES) --- */
@media (max-width: 992px) {
    .team-rectangle-item {
        height: 260px !important;   /* Hauteur réduite sur tablette pour garder les proportions */
    }
}

@media (max-width: 768px) {
    .iaps-team-visual-row-horizontal {
        flex-direction: column !important; /* Superpose les rectangles sur smartphone */
        gap: 20px !important;
    }
    
    .team-rectangle-item {
        width: 100% !important;     /* Prend toute la largeur de l'écran mobile */
        height: 200px !important;   /* Hauteur adaptée pour conserver la forme de rectangle sur mobile */
    }
}







/* =====================================================
   MEGA MENU CONTACT REGIONALISÉ (V2026 CORPORATE) on va faire le chois lors la selection
===================================================== */

/* Dimensions spécifiques pour caler les 2 grands blocs et le séparateur */
.contact-mega-layout {
    width: 1180px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 45px 50px !important;
    gap: 40px !important;
    
    /* Positionnement par rapport au bouton CONTACT de la Navbar */
    left: 50% !important;
    transform: translate(-75%, 15px) !important; 
}

/* Alignement au survol configuré dans votre base de code */
.nav-dropdown:hover .contact-mega-layout {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-75%, 0) !important;
}

/* Colonnes Our Offices / Partnerships */
.mega-contact-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Ligne fine de séparation verticale issue de votre capture */
.mega-contact-separator {
    width: 1px;
    height: 320px;
    background-color: #e2e8f0;
    align-self: center;
    flex-shrink: 0;
}

/* Titres de colonnes majeurs */
.mega-column-main-title {
    font-family: "Inter", sans-serif;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
    margin: 0 !important;
    text-transform: none !important;
}

.mega-column-main-title.offices-title {
    color: #087bc1 !important; /* Bleu IAPS Offices */
}

.mega-column-main-title.alliances-title {
    color: #061b2b !important; /* Noir IAPS Alliances */
}

/* Grille interne pour répartir l'Afrique, l'Europe, etc. côte à côte */
.mega-regional-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Divise l'espace en 2 colonnes fluides */
    gap: 30px;
    width: 100%;
}

/* Bloc d'une sous-rubrique continentale */
.mega-region-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Label de la sous-rubrique (ex: Africa) */
.mega-region-block h5 {
    font-family: "Inter", sans-serif;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #84929a !important; /* Gris de tri de votre charte */
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0;
    border-bottom: 1px solid #edf0f2;
    padding-bottom: 5px;
}

/* Liste des pays */
.mega-region-block ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mega-region-block ul li {
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* Style des liens pays avec micro-décalage au survol standard de votre menu */
.mega-region-block ul li a {
    display: block !important;
    padding: 4px 0 !important;
    color: #101820 !important;
    font-weight: 500 !important;
    border-bottom: none !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
}

.mega-region-block ul li a:hover {
    color: #087bc1 !important;
    padding-left: 4px !important; /* Effet de glissement hérité de vos sous-menus */
}

/* Flèche indicative à côté du texte CONTACT */
.arrow-icon {
    font-size: 7px !important;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.6;
}





/* ====================================================================
   CORE EXPERTISE DYNAMIC DISCOVERY SYSTEM CSS (IAPS V2026) page engineering.html
==================================================================== */

.iaps-premium-discovery-section {
    background-color: #ffffff !important;
    padding: 80px 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.discovery-main-container {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 50px !important; /* Espacement net et élégant entre le texte du haut et le bloc interactif du bas */
}

/* ====================================================================
   STRUCTURE DE LA ZONE SUPÉRIEURE (TEXTE EDITORIAL + FOCUS)
==================================================================== */
.discovery-editorial-viewport {
    position: relative;
    width: 100%;
}

.discovery-editorial-row {
    display: none;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100%;
    gap: 60px !important;
    animation: iapsSmoothDiscoveryFade 0.45s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.discovery-editorial-row.active {
    display: flex !important;
}

/* Partie gauche : Titre et paragraphe d'accroche */
.editorial-left-block {
    flex: 0 0 55% !important;
    width: 55% !important;
}

.facet-num-label {
    display: block;
    font-family: "Inter", sans-serif !important;
    color: #087bc1;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

.facet-main-title {
    font-family: "Inter", sans-serif !important;
    color: #061b2b;
    font-size: clamp(28px, 3vw, 36px) !important;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1.5px;
    margin: 0 0 20px 0;
}

.facet-description-text {
    font-family: "Inter", sans-serif !important;
    color: #6f7d85 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    text-align: justify !important;
}

/* Partie droite : Cadre des Focus Areas */
.editorial-right-focus {
    flex: 0 0 38% !important;
    width: 38% !important;
    padding-top: 25px; /* Aligne le Focus horizontalement par rapport à la grille de gauche */
}

.focus-mini-title {
    font-family: "Inter", sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #061b2b !important;
    letter-spacing: 1.5px;
    margin: 0 0 16px 0;
    text-transform: uppercase;
}

.focus-bullets-stream {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.focus-bullets-stream li {
    font-family: "Inter", sans-serif !important;
    font-size: 13.5px !important;
    color: #72818b !important;
    margin-bottom: 12px;
    position: relative;
    padding-left: 20px;
    line-height: 1.4;
}

.focus-bullets-stream li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #72818b;
    font-weight: bold;
    opacity: 0.6;
}

/* ====================================================================
   STRUCTURE DE LA ZONE INFÉRIEURE (NAVIGATION + CINEMA VIEWPORT)
==================================================================== */
.discovery-interactive-grid {
    display: grid !important;
    grid-template-columns: 0.85fr 1.15fr !important; /* Calibrage asymétrique précis de votre capture */
    gap: 40px !important;
    align-items: start !important;
    width: 100%;
}

/* Menu de navigation vertical à gauche */
.discovery-navigation-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important; /* Rendu compact sans espace blanc */
    border-left: 1px solid #edf2f7;
}

.discovery-menu-row {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    padding: 15px 20px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background-color 0.25s ease;
}

.row-icon-cell {
    font-size: 16px;
    margin-right: 15px;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.25s;
}

.row-text-cell {
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #71808a !important;
    transition: color 0.25s ease !important;
}

/* Ligne fine bleue sous l'onglet actif */
.row-progress-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: #087bc1;
}

/* États Actifs au survol et à la sélection */
.discovery-menu-row:hover,
.discovery-menu-row.active {
    background-color: #f8fafc !important;
}

.discovery-menu-row:hover .row-text-cell,
.discovery-menu-row.active .row-text-cell {
    color: #061b2b !important;
}

.discovery-menu-row.active .row-progress-indicator {
    width: 100%; /* Déploie la ligne sur tout l'onglet sélectionné */
}

/* Grand boîtier d'image à droite (Format Cinéma Panoramique) */
.discovery-visual-cinema-frame {
    width: 100% !important;
    height: 380px !important; /* Hauteur harmonisée alignée sur le menu vertical */
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(6, 27, 43, 0.05);
    line-height: 0;
}

.img-cinema-cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Remplissage plein cadre sans déformer l'image technique */
    display: block;
    transition: opacity 0.2s ease-out;
}

/* Animation d'apparition du texte */
@keyframes iapsSmoothDiscoveryFade {
    from { opacity: 0; transform: translate3d(-10px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ====================================================================
   SYSTÈME RESPONSIVE FLUIDE (SMARTPHONES & TABLETTES)
==================================================================== */
@media (max-width: 992px) {
    .discovery-main-container {
        gap: 35px !important;
    }
    
    .discovery-editorial-row {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .editorial-left-block,
    .editorial-right-focus,
    .discovery-interactive-grid {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    .discovery-interactive-grid {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }
    
    .discovery-visual-cinema-frame {
        height: 260px !important; /* Hauteur optimisée sur écrans mobiles */
    }
}
/* Recherchez et mettez à jour cette règle dans votre CSS */
.facet-main-title {
    font-family: "Inter", sans-serif !important;
    color: #087bc1 !important; /* ◄ MODIFICATION ICI : Devient le bleu signature IAPS */
    font-size: clamp(28px, 3vw, 36px) !important;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1.5px;
    margin: 0 0 20px 0;
}










/* ====================================================================
   IAPS ENGINEERING PHASES STYLING (V2026 CORPORATE) page engineering au dessus 5 points
==================================================================== */
.iaps-phases-section {
    background-color: #ffffff !important;
    padding: 80px 0 40px 0 !important; /* Léger retrait en bas pour s'associer à la suite */
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.phases-main-container {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* --- TITRAGE CENTRAL --- */
.phases-section-header {
    text-align: center !important;
    margin-bottom: 55px !important;
}

.phases-main-title {
    font-family: "Inter", sans-serif !important;
    color: #061b2b !important;
    font-size: clamp(28px, 3.2vw, 38px) !important;
    font-weight: 700 !important;
    margin: 0 0 14px 0 !important;
    letter-spacing: -1px !important;
}

.phases-subtitle-text {
    font-family: "Inter", sans-serif !important;
    color: #6f7d85 !important;
    font-size: 15.5px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* --- GRILLE DE COMPOSITION DES CARTES --- */
.phases-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
}

/* Design unitaire de chaque Pavé de phase */
.phase-card-item {
    background-color: #ffffff !important;
    border: 1px solid #eef2f5 !important;
    border-radius: 10px !important;
    padding: 40px 30px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    transition: transform 0.3s cubic-bezier(0.215, 0.610, 0.355, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* Titre interne de la carte */
.phase-card-title {
    font-family: "Inter", sans-serif !important;
    color: #087bc1 !important; /* Bleu institutionnel */
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 25px 0 14px 0 !important;
}

/* Descriptif interne */
.phase-card-description {
    font-family: "Inter", sans-serif !important;
    color: #71808a !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    text-align: left !important;
}

/* --- BOITIERS D'ICÔNES ET DEGRADES DE LA MAQUETTE --- */
.phase-icon-box {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: #ffffff !important;
}

/* Les 3 variantes de dégradés conformes aux visuels d'icônes */
.box-gradient-cyan {
    background: linear-gradient(135deg, #0aa1dd, #007bc1) !important;
}

.box-gradient-blue {
    background: linear-gradient(135deg, #007bc1, #045a93) !important;
}

.box-gradient-darkblue {
    background: linear-gradient(135deg, #045a93, #02385e) !important;
}

/* --- EFFET FLUIDE AU SURVOL (HOVER EFFECT) --- */
.phase-card-item:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(8, 123, 193, 0.15) !important;
    box-shadow: 0 20px 40px rgba(6, 27, 43, 0.05) !important;
    background-color: #fcfdfe !important; /* Teinte très subtile en survol actif */
}
/* AJUSTEMENT SPÉCIFIQUE POUR L'ALIGNEMENT DES 5 CARTES */
@media (min-width: 993px) {
    .phases-cards-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important; /* Centre la ligne du bas (les 2 cartes restantes) */
        gap: 30px !important;
    }
    
    .phase-card-item {
        flex: 0 0 calc(33.333% - 20px) !important; /* Maintient une largeur équivalente à 3 colonnes */
        min-width: 320px !important;
    }
}



/* --- AJUSTEMENTS POUR LE RESPONSIVE DES PETITS ÉCRANS --- */
@media (max-width: 992px) {
    .phases-cards-grid {
        grid-template-columns: 1fr !important; /* Rangement vertical fluide automatique */
        gap: 25px !important;
    }
    
    .phase-card-item {
        padding: 30px 25px !important;
    }
}



















/* ====================================================================
   LAYOUT EXTENSION PRO 2026 — ENGINEERING SPLIT CINEMATIC
==================================================================== */

.engineering-split-showcase-2026 {
    display: flex;
    width: 100%;
    min-height: calc(100vh - 92px);
    background-color: #ffffff;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

/* --- PANNEAU VISUEL --- */
.split-visual-panel {
    flex: 1 1 50%;
    position: relative;
    height: auto;
    min-height: 600px;
    background-color: #061b2b;
    overflow: hidden;
}

.split-visual-panel img.cliquable-pop {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-visual-panel img.cliquable-pop:hover {
    transform: scale(1.03);
}

.split-visual-panel .editorial-dark-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(6, 27, 43, 0.45) 0%, rgba(6, 27, 43, 0.1) 100%);
    pointer-events: none;
    z-index: 2;
}

/* --- BADGE FLOTTANT V2026 --- */
.tech-floating-badge {
    position: absolute;
    bottom: 40px;
    left: 40px;
    background: rgba(6, 27, 43, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 16px 28px;
    border-left: 3px solid #087bc1;
    border-radius: 0 4px 4px 0;
    color: #ffffff;
    z-index: 10;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.tech-floating-badge .badge-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #45b4f5;
    margin-bottom: 4px;
}

.tech-floating-badge .badge-text {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

/* --- PANNEAU ÉDITORIAL --- */
.split-editorial-panel {
    flex: 1 1 50%;
    padding: 80px 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    background-color: #ffffff;
}

.discipline-header {
    margin-bottom: 45px;
}

.discipline-index {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #087bc1;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.discipline-title {
    font-size: clamp(32px, 3.5vw, 44px);
    font-weight: 800;
    color: #061b2b;
    letter-spacing: -2px;
    line-height: 1.1;
    margin: 0;
}

/* --- ACCORDÉON / TIMELINE DE FLUX --- */
.engineering-tabs-stream {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
}

.stream-row-item {
    border-left: 3px solid #edf2f7;
    padding-left: 26px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.stream-row-item.active {
    border-color: #087bc1;
}

.stream-row-item .stream-title-text {
    font-size: 16px;
    font-weight: 700;
    color: #94a3b8;
    margin: 0 0 12px 0;
    letter-spacing: -0.3px;
    transition: color 0.3s ease;
}

.stream-row-item.active .stream-title-text {
    color: #061b2b;
}

.body-editorial-modern {
    font-size: 14.5px;
    line-height: 1.65;
    color: #72818b;
    text-align: justify;
    margin: 0;
    transition: color 0.3s ease;
}

.stream-row-item.active .body-editorial-modern {
    color: #6f7d85;
}

/* --- TEXT TAGS POUR LOGICIELS --- */
.software-capsules-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.software-tag {
    background: #f4f7f9;
    color: #51626e;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 20px;
    transition: all 0.25s ease;
}

.software-tag:hover {
    background: #087bc1;
    color: #ffffff;
}

/* ====================================================================
   RESPONSIVE MEDIA SYSTEM
==================================================================== */
@media (max-width: 992px) {
    .engineering-split-showcase-2026 {
        flex-direction: column !important;
    }
    .split-visual-panel {
        min-height: 400px !important;
    }
    .split-editorial-panel {
        padding: 50px 30px !important;
    }
    .tech-floating-badge {
        bottom: 25px;
        left: 25px;
        padding: 12px 20px;
    }
}













/* ====================================================================
   IAPS MASTER HUB V2026 — DYNAMIC DUAL-PANEL SYSTEM pour engineering.html la  partie gauche et droite
==================================================================== */

.engineering-master-hub-2026 {
    width: 100%;
    background-color: #ffffff;
    font-family: 'Inter', sans-serif;
    padding: 60px 0;
}

.hub-container-v2026 {
    display: flex;
    width: min(1400px, 94%);
    margin: 0 auto;
    gap: 60px;
    align-items: start;
}

/* --- PANNEAU GAUCHE : SIDEBAR FIXE / COLLANTE --- */
/* ====================================================================
   CORRECTIF SÉCURISÉ : AFFICHAGE DES 14 CHOIX DE LA SIDEBAR GAUCHE
==================================================================== */

.disciplines-master-sidebar {
    flex: 0 0 340px !important;       /* Largeur idéale pour éviter les coupures de texte */
    position: sticky !important;
    top: 130px !important;            /* Aligné sous la hauteur de votre Navbar */
    
    /* MODIFICATIONS CRITIQUES : Libère la hauteur pour tout afficher d'un coup */
    height: auto !important;          
    max-height: none !important;      /* ◄ Élimine la restriction qui créait la barre de défilement */
    overflow-y: visible !important;   /* ◄ Force le conteneur à afficher tout son contenu sans masquer */
    
    border-right: 1px solid #edf2f7 !important;
    padding-right: 15px !important;
}

/* 2. Optimisation de la structure des lignes interactives (Boutons du 01 au 14) */
.master-nav-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    padding: 12px 16px !important;    /* ◄ Rembourrage réduit pour compacter les 14 choix sur un seul écran */
    margin-bottom: 2px !important;     /* Crée un micro-espace régulier entre les boutons */
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 3. Style affiné des numéros (01, 02 ... 14) */
.master-nav-row .row-num {
    font-family: "Inter", sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;         /* Gris ardoise épuré par défaut */
    margin-right: 14px !important;
    min-width: 20px !important;       /* Verrouille l'alignement des chiffres à deux caractères (10, 11, 14) */
}

/* 4. Style affiné des intitulés textuels */
.master-nav-row .row-name {
    font-family: "Inter", sans-serif !important;
    font-size: 13.5px !important;     /* Taille de police corporate idéale */
    font-weight: 600 !important;
    color: #71808a !important;
    white-space: nowrap !important;    /* ◄ Interdit au nom de la discipline de se couper en deux */
    transition: color 0.2s ease !important;
}

/* 5. Comportement interactif de la ligne active (Sélectionnée) */
.master-nav-row.active {
    background-color: #f8fafc !important; /* Fond gris très clair pour détacher le choix */
    border-left: 3px solid #087bc1 !important; /* Ligne de repère bleu IAPS */
    padding-left: 13px !important;    /* Ajustement chirurgical pour compenser la bordure */
}

/* Synchronisation des couleurs à la sélection ou au survol */
.master-nav-row:hover .row-name,
.master-nav-row.active .row-name {
    color: #061b2b !important;        /* Le texte passe au noir bleuté profond */
}

.master-nav-row:hover .row-num,
.master-nav-row.active .row-num {
    color: #087bc1 !important;        /* Le numéro passe au bleu signature */
}



/* SÉCURITÉ : Masque la barre de défilement si le navigateur tente de l'afficher */
.disciplines-master-sidebar::-webkit-scrollbar {
    display: none !important;         /* Pour Chrome, Safari et Edge */
}
.disciplines-master-sidebar {
    scrollbar-width: none !important; /* Pour Firefox */
    -ms-overflow-style: none !important; /* Pour Internet Explorer / Anciens Edge */
}


.hub-mini-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: #087bc1;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 25px;
}
/* ====================================================================
   CORRECTIF : SUPPRESSION DU SCROLLBAR ET AFFICHAGE INTÉGRAL DIRECT la partie droite 
==================================================================== */




/* Optimisation de l'espacement pour que les 14 lignes respirent parfaitement */
.master-nav-row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 11px 16px !important;    /* Taille condensée premium pour un rendu compact */
    margin-bottom: 3px !important;
    background: transparent !important;
    border: none !important;
    white-space: nowrap !important;    /* ◄ Verrouille le texte sur une seule ligne lisible */
}


/* --- PANNEAU DROIT : VISUELS ET ACCORDEONS --- */
.discipline-slave-viewport {
    flex: 1;
    min-width: 0; /* Sécurité anti-débordement Flexbox */
}

.discipline-dynamic-panel {
    display: none; /* Toutes les fiches masquées par défaut */
    flex-direction: column;
    gap: 35px;
    width: 100%;
}

.discipline-dynamic-panel.active {
    display: flex; /* Uniquement la discipline cliquée s'affiche */
    animation: hubCinemaFadeIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.panel-cinema-frame {
    position: relative;
    width: 100%;
    height: 380px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(6, 27, 43, 0.04);
}

.panel-cinema-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.editorial-dark-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 27, 43, 0.2), transparent);
    pointer-events: none;
}

.discipline-main-header {
    border-bottom: 1px solid #edf0f2;
    padding-bottom: 15px;
}

.discipline-main-title {
    font-size: 32px;
    font-weight: 800;
    color: #061b2b;
    letter-spacing: -1.5px;
    margin: 0;
}

/* --- ACCORDÉON / TIMELINE DE FLUX INTERNE --- */
.engineering-tabs-stream {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
}

.stream-row-item {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.stream-line-indicator {
    width: 3px;
    align-self: stretch;
    background-color: #edf2f7; /* Gris neutre */
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.stream-row-item.active .stream-line-indicator {
    background-color: #087bc1; /* Devient bleu éclatant si cliqué */
}

.stream-meta-content {
    padding-left: 26px;
    flex-grow: 1;
}

.stream-title-text {
    font-size: 16px;
    font-weight: 700;
    color: #94a3b8;
    margin: 0 0 10px 0;
    letter-spacing: -0.3px;
    cursor: pointer;
    transition: color 0.25s;
}

.stream-row-item.active .stream-title-text {
    color: #061b2b;
}

.body-editorial-modern {
    font-size: 14.5px;
    line-height: 1.65;
    color: #72818b;
    text-align: justify;
    margin: 0;
}

/* --- LOGICIELS SUITE CAPSULES --- */
.software-capsules-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
}

.software-tag {
    background: #f4f7f9;
    color: #51626e;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 20px;
}

/* Animations de transition */
@keyframes hubCinemaFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- SYSTEME RESPONSIVE POUR MOBILE --- */
@media (max-width: 992px) {
    .hub-container-v2026 {
        flex-direction: column;
        gap: 40px;
    }
    .disciplines-master-sidebar {
        flex: 0 0 100%;
        width: 100%;
        position: relative;
        top: 0;
        border-right: none;
        border-bottom: 1px solid #edf2f7;
        padding-bottom: 20px;
        max-height: none;
    }
    .master-nav-stream {
        flex-direction: row;
        overflow-x: auto; /* Menu horizontal coulissant sur mobile */
        padding-bottom: 8px;
    }
    .master-nav-row {
        white-space: nowrap;
        width: auto;
    }
    .master-nav-row.active {
        border-left: none;
        border-bottom: 3px solid #087bc1;
        padding-left: 20px;
    }
}





/* ====================================================================
   MOTEUR DE COULEURS INDIVIDUELLES (SIDEBAR GAUCHE & TRAITS DROITE) les codes couelur pour  le 14 de la page engineering 
==================================================================== */

/* --- Déclaration des couleurs uniques par jalon (01 à 14) --- */
.master-nav-stream .master-nav-row:nth-child(1)  { --discipline-color: #007bb6; } /* 01. Process (Bleu) */
.master-nav-stream .master-nav-row:nth-child(2)  { --discipline-color: #3b2a82; } /* 02. Piping (Violet) */
.master-nav-stream .master-nav-row:nth-child(3)  { --discipline-color: #1a8241; } /* 03. Equipment (Vert) */
.master-nav-stream .master-nav-row:nth-child(4)  { --discipline-color: #c66218; } /* 04. Civil (Orange) */
.master-nav-stream .master-nav-row:nth-child(5)  { --discipline-color: #e5a93b; } /* 05. Safety (Jaune d'or) */
.master-nav-stream .master-nav-row:nth-child(6)  { --discipline-color: #a23b8c; } /* 06. Telecom (Magenta) */
.master-nav-stream .master-nav-row:nth-child(7)  { --discipline-color: #2da29b; } /* 07. HVAC (Turquoise) */
.master-nav-stream .master-nav-row:nth-child(8)  { --discipline-color: #4b5866; } /* 08. Infra (Gris tech) */
.master-nav-stream .master-nav-row:nth-child(9)  { --discipline-color: #10599a; } /* 09. Electrical (Bleu nuit) */
.master-nav-stream .master-nav-row:nth-child(10) { --discipline-color: #cf2a2a; } /* 10. Instrument (Rouge) */
.master-nav-stream .master-nav-row:nth-child(11) { --discipline-color: #7b3bc1; } /* 11. Automation (Pourpre) */
.master-nav-stream .master-nav-row:nth-child(12) { --discipline-color: #8c6239; } /* 12. Geotechnical (Brun) */
.master-nav-stream .master-nav-row:nth-child(13) { --discipline-color: #119a53; } /* 13. BIM (Vert menthe) */
.master-nav-stream .master-nav-row:nth-child(14) { --discipline-color: #556b2f; } /* 14. Architectural (Olive) */

/* --- Application dynamique sur les boutons à GAUCHE --- */
.master-nav-row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 12px 18px !important;
    margin-bottom: 4px !important;
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important; /* Trait neutre initial */
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Effet Hover (Survol souris) */
.master-nav-row:hover {
    background-color: #f8fafc !important;
    border-left-color: var(--discipline-color) !important;
}
.master-nav-row:hover .row-name {
    color: #061b2b !important;
}
.master-nav-row:hover .row-num {
    color: var(--discipline-color) !important;
}

/* État ACTIF (Sélectionné ou basculé automatiquement) */
.master-nav-row.active {
    background-color: #f8fafc !important;
    border-left: 3px solid var(--discipline-color) !important; /* Colore le trait gauche */
    padding-left: 18px !important;
}
.master-nav-row.active .row-name {
    color: #061b2b !important;
    font-weight: 700 !important;
}
.master-nav-row.active .row-num {
    color: var(--discipline-color) !important; /* Le numéro prend sa propre couleur */
}

/* --- Application dynamique sur les lignes de flux à DROITE --- */
/* Le trait vertical interne (stream-line-indicator) hérite de la couleur de la discipline active */
.stream-row-item.active .stream-line-indicator {
    background-color: var(--active-hub-color, #087bc1) !important;
    box-shadow: 0 0 8px var(--active-hub-color) !important; /* Léger halo lumineux */
    transition: background-color 0.4s ease !important;
}

/* Les accordéons internes à droite s'activent de la même couleur */
.stream-row-item.active .stream-title-text {
    color: #061b2b !important;
}
/* Force le trait de droite à prendre dynamiquement la couleur de la discipline active */
.stream-row-item.active .stream-line-indicator {
    background-color: var(--active-hub-color, #087bc1) !important;
    box-shadow: 0 0 8px var(--active-hub-color) !important; /* Ajoute un éclat haut de gamme */
}



.stream-meta-content ul {
    margin-top: 10px;
    padding-left: 20px; /* Donne de l'espace pour les puces */
    list-style-type: disc; /* Force les puces rondes comme sur l'image */
}

.stream-meta-content li {
    margin-bottom: 8px; /* Ajoute un léger espace vertical entre chaque ligne */
    color: #6c757d; /* Teinte de gris similaire à votre capture */
}
/* =====================================================
   OPTIMISATION UNIFORME DES LISTES DE LIVRABLES (V2026)
===================================================== */

/* 1. Structure de la liste en grille à deux colonnes */
.stream-meta-content .body-editorial-modern ul {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Divise l'espace en 2 colonnes égales */
    gap: 10px 30px !important;                       /* Écartement : 10px vertical, 30px horizontal */
    margin-top: 15px !important;
    padding-left: 0 !important;                       /* Nettoie les paddings par défaut */
    list-style-type: none !important;                 /* Supprime les puces standard pour créer un design personnalisé */
    width: 100%;
}

/* 2. Style unitaire de chaque puce (Délivrable) */
.stream-meta-content .body-editorial-modern li {
    font-family: "Inter", sans-serif !important;
    font-size: 13.5px !important;                     /* Taille de police corporate idéale */
    line-height: 1.4 !important;
    color: #51626e !important;                        /* Teinte gris ardoise douce et lisible */
    margin-bottom: 0 !important;                      /* Géré par le gap de la grille */
    position: relative !important;
    padding-left: 20px !important;                    /* Espace pour accueillir la nouvelle flèche */
    text-align: left !important;
    transition: color 0.2s ease !important;
}

/* 3. Flèche vectorielle moderne en remplacement du rond noir classique */
.stream-meta-content .body-editorial-modern li::before {
    content: "→" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: var(--active-hub-color, #087bc1) !important; /* Prend automatiquement la couleur de la discipline active */
    font-weight: 700 !important;
    opacity: 0.85;
}

/* 4. Effet visuel discret au survol de la ligne */
.stream-meta-content .body-editorial-modern li:hover {
    color: #061b2b !important;                        /* Devient noir bleuté profond au survol */
}

/* --- ADAPTATION RESPONSIVE DE SÉCURITÉ (MOBILE) --- */
@media (max-width: 600px) {
    .stream-meta-content .body-editorial-modern ul {
        grid-template-columns: 1fr !important;        /* Repasse sur 1 seule colonne propre sur smartphone */
        gap: 12px !important;
    }
}





/* page contact  */

/* ==========================================================================
   FORCE L'AFFICHAGE DU BLOC DE CONTACT TUNISIE (WISSEM BEN SAID)
   ========================================================================== */
.bureau-local-wrapper {
    display: block !important;    /* Force le bloc à devenir visible à l'écran */
    opacity: 1 !important;        /* Rend le contenu totalement opaque */
    transform: none !important;   /* Annule tout décalage d'animation initial */
    width: 100%;
    max-width: 1240px;            /* Aligné sur la largeur de votre grille offices-container */
    margin: 40px auto 60px auto;  /* Équilibre les espaces horizontaux et vertivaux */
    padding: 0 20px;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Optionnel : masquez l'ancienne croix si le bloc est maintenant permanent */
.bureau-local-wrapper .close-bureau-btn {
    display: none !important;
}

/* Ligne de séparation et Badge */
.bureau-header {
    position: relative;
    text-align: center;
    margin-bottom: 30px;
}

.bureau-header::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #eef2f5;
    z-index: 1;
}

/* Style du badge principal */
.badge-bureau {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
    color: #5f6368;
    padding: 6px 18px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 20px;
    border: 1px solid #eef2f5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    display: inline-flex;
    align-items: center;
    gap: 8px; 
}

/* Ajustement de l'image à l'intérieur du cercle */
.badge-flag-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   GRILLE À 4 COLONNES ET BLOCS DE CARTES UNIFIÉS
   ========================================================================== */
/* ==========================================================================
   ALIGNEMENT ET COMPOSITION CINÉMATIQUE À 4 BLOCS (MODÈLE PHOTO COHÉRENT)
   ========================================================================== */
.bureau-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* Fixe strictement les 4 colonnes côte à côte */
    gap: 24px !important;
    width: 100% !important;
    align-items: stretch !important; /* Force toutes les cartes à adopter la même hauteur */
}

.bureau-card {
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #f0f2f5;
    padding: 30px 24px !important; /* Augmentation pour donner de l'espace aux cercles */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centre parfaitement les éléments à la verticale */
    box-sizing: border-box !important;
    height: 100% !important;
}

/* Structure interne verticale pour Email et Téléphone */
.card-vertical-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centre horizontalement l'icône et le texte */
    justify-content: center !important;
    width: 100%;
    gap: 16px !important; /* Écart parfait entre le cercle et le lien */
}

/* Grands cercles bleus supérieurs pour Email, Téléphone et Partage */
.info-main-circle,
.social-main-circle {
    width: 52px !important;
    height: 52px !important;
    background-color: #087bc1 !important; /* Votre bleu signature unique */
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 4px 12px rgba(8, 123, 193, 0.15);
    flex-shrink: 0 !important;
}

.info-main-circle svg,
.social-main-circle svg {
    width: 22px !important;
    height: 22px !important;
    color: #ffffff !important; /* Force les icônes en blanc pur */
}

/* Verrouillage typographique et alignement strict du texte des coordonnées */
.contact-link {
    font-size: 13.5px !important; /* Ajusté pour empêcher le texte long de casser la ligne */
    color: #101820 !important;   /* Teinte foncée très lisible */
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap !important; /* INTERDIT LE RETOUR À LA LIGNE */
    display: block !important;
    transition: color 0.25s ease;
}

.contact-link:hover {
    color: #087bc1 !important;    /* Devient bleu au survol */
}

/* Structure du bloc Stay in Touch */
.stay-in-touch-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.stay-in-touch-content h4 {
    font-size: 14px !important;
    font-weight: 700;
    color: #101820;
    margin: 4px 0 6px 0 !important;
}

/* Rangée des réseaux sociaux */
.social-mini-icons-row {
    display: flex !important;
    gap: 16px !important;
    align-items: center !important;
}

.social-svg {
    width: 20px !important;
    height: 20px !important;
    color: #72818b !important;
    transition: color 0.25s, transform 0.2s;
}

.social-mini-icons-row a:hover .social-svg {
    color: #087bc1 !important;
    transform: scale(1.1);
}

/* Responsive Tablettes et Mobiles */
@media (max-width: 1024px) {
    .bureau-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
}
@media (max-width: 680px) {
    .bureau-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .contact-link { font-size: 14.5px !important; white-space: normal !important; word-break: break-all !important; } /* Autorise la coupure uniquement sur tout petit smartphone */
}
/* ==========================================================================
   CORRECTIF TAILLE AVATAR ET ENCADREMENT MANAGER CARD
   ========================================================================== */
.manager-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 24px !important;
}

/* Force l'alignement horizontal de l'avatar et du texte à l'intérieur */
.card-profile {
    display: flex !important;
    flex-direction: row !important; /* Force la photo à gauche et le texte à droite */
    align-items: center !important; 
    gap: 16px !important;           /* Écart régulier */
    width: 100% !important;
    margin-top: auto;
    margin-bottom: auto;
}

/* Conteneur strict de la photo (Verrouillage dimensionnel) */
.profile-avatar-container {
    width: 60px !important;        /* Largeur fixe stricte */
    height: 60px !important;       /* Hauteur fixe stricte */
    flex-shrink: 0 !important;     /* Interdit au navigateur d'agrandir ou rétrécir la boîte */
    border-radius: 50% !important;
    overflow: hidden !important;   /* Coupe tout ce qui dépasse du cercle */
}

/* Image de la personne bridée à 100% de son mini-conteneur */
.profile-avatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;  /* Remplissage propre sans déformation */
    border-radius: 50% !important;
}

/* Zone de texte à côté de l'avatar */
.profile-text {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;   /* Justifié à gauche */
}

.profile-text h3 {
    margin: 0 0 2px 0 !important;
    font-size: 16px !important;    /* Ajusté pour la cohérence visuelle */
    color: #1a1a1a;
    font-weight: 700;
}

.job-title {
    margin: 0 !important;
    font-size: 13px !important;
    color: #80868b;
}




/* ==========================================================================
   SECTION CONTENEUR & GRILLE PREMIUM (VERSION CARD-BASED 2026)
   ========================================================================== */
/* ==========================================================================
   AFFICHAGE 2 COLONNES INTERNES — TEXTE GRIS ET DRAPEAUX COLORÉS (2026)
   ========================================================================== */
.offices-container {
    max-width: 1240px;             
    margin: 0 auto 100px auto;     
    padding: 0 20px;
    font-family: "Inter", sans-serif !important;
    box-sizing: border-box;
}

.offices-main-title {
    color: #061b2b;                
    font-size: clamp(34px, 4.5vw, 48px); 
    font-weight: 800;              
    text-align: center;
    margin-bottom: 60px;
    letter-spacing: -2px;          
}

.offices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;                     
    justify-content: center;
    align-items: start;            
}

.offices-column {
    background: #ffffff;
    border: 1px solid #eef2f5;     
    border-radius: 12px;           
    padding: 40px 30px;            
    box-shadow: 0 10px 30px rgba(6, 27, 43, 0.02); 
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.column-header {
    color: #087bc1;                
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;           
    text-transform: uppercase;
    padding-bottom: 18px;
    border-bottom: 2px solid #f1f5f9; 
    margin-bottom: 20px;
}

/* Grille interne à 2 colonnes */
.country-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 10px 15px !important; 
    width: 100% !important;
}

/* Style de chaque ligne pays contenant le texte */
.country-list li {
    display: flex !important;
    flex-direction: row !important;     
    align-items: center !important;     
    justify-content: flex-start !important; 
    gap: 12px !important;               
    
    /* MODIFICATION : Force la couleur grise uniforme sur l'écriture */
    color: #72818b !important;          /* Teinte grise var(--iaps-muted) de vos paragraphes */
    
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    padding: 4px 0;                
    box-sizing: border-box;
    white-space: nowrap !important;     /* Verrouillage strict anti-retour à la ligne */
    text-align: left !important;        
    transition: color 0.25s ease, transform 0.25s ease;
}

/* Maintien des drapeaux visibles, en couleur et nets */
.flag {
    width: 24px !important;            
    height: 16px !important;           
    object-fit: cover !important;      
    border-radius: 2px;                
    box-shadow: 0 1px 3px rgba(16, 24, 32, 0.15); 
    
    filter: none !important;           /* Conserve les vraies couleurs vives du drapeau */
    opacity: 1 !important;             /* Reste visible à 100% sans transparence parasite */
    flex-shrink: 0 !important;         /* Empêche l'écriture de compresser le drapeau */
    
    transition: transform 0.25s ease;
}

/* ==========================================================================
   MICRO-INTERACTIONS DE SURVOL (HOVER EFFECTS)
   ========================================================================== */
.offices-column:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(6, 27, 43, 0.05);
}

/* L'écriture s'illumine en bleu au survol de la ligne */
.country-list li:hover {
    color: #087bc1 !important;          /* L'écriture passe au bleu signature de votre marque au focus */
    transform: translateX(3px);        /* Léger décalage horizontal fluide */
}

.country-list li:hover .flag {
    transform: scale(1.08);            /* Léger effet de relief au survol */
}

/* Responsive */
@media (max-width: 992px) {
    .offices-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 680px) {
    .offices-grid { grid-template-columns: 1fr; gap: 24px; }
    .country-list { grid-template-columns: 1fr !important; } /* Retour à 1 colonne sur smartphone */
}












/* ==========================================================================
   JUSTIFICATION PARFAITE DE BORD À BORD (LIGNES DE REPÈRE BLEUES)
   ========================================================================== */
/* ==========================================================================
   FORÇAGE DE JUSTIFICATION ABSOLUE (BORDS DROIT ET GAUCHE BLOQUÉS)
   ========================================================================== */
.about-section p, 
.about-text-block p,
p {
    /* ◄ ANCRAGE DROIT ET GAUCHE STRICT */
    text-align: justify !important;          /* Force l'alignement sur les deux côtés */
    text-justify: inter-word !important;     /* Répartit les espaces de manière fluide entre les mots */
    
    /* ◄ GESTION DU DERNIER MOT EN FIN DE LIGNE */
    word-break: normal !important;           
    hyphens: auto !important;                /* Coupe les mots longs pour qu'ils touchent le bord droit */
    -webkit-hyphens: auto;
    
    /* ◄ CADRAGE DIMENSIONNEL */
    display: block !important;
    width: 100% !important;                  /* Force le texte à s'étirer sur toute la largeur disponible */
    box-sizing: border-box !important;
}

/* Sécurité sur le conteneur parent pour libérer l'espace à droite */
.about-section, 
.about-text-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;         /* Force le paragraphe interne à occuper 100% de la largeur */
    text-align: justify !important;
}



:root {
    --card-bg: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --accent-blue: #0284c7;
    --border-color: #e2e8f0;
}

.premium-partners-section {
    padding: 60px 0;
    background-color: #f8fafc;
}

.premium-partners-section .glass-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- BARRE DE FILTRE (Alignée à droite style image) --- */
.partners-filter-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    margin-bottom: 35px;
    width: 100%;
}

.filter-select-container {
    position: relative;
    width: 250px;
    border-bottom: 1px solid #cbd5e1; /* Ligne fine en dessous */
    padding-bottom: 4px;
}

.custom-select {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #64748b;
    padding: 8px 24px 8px 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.filter-select-container::after {
    content: "▼";
    font-size: 10px;
    color: #1e293b;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.filter-action-btn {
    background-color: #0284c7; /* Bleu rectangulaire vif */
    color: #ffffff;
    border: none;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.filter-action-btn:hover {
    background-color: #0369a1;
}

/* --- STRUCTURE HORIZONTALE DES BLOCS --- */
.partners-grid-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sector-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: row; /* Alignement horizontal strict */
    align-items: center;
    padding: 14px 24px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    min-height: 72px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.sector-info {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 190px; /* Largeur fixe pour bloquer le vide */
    min-width: 190px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    padding-right: 15px;
}

.sector-icon {
    width: 36px;
    height: 36px;
    background: #f1f5f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-blue);
    font-size: 14px;
}

.sector-info h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

/* --- CONTENEUR DES LOGOS (LIGNE DROITE PARFAITE) --- */
.sector-logos {
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: flex-start;
    gap: 32px; /* Espacement équilibré */
    padding-left: 24px;
    width: 100%;
    overflow-x: auto; /* Empêche les retours à la ligne chaotiques */
    scrollbar-width: none;
}

.sector-logos::-webkit-scrollbar {
    display: none;
}

.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    flex-shrink: 0;
}

.logo-item img {
    max-height: 28px;
    width: auto;
    object-fit: contain;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Cache les lignes masquées par le filtre */
.sector-card.hide {
    display: none !important;
}

.highlights-card {
    border-left: 3px solid var(--accent-blue);
}

/* Responsive */
@media (max-width: 768px) {
    .partners-filter-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-select-container {
        width: 100%;
    }
    .sector-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .sector-info {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .sector-logos {
        padding-left: 0;
    }
}





/* ====================================================================
   MODULE UNIFIÉ 2026 : CARROUSELS SECTORIELS INFINIS COMPACTS les icons de l activité dans la page at galance
==================================================================== */



.sector-card {
    height: auto !important;
    min-height: 100px !important;  /* Offre un espace vertical confortable pour les grands logos */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow: visible !important;   /* Indispensable pour ne pas brider les animations */
    
    /* Unification du style : Ajout du trait gauche bleu sur toutes les cartes */
    border-left: 3px solid #087bc1 !important; 
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

/* Carrés mini-logos (Ex: Usine, Baril) : Fond blanc pur calibré sans coupure */
.sector-icon {
    width: 36px !important;
    height: 36px !important;
    background: #ffffff !important; 
    border-radius: 8px !important;  
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;          
    flex-shrink: 0 !important;      /* Empêche le carré de se déformer */
}

.sector-icon img,
.sector-mini-logo {
    width: 85% !important;  
    height: 85% !important;
    max-width: 85% !important;
    max-height: 85% !important;
    object-fit: contain !important; /* Force l'icône à rester entière et nette */
    display: block !important;
}

/* ====================================================================
   2. MOTEUR DE BALAYAGE AUTOMATIQUE CONTINU (MODE CARROUSEL ACTIF)
   ==================================================================== */

/* Fenêtre de découpe horizontale */
.sector-logos-marquee-container {
    width: 100% !important;
    overflow: hidden !important;    /* Masque les logos qui attendent à l'extérieur de l'écran */
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.marquee-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;   
    width: max-content !important;  
    gap: 20px !important;           

    will-change: transform;         
}

/* Resserrement de l'espace blanc entre chaque logo (Gap compact) */
.marquee-group {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;           
    flex-shrink: 0 !important;
}

/* Dimensions et agrandissement corporate des cellules de logos */
.marquee-group .logo-item {
    width: auto !important;
    max-width: 200px !important;    
    height: 55px !important;        
    flex: 0 0 auto !important;      
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Redimensionnement de l'image du logo */
.marquee-group .logo-item img {
    display: block !important;
    width: auto !important;        
    height: auto !important;
    max-height: 44px !important;   /* Plus grand : logos très visibles et lisibles à l'écran */
    object-fit: contain !important; /* Garantit l'absence totale de déformation géométrique */
}

/* Pause de confort visuel au survol de la souris */
.sector-logos-marquee-container:hover .marquee-track {
    animation-play-state: paused !important;
}

@keyframes oilGasLinearMarquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(calc(-50% - 10px), 0, 0); }
}

/* ====================================================================
   3. MODE STATIQUE & GRILLE COMPLÈTE APRES FILTRAGE (LOGOS JUSTIFIÉS)
   ==================================================================== */

/* Force la disparition absolue des autres blocs (Primary, Logistics...) */
.sector-card.hide-card {
    display: none !important;
}

/* Réorganise la carte entière pour accepter le développement vertical et les logos alignés */
.sector-card.is-filtered-grid {
    align-items: flex-start !important; /* Aligne l'icône de gauche en haut */
    height: auto !important;
    min-height: 200px !important;       
    padding: 30px 25px !important;
    box-sizing: border-box !important;
}

/* Libère le conteneur des logos */
.sector-logos-marquee-container.is-static {
    overflow: visible !important;       /* Supprime toute barre de défilement */
    width: 100% !important;
    display: block !important;
}

/* Force les logos à se distribuer sur plusieurs rangées de manière naturelle */
.sector-logos-marquee-container.is-static .marquee-track {
    animation: none !important;         /* Bloque le défilement */
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;         /* Autorise le passage à la ligne */
    
    /* MODIFICATION ICI : Aligne à gauche pour regrouper proprement les lignes incomplètes */
    justify-content: flex-start !important; 
    
    gap: 25px 32px !important;          /* Écart : 25px entre les lignes, 32px fixes entre les logos */
}

/* Configure le premier groupe de logos réels */
.sector-logos-marquee-container.is-static .marquee-group:first-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;         
    
    /* MODIFICATION ICI : Aligne également à gauche le sous-groupe principal */
    justify-content: flex-start !important; 
    
    width: 100% !important;
    gap: 25px 32px !important;
}

/* Désactive le groupe de logos dupliqués pour ne pas avoir de doublons en mode grille */
.sector-logos-marquee-container.is-static .marquee-group:last-child {
    display: none !important;
}

/* Stabilise et calibre chaque cellule de logo pour l'alignement vertical */
.sector-logos-marquee-container.is-static .logo-item {
    /* Garde une largeur proportionnelle pour obtenir environ 6 logos par ligne si l'espace le permet */
    flex: 0 0 calc(16.66% - 32px) !important; 
    min-width: 130px !important;              /* Sécurité anti-écrasement */
    height: 60px !important;                  /* Hauteur de ligne harmonisée */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.sector-logos-marquee-container.is-static .logo-item img {
    max-height: 42px !important;              /* Limite la hauteur pour garder l'alignement horizontal net */
    width: auto !important;
    object-fit: contain !important;
}

/* Adaptation responsive fluide pour smartphones */
@media (max-width: 768px) {
    .sector-logos-marquee-container.is-static .logo-item {
        flex: 0 0 calc(33.33% - 15px) !important; /* Passe à 3 logos par ligne sur mobile */
        min-width: 90px !important;
    }
}


/* =====================================================
   SURCHARGE DE DENSITÉ VISUELLE : ZOOM LOGOS CIRCULAIRES
===================================================== */

/* Cible l'image du logo pour forcer un agrandissement proportionnel */
.logo-item.logo-zoom-circle img,
img.logo-zoom-circle {
    /* Augmente la taille de l'élément de 25% pour compenser le vide des angles */
    transform: scale(1.3) !important;
    
    /* Assure que l'effet de survol global reste fluide sans saccade */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Combine le zoom de base avec votre effet de survol existant (Hover) */
.logo-item.logo-zoom-circle:hover img,
img.logo-zoom-circle:hover {
    /* Ajoute le léger relief de survol (+5%) au zoom initial (1.25 * 1.05) */
    transform: scale(1.31) !important;
}







/* ====================================================================
   CORRECTIF GLOBAL : SYNCHRONISATION DES VITESSES SUR LE MODÈLE CHEMICALS
==================================================================== */

/* 1. Chemicals (Votre ligne de référence : vitesse fluide et confortable) */
.sector-card:nth-of-type(2) .marquee-track,
#panel-chemicals .marquee-track {
    animation: oilGasLinearMarquee 50s linear infinite !important;
}

/* 2. Oil & Gas (Contient environ 4 fois plus de logos -> Temps augmenté à 180s) */
.sector-card:nth-of-type(1) .marquee-track,
#panel-oil-gas .marquee-track {
    animation: oilGasLinearMarquee 180s linear infinite !important;
}

/* 3. Primary & Metal (Base de logos moyenne-basse -> Ajusté à 85s) */
.sector-card:nth-of-type(3) .marquee-track,
#panel-primary-metal .marquee-track {
    animation: oilGasLinearMarquee 85s linear infinite !important;
}

/* 4. Energy (Ligne extrêmement longue avec énormément de logos -> Augmenté à 340s) */
.sector-card:nth-of-type(4) .marquee-track,
#panel-energy .marquee-track {
    animation: oilGasLinearMarquee 340s linear infinite !important;
}

/* 5. Water (Ligne très longue avec beaucoup de logos -> Augmenté à 190s) */
.sector-card:nth-of-type(5) .marquee-track,
#panel-water .marquee-track,
.sector-card:nth-of-type(5) .food-figures-carousel-track {
    animation: oilGasLinearMarquee 190s linear infinite !important;
}

/* 6. Life Science (Base de logos moyenne -> Ajusté à 95s) */
.sector-card:nth-of-type(6) .marquee-track,
#panel-life-science .marquee-track {
    animation: oilGasLinearMarquee 95s linear infinite !important;
}

/* 7. Infrastructure / Logistics (Peu de logos -> Ajusté à 45s) */
.sector-card:nth-of-type(7) .marquee-track,
#panel-infrastructure .marquee-track {
    animation: oilGasLinearMarquee 45s linear infinite !important;
}

/* SÉCURITÉ DE SURVOL : suspend la rotation proprement au passage de la souris */
.sector-logos-marquee-container:hover .marquee-track,
.food-figures-carousel-container:hover .food-figures-carousel-track {
    animation-play-state: paused !important;
}

/* ====================================================================
   SÉCURITÉ ANTI-SACCADE : COMPORTEMENT FLUIDE AU SURVOL
==================================================================== */
.sector-logos-marquee-container:hover .marquee-track {
    animation-play-state: paused !important;
}


/* ====================================================================
   CORRECTIF D'ESPACEMENT : PLUS D'ESPACE ENTRE LES LOGOS (AÉRATION)
==================================================================== */

/* Augmente l'espace sur le rail d'entraînement principal */
.food-figures-carousel-track,
.marquee-track {
    gap: 50px !important; /* Passe de 12px/20px à 50px pour bien séparer les logos */
}

/* Augmente l'espace sur les sous-groupes de logos */
.carousel-container .logos-track,
.marquee-group {
    gap: 50px !important; /* Aligné sur 50px pour garantir une aération uniforme */
}

/* Calibre les cellules pour éviter qu'elles ne se chevauchent avec le nouveau gap */
.marquee-group .logo-item,
.logo-item {
    margin: 0 10px !important; /* Ajoute une sécurité d'espace latérale à chaque cellule */
}

/* ====================================================================
   CORRECTIF DE COMPENSATION POUR LA TRAJECTOIRE DE L'ANIMATION COULISSANTE
==================================================================== */
@keyframes smoothLinearLoopScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        /* Intègre la compensation du nouveau gap de 50px pour un raccord invisible */
        transform: translate3d(calc(-50% - 25px), 0, 0); 
    }
}

@keyframes fishLinearLoopScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(calc(-50% - 25px), 0, 0);
    }
}

@keyframes oilGasLinearMarquee {
    0% { 
        transform: translate3d(0, 0, 0); 
    }
    100% { 
        transform: translate3d(calc(-50% - 25px), 0, 0); 
    }
}





















/* ====================================================================
   IAPS REFERENCE SHOWCASE PRESET SYSTEM (les referencces pour chaque page de projet)
   ==================================================================== */

/* Conteneur et Alignement Global */
.project-showcase-container {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
}

/* Bannière Hero Rendu Cinéma Compact */
.project-hero-banner {
    width: 100%;
    height: 55vh;
    min-height: 460px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    padding-bottom: 50px;
    box-sizing: border-box;
}

.hero-inner-content {
    width: min(1240px, 90%);
    margin: 0 auto;
}

.breadcrumb-nav {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.project-main-title {
    font-size: clamp(38px, 5vw, 56px);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 10px 0;
    letter-spacing: -2px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.project-meta-tags {
    font-size: 13px;
    font-weight: 700;
    color: #45b4f5; /* Bleu signature IAPS */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

/* Grille Editoriale en Deux Divisions */
.editorial-grid-layout {
    width: min(1240px, 90%);
    margin: 80px auto;
    display: grid;
    grid-template-columns: 2.1fr 0.9fr;
    gap: 70px;
    align-items: start;
    box-sizing: border-box;
}

/* Corps Éditorial (Gauche) */
.editorial-body-pane {
    display: flex;
    flex-direction: column;
    gap: 45px;
}

.editorial-section-block {
    width: 100%;
}

.editorial-section-heading {
    font-size: 22px;
    font-weight: 700;
    color: #061b2b;
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

.editorial-paragraph {
    font-size: 14.5px;
    line-height: 1.7;
    color: #6f7d85;
    text-align: justify !important;
    margin: 0;
}

/* Panneau d'Informations Latéral (Droite) */
.editorial-sidebar-pane {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-meta-block {
    border-top: 1px solid #eef2f5;
    padding-top: 12px;
}

.sidebar-meta-label {
    font-size: 10px;
    font-weight: 800;
    color: #84929a;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 4px 0;
}

.sidebar-meta-value {
    font-size: 15px;
    font-weight: 700;
    color: #061b2b;
    margin: 0;
}

/* Carte de Profil du Manager Contact */
.manager-profile-card {
    background-color: #061b2b; /* Fond sombre corporate */
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: 15px;
    box-shadow: 0 12px 35px rgba(6, 27, 43, 0.15);
}

.profile-avatar-wrapper {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-meta-details {
    display: flex;
    flex-direction: column;
}

.manager-name {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 3px 0;
}

.manager-title {
    font-size: 11px;
    color: #94a7b4;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.manager-contact-btn {
    align-self: flex-start;
    background-color: #087bc1;
    color: #ffffff;
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background-color 0.2s, transform 0.2s;
}

.manager-contact-btn:hover {
    background-color: #006099;
    transform: translateY(-1px);
}

/* Grille de Galerie de Photos Référentielles */
.portfolio-gallery-row {
    width: min(1240px, 90%);
    margin: 0 auto 100px auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
}

.gallery-photo-item {
    width: 100%;
    height: 380px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(6, 27, 43, 0.04);
}

.gallery-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-photo-item:hover img {
    transform: scale(1.025);
}

/* Responsive Adaptation (Tablette & Smartphone) */
@media (max-width: 992px) {
    .editorial-grid-layout {
        grid-template-columns: 1fr;
        gap: 40px;
        margin: 50px auto;
    }
    .portfolio-gallery-row {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-bottom: 60px;
    }
    .gallery-photo-item {
        height: 260px;
    }
}


/* ====================================================================
   UNIFORM EDITORIAL LIST STYLES (ALIGNEMENT CHIRURGICAL)
   ==================================================================== */

/* Conteneur principal de la liste */
.editorial-body-pane .details-list {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espacement vertical uniforme entre les lignes */
}

/* Alignement strict des puces textuelles */
.editorial-body-pane .details-list li.editorial-paragraph {
    position: relative !important;
    padding-left: 22px !important; /* Espace nécessaire pour ancrer la flèche */
    margin-bottom: 0 !important;   /* Géré par le gap du conteneur parent */
}

/* Flèche d'ingénierie bleue intégrée de manière homogène */
.editorial-body-pane .details-list li.editorial-paragraph::before {
    content: "→" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #087bc1 !important; /* Bleu corporate signature */
    font-weight: 700 !important;
    display: inline-block;
}







/* ====================================================================
   CORRECTIF TYPOGRAPHIQUE : AFFINAGE DES TEXTES ET ÉPAISSEURS (V2026)
   ==================================================================== */

/* Bloc de base de la carte */
.project-card.backend-dark-theme {
    background-color: #343a40 !important;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: none !important;
}

.project-card.backend-dark-theme .project-card-body {
    padding: 25px 24px;
    box-sizing: border-box;
}

/* 1. Date et Localisation (Affinée à 600) */
.project-card.backend-dark-theme .project-timeline-location {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    font-weight: 600 !important; /* Réduit l'épaisseur pour enlever le gros "Gras" */
    color: #0091ff !important;
    margin: 0 0 12px 0;
    letter-spacing: 0.3px;
}

/* Bloc de titre isolant */
.project-card-body .title-inline-wrapper {
    width: 100%;
    display: block;
    margin-bottom: 24px;
}


/* 2. Titre Principal CINER GLASS (Ajustement de l'espace inférieur) */
.project-card.backend-dark-theme .project-card-title.underline-effect {
    display: inline-block !important;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0;
    padding-bottom: 6px; /* Espace entre le texte et la ligne blanche */
    border-bottom: 2px solid #ffffff !important;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    
    /* INTERVENTION CRITIQUE : Pousse les boutons vers le bas pour créer l'écart de la capture */
    margin-bottom: 28px !important; 
}


/* 4. Résolution de l'alignement : Centralisation parfaite des capsules */
.project-card.backend-dark-theme .project-capsules-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    
    /* INTERVENTION CRITIQUE : Aligne et centre les boutons au milieu horizontal de la carte */
    justify-content: center !important; 
    
    gap: 10px !important;
    width: 100%;
    margin-top: 5px;
}


/* 3. Textes des Capsules (Affinés à 500 - Medium pour une netteté absolue) */
.project-card.backend-dark-theme .badge-tag {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500 !important; /* Écriture semi-fine ultra-professionnelle */
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    padding: 6px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: inline-block;
    white-space: nowrap;
}

/* Adaptation responsive mobile */
@media (max-width: 600px) {
    .project-card.backend-dark-theme .project-capsules-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}























/* ====================================================================
   CORRECTIF SÉCURISÉ MODALE LIGHTBOX INTÉGRÉE (FOND SOMBRE)
   ==================================================================== */
/* ====================================================================
   MOTEUR D'AFFICHAGE INTÉGRÉ ANTI-BLOCAGE SYSTÈME (V2026)
   ==================================================================== */

.global-lightbox-forced-overlay {
    display: none !important; /* Géré uniquement par l'écouteur JS */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(4, 22, 33, 0.95) !important; /* Fond sombre opaque corporate */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 2147483647 !important; /* Valeur maximale théorique : passe devant ABSOLUMENT TOUT */
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.global-lightbox-forced-box {
    position: relative !important;
    max-width: 85% !important;
    max-height: 85% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.global-lightbox-forced-img-frame {
    line-height: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7) !important;
}

#forcedLightboxTargetImage {
    max-width: 100% !important;
    max-height: 80vh !important; /* Sécurité anti-débordement vertical */
    object-fit: contain !important;
    display: block !important;
}

/* Bouton Croix de fermeture uniforme (Cercle gris ardoise, symbole blanc) */
.global-lightbox-forced-close {
    position: absolute !important;
    top: -22px !important;
    right: -22px !important;
    width: 40px !important;
    height: 40px !important;
    background: #7a8b99 !important; /* Teinte grise ardoise IAPS */
    border: none !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    font-size: 26px !important;
    line-height: 36px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    padding-bottom: 4px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    z-index: 2147483647 !important;
    transition: background-color 0.2s, transform 0.2s !important;
}

.global-lightbox-forced-close:hover {
    background-color: #087bc1 !important; /* Devient bleu IAPS au survol */
    transform: scale(1.08) !important;
}

@media (max-width: 768px) {
    .global-lightbox-forced-close {
        top: 15px !important;
        right: 15px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 20px !important;
        padding-bottom: 2px !important;
    }
}
.text-white-custom {
    color: #ffffff !important;
}





/* Suppression de la croix de fermeture exclusivement dans la page project.html */
.project-card .stream-modal-close,
.project-card-body .stream-modal-close,
.global-lightbox-forced-overlay .global-lightbox-forced-close {
    display: none !important;
}





/* Force les cartes de projets à s'aligner à gauche les unes après les autres */
.projects-grid {
    justify-content: flex-start !important; /* Remplace le space-between parasite */
    justify-items: start !important;       /* Aligne le contenu au début de chaque cellule */
}

/* Optionnel : Ajuste l'espacement entre les cartes pour combler proprement la ligne */
.projects-grid .project-card,
.projects-grid .project {
    max-width: 380px !important; /* Conserve la largeur fixe d'origine de vos cartes */
    width: 100% !important;
}





.clickable-project {
    cursor: pointer !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease !important;
}

.clickable-project:hover {
    transform: scale(1.02) !important;       /* Léger zoom de relief de 2% */
    filter: brightness(0.95) !important;     /* Assombrit très subtilement l'image */
}

















/* menu reponsive MOBILE*/

/* ====================================================================
   CORRECTIF GÉNÉRAL RESPONSIVE POUR LA PAGE INDEX (2026)
   ==================================================================== */

/* --- 1. SÉCURITÉ GLOBALE ANTI-DÉBORDEMENT --- */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.container {
    width: min(1240px, 92%);
    margin: auto;
}

/* --- 2. HEADER & NAVIGATION --- */
@media (max-width: 1150px) {
    #header, .header {
        height: 80px !important;
    }
    .header-inner {
        width: 90% !important;
        height: 100% !important;
    }
    .desktop-nav, .header-contact {
        display: none !important;
    }
    .mobile-button {
        display: block !important;
    }
    .logo-brand-img {
        height: 50px !important;
    }
}

/* --- 3. BANNIÈRE HERO --- */
@media (max-width: 800px) {
    .hero {
        height: auto;
        min-height: 100vh;
        padding: 120px 0 60px 0;
        display: flex;
        align-items: center;
    }
    .hero h1 {
        font-size: clamp(36px, 6vw, 55px);
        letter-spacing: -2px;
        line-height: 1.1;
    }
    .hero p {
        font-size: 14px;
        margin: 20px 0;
    }
    .hero-bottom {
        display: none !important; /* Masque les 5 blocs du bas sur mobile */
    }
}

@media (max-width: 550px) {
    .hero-buttons {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    .btn-primary, .btn-outline {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* --- 4. LIFECYCLE SECTORIEL (5 PAVÉS DE COULEUR) --- */
@media (max-width: 1024px) {
    .cycle-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important; /* Active le défilement tactile horizontal */
        -webkit-overflow-scrolling: touch;
        gap: 15px;
        padding-bottom: 15px;
    }
    .cycle-card {
        flex: 0 0 280px !important; /* Verrouille une taille fixe pour les cartes en ligne */
        height: 300px !important;
    }
}

/* --- 5. GRILLE DES SERVICES & INDUSTRIES --- */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .industry-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }
}

@media (max-width: 550px) {
    .services-grid {
        grid-template-columns: 1fr !important;
    }
    .services-grid article {
        min-height: auto;
        padding: 30px 20px;
    }
    .industry-cards {
        grid-template-columns: 1fr !important;
    }
    .industry-image {
        height: 200px;
    }
}

/* --- 6. INTERFACE SECTORIELLE (ROUE DONUT & LISTE) --- */
@media (max-width: 992px) {
    .sectoriel-wrapper {
        grid-template-columns: 1fr !important; /* Aligne la roue au-dessus du texte */
        justify-items: center !important;
        gap: 40px !important;
    }
    .donut-chart {
        width: 300px !important;
        height: 300px !important;
    }
    .lists-panel {
        width: 100% !important;
    }
    .panel-tabs {
        justify-content: center !important;
    }
}

@media (max-width: 550px) {
    .donut-chart {
        width: 260px !important;
        height: 260px !important;
    }
    .donut-wheel-text textPath {
        font-size: 16px !important; /* Réduit le texte courbé sur petit smartphone */
    }
    .list-item {
        gap: 12px !important;
        padding: 10px 15px !important;
    }
}

/* --- 7. SECTION PROJETS (PAGINATION / FILTRES) --- */
@media (max-width: 900px) {
    .projects-grid {
        grid-template-columns: 1fr !important; /* Une seule colonne verticale */
        gap: 20px;
    }
    .project-large {
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .project-large .project-image, .project-image {
        height: 220px !important;
    }
    form.filter-bar {
        grid-template-columns: 1fr !important; /* Filtres empilés */
        gap: 20px !important;
    }
    form.filter-bar .filter-actions {
        width: 100% !important;
        justify-content: stretch;
    }
    form.filter-bar .btn-filter, 
    form.filter-bar .btn-reset {
        flex: 1 !important;
        text-align: center !important;
    }
}

/* --- 8. BLOC OIL & GAS (TIMELINE DÉROULANTE) --- */
@media (max-width: 992px) {
    .oil-gas-v2026-layout {
        grid-template-columns: 1fr !important; /* Image/Showcase au-dessus de la ligne du temps */
        gap: 40px;
    }
    .oil-gas-brand-editorial, .oil-gas-editorial-showcase {
        width: 100%;
        height: 300px !important;
    }
}

/* --- 9. CARROUSEL DES LOGOS & FOOTER --- */
@media (max-width: 800px) {
    .stats-grid, .footer-main {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px;
    }
    .stats-grid div {
        border-right: none !important;
        padding: 40px 20px;
    }
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }
}

@media (max-width: 550px) {
    .stats-grid, .footer-main {
        grid-template-columns: 1fr !important;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}











/* ====================================================================
   CORRECTIF ALIGNEMENT STRICT : ACCORDÉONS MENU MOBILE (FIXED V6)
==================================================================== */

@media (max-width: 1150px) {

    /* 1. Configuration de la ligne flexible principale */
    .mobile-sub .mobile-dropdown {
        display: flex !important;
        flex-direction: row !important; /* Force l'alignement côte à côte */
        flex-wrap: nowrap !important;
        align-items: flex-start !important; /* Aligne le haut des textes */
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 24px 0 !important; /* Espace vertical constant entre les lignes */
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-sizing: border-box !important;
    }

    /* 2. GAUCHE : Verrouillage et écrasement des propriétés natives du bouton */
    .mobile-sub .mobile-dropdown > button {
        flex: 0 0 280px !important; /* ◄ SÉCURITÉ ABSOLUE : Bloque la largeur à 280px */
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        
        /* Neutralisation du comportement natif de bouton */
        display: block !important; 
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important; /* Aligne le texte rigoureusement à gauche */
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    /* Forçage typographique du texte/lien à gauche (Titre principal de la ligne) */
    .mobile-sub .mobile-dropdown > button a {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
        font-family: "Inter", sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
    }

    /* Supprime définitivement la puce ou l'icône "+" qui pousse le texte */
    .mobile-sub .mobile-dropdown > button span {
        display: none !important;
        opacity: 0 !important;
    }

    /* 3. DROITE : Alignement magnétique absolu de la liste de liens */
    .mobile-sub .mobile-dropdown .mobile-sub {
        flex: 1 !important; /* Occupe tout l'espace disponible à droite */
        display: flex !important;
        flex-direction: column !important; /* Aligne les liens du haut vers le bas */
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 14px !important; /* Espacement vertical mathématique entre les sous-liens */
        
        /* ANCRAGE VERTICAL : Démarrage rectiligne exact à 40px après le bloc de gauche */
        padding: 0 0 0 40px !important; 
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    /* Formatage individuel de chaque sous-lien de droite */
    .mobile-sub .mobile-dropdown .mobile-sub a {
        display: block !important;
        width: auto !important;
        text-align: left !important;
        padding: 2px 0 !important;
        margin: 0 !important;
        font-family: "Inter", sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #94a7b4 !important; /* Teinte gris-bleu harmonisée */
        white-space: nowrap !important; /* Empêche le texte de se recroqueviller */
        border: none !important;
    }
}






/* ====================================================================
   MODULE NEWS 2026 — DESIGN COMPACT ALTERNÉ (ANTI-CONFLIT TEXTE LONG)
==================================================================== */
.news-section-modern {
    padding: 120px 0;
    background-color: #ffffff;
    width: 100%;
}

.news-timeline-stream {
    display: flex !important;
    flex-direction: column !important;
    gap: 60px !important; /* Espacement fixe et élégant entre chaque actualité */
    width: 100%;
}

/* Structure globale d'une ligne d'actualité */
.news-stream-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important; /* Force l'image et la zone éditoriale à s'étirer sur la même hauteur */
    gap: 50px !important;
    width: 100%;
    box-sizing: border-box;
}

/* Inversion automatique un jalon sur deux pour créer l'effet d'alternance */
.news-timeline-stream .news-stream-row:nth-child(even) {
    flex-direction: row-reverse !important;
}

/* Zone visuelle de l'image (Format Cadre Cinéma 40% de la ligne) */
.news-stream-visual {
    flex: 0 0 40% !important;
    width: 40% !important;
    height: auto !important; /* S'adapte à la hauteur requise par la cellule de texte à côté */
    min-height: 250px !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(6, 27, 43, 0.04);
    background-color: #061b2b;
}

.news-stream-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Remplissage plein écran sans déformer l'infographie */
    display: block !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.news-stream-row:hover .news-stream-visual img {
    transform: scale(1.03) !important; /* Effet de micro-zoom au survol de la ligne */
}

/* Zone Éditoriale du texte (60% restants de la ligne) */
.news-stream-editorial {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centre verticalement le texte court s'il y a lieu */
    padding: 10px 0;
    border-left: 4px solid #087bc1; /* Trait vertical bleu IAPS par défaut */
    padding-left: 25px !important;
}

/* Inversion du trait vertical pour les lignes paires */
.news-timeline-stream .news-stream-row:nth-child(even) .news-stream-editorial {
    border-left: none !important;
    border-right: 4px solid #087bc1 !important;
    padding-left: 0 !important;
    padding-right: 25px !important;
    text-align: right;
}

/* Typographie fine de la date */
.news-stream-date {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #087bc1;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

/* Formatage strict et justification de bord à bord du contenu textuel */
.news-stream-text {
    font-family: "Inter", sans-serif;
    font-size: 14.5px;
    line-height: 1.65;
    color: #72818b; /* Gris muted historique de votre site */
    text-align: justify !important;
}

.news-stream-text p {
    margin: 0 0 12px 0 !important;
}

.news-stream-text p:last-child {
    margin-bottom: 0 !important;
}

/* Modification de la charte de couleurs pour Octobre Rose */
.news-stream-row.pink-cause-stream .news-stream-editorial {
    border-left-color: #e02b77 !important;
}
.news-timeline-stream .news-stream-row.pink-cause-stream:nth-child(even) .news-stream-editorial {
    border-right-color: #e02b77 !important;
}
.news-stream-row.pink-cause-stream .news-stream-date {
    color: #e02b77 !important;
}

/* ====================================================================
   RESPONSIVE DESIGN SYSTEM (EMPILAGE PROPRE SUR MOBILE & TABLETTE)
==================================================================== */
@media (max-width: 992px) {
    .news-stream-row,
    .news-timeline-stream .news-stream-row:nth-child(even) {
        flex-direction: column !important; /* Brise la ligne pour empiler les éléments en colonne */
        gap: 20px !important;
    }

    .news-stream-visual {
        width: 100% !important;
        flex: 0 0 240px !important; /* Donne une hauteur fixe stable à l'image sur mobile */
        height: 240px !important;
    }

    .news-stream-editorial,
    .news-timeline-stream .news-stream-row:nth-child(even) .news-stream-editorial {
        width: 100% !important;
        border-right: none !important;
        border-left: 4px solid #087bc1 !important; /* Réaligne tous les traits à gauche sur mobile */
        padding-left: 15px !important;
        padding-right: 0 !important;
        text-align: left !important;
    }
    
    .news-stream-row.pink-cause-stream .news-stream-editorial {
        border-left-color: #e02b77 !important;
    }
}
.mobile-dropdown button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.mobile-dropdown button a {
    flex-grow: 1;
    pointer-events: none; /* Laisse le bouton intercepter le clic pour déployer l'accordéon */
}














/* Force les sous-liens à adopter exactement le même style que "WHO WE ARE" */
.mobile-sub .mega-menu-link {
    color: #ffffff !important; /* Blanc pur identique au titre */
    font-family: "Inter", sans-serif !important;
    font-size: 15px !important; /* Taille identique à l'intitulé principal */
    font-weight: 700 !important; /* Épaisseur de police très grasse (Bold) */
    
    letter-spacing: normal !important;
    text-decoration: none !important;
    display: block !important;
    padding: 14px 0 !important; /* Espacement vertical aéré et identique */
    margin: 0 !important;
    text-align: left !important; /* Alignement rectiligne parfait à gauche */
    transition: color 0.25s ease !important;
}

/* Optionnel : Changement de couleur au survol ou au clic actif */
.mobile-sub .mega-menu-link:hover {
    color: #ffffff !important; /* Passe au bleu de votre marque au survol */
}



























/* =====================================================
   CORRECTIF SÉCURISÉ D'ADAPTATION MOBILE PREMIUM PARTNERS
===================================================== */
@media (max-width: 1150px) {
    /* Force la section à se positionner sous le flux du header mobile */
    .premium-partners-section {
        position: relative !important;
        z-index: 1 !important; /* Reste en bas pour laisser le menu mobile (z-index 999) passer au-dessus */
    }

    /* Brise l'alignement horizontal strict pour éviter que les logos ne sortent de l'écran */
    .premium-partners-section .sector-card,
    .premium-partners-section .sector-card.is-filtered-grid {
        flex-direction: column !important;
        align-items: flex-start !important;
        height: auto !important;
        min-height: auto !important;
        padding: 20px 15px !important;
        gap: 15px !important;
    }

    /* La zone de titre du secteur prend toute la largeur */
    .premium-partners-section .sector-info {
        width: 100% !important;
        min-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
        padding-right: 0 !important;
        padding-bottom: 12px !important;
    }

    /* Permet le défilement horizontal fluide au doigt pour les logos sur smartphone */
    .premium-partners-section .sector-logos-marquee-container {
        width: 100% !important;
        padding-left: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Aligne les logos sur une ligne horizontale coulissante sur mobile */
    .premium-partners-section .marquee-track,
    .premium-partners-section .is-static .marquee-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 30px !important;
    }

    .premium-partners-section .marquee-group,
    .premium-partners-section .is-static .marquee-group:first-child {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 30px !important;
    }

    .premium-partners-section .logo-item {
        flex: 0 0 auto !important;
        min-width: 100px !important;
    }
}