/*##################################################################################################
----------------------------------------------------------------------------------------------------
------------------------------------  copyright L2CM 1999-2025 -------------------------------------
----------------------------------------------------------------------------------------------------
##################################################################################################*/

/* Variables */
:root {
--bs-primary: #b2c700;
--bs-secondary: #2E5473;
--light-green: #E8F5E9;
--bs-primary-rgb: 178, 200, 2;
--bs-pagination-active-bg: #b2c700;
--bs-pagination-active-border-color: #8BC34A;
--font-main: 15px "Poppins-Regular", Helvetica, Arial, FreeSans, sans-serif;
--color-main: #2e2e2e;
--background-main: #FFF;

--bs-link-color: var(--bs-primary);
--bs-border-color: var(--light-green);
--bs-link-hover-color: var(--bs-secondary);

--bs-pagination-color: #FFF;
--bs-pagination-bg: #FFF;
--bs-badge-color: #2e2e2e;
--bs-pagination-border-width: 1px;
--bs-pagination-border-color: var(--light-green);
--bs-pagination-border-radius: 0.25rem;
--bs-pagination-hover-color: #FFF;
--bs-pagination-hover-bg: var(--bs-secondary);
--bs-pagination-hover-border-color: var(--bs-secondary);
--bs-pagination-focus-color: #FFF;
--bs-pagination-focus-bg: var(--light-green);
--bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
--bs-pagination-active-color: #FFF;
--bs-pagination-active-bg: var(--bs-primary);
--bs-pagination-active-border-color: var(--bs-primary);

/* Variables pour la grille */
--nav-footer-height: 6rem;
/* Hauteur combinée de nav et footer */
}

/* Font Faces pour Poppins */

/* Font Faces pour Poppins */
@font-face {
font-family: 'Poppins-Thin';
src: url('/fonts/Poppins/Poppins-Thin.woff2') format('woff2');
font-weight: 100;
}

@font-face {
font-family: 'Poppins-ExtraLight';
src: url('/fonts/Poppins/Poppins-ExtraLight.woff2') format('woff2');
font-weight: 200;
}

@font-face {
font-family: 'Poppins-Light';
src: url('/fonts/Poppins/Poppins-Light.woff2') format('woff2');
font-weight: 300;
}

@font-face {
font-family: 'Poppins-Regular';
src: url('/fonts/Poppins/Poppins-Regular.woff2') format('woff2');
font-weight: normal;
}

@font-face {
font-family: 'Poppins-Medium';
src: url('/fonts/Poppins/Poppins-Medium.woff2') format('woff2');
font-weight: 500;
}

@font-face {
font-family: 'Poppins-SemiBold';
src: url('/fonts/Poppins/Poppins-SemiBold.woff2') format('woff2');
font-weight: 600;
}

@font-face {
font-family: 'Poppins-Bold';
src: url('/fonts/Poppins/Poppins-Bold.woff2') format('woff2');
font-weight: bold;
}

@font-face {
font-family: 'Poppins-ExtraBold';
src: url('/fonts/Poppins/Poppins-ExtraBold.woff2') format('woff2');
font-weight: 800;
}

@font-face {
font-family: 'Poppins-Black';
src: url('/fonts/Poppins/Poppins-Black.woff2') format('woff2');
font-weight: 900;
}

@font-face {
font-family: 'Poppins-ThinItalic';
src: url('/fonts/Poppins/Poppins-ThinItalic.woff2') format('woff2');
font-style: italic;
font-weight: 100;
}

@font-face {
font-family: 'Poppins-ExtraLightItalic';
src: url('/fonts/Poppins/Poppins-ExtraLightItalic.woff2') format('woff2');
font-style: italic;
font-weight: 200;
}

@font-face {
font-family: 'Poppins-LightItalic';
src: url('/fonts/Poppins/Poppins-LightItalic.woff2') format('woff2');
font-style: italic;
font-weight: 300;
}

@font-face {
font-family: 'Poppins-Italic';
src: url('/fonts/Poppins/Poppins-Italic.woff2') format('woff2');
font-style: italic;
font-weight: normal;
}

@font-face {
font-family: 'Poppins-MediumItalic';
src: url('/fonts/Poppins/Poppins-MediumItalic.woff2') format('woff2');
font-style: italic;
font-weight: 500;
}

