:root {
		--bt-planet-sprite: url("/v4/images/planetStatetest.webp");
    --bg-image: url("/v4/images/pngtree_technology-line-background_18299105.webp");
		--bt-planet: url("/v4/images/planet01.png");
		--bt-planet-act: url("/v4/images/planet02.png");
		--bt-planet-hov: url("/v4/images/planet01hov.png");
		--text-color: #f3ebeb;
		--text-colorA: #f3ebff;
		--bg-color: #1c1d1d;
    --header-height: 80px;
	--bg-pricing :2, 2, 102 ;
	--bg-pricing-opacity : .65;
	--bg-pricing-hover : 14, 39, 153;
	--bg-pricing-hover-opacity : .85;
	--pricing-color : 255,255,255;
}

:target  {
    scroll-margin-top: calc(var(--header-height) + 1rem); /* Ajuste selon la hauteur de ton menu */
    /*display: inline-block;    /* Force le navigateur à reconnaître l'ancre comme un bloc */
}

html {
    scroll-behavior: smooth;
}
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.mh-200 { min-height: 200px !important; }
.mh-250 { min-height: 250px !important; }
.mh-300 { min-height: 300px !important; }
.mh-400 { min-height: 400px !important; }
/* --- STYLE MOBILE (Par défaut) --- */
.custom-submenu {
    background-color: #2b3035; /* Un gris un peu plus clair que bg-dark */
}

.submenu-link {
    display: block;
    padding: 10px 20px;
    color: #adb5bd;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.9rem;
}
/* Permet d'afficher le sous-menu au survol du parent */
/* Style pour le sous-menu */
.dropdown-submenu {
    position: relative;
}

/* Positionnement du sous-menu à droite */
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    display: none; /* Caché par défaut */
}

/* Affichage au survol (PC uniquement) */
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

/* Petit triangle pour indiquer qu'il y a un sous-menu */
/*ropdown-submenu > a::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid;
}
*/
.dropdown-menu > .dropdown-submenu > a, .dropdown-submenu > a ::after {
    /*content: " \203A"; /* C'est le code Unicode du chevron droit › */
    float: right;
    font-weight: bold;
}

.pricing-block, .row-hover {
    transition: background-color 0.2s ease-in-out;
	background-color: rgba(var(--bg-pricing), var(--bg-pricing-opacity));
	color : rgb(var(--pricing-color));
}

.pricing-block:nth-of-type(odd) > * {
  /*background-color: #284055; */
}

.pricing-block:hover, .row-hover:hover {
	background-color: rgba(var(--bg-pricing-hover), var(--bg-pricing-hover-opacity)) 
}

.table-custom-transparent {
    --bs-table-bg: transparent !important; /* Force le fond du tableau en transparent */
    --bs-table-accent-bg: transparent !important; /* Supprime les reflets au survol/zébrures */
    background-color: transparent !important;
}

.table-custom-transparent td, 
.table-custom-transparent th {
    background-color: transparent !important;
}
/* --- STYLE PC (A partir de SM) --- */
@media (min-width: 576px) {
    .nav-item-container {
        position: relative; /* Pour que le sous-menu se cale par rapport à ce parent */
    }

    .custom-submenu {
				display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(10px);
        transition: all 0.5s ease;
			
        /*display: none; /* On cache par défaut */
        position: absolute;
        top: 100%; /* Juste en dessous du bouton planète */
        left: 50%;
        transform: translateX(-50%);
        min-width: 180px;
        background: #021837;/*var(--bs-table-bg);/*white;*/
        z-index: 1000;
        border-radius: 8px;
        padding: 10px 0;
			/*display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(10px);
        transition: all 0.3s ease; /* Voilà ton "ease" ici ! */*/
    }

    .submenu-link {
        color: var(--bs-body-color);/*#333;*/
        border-bottom: none;
    }

    .submenu-link:hover {
        background-color: var(--bs-primary);
        color: white;
    }

    /* LA MAGIE DU SURVOL : On affiche le sous-menu quand on survole le container */
    .nav-item-container:hover .custom-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
			/*display: block;*/
    }
}

