a:link, a:active, a:visited  {
    font-style : normal; 
    color : #5E6775; 
    text-decoration: none;
} 

        h1, h2, h3 {
            font-weight: 600;
        }

        h1 {
            color: #027ECD; /* Blue heading */
            margin-bottom: 10px;
        }

a:hover {
    color : #5E6775; } 

td, tr, table {
	font-family: Verdana, Helvetica, sans-serif;
	text-align: none;
	font-size: 12px;
	color: #363636;}

.optable {
	font-family: Verdana, Helvetica, sans-serif;
	text-align: none;
	font-size: 12px;}

img {
	border : 0px;}

.image{
 vertical-align: none;}

.login {
   background: #08596d;
   vertical-align: left;
   border: 1px solid #3ea2bc;
   font-size: 12px;
   color: #ffffff;}

.textarea {	
	font: normal 12px Verdana, Arial, Helvetica, sans-serif;
	border: solid 1px #D1D7E0;}

.button, .file, .select, .radio {
	background: #E3E8F0;  /*gris pale */
	font-size: x-small;}

}
.indextext {
	color: #FFFFCC;
	padding: 1px 1px 1px 1px;
	text-align: left;}

.textarea,  .file {
	background: White;
	border: 1px solid #08596d;
	font-size: 12px ;}

.text {
    font-style : normal; 
    color : #08596d; 
    text-decoration: none;}

.waitbox {
padding: 1px 1px 1px 1px;
text-align: left;}

#pagewidth{ 
margin-left:auto; 
margin-right:auto; 
width:100%; } 


function openNav() {
  document.getElementById('mySidebar').style.width = '280px';
  document.getElementById('main').style.marginLeft = '280px';
}

function closeNav() {
  document.getElementById('mySidebar').style.width = '0';
  document.getElementById('main').style.marginLeft= '0';
}


		   /* HEADER */
		
		
            .mobile-header {
            background-color: #fff;
            color: #000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 30px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }

            .logo-container {
            display: flex;
            align-items: center;
            }

            .logo-container img {
            height: 40px; /* Adjust as needed */
            margin-right: 10px;
            }

            .icon-container img {
            height: 30px; /* Adjust as needed */
            }

            .menu-toggle {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            }

            .menu-icon {
            display: block;
            width: 25px;
            height: 3px;
            background-color: #333; /* Adjust color as needed */
            margin: 5px 0;
            transition: 0.3s;
            }

            /* Style for the open state of the menu toggle */
            .menu-toggle.open .menu-icon:nth-child(1) {
            transform: rotate(45deg) translate(5px, 6px);
            }

            .menu-toggle.open .menu-icon:nth-child(2) {
            opacity: 0;
            }

            .menu-toggle.open .menu-icon:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -6px);
            }

            /* Example basic mobile menu (hidden by default) */
            .mobile-menu {
            position: fixed;
            top: 110px; /* Adjust based on header height */
            right: 0;
            width: 50%;
            background-color: #f9f9f9;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 10;
            display: none; /* Hidden by default */
            }

            .mobile-menu.open {
            display: block;
            }

            .mobile-menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
            }

           .mobile-menu li {
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            }

            .mobile-menu li:last-child {
            border-bottom: none;
            }

            .mobile-menu a {
            text-decoration: none;
            color: #333;
            }	



	/* CONTAINERS */


         .container {
            max-width: 95%;
            margin: 10px auto;
            padding: 5px;
        }


	/* QUESTIONS */	
		

        .container-qa {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;
            overflow: hidden;
        }
        .question-qa {
            padding: 15px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            background-color: #fff;
            border-bottom: 1px solid #ddd;
        }
        .answer-qa {
            padding: 35px;
            background-color: #f9f9f9;
            display: none; /* Hidden by default */
        }
        .toggle-icon-qa {
            font-size: 20px;
            line-height: 1;
            transition: transform 0.3s ease;
        }
        .qa-container.active .toggle-icon {
            transform: rotate(45deg); /* Rotates the plus to become an 'x' or minus */
        }



			/* WHY CHOOSE */
		
		
        .section {
            padding: 20px;
            text-align: center;
        }

        .section-title {
            font-size: 1.5em;
            margin-bottom: 15px;
        }

        .section-content {
            margin-bottom: 20px;
        }

        .section-image {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
        }

        /* Responsive adjustments for smaller screens */
        @media (max-width: 600px) {
            .hero {
                height: 300px;
            }

            .hero-title {
                font-size: 1.5em;
            }
        }
		
	   .container-val {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        }		
		
		.value-proposition-section {
        padding: 10px 0;
        }

        .value-proposition-section h2 {
        font-size: 2.5em;
        color: #222;
        text-align: center;
        margin-bottom: 40px;
        }

        .value-items {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;
        }

        .value-item {
        text-align: center;
        padding: 30px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        }

