:root {
            --primary-color: #3d5a5c;
            --card-bg: #ffffff;
            --text-dark: #2c3e50;
            --text-light: #6c757d;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Open Sans', 'Montserrat', sans-serif;
            background: linear-gradient(135deg, #e8eef0 0%, #d5dfe3 100%);
            min-height: 100vh;
        }

.right-panel {
    margin-left: -5px;
    flex: 1;
    padding: 60px 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    align-content: start;
    padding-top: 5%;
    background: linear-gradient(135deg, #e8eef0 0%, #d5dfe3 100%);
    /* height: -webkit-fill-available; */
	margin-bottom: 6%;}

		
		.container-fluid{background:#f6f7fb}


        .header-bar {
            background-color: var(--primary-color);
            height: 30px;
            width: 100%;
        }

        .main-container {
            display: flex;
            flex-wrap: wrap;
            min-height: calc(100vh - 30px);
        }

        .left-panel {
			height: 100vh;
            background-color: #f6f7fb;
			padding-left:10%;
        }

        .logo {
            font-size: 32px;
            font-weight: 300;
            color: var(--text-dark);
            margin-bottom: 25px;
            display: flex;padding-top:20%;
            align-items: center;
        }

      

        .left-panel h1 {
            font-size: 50px;
            font-weight: 300;
            color: var(--text-dark);
            margin-bottom: 30px;
            line-height: 50px;
        }

        .left-panel p {
            color: var(--text-dark);
            line-height: 1.6;
            font-size: 15px;
            max-width: 500px;
        }

        .right-panel {
			
			margin-left:-5px;
            flex: 1;
            padding: 10% 50px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
            align-content: start;
        }

        .tool-card {
            background: var(--card-bg);
            border-radius: 6px;
            padding: 25px 25px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .tool-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        }

        .tool-icon {
            height: 45px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }

.tool-card a {text-decoration: none;}

.tool-description {
    text-align: center;
}


.tool-title {
    margin: 0 auto;
    text-align: center;
}

        .tool-icon img {
            max-height: 100%;
            max-width: 180px;
        }

        .tool-title {
            font-size: 22px;
            font-weight: 500;
            color: var(--text-dark);
            margin-bottom: 15px;
        }

        .tool-description {
            color: var(--text-light);
            font-size: 13px;
            line-height: 1.6;
            margin-bottom: 25px;
            flex-grow: 1;
			min-height:70px;
        }

        .tool-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .tag {
            background-color: #d5dfe3;
            color: #6c757d;
            padding: 5px 12px;
            border-radius: 4px;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Couleurs spécifiques pour les logos */
        .econnect-logo { color: #7ca8a5; }
        .itcorner-logo { color: #5a8985; }
        .dita-logo { color: #e67e50; }
        .portail-logo { color: #7ca8a5; }

        .hubee-logo { color: #6b9896; }
        .coyotte-logo { color: #8b9ba3; }
        .finance-logo { color: #5a7ba8; }
        .kelio-logo { color: #2c3e50; }

         @media (min-width: 1440px) {
        
        } 


@media (min-width: 992px) {
            .left-panel {
                flex: 0 0 40%;
               ;  }
			
            .right-panel {
                flex: 1;
                grid-template-columns: repeat(3, 1fr);}
			.tag{font-size:10px;}}

        @media (max-width: 991px) {
            .right-panel {
                grid-template-columns: repeat(2, 1fr);            }
				.left-panel h1{font-size:30px;lign-height:30px;}
			
			.left-panel {
				height: 50vh;}
			.logo{padding-top:0px;}
			.left-panel h1{font-size:30px;lign-height:30px !important;}
        }

        @media (max-width: 576px) {
			.right-panel {
                grid-template-columns: repeat(1, 1fr);
            }
			
            .left-panel,
            .right-panel {
                padding: 30px 20px;
            }

            .left-panel h1 {
                font-size: 32px;
            }

            .right-panel {
                grid-template-columns: 1fr;
            }
        }