/* SECTION */
.vision-section{
background:#f7f7f7;
padding:40px 0;
}

/* TITRE */
.vision-title{
font-size:30px;
color:#5aa6d1;
margin-bottom:10px;
font-weight:600;
}

/* INTRO */
.vision-intro{
color:#666;
font-size:15px;
margin-bottom:40px;
}

/* LETTRES ERIE */
.vision-left{
text-align:center;
}

.vision-letters span{
display:block;
font-size:120px;
font-weight:900;
color:#d56a1f;
line-height:120px;
font-family:Arial;
}

/* BLOC TEXTE */
.vision-item{
margin-bottom:35px;
}

/* TITRE BLOC */
.vision-item h4{
font-size:18px;
font-weight:bold;
border-bottom:2px solid #d6b0a3;
padding-bottom:6px;
margin-bottom:10px;
}

/* TEXTE */
.vision-item p{
font-size:15px;
color:#555;
line-height:1.8;
text-align:justify;
}

/* RESPONSIVE */
@media (max-width:768px){

.vision-left{
margin-bottom:30px;
}

.vision-letters span{
display:inline-block;
font-size:60px;
margin-right:10px;
}

}

/* zone ERIE transparente */

.vision-container{
background: transparent !important;
}

.vision-section{
background: transparent !important;
}

.vision-letters{
background: transparent !important;
}

.vision-item{
background: transparent !important;
}

/* supprimer les fonds gris du template */

.article-info{
background: transparent !important;
box-shadow: none !important;
border: none !important;
}




/* ============================================================================== */
/* 1. SYSTÈME DE SUPERPOSITION DU CARROUSEL MAÎTRE (ANTI-CHEVAUCHEMENT)           */
/* ============================================================================== */

/* Conteneur principal fixe du diaporama */
/* ============================================================================== */
/* CARROUSEL METROLOGIQUE SYSTEM — HAUTEUR AUGMENTÉE À 650PX                      */
/* ============================================================================== */

.main-slider-w {
    position: relative;
    width: 100%;
    height: 650px;       /* 🟢 Augmentation de la hauteur globale */
    min-height: 650px;   /* 🟢 Sécurité de hauteur minimale */
    background: #0b0f19;
    overflow: hidden;
}

.main-slider-w .slideshow-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 650px;   /* 🟢 Alignement de la hauteur interne des slides */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    display: flex !important;
    align-items: center;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
    z-index: 1;
}


/* Activation exclusive du slide possédant la classe active */
.main-slider-w .slideshow-item.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2;
}

/* Voile d'ombrage linéaire pour maximiser le contraste des textes blancs */
.slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(11, 24, 44, 0.85) 0%, rgba(11, 24, 44, 0.4) 100%);
    z-index: 1;
}

/* Conteneur interne calé sur l'alignement de la bande bleue (1400px) */
.custom-slider-container {
    position: relative;
    z-index: 3;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
}