.value-item img {
    height: 60px;
    margin-bottom: 15px;
    color: #007bff; /* Style your icons */
}

.value-item h3 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
}

            .value-item p {
            color: #666;
            }




        /* VESTA */

      :root {
            --vesta-teal: #0d6e82;
            --vesta-accent: #027ECD;
            --text-dark: #333;
            --bg-gray: #f4f4f4;
        }

        body {
            margin: 0;
            padding: 20px;
            background-color: var(--bg-gray);
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            display: flex;
            justify-content: center;
        }


       /* Mobile Card Container */
        .id-card {
            width: 100%;
            max-width: 350px;
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }

        /* Top Header Section */
        .header {
            background-color: var(--vesta-teal);
            color: white;
            padding: 20px;
            position: relative;
            border-top: 15px solid var(--vesta-accent);
        }

        .header h1 {
            margin: 0;
            font-size: 28px;
            letter-spacing: 2px;
            text-align: center;
        }

        .header p {
            margin: 10px 0 0 0;
            font-size: 14px;
            line-height: 1.3;
            font-weight: 500;
        }

        /* Security Elements (QR & Seal) */
        .security-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }

        .qr-code {
            width: 70px;
            height: 70px;
            background: white;
            padding: 5px;
            border-radius: 4px;
        }

        .seal {
            width: 70px;
            height: 70px;
            border: 2px solid rgba(255,255,255,0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            text-align: center;
        }

        /* Details Section */
        .details {
			text-align: left;
            padding: 25px 20px;
            color: var(--text-dark);
        }

        .detail-item {
            margin-bottom: 8px;
            font-size: 13px;
            text-transform: uppercase;
        }

        .detail-item strong {
            display: inline-block;
            width: 110px;
            color: #666;
        }

        /* Authorization Text */
        .auth-status {
            margin-top: 25px;
            color: var(--vesta-teal);
            font-weight: bold;
            font-size: 14px;
            text-align: center;
            border-top: 1px solid #eee;
            padding-top: 15px;
        }

        /* Barcode Footer */
        .barcode-section {
            padding: 20px;
            text-align: center;
            background: #fff;
        }

        .barcode-placeholder {
            width: 80%;
            height: 40px;
            border-left: 2px solid black;
            border-right: 4px solid black;
            background: repeating-linear-gradient(
                90deg,
                #000,
                #000 2px,
                #fff 2px,
                #fff 4px
            );
            margin: 0 auto 5px;
        }

        .id-number {
            font-family: monospace;
            font-size: 12px;
            color: #555;
        }



		/* FOOTER */	
			
		.container-footer {
            max-width: 95%;
            margin: 10px auto;
            padding: 10px;
        }
		
        .highlight-footer {
            background-color: #f4f4f4; /* Light grayblue highlight */
            padding: 10px;
            padding-top: 5px;			
            padding-bottom: 20px;
            border-radius: 10px;
        }	
		
		.footer-title-bar {
           display: flex;
           align-items: center;
           background-color: transparent; /* background */
           padding: 10px;
         }


        .footer-title-bar .title {
           padding: 10px;
         }	
		
		 .icon-footer {
            /* Style your icon */
            max-height: 110px; /* Adjust as needed */
            margin-left: 15px;
        }	
		

		/* COPYRIGHT */
		
	  .container-cpy {
            max-width: 90%;
            margin: 10px auto;
            padding: 5px;
        }	


/*cadres gauche, droit et central ----------------------------------------------------*/ 

#table_centrale{
 position:relative; 
 width:100%;
border-collapse:collapse; } 

#maincol{
 vertical-align:top;
 padding-top: 0px;
 padding-left: 0px;
 padding-right: 0px;
 border-top: 0px #98A4B9;
 border-right:0px #98A4B9;
 border-left: 0px #98A4B9;
 border-bottom: 0px #98A4B9;
 border-style:solid;
 width:100%; }

/*pied de page du site ----------------------------------------------------*/ 

#footer{
 width: 90%;
 height:60px;
/* background-color: #98A4B9;*/
 border-top: 0px #98A4B9;
 border-right:0px #98A4B9;
 border-left: 0px #98A4B9;
 border-bottom: 0px #98A4B9;
 border-style:solid;
 background-repeat: no-repeat;} 