@font-face {
font-family: 'Poppins-SemiBoldItalic';
src: url('/fonts/Poppins/Poppins-SemiBoldItalic.woff2') format('woff2');
font-style: italic;
font-weight: 600;
}

@font-face {
font-family: 'Poppins-BoldItalic';
src: url('/fonts/Poppins/Poppins-BoldItalic.woff2') format('woff2');
font-style: italic;
font-weight: bold;
}

@font-face {
font-family: 'Poppins-ExtraBoldItalic';
src: url('/fonts/Poppins/Poppins-ExtraBoldItalic.woff2') format('woff2');
font-style: italic;
font-weight: 800;
}

@font-face {
font-family: 'Poppins-BlackItalic';
src: url('/fonts/Poppins/Poppins-BlackItalic.woff2') format('woff2');
font-style: italic;
font-weight: 900;
}

/* Reset et styles globaux */
body {
font-family: var(--font-main);
color: var(--color-main);
background-color: var(--background-main);
z-index: 0;
border: 0px;
margin: 0px;
min-height: 100vh;
}

/* Header */
header {
background-color: #FFF;
display: none;
position: fixed;
top: 0px;
}

header h1 {
color: white;
font-size: 3rem;
font-family: 'Poppins-Bold';
}

header p {
color: var(--light-green);
font-size: 1.5rem;
font-family: 'Poppins-Regular';
}

/* Content sections */
.content-section {
padding: 100px 20px;
text-align: center;
background-color: var(--light-green);
}

.content-section h2 {
color: var(--bs-primary);
margin-bottom: 40px;
font-family: 'Poppins-SemiBold';
}

/* Navigation */
.navbar-custom {
margin: 1%;
background-color: var(--bs-primary);
width: 98%;
top: 0px;
z-index: 1000;
font-family: 'Poppins-SemiBold';
padding: 10px;
border-radius: 10px;
border: 0px solid #FFF;
}

#headerlogo {
height: 48px;
margin-right: 22px;
}

.navbar-custom:hover,
.navbar-nav:hover,

.nav-link {
color: #24425b;
}

.nav-link:hover {
color: var(--bs-primary);
}

/* État initial */
.nav-item {
/* Couleur par défaut pour le texte */
transition:
background-color 0.3s ease,
color 0.3s ease,
padding-top 0.2s ease,
margin-top 0.2s ease,
margin-bottom 0.2s ease;
}

.nav-item:hover {
background-color: var(--bs-secondary);
color: var(--bs-primary);
/* Texte en couleur primaire sur fond secondaire */
padding-top: 10px;
margin-top: -12px;
margin-bottom: -11px;
border-radius: 5px;
}

.stk #headerlogo {
max-height: 36px;
height: auto;
}

/* Magick stiky */
nav,
.navbar {
top: -1px;
/* ➜ the trick */
padding: 1em;
padding-top: calc(1em + 1px);
/* ➜ compensate for the trick */
transition: .5s;
}

nav.stk {
box-shadow: 0px 1px 3px rgb(0 0 0 / 30%);
margin: 0%;
background-color: var(--bs-primary);
width: 100%;
top: -2px;
z-index: 1000;
font-family: 'Poppins-SemiBold';
padding: 8px;
border-radius: 0px;
}

/* Cards */
.solution-card {
border: none;
transition: transform 0.3s, box-shadow 0.3s;
background-color: var(--light-green);
}