.text-shadow {
    text-shadow: 1px 1px 2px rgb(0, 0, 0, 1);
}

/* Une variante plus forte si le fond est vraiment chaotique (ex: sur une image) */
.text-shadow-strong {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

.card-selected {
    border: 2px solid var(--bs-primary) !important;
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
    transform: scale(1.02); /* Petit effet de zoom pour confirmer le clic */
    transition: all 0.2s ease-in-out;
}

.navbar {
	background-image: none;
	border: none;
}
body {
	color : var(--text-color);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	color : var(--text-color);
}
a {
	color : var(--text-colorA);
}
.panel {
	background-color:var(--bg-color);
}
.panel-footer {
background-color: #446e9b;
}

.dropdown-menu > li > a {
	color: var(--text-color);
}
.jumbotron{
	background-color: transparent !important;
}
.dropdown-menu {
	background-image:none;
	background-color : var(--bg-color);
}

.modal-content {
background-color:var(--bg-color);
}
button.close {
	background : #cc0000;
}
.close {
opacity:1
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #304263;
}
.table-hover > tbody > tr:hover {
    background-color: #295093;
}
/*------------------------------------------------------------------------------*/

.row:before, .row:after {
    display: table;
    content: " ";
}
.row:after {
    clear: both;
}
.col-lg-6 {
    float: left !important;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}
.row-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Centre verticalement les colonnes */
}


@media (max-width:767px) {
	.hidden-xs {
    display:none!important
	}


}


@media (min-width:768px) and (max-width:991px) {
    .hidden-sm {
    display:none!important}


}


@media (min-width:992px) and (max-width:1199px) {
    .hidden-md {
    display:none!important}


}


@media (min-width:1200px) {
    .hidden-lg {
    display:none!important}

}

.d-none {
    display: none !important;
}

@media (max-width: 575px) {
    .btn-ratio {
        display: none !important; /* Sécurité supplémentaire pour le mobile */
    }
}

/* Style pour le lien texte en mode mobile */
.nav-link-mobile {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
}

.nav-link-mobile.active {
    background-color: #e9ecef;
    font-weight: bold;
}


.btn-ratio {
    aspect-ratio: 150 / 124;
    width: 100%;
    text-decoration: none;
    background-image: var(--bt-planet-sprite);
    background-size: 300% 100%;
    background-position: 0% 0%;
    /*color: white !important;*/
		font-size: clamp(14px, 2vw, 32px);/**/
    transition: transform 0.2s ease, filter 0.2s ease;/**/
	
    display: none; /* Par sécurité, on le cache de base en CSS */
}
.btn-ratio:hover {
  background-position: 100% 0%;
	font-weight: bold;
}

/* Sélection (au clic) */
.btn-ratio.active {
  background-position: 50% 0%;
}

/* On n'active le flex et la visibilité que pour le PC */
@media (min-width: 576px) {
    .btn-ratio.d-sm-flex {
        display: flex !important;
        justify-content: center;
        align-items: center;
    }
}

.btn-text {
    font-size: clamp(14px, 3.5vw, 36px);
		color: #d2d0cc;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    padding: 0px;
		margin : 0px;
}
/* Survol */
 .nav>li>a:hover {
	background-color: inherit;
}

body {
    margin: 0;
    min-height: 100vh;
		background-color: #101C29;
    background-image: var(--bg-image);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    background-attachment: fixed;
}

.bkg {
	background-image: var(--bg-image);
	background-size: cover;
}

.footer-ai-link {
    font-size: 0.5rem; /* Taille de police réduite */
    opacity: 0.5;       /* Effet de transparence pour l'atténuer */
    color: inherit;     /* Prend la couleur du texte du footer */
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-ai-link:hover {
    opacity: 1;         /* Devient pleinement visible au survol */
    text-decoration: underline;
}