/*fonction impression ----------------------------------------------------*/ 
 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 

/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocolls, #maincol{width:100%; float:none;}
}


/*Blocs ----------------------------------------------------------------------*/

.block_content {
font: 10px verdana, helvetica, sans-serif;
border-bottom:0px solid #98A4B9; 
border-left: 0px solid#98A4B9;
border-right: 0px solid #98A4B9;
border-top: 0px solid #98A4B9;
-moz-border-radius: 0px;
padding-left:0px; 
padding-right:0px; 
width: 100%;}


/*  aspect des blocs cadre central aspect uni bleu clair ---------------------------------------------*/	

.block_title-center {
font: 10px verdana, helvetica, sans-serif;
font-style:bold;
color:#ffffff;
background-color:#9DA5BA;
background-repeat: no-repeat;
width: 100%;
text-indent:0pt;
}

.block_content-center {
font: 10px verdana, helvetica, sans-serif;
color:#08596d;
border-bottom:0px solid #9cbcc4; 
border-left: 0px solid #9cbcc4;
border-right: 0px solid #9cbcc4;
border-top: 0px solid #9cbcc4;
-moz-border-radius: 0px;
width: 100%;

}

/*  aspect des articles ---------------------------------------------*/

.block_title {

font: bold 10px verdana, helvetica, sans-serif;
color: #08596d;
background-image:url(../images/fleche-orange.png);
background-repeat: no-repeat;
text-indent:13pt;

}

.postedby {
font: 9px verdana, helvetica, sans-serif;
color: #9cbcc4;
text-align:left; 
}
/*------------------- couleurs des liens posteby*/