/* Typographies du diaporama */
.slider-title {
    color: #ffffff !important;
    font-size: 44px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    margin: 0 0 15px 0 !important;
    line-height: 1.15 !important;
    font-family: 'Roboto', sans-serif;
}
.highlight-orange { color: #dd6b20; }
.highlight-blue { color: #38bdf8; }
.highlight-green { color: #48bb78; }

.slider-text {
    color: #e2e8f0 !important;
    font-size: 16px !important;
    margin: 0 0 35px 0 !important;
    line-height: 1.6 !important;
    max-width: 580px !important;
    font-family: 'Roboto', sans-serif;
}

/* Design des boutons du diaporama */
.btn-slider-primary {
    background: #dd6b20;
    border: none;
    color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
    padding: 13px 28px;
    border-radius: 4px;
    font-size: 13px;
    margin-right: 15px;
    display: inline-block;
    text-decoration: none !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}
.btn-slider-secondary {
    background: transparent;
    border: 2px solid #ffffff;
    color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
    padding: 11px 28px;
    border-radius: 4px;
    font-size: 13px;
    display: inline-block;
    text-decoration: none !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

/* ============================================================================== */
/* 2. ANIMATIONS ET RELIEF VISUEL DES 8 QUADRANTS DE SOLUTIONS                  */
/* ============================================================================== */

/* État initial stable de la carte blanche */
.div-card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    will-change: transform, box-shadow;
}

/* Souplesse de transition pour l'icône de pesée */
.div-card i {
    transition: color 0.25s ease-in-out !important;
}

/* Survol de la carte : Élévation fluide et liseré orange corporate */
.div-card:hover {
    transform: translateY(-6px) !important;
    border-color: #dd6b20 !important;
    box-shadow: 0 12px 20px -5px rgba(26, 54, 93, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.div-card:hover i {
    color: #dd6b20 !important;
}

/* Glissement de la flèche "Explorer" vers la droite au survol */
.div-card .fa-arrow-circle-right {
    transition: transform 0.2s ease-in-out !important;
}
.div-card:hover .fa-arrow-circle-right {
    transform: translateX(4px) !important;
    color: #dd6b20 !important;
}


/* ============================================================================== */
/* ANIMATION KEN BURNS EFFECT (L'EFFET MOUVEMENT VIDÉO DE METTLER TOLEDO)         */
/* ============================================================================== */

.lab-mettler-slide {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* Configuration de l'arrière-plan animé en arrière-plan des textes */
.ken-burns-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
    /* Déclenche l'animation de zoom lent sur 20 secondes en boucle */
    animation: mettlerVideoZoomEffect 20s infinite alternate ease-in-out;
    will-change: transform;
}

/* L'ALGORITHME DE DEPLACEMENT ET DE ZOOM PROGRESSIF FLUIDE */
@keyframes mettlerVideoZoomEffect {
    0% {
        transform: scale(1) translate(0, 0);
    }
    100% {
        transform: scale(1.12) translate(-1%, -1%); /* S'agrandit doucement de 12% */
    }
}


/* ============================================================================== */
/* DESIGN DES BOUTONS DE DÉFILEMENT (FLÈCHES & PUCES) — PIC PESAGE ET MESURES    */
/* ============================================================================== */

/* 1. Style universel pour les flèches Gauche et Droite */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 44, 89, 0.4); /* Bleu translucide discret */
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.4);
    font-size: 20px;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 1000;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

/* Changement de couleur au survol de la souris */
.slider-arrow:hover {
    background: #dd6b20; /* Orange PIC actif */
    border-color: #dd6b20;
    transform: translateY(-50%) scale(1.05);
}

/* Positionnement strict à gauche et à droite de l'écran */
.arrow-left { left: 30px; }
.arrow-right { right: 30px; }

/* 2. Style pour le conteneur des puces inférieures (Dots) */
.slider-dots-container {
    position: absolute;
    bottom: 95px; /* Aligné juste au-dessus du chevauchement de la bande bleue */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    gap: 10px;
}

/* Style de chaque puce individuelle */
.slider-dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Style de la puce représentant le slide actif à l'écran */
.slider-dot.active, .slider-dot:hover {
    background: #ffffff;
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}


/* Zoom fluide sur l'image au survol de la carte */
.div-card:hover .div-card-img-wrapper img {
    transform: scale(1.08);
}


.product-feature-card:hover {
    transform: translateY(-5px);
    border-color: #dd6b20 !important;
    box-shadow: 0 12px 20px -5px rgba(15, 44, 89, 0.1) !important;
}


/* Animation fine et sobre pour les engagements techniques */
.service-tech-card {
    will-change: transform, border-color, box-shadow;
}
.service-tech-card:hover {
    transform: translateY(-4px);
    border-color: #dd6b20 !important;
    box-shadow: 0 10px 20px -5px rgba(15, 44, 89, 0.06) !important;
}


/* ============================================================================== */
/* LE MOTEUR CINÉTIQUE MARQUEE — DEFILEMENT INFINI DES LOGOS                      */
/* ============================================================================== */

/* Zone de masquage de la largeur de l'écran */
.marquee-wrapper-sup {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 15px 0;
    display: flex;
}

/* Le rail roulant qui contient les 48 cartes alignées */
.marquee-track-sup {
    display: flex;
    width: max-content;
    gap: 30px;
    /* Lance le glissement en continu (Durée de 45 secondes pour un défilement doux) */
    animation: picInfiniteScrollMarquee 45s linear infinite;
}

/* Design unifié de chaque cellule de logo dans le ruban */
.logo-marquee-item {
    width: 150px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px;
    background: #ffffff;
    flex-shrink: 0; /* Empêche l'écrasement des logos */
    transition: all 0.25s ease-in-out;
}

.logo-marquee-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.55;
    transition: all 0.25s ease-in-out;
}

/* Interaction : Le ruban s'arrête doucement si le jury pose sa souris sur un logo */
.marquee-wrapper-sup:hover .marquee-track-sup {
    animation-play-state: paused;
}

/* Modification pour afficher les logos en pleine lumière et en couleur par défaut */
.logo-marquee-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(0%) !important; /* 🟢 Désactive le filtre gris (Vraies couleurs) */
    opacity: 1 !important;            /* 🟢 Luminosité maximale par défaut */
    transition: all 0.25s ease-in-out;
}


/* L'ALGORITHME DE ROTATION INFINIE DE MOITIÉ DE DISTANCE */
@keyframes picInfiniteScrollMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Décale exactement de la longueur de la première série */
    }
}


/* Interactions esthétiques du pied de page */
.footer-link, .footer-legal-links a, .footer-socials a {
    transition: color 0.2s ease-in-out !important;
}
.footer-link:hover, .footer-legal-links a:hover, .footer-socials a:hover {
    color: #dd6b20 !important; /* Passe au orange d'usine au survol */
}


/* Effet de focus sur le formulaire de devis */
.contact-form-section input:focus, .contact-form-section textarea:focus, .contact-form-section select:focus {
    border-color: #dd6b20 !important;
    box-shadow: 0 0 0 3px rgba(221, 107, 32, 0.15);
}



/* ============================================================================== */
/* ANIMATIONS ET LIENS VISUELS DU BLOC ÉQUIPEMENTS PHARES — PIC PESAGE            */
/* ============================================================================== */

/* Optimisation de la carte d'équipement vedette (État stable) */
.product-feature-card {
    will-change: transform, border-color, box-shadow;
}

/* Survol de la carte : Élévation et liseré orange ambré */
.product-feature-card:hover {
    transform: translateY(-6px) !important;
    border-color: #dd6b20 !important; /* Liseré orange PIC actif */
    box-shadow: 0 15px 30px -10px rgba(15, 44, 89, 0.12) !important;
}

/* Changement de couleur dynamique du bouton d'action interne au survol */
.product-feature-card:hover a {
    background: #dd6b20 !important; /* Le bouton passe du bleu nuit à l'orange PIC */
    box-shadow: 0 4px 12px rgba(221, 107, 32, 0.2) !important;
}


/* ============================================================================== */
/* EFFETS VISUELS POUR LES 3 ÉQUIPEMENTS PHARES RÉELS — PIC PESAGE                */
/* ============================================================================== */

/* Configuration de la carte vedette en état stable */
.product-feature-card {
    will-change: transform, border-color, box-shadow;
}

/* Élévation fluide et activation du liseré orange PIC au survol de la carte */
.product-feature-card:hover {
    transform: translateY(-6px) !important;
    border-color: #dd6b20 !important; /* Liseré orange PIC officiel */
    box-shadow: 0 15px 30px -10px rgba(15, 44, 89, 0.12) !important;
}

/* Réaction du bouton interne : il passe instantanément du bleu nuit à l'orange ambré */
.product-feature-card:hover a {
    background: #dd6b20 !important;
    box-shadow: 0 4px 12px rgba(221, 107, 32, 0.2) !important;
}