.solution-card:hover {
transform: translateY(-10px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Form */
.form-control {
border: 1px solid var(--bs-primary);
background-color: #FFF;
font-family: 'Poppins-Regular';
}

.btn-primary {
background-color: var(--bs-primary);
border-color: var(--bs-pagination-active-border-color);
font-family: 'Poppins-SemiBold';
}

.btn-primary:hover {
background-color: var(--bs-secondary);
border-color: var(--bs-pagination-active-border-color);
}

.dropdown-menu {
margin-top: 7px;
border-radius: 0px;
background-color: #2e5474F0;
color: #FFF;
}

.dropdown-item {
color: var(--bs-primary);
padding: 12px;
font-family: 'Poppins-Regular';
}

.dropdown-item:hover,
.dropdown-item:focus {
color: var(--bs-secondary);
background-color: var(--bs-primary);
}

.carousel-inner {
border-radius: 25px;
background-color: var(--light-green);
}

.main {
position: relative;
}

/* Article */
article {
padding: 80px;
padding-top: 136px;
text-align: justify;
color: var(--color-main);
background: rgba(255, 255, 255, 0.92);
z-index: 10;
font-family: 'Poppins-Regular';
}

article h1,
article h2,
article h3 {
color: var(--bs-primary);
font-family: 'Poppins-SemiBold';
}

.content-bg {
opacity: 0.1;
}

.content {}

.content img {
border-radius: 18px;
margin-bottom: 30px;
box-shadow: rgb(0 0 0 / 20%) 0px 4px 12px;
}

/* Footer */
footer {
margin-top: 40px;
min-height: 250px;
position: fixed;
bottom: 0;
left: 0;
padding: 20px;
width: 100%;
background: var(--bs-primary);
color: #FFF;
font-size: 0.8em;
display: flex;
z-index: 5;
align-content: center;
flex-wrap: nowrap;
align-items: flex-end;

/* Styles pour le footer */
box-sizing: border-box;
transition: transform 0.3s ease-in-out;
transform: translateY(100%);
}

.footer.visible {
transform: translateY(0);
}

#mention a {
color: #FFF;
text-decoration: none;
font-family: 'Poppins-Regular';
}

#mention a:hover {
color: var(--bs-secondary);
}

/* Style des titres de section */
.footer h5 {
color: #b2c802;
font-family: 'Poppins-Bold';
}

/* Style des liens dans le footer */
.footer a {
color: #eee;
text-decoration: none;
font-family: 'Poppins-Regular';
}

.footer a:hover {
color: #b2c802;
}

/* Style des icônes de réseaux sociaux */
.social-icons i {
font-size: 1.5rem;
margin-right: 10px;
}

/* Style de la bordure entre sections */
.footer hr {
border-color: #dee2e6;
}

/* Media Queries pour Mobile et Tablette */
@media (max-width: 1024px) {

/* Fond blanc pour le texte sur mobile et tablette */
body {
background-color: #FFFFFF;
}

#headerlogo {
height: 42px;
}

/* Article avec fond blanc sur mobile/tablette */
article {
background: #FFFFFF;
color: var(--color-main);
padding: 20px;
}

/* Contenu avec fond blanc */
.content-section {
background-color: #FFFFFF;
}

/* Carousel avec fond blanc */
.carousel-inner {
background-color: #FFFFFF;
}

/* Cards avec fond blanc */
.solution-card {
background-color: #FFFFFF;
}

/* Formulaire avec fond blanc */
.form-control {
background-color: #FFFFFF;
}
}

/* ============================================= */
/*          NOUVEAUX STYLES POUR LA GRID         */
/* ============================================= */

body {
margin: 0;
padding: 0;
display: grid;
grid-template-rows:
auto minmax(100vh, 1fr) auto;
min-height: 100vh;
grid-gap: 0;
}

nav {
background-color: var(--bs-primary);
color: white;
padding: 1rem;
position: sticky;
top: 0;
z-index: 1000;
grid-row: 1;

/* Intégration des styles existants */
font-family: 'Poppins-SemiBold';
border-radius: 0px;
}

main {
background-image: url('$backgroundImage');
background-size: cover;
background-position: center;
min-height: calc(100vh - 2 * var(--nav-footer-height));
}

footer {
background-color: var(--bs-secondary);
color: #b2c700;
text-align: center;
padding: 1rem;
grid-row: 3;
margin-top: 40px;
min-height: 250px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
font-size: 0.8em;
display: flex;
z-index: 5;
align-content: center;
flex-wrap: nowrap;
align-items: flex-end;
box-sizing: border-box;
transition: transform 0.3s ease-in-out;
transform: translateY(100%);
z-index: 1000;
}

.footer.visible {
transform: translateY(0);
}

.parallax-section {
height: 100vh;
background-attachment: fixed;
background-size: cover;
position: relative;

/* Intégration des styles existants */
background-color: var(--light-green);
}

/* Media Queries pour la grille */
@media (max-width: 768px) {
.grid-container {
grid-template-rows:
auto minmax(100vh, 1fr) auto;
}

article {
padding: 1rem;
}

}