.postedby a  {
font: 9px verdana, helvetica, sans-serif;
color:#9cbcc4;}

.postedby a:hover {	
text-decoration: none;	
color: #000000;}

.block_content-texte-article {
font: 10px verdana, helvetica, sans-serif;
padding-top:1px;
padding-bottom:2px;}

.morelink {
font: 9px verdana, helvetica, sans-serif;
text-align:left; 
border-top:1px dashed #08596d; 
padding-top:2px}	

.block_title-post {
font: bold 10px verdana, helvetica, sans-serif;
color: #08596d;}

/* ------------------------------------aspect des preferences administration*/

.checkbox {
	background: #E3E8F0;  /*gris pale */
	border: 1px solid #08596d;
	font-size: x-small;}

.select {
	background: #E3E8F0;  /*gris pale */
	border: 1px solid #08596d;
	font-size: small;}
 

/* ------------------------------------aspect module sections */

.title {
    color: #08596d;
	font-size: 18px;
    font-style:bold;}


.variations_css .top-menu {
            background-color: #fff; /* Light gray background */
            padding: 0px; /* Padding around the menu items */
            display: flex; /* Use flexbox for layout */
            justify-content: space-between; /* Distribute space between logo and menu */
            align-items: center; /* Vertically center items */
            top: 0;
            left: 0%;
            right: 0%; /* Make it full width */
            z-index: 100; /* Ensure it's above other content */
        }
		
.variations_css .menu2 {
            display: flex;
            justify-content: space-between; /* Distribute items evenly */
            align-items: center; /* Vertically align items */
            padding: 5px; /* Add some padding */
            width: 100%; /* Ensure full width */
            box-sizing: border-box; /* Include padding in width calculation */
        }	

.variations_css .ico {
            /* Style your logo */
            height: 50px; /* Example height */
        }

.variations_css .menu-icons {
            display: flex; /* Use flexbox for icons */
            gap: 10px; /* Space between icons */
            margin-left:90px; /* Space from menu button */
        }

.variations_css .menu-icons img {
            height: 30px; /* Adjust icon size */
            width: 30px; /* Adjust icon size */
            cursor: pointer; /* Make icons clickable */
        }

.variations_css .menu-button {
            background: none; /* Remove default button background */
            border: none; /* Remove default button border */
            padding: 10px 0px; /* Add some padding */
            cursor: pointer; /* Make it clickable */
            font-size: 35px; /* Adjust font size */
        }

        /* Optional: Style the menu button with a hamburger icon */
.variations_css .menu-button span {
            display: block;
            width: 30px;
            height: 30px;
            background-color: #333; /* Dark gray lines */
            margin: 5px 0;
        }

        /* Example styles for a dropdown menu (hidden by default) */
.variations_css .dropdown-menu {
            display: none; /* Hide by default */
            position: absolute; /* Absolute positioning */
            top: 50px; /* Position below the menu button */
            right: 10px; /* Align to the right */
            background-color: #fff; /* White background */
            border: 1px solid #ccc; /* Light gray border */
            padding: 20px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
        }

.variations_css .dropdown-menu a {
            display: block; /* Make links stack vertically */
            padding: 5px 0; /* Add padding to links */
            text-decoration: none; /* Remove underlines from links */
            color: #333; /* Dark gray text */
        }

        /* Show the dropdown when the menu button is clicked */
.variations_css .show {
            display: block;
        }
		
.variations_css .container {
            max-width: 96%;
			background-color: transparent; /* Transparent */
			align-items: top; /* Align items to the top */   
            margin: 15px auto;
            margin-top: 15px;
            border-radius: 8px;
        }
.variations_css .container-2 {
            max-width: 90%;
			background-color: #e9ecef; /* Light gray highlight */
            padding-top: 10px;
            padding-left: 20px;			   
			padding-bottom: 25px;   
            margin: 0px auto;
            margin-top: 0px;
            border-radius: 8px;
        }
		
.variations_css .left-icon {
            display: flex;
            flex-direction: column; /* Vertical arrangement */
            align-items: flex-start; /* Align banner to the top */	
            gap: 0px; /* Spacing between icons */			

        }

.variations_css .banner {
            flex: 1; /* Takes up 2 shares of available space */
            display: flex;
            justify-content: center; /* Center the banner horizontally */
            align-items: flex-start; /* Align banner to the top */
            padding: 8px; /* Add some padding */
        }

.variations_css .banner img {
            max-width: 100%; /* Banner scales down to fit container */
            height: auto; /* Maintain aspect ratio */
        }

.variations_css .right-icons {
            display: flex;
            flex-direction: column; /* Vertical arrangement */
            align-items: flex-start; /* Align banner to the top */	
            gap: 10px; /* Spacing between icons */
        }

.variations_css .right-icons img {
            max-width: 50px; /* Adjust as needed */
            height: auto;
        }

        /* Media query for smaller screens (optional) */
        @media (max-width: 400px) {
.variations_css .left-icon {
                max-width: 40px;
            }
.variations_css .right-icons img {
                max-width: 25px;
            }
        }
		
.variations_css .container-bmenu {
            display: flex;
            flex-direction: column; /* Stack elements vertically */
            width: 100%;
        }

.variations_css .button-container {
            padding: 10px;
            text-align: center; /* Center the button */
        }

.variations_css .top-button {
            background-color: #027ECD; /* Example color */
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

.variations_css .columns {
            display: flex;
            flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
        }

.variations_css .column {
            flex: 1 0 0; /* Equal width columns */
            padding: 15px;
            box-sizing: border-box; /* Include padding in width calculation */
            border: 1px solid #ccc; /* Optional border */
            margin: 5px; /* Add some margin around columns */
        }

.variations_css .column a {
            display: block; /* Make links stack vertically */
            padding: 5px 0;
            text-decoration: none;
            color: #333;
        }
		
.variations_css .link-list {
            display: flex; /* Use flexbox for vertical alignment */
            flex-direction: column; /* Stack links vertically */
            align-items: flex-start; /* Align links to the left */
            margin-top: 30px; /* Add some space above the links */
            margin-bottom: 35px; /* Add some space above the links */
        }

.variations_css .link-list a {
            display: block; /* Each link takes full width */
            padding: 5px 0; /* Add some vertical padding */
            text-decoration: none;
            color: #447291; /* Example color */
        }		

        /* Media query for smaller screens (e.g., mobile) */
        @media (max-width: 600px) {  /* Adjust breakpoint as needed */
.variations_css .column {
                flex: 1 0 100%; /* Make each column take full width */
                margin: 5px 0; /* Adjust margin for stacked columns */
            }
        }

		






/* ------------------------------------aspect general */

.bg1		{background-color:#ffffff} /* fond cellule bloc centre, bloc froit, admin*/

.bg2		{/* couleur bordure*/
background-color:#BEC8DA;
border-bottom:1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-top: 1px solid #ffffff;
border-collapse:collapse;} 

.bg3		{background-color:#E3E8F0} /* en tete des cadres admin*/

.bg4		{background-color:#ffffff} /* pied de page bloc forum*/

.bg4		{background-color:#027ECD} /* pied de page bloc forum*/



/* ------------------------------------mylinks */

.mylinks_bg1		{background-color:#ffffff;border-collapse:collapse;} /* fond cellule bloc centre, bloc froit, admin*/
.mylinks_bg3		{background-color:#8cc8d7;border-collapse:collapse;} /* en tete des cadres admin*/