/* État stable et transition fluide du rail de produits */
.product-carousel-window {
    position: relative;
    width: 100%;
}
.carousel-product-card {
    will-change: transform, border-color, box-shadow;
}
/* Effet de survol sur chaque équipement phare */
.carousel-product-card:hover {
    transform: translateY(-5px) !important;
    border-color: #dd6b20 !important;
    box-shadow: 0 12px 24px rgba(15, 44, 89, 0.08) !important;
}
.carousel-product-card:hover a {
    background: #dd6b20 !important;
}


/* ============================================================================== */
/* EFFETS PREMIUM POUR LES 4 ÉQUIPEMENTS PHARES DYNAMIQUES — PIC PESAGE           */
/* ============================================================================== */

/* Stabilisation matérielle de la carte */
.product-feature-card {
    will-change: transform, border-color, box-shadow;
}

/* Au survol de la carte : élévation douce et activation du liseré orange PIC */
.product-feature-card:hover {
    transform: translateY(-6px) !important;
    border-color: #dd6b20 !important; /* Liseré orange corporate */
    box-shadow: 0 15px 30px -10px rgba(15, 44, 89, 0.12) !important;
}

/* Réaction cinétique du bouton interne : il passe instantanément à l'orange */
.product-feature-card:hover a {
    background: #dd6b20 !important;
    box-shadow: 0 4px 12px rgba(221, 107, 32, 0.2) !important;
}




/* ============================================================================== */
/* ANIMATIONS ET ILLUMINATION DES 4 CARTES D'ENGAGEMENTS — PIC PESAGE            */
/* ============================================================================== */

/* Stabilisation matérielle de la carte sombre */
.engagement-card-pic {
    will-change: transform, border-color, background-color, box-shadow;
}

/* Effet au survol : élévation, liseré orange PIC et fond légèrement plus clair */
.engagement-card-pic:hover {
    transform: translateY(-5px) !important;
    border-color: #dd6b20 !important; /* Liseré orange corporate actif */
    background-color: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Réaction de l'icône interne au survol de sa carte parente */
.engagement-card-pic:hover div:first-child {
    background-color: #dd6b20 !important; /* Force toutes les icônes à passer à l'orange */
    box-shadow: 0 0 12px rgba(221, 107, 32, 0.4) !important;
    transform: scale(1.05);
    transition: all 0.3s ease;
}


/* ============================================================================== */
/* BALISAGE ET STRUCTURE GÉOMÉTRIQUE DU MENU HORIZONTAL — PIC PESAGE              */
/* ============================================================================== */

/* Force les textes des onglets principaux en gras, majuscules et couleur uniforme */
.megamenu > li > a strong {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #0f2c59 !important; /* Bleu nuit d'autorité de base */
    transition: color 0.2s ease-in-out;
}

/* Comportement au survol des textes principaux */
.megamenu > li:hover > a strong,
.megamenu > li.hover > a strong {
    color: #dd6b20 !important; /* Passage à l'orange PIC intense au survol */
}

/* Ajustement des cadres des images des 8 quadrants produits */
.megamenu .sub-menu div[style*="height: 120px"] {
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Effet de surbrillance sur le cadre du produit au survol */
.megamenu .sub-menu .col-md-3 a:hover div[style*="height: 120px"] {
    border-color: #dd6b20 !important;
    box-shadow: 0 4px 12px rgba(221, 107, 32, 0.12) !important;
}

/* Changement de couleur du titre du produit sous l'image au survol */
.megamenu .sub-menu .col-md-3 a:hover h5 {
    color: #dd6b20 !important;
}


/* Coloration des 3 sous-menus de Services au survol */
.corporate-services-links li a:hover {
    color: #dd6b20 !important;
    background-color: rgba(221, 107, 32, 0.04) !important;
    padding-left: 10px !important;
    font-weight: bold;
}

/* Coloration des 9 titres de Produits au survol */
.megamenu .sub-menu .image-link:hover h4,
.megamenu .sub-menu .image-link:hover h3 {
    color: #dd6b20 !important;
    transition: color 0.2s ease-in-out;
}

/* Bordure orange sur la miniature de l'image du produit au survol */
.megamenu .sub-menu .image-link:hover .thumbnail {
    border-color: #dd6b20 !important;
    box-shadow: 0 4px 8px rgba(221, 107, 32, 0.15) !important;
    transition: all 0.2s ease-in-out;
}



/* ============================================================================== */
/* 💎 ARCHITECTURE ET FINITIONS GRAPHIQUES V4 — FICHES TECHNIQUES SERVICES        */
/* ============================================================================== */

/* Grille CSS moderne à double colonne pour lister les matériels proprement */
.pic-v4-grid-stack {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 40px;
}

.pic-v4-grid-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pic-v4-item-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pic-v4-item-icon {
    width: 36px;
    height: 36px;
    background: #f8fafc;
    color: #0f2c59; /* Bleu nuit corporatif de base */
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
}

.pic-v4-item-label {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f2c59;
    margin: 0;
}

.pic-v4-item-badge {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* 🟢 EFFETS DE SURVOL MAGNIFIQUES : EFFET AIMANT ET PASSAGE À L'ORANGE PIC D'UN SEUL COUP */
.pic-v4-grid-stack .pic-v4-grid-item:hover {
    border-color: #dd6b20 !important;
    transform: translate3d(4px, 0, 0);
    box-shadow: 0 4px 15px rgba(221, 107, 28, 0.08) !important;
}

.pic-v4-grid-stack .pic-v4-grid-item:hover .pic-v4-item-icon {
    background: #dd6b20 !important;
    color: #ffffff !important;
    border-color: #dd6b20 !important;
}

.pic-v4-grid-stack .pic-v4-grid-item:hover .pic-v4-item-label {
    color: #dd6b20 !important;
}

.pic-v4-grid-stack .pic-v4-grid-item:hover .pic-v4-item-badge {
    background: rgba(221, 107, 28, 0.1) !important;
    color: #dd6b20 !important;
}

/* Effet d'atténuation sur les cartes non-survolées pour focaliser le regard */
.pic-v4-grid-stack:hover .pic-v4-grid-item:not(:hover) {
    opacity: 0.5;
}

/* Tunnel de conversion B2B haut de gamme */
.pic-v4-cta-card {
    background: linear-gradient(135deg, #0f2c59 0%, #0b0f19 100%);
    color: #ffffff;
    padding: 35px 40px;
    border-radius: 8px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.pic-v4-cta-title {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pic-v4-cta-desc {
    font-size: 13.5px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.6;
}

.btn-v4-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #dd6b20 !important;
    color: #ffffff !important;
    padding: 13px 26px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
    border: none;
    white-space: nowrap;
    letter-spacing: 0.5px;
    transition: background 0.2s ease;
    cursor: pointer;
}

.btn-v4-action:hover {
    background-color: #b85612 !important;
}

/* 🟢 RESPONSIVE GRID CORRIGÉ SANS FAUTE DE FRAPPE */
@media (max-width: 767px) {
    .pic-v4-grid-stack { 
        grid-template-columns: 1fr !important; 
    }
    .pic-v4-grid-item[style*="grid-column"] { 
        grid-column: auto !important; 
    }
    .pic-v4-cta-card { 
        flex-direction: column !important; 
        text-align: center !important; 
        padding: 30px 20px !important; 
    }
    .btn-v4-action { 
        width: 100% !important; 
        justify-content: center !important; 
    }
}



/* ============================================================================== */
/* 🔬 MODULE COMPLÉMENTAIRE MÉTROLOGIE LÉGALE & TEXTES OIML                       */
/* ============================================================================== */

/* Style pour le texte d'accroche supérieur (Lead banner interne) */
.pic-v3-lead {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #0f2c59 !important;
    font-weight: 600 !important;
    background: #f8fafc;
    border-left: 4px solid #dd6b20 !important; /* Force la couleur orange PIC */
    padding: 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 25px;
    text-align: justify;
}

/* Panneau d'explication OIML du Système de Management Qualité */
.pic-v4-smm-panel {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pic-v4-smm-panel:hover {
    background: rgba(15, 44, 89, 0.05) !important;
    border-left-color: #dd6b20 !important; /* Bascule à l'orange au survol */
    box-shadow: 0 4px 12px rgba(15, 44, 89, 0.03);
}



/* ============================================================================== */
/* 🛠️ MODULE VISUEL MAINTENANCE & ASSISTANCE CRITIQUE SAV — PIC PESAGE           */
/* ============================================================================== */

.pic-maint-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 40px !important;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(15, 44, 89, 0.02) !important;
}

.pic-maint-title {
    color: #0f2c59 !important; /* Bleu nuit officiel */
    font-size: 30px !important;
    font-weight: 800 !important;
    margin: 0 0 5px 0 !important;
    text-transform: uppercase;
}

.pic-maint-subtitle {
    color: #dd6b20 !important; /* Orange corporate PIC */
    font-size: 13px !important;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 25px;
    display: block;
}

.pic-maint-alert {
    background: rgba(221, 107, 32, 0.03) !important;
    border-left: 4px solid #dd6b20 !important; /* Bordure Orange PIC */
    padding: 20px;
    border-radius: 0 10px 10px 0;
    margin-bottom: 30px;
}

.pic-maint-alert p {
    font-size: 15.5px !important;
    line-height: 1.8 !important;
    color: #0f2c59 !important; /* Bleu de texte */
    font-weight: 600 !important;
    margin: 0 !important;
    text-align: justify;
}

.pic-maint-text {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #475569 !important;
    text-align: justify !important;
    margin-bottom: 20px !important;
}

.pic-maint-heading {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #0f2c59 !important;
    margin: 35px 0 20px 0;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 10px;
}

.pic-maint-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.pic-maint-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pic-maint-icon {
    width: 36px;
    height: 36px;
    background: #f8fafc;
    color: #0f2c59 !important; /* Icône en bleu nuit */
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.pic-maint-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin: 0;
    text-align: justify;
}

/* 🟢 EFFETS DE SURVOL INTERACTIFS PIC PESAGE */
.pic-maint-stack .pic-maint-item:hover {
    border-color: #dd6b20 !important; /* Éveil orange */
    transform: translate3d(6px, 0, 0);
    box-shadow: 0 4px 15px rgba(221, 107, 32, 0.08) !important;
}

.pic-maint-stack .pic-maint-item:hover .pic-maint-icon {
    background: #dd6b20 !important;
    color: #ffffff !important;
    border-color: #dd6b20 !important;
}

.pic-maint-stack .pic-maint-item:hover .pic-maint-label {
    color: #0f2c59 !important;
    font-weight: 700 !important;
}

.pic-maint-stack:hover .pic-maint-item:not(:hover) {
    opacity: 0.55;
}

/* Tunnel d'Action Critique SAV */
.pic-maint-cta {
    background: linear-gradient(135deg, #0f2c59 0%, #0b0f19 100%) !important;
    color: #ffffff;
    padding: 35px 40px;
    border-radius: 12px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.pic-maint-cta-title {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px 0;
}

.pic-maint-cta-desc {
    font-size: 14px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.6;
}

.btn-maint-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #dd6b20 !important; /* Bouton Orange PIC */
    color: #ffffff !important;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
    border: none;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.btn-maint-action:hover {
    background-color: #b85612 !important;
}

@media (max-width: 991px) {
    .pic-maint-card { padding: 35px 25px !important; }
    .pic-maint-cta { flex-direction: column; text-align: center; }
    .btn-maint-action { width: 100%; justify-content: center; }
}



/* ============================================================================== */
/* 💎 BLOC 6 : GRILLE INTÉLLIGENTE B2B "POURQUOI NOUS CHOISIR" — PIC PESAGE        */
/* ============================================================================== */

/* Grille en deux colonnes parfaites pour équilibrer la lecture des arguments */
.pic-v6-grid-stack {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.pic-v6-grid-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 25px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    box-shadow: 0 4px 6px -1px rgba(15, 44, 89, 0.01);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pic-v6-item-icon {
    width: 48px;
    height: 48px;
    background: #f8fafc;
    color: #0f2c59; /* Bleu nuit corporatif par défaut */
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: all 0.2s ease-in-out;
}

.pic-v6-item-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pic-v6-item-title {
    font-size: 15px;
    font-weight: 800;
    color: #0f2c59;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
}

.pic-v6-item-desc {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}

/* 🟢 EFFETS DE SURVOL INTERACTIFS PIC PESAGE (EFFET FOCUS) */
.pic-v6-grid-stack .pic-v6-grid-item:hover {
    border-color: #dd6b20 !important; /* Éveil de la bordure orange */
    transform: translate3d(0, -4px, 0); /* Petit effet de lévitation */
    box-shadow: 0 10px 20px rgba(221, 107, 32, 0.08) !important;
}

.pic-v6-grid-stack .pic-v6-grid-item:hover .pic-v6-item-icon {
    background: #dd6b20 !important;
    color: #ffffff !important;
    border-color: #dd6b20 !important;
}

.pic-v6-grid-stack .pic-v6-grid-item:hover .pic-v6-item-title {
    color: #dd6b20 !important;
}

/* Effet d'atténuation sur les arguments non-survolés pour focaliser le regard */
.pic-v6-grid-stack:hover .pic-v6-grid-item:not(:hover) {
    opacity: 0.6;
}

/* 🟢 RESPONSIVE DU BLOC : BASCULE SUR UNE SEULE COLONNE POUR LES PETITS ÉCRANS */
@media (max-width: 767px) {
    .pic-v6-grid-stack {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    .pic-v6-grid-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }
    .pic-v6-item-desc {
        text-align: center;
    }
}


/* ============================================================================== */
/* 💎 AJUSTEMENT DU BLOC 6 ASYMÉTRIQUE HAUT DE GAMME — PIC PESAGE                */
/* ============================================================================== */

/* Configuration asymétrique des colonnes */
.pic-v6-why-choose-us .col-md-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.pic-v6-why-choose-us .col-md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

/* Gestion du responsive pour les petits écrans (Mobiles et Tablettes) */
@media (max-width: 991px) {
    .pic-v6-why-choose-us .row {
        flex-direction: column !important;
    }
    .pic-v6-why-choose-us .col-md-5, 
    .pic-v6-why-choose-us .col-md-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-right: 15px !important;
    }
    .pic-v6-why-choose-us .col-md-5 {
        text-align: center !important;
        margin-bottom: 30px !important;
    }
    .pic-v6-why-choose-us .col-md-5 div[style*="background"] {
        margin: 0 auto !important; /* Centre la petite ligne orange sous le texte */
    }
    .pic-v6-grid-stack {
        grid-template-columns: 1fr !important; /* Grille sur 1 seule colonne en mobile */
        gap: 15px !important;
    }
}

/* Coloration des sous-menus de l'onglet Société au survol */
.corporate-societe-links li a:hover {
    color: #dd6b20 !important;
    background-color: rgba(15, 44, 89, 0.03) !important;
    padding-left: 10px !important;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}


/* ============================================================================== */
/* 🏢 HARMONISATION FINALE ET LISIBILITÉ DE L'ONGLET SOCIÉTÉ — PIC PESAGE        */
/* ============================================================================== */

/* 1. Force les titres de rubriques (Qui sommes-nous, Certifications...) */
.megamenu .sub-menu .title-submenu {
    color: #0f2c59 !important; /* Bleu nuit officiel PIC */
    font-family: 'Roboto', sans-serif !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 15px !important;
    display: block !important;
    border-bottom: 2px solid #f1f5f9 !important;
    padding-bottom: 5px !important;
}

/* 2. Amélioration du contraste des liens (Suppression du gris clair invisible) */
.megamenu .sub-menu ul.row-list li a {
    color: #475569 !important; /* Gris anthracite intense très lisible */
    font-family: 'Roboto', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 6px 0 !important;
    display: block !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
}

/* 3. Effet d'éveil dynamique Orange PIC au survol de la souris */
.megamenu .sub-menu ul.row-list li a:hover {
    color: #dd6b20 !important; /* Passage immédiat à l'orange PIC */
    padding-left: 8px !important; /* Léger décalage horizontal fluide */
}


/* ============================================================================== */
/* ⚡ ANIMATION ET EFFET DE SURBRILLANCE - ASSISTANCE TECHNIQUE PIC SAV           */
/* ============================================================================== */

/* Effet de pulsation fluide sur le petit voyant orange */
.pic-pulse-dot {
    animation: picPulseAnimation 1.8s infinite ease-in-out;
}

@keyframes picPulseAnimation {
    0% {
        transform: scale(0.9);
        opacity: 0.6;
        box-shadow: 0 0 0 0 rgba(221, 107, 32, 0.4);
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
        box-shadow: 0 0 0 6px rgba(221, 107, 32, 0);
    }
    100% {
        transform: scale(0.9);
        opacity: 0.6;
        box-shadow: 0 0 0 0 rgba(221, 107, 32, 0);
    }
}

/* Éveil lumineux et accentuation de la boîte au survol de la souris */
.pic-sav-highlight-box:hover {
    background-color: rgba(221, 107, 32, 0.08) !important;
    border-color: #dd6b20 !important;
    box-shadow: 0 4px 12px rgba(221, 107, 32, 0.08) !important;
    transform: translateY(-1px);
}


/* ============================================================================== */
/* 🏢 MODULE DE DESIGN ÉLITE POUR LA PAGE PRÉSENTATION INSTITUTIONNELLE          */
/* ============================================================================== */

.pic-v3-container-box {
    background: #ffffff !important;
    padding: 45px !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 25px rgba(15, 44, 89, 0.02) !important;
}

.pic-v3-header-box {
    border-bottom: 2px solid #f1f5f9 !important;
    padding-bottom: 20px !important;
    margin-bottom: 35px !important;
}

.pic-v3-title-text {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #0f2c59 !important; /* Bleu nuit officiel */
    text-transform: uppercase !important;
    margin: 0 !important;
    letter-spacing: 0.3px !important;
}

/* Grille de Chronologie et d'Autorité Historique */
.pic-v3-timeline-stack {
    display: flex;
    gap: 20px;
    margin-bottom: 35px;
}

.pic-v3-milestone-item {
    flex: 1;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-bottom: 3px solid #0f2c59 !important; /* Bordure d'appui bleu nuit */
    padding: 22px 15px !important;
    border-radius: 8px !important;
    text-align: center !important;
    transition: transform 0.2s ease;
}

.pic-v3-milestone-item:hover {
    transform: translateY(-2px);
}

.pic-v3-milestone-item h3 {
    font-size: 26px !important;
    font-weight: 900 !important;
    color: #0f2c59 !important;
    margin: 0 0 5px 0 !important;
}

.pic-v3-milestone-item p {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
}

.pic-v3-lead-paragraph {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #475569 !important;
    text-align: justify !important;
    margin-bottom: 25px !important;
}

/* Grille des solutions d'expertises */
.pic-v3-section-title-box {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f2c59 !important;
    text-transform: uppercase !important;
    margin: 40px 0 20px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.pic-v3-section-title-box::after {
    content: '' !important;
    flex: 1 !important;
    height: 2px !important;
    background: #f1f5f9 !important;
}

.pic-v3-grid-layout {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    margin-bottom: 35px !important;
}

.pic-v3-card-box {
    border: 1px solid #e2e8f0 !important;
    padding: 18px 20px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    background: #ffffff !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pic-v3-card-box i {
    font-size: 15px !important;
    color: #0f2c59 !important; /* Couleur icone de base */
    background: #f8fafc !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.pic-v3-card-label {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    line-height: 1.5 !important;
}

/* 🟢 EFFET D'ALLUMAGE ORANGE CORPORATE PIC AU SURVOL DES EXPERTISES */
.pic-v3-card-box:hover {
    border-color: #dd6b20 !important;
    background: rgba(221, 107, 32, 0.02) !important;
    transform: translate3d(4px, 0, 0);
}

.pic-v3-card-box:hover i {
    background: #dd6b20 !important;
    color: #ffffff !important;
    border-color: #dd6b20 !important;
}

.pic-v3-card-box:hover .pic-v3-card-label {
    color: #0f2c59 !important;
}

/* Bloc d'évolution stratégique de fin de page */
.pic-v3-evolution-container {
    background: linear-gradient(135deg, #0f2c59 0%, #0b0f19 100%) !important;
    color: #ffffff !important;
    padding: 35px 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 30px !important;
    margin-top: 40px !important;
}

.pic-v3-evolution-text-block {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #cbd5e1 !important;
    text-align: justify !important;
    margin: 0 !important;
}

.pic-v3-evolution-badge-label {
    background: #dd6b20 !important; /* Force l'orange constructeur PIC */
    color: #ffffff !important;
    padding: 12px 22px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 14px rgba(221, 107, 32, 0.2) !important;
}

@media (max-width: 768px) {
    .pic-v3-grid-layout { grid-template-columns: 1fr !important; }
    .pic-v3-timeline-stack { flex-direction: column !important; gap: 10px !important; }
    .pic-v3-evolution-container { flex-direction: column !important; text-align: center !important; padding: 25px !important; }
    .pic-v3-evolution-badge-label { width: 100% !important; justify-content: center !important; }
}


/* ============================================================================== */
/* 💎 MODULE DE DESIGN ÉLITE DU MENU LATÉRAL CONTEXTUEL — PIC PESAGE             */
/* ============================================================================== */

/* 1. Conteneur principal isolé de la Sidebar */
[data-menu-scope="corporate-sidebar"] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px 16px !important;
    box-shadow: 0 4px 20px -5px rgba(15, 44, 89, 0.03) !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. En-tête de contexte dynamique (SOCIÉTÉ, Nos Services, etc.) */
[data-menu-scope="corporate-sidebar"] [data-menu-element="title"] {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #64748b !important;
    margin-bottom: 20px !important;
    padding-left: 12px !important;
    border-left: 3px solid #0f2c59 !important; /* Ligne de repère bleu nuit */
}

/* 3. Liste et structure des items */
[data-menu-scope="corporate-sidebar"] [data-menu-element="list"] {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

[data-menu-scope="corporate-sidebar"] [data-menu-element="item"] {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. Style de base des liens (Inactif) */
[data-menu-scope="corporate-sidebar"] [data-menu-element="link"] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    color: #475569 !important; /* Gris de lecture confortable */
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-menu-scope="corporate-sidebar"] [data-menu-element="content"] {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

/* 5. Icône technique unitaire */
[data-menu-scope="corporate-sidebar"] [data-menu-element="icon"] {
    font-size: 15px !important;
    color: #0f2c59 !important; /* Icône en bleu nuit par défaut */
    width: 22px !important;
    text-align: center !important;
    transition: color 0.2s ease !important;
}

/* 6. Petite flèche FontAwesome native injectée à droite */
[data-menu-scope="corporate-sidebar"] [data-menu-element="link"]::after {
    content: '\f105' !important;
    font-family: 'FontAwesome' !important;
    font-size: 14px !important;
    color: #cbd5e1 !important;
    transition: all 0.2s ease !important;
}

/* 🟢 7. GESTION DES HOVER : PASSAGE FLUIDE À L'ORANGE CORPORATE */
[data-menu-scope="corporate-sidebar"] [data-menu-element="link"]:hover {
    background: #f8fafc !important;
    color: #dd6b20 !important; /* Le texte s'éveille en orange */
    padding-left: 18px !important; /* Léger décalage horizontal aimanté */
}

[data-menu-scope="corporate-sidebar"] [data-menu-element="link"]:hover [data-menu-element="icon"] {
    color: #dd6b20 !important; /* L'icône passe à l'orange */
}

[data-menu-scope="corporate-sidebar"] [data-menu-element="link"]:hover::after {
    color: #dd6b20 !important;
    transform: translateX(2px) !important;
}

/* 🟢 8. UNIFICATION SÉCURISÉE DE L'ÉTAT ACTIF (ORANGE PIC CONSTRUCTEUR SUR TOUS LES CONTEXTES) */
[data-menu-scope="corporate-sidebar"] [data-state="active"] [data-menu-element="link"] {
    background: rgba(221, 107, 32, 0.06) !important; /* Fond orange très doux */
    color: #dd6b20 !important; /* Texte orange PIC officiel */
    font-weight: 700 !important;
    border-left: 3px solid #dd6b20 !important; /* Ligne d'appui orange */
    border-radius: 0 8px 8px 0 !important;
    padding-left: 11px !important; /* Ajustement d'épaisseur */
}

[data-menu-scope="corporate-sidebar"] [data-state="active"] [data-menu-element="icon"] {
    color: #dd6b20 !important; /* L'icône de la page courante passe à l'orange */
}

[data-menu-scope="corporate-sidebar"] [data-state="active"] [data-menu-element="link"]::after {
    content: '\f111' !important; /* Petit point de sélection distinctif de classe III */
    font-size: 6px !important;
    color: #dd6b20 !important;
}


/* ============================================================================== */
/* 🔒 SÉCURITÉ DE VERROUILLAGE DES ÉTATS DE LA SIDEBAR GAUCHE                     */
/* ============================================================================== */

/* Éteint obligatoirement l'état orange et remet le gris d'origine sur tout item inactif */
[data-menu-scope="corporate-sidebar"] [data-state="inactive"] {
    background: transparent !important;
}

[data-menu-scope="corporate-sidebar"] [data-state="inactive"] [data-menu-element="link"] {
    background: transparent !important;
    color: #475569 !important; /* Force le retour au gris anthracite lisible */
    border-left: none !important;
    padding-left: 14px !important;
}

[data-menu-scope="corporate-sidebar"] [data-state="inactive"] [data-menu-element="icon"] {
    color: #0f2c59 !important; /* Force le retour de l'icône au bleu nuit */
}

[data-menu-scope="corporate-sidebar"] [data-state="inactive"] [data-menu-element="link"]::after {
    content: '\f105' !important; /* Remet la petite flèche FontAwesome par défaut */
    color: #cbd5e1 !important;
}


/* ============================================================================== */
/* 💎 ARCHITECTURE DU MANIFESTE DE VALEURS INDUSTRIALISÉES (E.R.I.E)             */
/* ============================================================================== */

/* Boîtier supérieur Premium */
.erie-pro-box {
    background: #ffffff !important;
    padding: 45px !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 25px rgba(15, 44, 89, 0.01) !important;
}

.erie-pro-title {
    color: #0f2c59 !important; /* Bleu nuit officiel */
    font-size: 28px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
}

.erie-interactive-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Ligne unifiée combinant la lettre-badge et le bloc de texte */
.erie-row-node {
    display: flex;
    align-items: center;
    gap: 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 20px;
    border-radius: 10px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Le Badge de la Lettre (Capsule géométrique orange PIC de base) */
.erie-letter-badge {
    flex: 0 0 65px;
    width: 65px;
    height: 65px;
    background: rgba(221, 107, 32, 0.05) !important; /* Fond orange très léger */
    color: #dd6b20 !important; /* Orange corporate PIC */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 900;
    transition: all 0.3s ease;
    user-select: none;
}

/* Zone textuelle interne */
.erie-text-block {
    flex: 1;
}

.erie-text-block h4 {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #0f2c59 !important;
    letter-spacing: 0.5px;
    margin: 0 0 6px 0;
    transition: color 0.2s ease;
}

.erie-text-block p {
    color: #475569 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    text-align: justify;
    margin: 0;
}

/* 🟢 MICRO-INTERACTIONS PREMIUM AU SURVOL DE LA GRILLE (EFFET CINÉMATIQUE) */
.erie-interactive-grid:hover .erie-row-node:hover {
    border-color: #dd6b20 !important; /* Éveil de la bordure à l'orange PIC */
    transform: translate3d(6px, 0, 0); /* Glissement horizontal aimanté */
    box-shadow: 0 8px 20px rgba(221, 107, 32, 0.05) !important;
}

.erie-interactive-grid:hover .erie-row-node:hover .erie-letter-badge {
    background: #dd6b20 !important; /* Inversion de couleur du badge au survol */
    color: #ffffff !important;
    transform: scale(1.05);
}

.erie-interactive-grid:hover .erie-row-node:hover .erie-text-block h4 {
    color: #dd6b20 !important;
}

/* Atténuation cinématique des blocs non survolés pour canaliser le regard du jury */
.erie-interactive-grid:hover .erie-row-node:not(:hover) {
    opacity: 0.5;
}

/* Mode responsive */
@media (max-width: 768px) {
    .erie-row-node { flex-direction: column; align-items: flex-start; gap: 15px; padding: 18px; }
    .erie-letter-badge { flex: 0 0 50px; width: 50px; height: 50px; font-size: 22px; }
    .erie-interactive-grid:hover .erie-row-node:not(:hover) { opacity: 1; transform: none; }
    .erie-interactive-grid:hover .erie-row-node:hover { transform: none; border-color: #e2e8f0 !important; }
}


/* Animation et focus asymétrique de la Politique Qualité */
[data-element="content-stream"]:hover .quality-stream-row:hover {
    background-color: #f8fafc !important;
    padding-left: 40px !important;
}

[data-element="content-stream"]:hover .quality-stream-row:hover h3 {
    color: #dd6b20 !important; /* Allumage du titre à l'orange PIC au survol */
}

/* Atténuation fluide des autres axes pour focaliser l'œil du jury */
[data-element="content-stream"]:hover .quality-stream-row:not(:hover) {
    opacity: 0.4 !important;
}


/* ============================================================================== */
/* 🛡️ MODULE DE DESIGN INDUSTRIEL POUR LA POLITIQUE SST — PIC PESAGE              */
/* ============================================================================== */

.sst-wrapper {
    background: #ffffff !important;
    padding: 45px !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 25px rgba(15, 44, 89, 0.01) !important;
}

.sst-header-block {
    border-bottom: 2px solid #f1f5f9 !important;
    padding-bottom: 25px !important;
    margin-bottom: 35px !important;
}

.sst-badge {
    display: inline-block !important;
    background: rgba(221, 107, 32, 0.05) !important;
    color: #dd6b20 !important;
    padding: 5px 14px !important;
    border-radius: 50px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 15px !important;
}

.sst-main-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #0f2c59 !important;
    text-transform: uppercase !important;
    margin: 0 0 15px 0 !important;
    letter-spacing: 0.3px !important;
}

.sst-intro-text {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #0f2c59 !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    text-align: justify !important;
}

/* Grille CSS Grid */
.sst-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    margin: 35px 0 !important;
}

.sst-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    padding: 20px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sst-card-icon {
    background: #ffffff !important;
    color: #0f2c59 !important; /* Bleu nuit constructeur de base */
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.sst-card-text {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: #475569 !important;
    font-weight: 600 !important;
    text-align: justify !important;
}

/* 🟢 ALLUMAGE ORANGE CORPORATE PIC AU SURVOL DES ENGAGEMENTS SST */
.sst-card:hover {
    transform: translateY(-2px) !important;
    border-color: #dd6b20 !important;
    background: #ffffff !important;
    box-shadow: 0 10px 20px rgba(221, 107, 32, 0.04) !important;
}

.sst-card:hover .sst-card-icon {
    background: #dd6b20 !important;
    color: #ffffff !important;
    border-color: #dd6b20 !important;
}

.sst-card:hover .sst-card-text {
    color: #0f2c59 !important;
}

@media (max-width: 768px) {
    .sst-grid { grid-template-columns: 1fr !important; }
    .sst-wrapper { padding: 25px !important; }
    .sst-main-title { font-size: 22px !important; }
    .sst-executive-footer { flex-direction: column-reverse !important; align-items: stretch !important; }
    .sst-signature-box { text-align: left !important; }
}


/* Animation et micro-interactions de la page Certifications */
[data-element="content-stream"]:hover .cert-stream-row:hover {
    background-color: #f8fafc !important;
    padding-left: 50px !important;
}

[data-element="content-stream"]:hover .cert-stream-row:hover h2 {
    color: #dd6b20 !important; /* Allumage à l'orange PIC au survol */
}

/* Atténuation fluide des blocs non survolés */
[data-element="content-stream"]:hover .cert-stream-row:not(:hover) {
    opacity: 0.35 !important;
}

.btn-download-cert-pdf:hover {
    background-color: #991b1b !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(185, 28, 28, 0.4) !important;
}


/* ============================================================================== */
/* 🗺️ MODULE GÉOMÉTRIQUE DE RENDU POUR LE RÉSEAU DES AGENCES — PIC PESAGE        */
/* ============================================================================== */

.ln-hub-matrix {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    margin-bottom: 40px !important;
}

.ln-hub-node {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 35px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Le Master Block (Siège social Abidjan) s'approprie la largeur complète */
.ln-hub-node--master {
    grid-column: 1 / -1 !important;
    background: linear-gradient(135deg, #0f2c59 0%, #0b0f19 100%) !important;
    border-color: #0f2c59 !important;
    color: #ffffff !important;
}

.ln-hub-node--master h3 { color: #ffffff !important; }
.ln-hub-node:not(.ln-hub-node--master) h3 { color: #0f2c59 !important; }

.node-header-segment {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.ln-hub-node--master .node-header-segment {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.node-badge-status {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}

.ln-hub-node--master .node-badge-status {
    background: rgba(221, 107, 32, 0.15) !important;
    border-color: rgba(221, 107, 32, 0.3) !important;
    color: #ffffff !important;
}

.node-geo-block { font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 8px !important; }
.node-postal-sub { font-size: 12.5px !important; font-style: italic !important; margin-bottom: 15px !important; color: #64748b !important; }
.ln-hub-node--master .node-geo-block { color: #e2e8f0 !important; }

.node-contacts-list {
    margin: 15px 0 0 0 !important;
    padding: 15px 0 0 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    border-top: 1px dashed #f1f5f9 !important;
}

.ln-hub-node--master .node-contacts-list { border-top-color: rgba(255, 255, 255, 0.06) !important; }
.node-contacts-list i { color: #dd6b20 !important; width: 16px !important; text-align: center !important; }

/* 🟢 INTERACTION CINÉMATIQUE ÉLITE ET EFFET HOVER ORANGE */
.ln-hub-matrix:hover .ln-hub-node:hover {
    border-color: #dd6b20 !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 25px rgba(221, 107, 32, 0.05) !important;
}

/* Estompement cinématique des couches collatérales non ciblées pour le jury */
.ln-hub-matrix:hover .ln-hub-node:not(:hover) {
    opacity: 0.4 !important;
}

@media (max-width: 768px) {
    .ln-hub-matrix { grid-template-columns: 1fr !important; }
    .ln-hub-matrix:hover .ln-hub-node:not(:hover) { opacity: 1 !important; transform: none !important; }
}