/*
    Monitorpack //  CSS template
	=================================
	Main EN responsive
	---------------------------------
*/

@charset "utf-8";

/* reset */
*{
	margin:0;
	padding:0;
	outline:0;
}
img {
	border: 0; 
}
.clear { 
	clear: both; 
}
.line {
	clear: both;
	padding: 15px 0 0;
	margin: 0 0 25px;
	border-bottom: 1px solid #ddd;
}

body { 
	/*font: .9em Arial, Verdana, Tahoma, Sans-Serif; */
	/* font: 1em Arial, Verdana, Tahoma, Sans-Serif; */
	font: 1.1em "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
	/* background: #ffffff url(../images-corp/bgtile.jpg) repeat-x; */
	color: #555; 
}



/* Start cookies  ====================================================================  */

/* Le fond grisé et le centrage */
.cookie-overlay {
    display: none; /* sera activé par JS */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* La pop-up elle-même */
.cookie-popup {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
}

/* Boutons */
.cookie-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.cookie-popup button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.cookie-popup button:hover {
    background-color: #388e3c;
}

.cookie-popup button:last-child {
    background-color: #f44336;
}

.cookie-popup button:last-child:hover {
    background-color: #c62828;
}

/* End Cookies  ====================================================================  */


/* Start popup button  ====================================================================  */

/* Conteneur pour positionner la pop-up par rapport au bouton */
.info-container {
  position: relative;
  display: inline-block;
}

/* Bouton d'information (plus petit) */
.info-btn {
  width: 25px; /* plus petit qu'avant */
  height: 25px;
  border-radius: 50%;
  background-color: #007bff;
  color: white;
  font-size: 14px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
}

/* Fenêtre pop-up cachée par défaut */
.popup {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 120%; /* au-dessus du bouton */
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  width: 200px;        /* largeur fixe */
    max-width: 90vw;     /* optionnel, pour ne pas dépasser l’écran */
  border-radius: 5px;
  transition: opacity 0.3s;
  z-index: 10;
}

/* Afficher la pop-up au survol */
.info-container:hover .popup {
  visibility: visible;
  opacity: 1;
}

/* End popup button  ====================================================================  */



/* Start Pricing Block update ====================================================================  */

/* Conteneur général */

.solar-button-container {
    display: flex;
    flex-wrap: wrap;
	gap: 30px;
    /* gap: 30px;
    justify-content: space-between;*/
	justify-content: flex-start; /* Important pour que les marges s'appliquent correctement */
    margin-top: 50px;
    padding: 0 20px;
}

/* Bloc de tarification */
.solar-custom-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%; /* NEW: largeur fluide */
    max-width: 400px; /* NEW: limite la taille max */
   /* width: 400px;  Largeur du bloc */
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #e1e8f0;
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* Effet au survol (hover) */
.solar-custom-block:hover {
    transform: translateY(-10px); /* Légère élévation */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Ombre plus marquée */
}

/* Titre du bloc */
.solar-custom-block h5 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 15px 0;
    text-transform: uppercase;
}

/* Prix */
.solar-custom-block .solar-pricing-price {
    font-size: 32px;
    font-weight: bold;
    color: #0067b8;
    margin: 10px 0;
}

/* Description */
.solar-custom-block .solar-pricing-description {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 20px;
}

/* CTA (Call to Action) - Bouton */
.solar-custom-block .solar-cta-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0067b8;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.solar-custom-block .solar-cta-button:hover {
    background-color: #005a99; /* Couleur au survol */
}

/* Image d'arrière-plan */
.solar-custom-block::before {
    content: '';
    background-image: url('images-corp/images64/background-pattern.jpg'); /* Exemple d'image de fond */
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    z-index: -1; /* En arrière-plan */
}

/* Responsivité : Adapte la largeur sur mobile */
@media (max-width: 768px) {
    .solar-custom-block {
        width: 90%; /* Remplir toute la largeur */
        margin: 10px 0;
    }
}


/* End Pricing Block update ====================================================================  */

/* Start IA update ====================================================================  */

/* Styles généraux pour le logo et le titre */
.logo-title-container {
    display: flex;
    align-items: center;
    padding: 10px; /* Ajout d'un padding pour l'espacement interne */
}

.logo {
    height: 50px; /* Taille par défaut du logo */
    margin-right: 10px;
}

.separator {
    width: 1px;
    height: 30px;
    background-color: #ccc;
    margin-right: 10px;
}

.title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

/* Styles spécifiques pour les petits écrans */
@media (max-width: 768px) {
    .logo-title-container {
        justify-content: center; /* Centrer le logo et le titre sur mobile */
        padding: 5px; /* Réduire le padding pour économiser de l'espace */
    }

    .logo {
        height: 30px; /* Réduire la taille du logo sur mobile */
    }

    .title {
        font-size: 18px; /* Réduire la taille de la police du titre sur mobile */
    }

    .topnav {
        padding: 5px 0; /* Réduire la hauteur de la barre noire */
    }

    .topnav a.icon {
        font-size: 20px; /* Réduire la taille de l'icône du menu */
    }
}



/* Stop IA update ====================================================================  */

/* Start IA update Combo  ====================================================================  */


.custom-select {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    color: #333;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.custom-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    outline: none;
}

.custom-select option {
    padding: 10px;
}


/* Stop IA update Combo  ====================================================================  */

/* Start IA update Video  ====================================================================  */

.video-container video::-webkit-media-controls {
	display: none !important; /* Chrome, Safari */
  }
  
  .video-container video::-moz-media-controls {
	display: none !important; /* Firefox */
  }
  
  .video-container video::-ms-media-controls {
	display: none !important; /* Internet Explorer */
  }
  
  .video-container video {
	outline: none; /* Évite les contours au survol */
  }
  
/* Stop IA update Video  ====================================================================  */

/* Start mmeet the team ====================================================================  */

/* Three columns side by side */
.column {
  float: left;
  /* width: 33.3%; */
  width: 40%; 
  margin-bottom: 16px;
  padding: 0 8px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

/* Add some shadows to create a card effect */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Some left and right padding inside the container */
.container {
  padding: 0 16px;
}

/* Clear floats */
.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: #555;
}
/* End meet the team ====================================================================      */


/* Start small meet the team====================================================================  */

/* Three columns side by side */
.smallcolumn {
  float: left;
  /* width: 33.3%; */
  width: 30%; 
  margin-bottom: 16px;
  padding: 0 8px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 650px) {
  .smallcolumn {
    width: 100%;
    display: block;
  }
}

/* Add some shadows to create a card effect */
.smallcard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Some left and right padding inside the container */
.smallcontainer {
  padding: 0 16px;
}

/* Clear floats */
.smallcontainer::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.smalltitle {
  color: grey;
}

.smallbutton {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.smallbutton:hover {
  background-color: #555;
}
/* End meet the team ====================================================================      */

/* start navbar responsive =========================== */

 /* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
  /* background-color: #4CAF50; */
   background-color: #FF9900;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  /* z-index: 1; fev 2020 */
  z-index: 100;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%; /* width ==================================================================== */
    text-align: left;
  }
} 

/* end navbar responsive =================================================================================== */

/* Start column responsive =================================================================================== */


/* Définition des colonnes */
.columnA {
	float: left;
	width: 80%; /* Ajustez selon vos besoins */
  }
  
  .columnB {
	float: left;
	width: 20%; /* Ajustez selon vos besoins */
  }
  
  /* Clear floats */
  .row:after {
	content: "";
	display: table;
	clear: both;
  }
  
  /* Ajustements responsive */
  @media screen and (max-width: 900px) {
	.columnB {
	  width: 50%; /* Assurez-vous que columnB ne prend pas trop d'espace */
	}
  }
  
  @media screen and (max-width: 600px) {
	.columnA {
	  width: 100%; /* Pleine largeur sur les écrans plus petits */
	}
	
	.columnB {
	  width: 100%; /* Pleine largeur sur les écrans plus petits */
	  margin-top: 10px; /* Optionnel : ajouter un peu d'espace entre les colonnes empilées */
	}
  }
  
  /* Assurez-vous que columnA ne devienne pas trop étroite */
  @media screen and (max-width: 600px) and (min-width: 401px) {
	.columnA {
	  width: 70%; /* Ajustez en fonction de vos besoins de design */
	}
  }
  
  @media screen and (max-width: 400px) {
	.columnA {
	  width: 100%; /* Pleine largeur sur les très petits écrans */
	}
  }
  

/* End responsive column ======================================= */


/* typography and links */
a { 
	text-decoration: none;
	color: #333;
}

p  { 
	margin: 0 0 17px; 
	line-height: 1.6em; 
}

/* headings */
h1, h2, h3, h4, h5 {
	font-weight: normal;
}
h1 { 
	float: left; 
	font-size: 2.1em; 
	color: #0067b8;
	letter-spacing: -1.4px;	
	margin: 0 0 30px 0;
	padding: 34px 0 0 10px;
}
h1 a { 
	color: #fff; 
}
h2 { 
	margin: 0 0 15px; 
	font-size: 1.9em; 
	color: #FF9900; 
}
h2.inner { 
	border-bottom: 1px solid #ddd; 
	margin: 0 0 25px; 
	padding: 0 0 10px; 
}
h3 { 
	margin: 0 0 7px;  
	font-size: 1.3em; 
	clear: both; 
	color: #555; 
	line-height: 1.3em; 
}
h4 { 
	margin: 0 0 10px; 
	font-size: 1.2em; 
	color: #000; 
}
h5 {
	font-size: 1em;
	color: #eee; 
	margin: 0 0 14px;
}


#bg { 
	/* background: url(../images-corp/bg.jpg) no-repeat center top; */
}

/* content holder */
.wrap { 
	margin: 0 auto; 
	/* width: 990px; -fev 2020*/
	width: 80%; /* width 70 ==================================================================== */
}

/* menu */


#mainmenu { 
	float: right; 
	padding: 39px 0 0; 
}
#menu ul { 
	float: right; 
}
#menu li { 
	display: inline; 
	float: left; 
	margin: 0 0 0 18px; 
}
#menu li a { 
	display: block; 
	color: #999; /* color menu title */
	padding: 7px; 
	font-size: 1.1em; 
	border: 1px solid transparent; 
}
#menu a:hover, #menu li.current a { 
	border-color: #444;  /* color frame title */
}
#menu li ul { 
	top: 98px;
	background: url(../images-corp/dot.png); 
	padding: 3px;
	/*font-size: .92em; */
	font-size: 1em;
	position: absolute; 
	display: none; 
	z-index: 100; 	
}
#menu li ul li { 
	float: none; 
	display: inline; 
	margin: 0; 
	padding: 0; 
	clear: left;
}

#menu li ul li a { 
	color: #fff; /* font color menu second level */
	margin: 4px; 
	white-space: nowrap;
	padding: 8px;	
}
#menu li ul li a:hover {
	background: #2C2D2F; /* color background hover second level */
	border-color: #2C2D2F; /* border color background hover second level */
}

/* pitch slideshow */

#pitch { 
	clear: both; 
	height: 296px; 
	background: url(../images-corp/shadow.png) no-repeat left bottom;
	margin: 0 0 25px;
}
#slideshow {
    position:relative;
    height: 310px;
}
#slideshow img {
	float: left;
}
#slideshow div {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
}
#slideshow div.active {
   z-index: 10;	
}
#slideshow div.last-active {
    z-index: 9;
}

#zoom { 
	z-index: 11; 
}

/* pitch overlay */
.overlay {
	clear: both;
	float: left; 
	z-index: 100;
	position: relative; 
	margin: 100px 0 0; 
}
.overlay h2{ 
	color: #fff; 
	font-size: 2em;
	background: url(../images-corp/dot.png);
	padding: 16px;
	margin: 0;
	float: left;
	width: 300px; /* width ==================================================================== */
}
.overlay p {
	clear: both;
	background: #fff;
	padding: 16px;
	width: 300px; /* width ==================================================================== */
}

#slideshow:hover .arrow {
	background: url(../images-corp/dot.png);
}

.arrow { 
	float: right;
	position: relative;
	width: 65px; /* width ==================================================================== */
	height: 63px;
	margin: -180px 0 0;
	z-index: 100;
}

.arrow a { 
	float: left;
	background: url(../images-corp/pitcharrow.gif) no-repeat center center; 
	width: 15px; /* width ==================================================================== */
	height: 24px;
	padding: 19px 25px;
}


/* inner pitch */
#inner-pitch {
	clear: both;
}
#inner-pitch .overlay {
	margin: 0;
	width: 920px; /* width ==================================================================== */
}

/* main content */
#main { 
	clear: left; 
	float: left; 
	 /* width ==================================================================== */
	/* border-right: 1px dotted #ddd; */
	padding: 0 30px 0 0;
	margin: 0 0 30px;
}

/* main content large */
#mainlargeindex { 
	clear: left; 
	float: left; 
	/* was 680 */
	/*  width: 800px; -fev 2020 */  /* width ==================================================================== */
	border-right: 1px dotted #ddd;
	padding: 0 30px 0 0;
	margin: 0 0 30px;
}

/* main content large */
#mainlarge { 
	clear: left; 
	float: left; 
	/* was 680 */
	width: 930px;  /* width ==================================================================== */
	border-right: 1px dotted #ddd;
	padding: 0 30px 0 0;
	margin: 0 0 30px;
}

#intro { 
	padding: 0 0 20px; 
	margin: 0 0 25px;
	border-bottom: 1px dotted #ddd; 
}

/* holder for page content */
#page { 
	
}
.justify { 
	text-align: justify; 
}

/* images align */
.left { 
	float: left; 
	margin: 0 15px 5px 0; 
}
.right { 
	float: right; 
	margin: 0 0 5px 15px; 
}

/* tables */
.table { 
	border-collapse: collapse;
	width: 100%; /* width ==================================================================== */
	margin: 0 0 30px;	
}
.table td {
	padding: 10px;
	border-bottom: 1px solid #ddd;
}
.table thead td {
	font-weight: bold;
	border-bottom: 3px double #ddd;
	border-top: 1px solid #ddd;
	background: #f4f4f4;
}
.table .odd td { background: #ECECFF; }

/* blog posts */
.blog-post  { 
	border-bottom: 1px solid #ddd; 
	margin: 0 0 30px; 
}
.blog-date { 
	float: left; 
	/* width: 40px; */
		width: 40px; 
	text-align: right; 
	font-size: .9em; 
	padding: 4px 0 0;
}
.blog-date span { 
	font-size: 1.8em; 
}
.blog-body { 
	float: right; 
	/* width: 590px; */
	border-left: 1px solid #ddd;
	padding: 0 0 0 22px;
}

/* lists */
#page ul, #page ol { 
	margin: 0 0 25px 27px; 
}
#page li { 
	padding: 6px 0; 
	list-style: square; 
}

/* boxes */
.half, .third { 
	float: left; 
	width: 292px; 
	background: #fff; 
	padding: 15px; 
	margin: 0 30px 30px 0; 
}
.third {
	width: 175px;
}

.last { 
	margin-right: 0; 
}

/* home page bits */
#bits {
	clear: both;
	margin: 0 0 25px; 
}

.bit {
	float: left;
	width: 198px;
	padding: 0 35px 0 0;
}
.bit h4 {
	margin: 0 0 18px;
}
.bit img { margin: 0 0 8px; }

.bit p {
	font-size: 1em;
}
.bit.last { padding-right: 0; }
.more { margin: 0; }


/* sidebar */
#side { 
	float: right; 
	width: 220px; /* width ==================================================================== */
	font-size: 1em;
}
#side h4 {
	margin: 0 0 23px;
	font-size: 1.3em;
}

.news { 
	border-bottom: 1px dotted #ddd;
	margin: 0 0 11px;
 
}
.news h5 { 
	margin: 0 0 5px; 
	font-size: 1.2em;
}
.news p {
	margin: 0 0 11px;
}

#quote {
	margin: 0 0 30px;
	padding: 20px 0 0 0;
	font-size: .94em;
}

/* side menu */
.side-menu li { 
	list-style: none; 
	padding: 10px 4px; 
	border-bottom: 1px solid #ddd; 
}

/* forms */
fieldset {
	border: 0;
}
label { 
	display: block;
	color: #444;
	padding: 0 0 2px;
}
input.text, textarea.text {
	width: 250px;
	padding: 5px;
	border: 0;
	border: 1px solid #ddd;
	margin: 0 0 3px;
}
textarea.text  {
	width: 400px;
	height: 120px;
}
input.submit {
	height: 40px;
	color: #fff;
	padding: 7px 10px;
	border: 0;
	font-weight: bold;
	background: #777777;
}

input.submit_bleu {
font-size: 14px;
	height: 50px;
	color: #ffffff; /* First color before over */
	padding: 7px 10px;
	border: 0;
	font-weight: bold;
	background: #0067b8; /* #FF9900; */
}


input.submit_orange {
	font-size: 14px;
	height: 50px;
	color: #ffffff; /* First color before over */
	padding: 7px 10px;
	border: 0;
	font-weight: bold;
	background: #FF9900; /* #FF9900; */
}


input.submit_bleu_sombre {
	font-size: 14px;
	height: 50px;
	color: #ffffff; /* First color before over */
	padding: 7px 10px;
	border: 0;
	font-weight: bold;
	background: #0d39a1; /* #FF9900; */
}

/* footer */
#footer { 
	clear: both; 
	color: #999; 
	/* background: url(../images-corp/footertile.jpg) repeat-x; */
	font-size: .9em;
}
#footerbg {
	padding: 35px 0 15px 0;
	/* background: url(../images-corp/footer.jpg) no-repeat center top; */
}
#footer p { 
	margin: 0 0 12px;
	padding: 6px 0;
}
#footer_menu {
	float: right;
	padding: 4px 0 0;
}
#footer a { 
	color: #999; 
	margin: 0 5px 0 0; 
	padding: 6px 10px;
	/* background: url(../images-corp/dot.png) no-repeat left center; */ 
	border: 1px solid transparent;
}
#footer a:hover {
	border-color: #555;
}
#fleft {
	clear: both;
	padding: 25px 0 0;
	font-size: .94em;
}

#copy { 
	color: #777; font-size: 1.5em; 
}
#copy span { 
	color: #999; 
}




/* Style pour la question */
.question {
    background-color: #f0f0f0; /* Fond gris clair pour la question */
    color: #333; /* Texte foncé */
   /*  font-weight: bold; Texte en gras pour les questions */
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

/* Style pour la réponse */
.answer {
    background-color: #e6f7ff; /* Fond bleu clair pour la réponse */
    color: #005580; /* Texte bleu foncé */
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
}




/* Style général pour les conteneurs de boutons */
.button-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px; /* Espacement entre les boutons */
}

/* Styles du premier bouton */

.custom-block {
	display: block;
	width: 200px; /* Largeur ajustable */
	height: 80px; /* Hauteur ajustable */
	background-color: #2c3e50; /* Couleur de fond */
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	color: white;
	transition: background-color 0.3s, color 0.3s;
	position: relative;
	overflow: hidden;
	padding: 10px;
	box-sizing: border-box;
}

.custom-block:hover {
	background-color: #34495e; /* Couleur au survol */
	color: #a9a9a9;
}

.custom-block .content {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.custom-block span {
	font-size: 16px;
	font-weight: bold;
}

.custom-block::before {
	content: '';
	background: url('../images-corp/support_informatique.png') no-repeat center center; /* Image de fond */
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.3; /* Transparence de l'image de fond */
	z-index: 0;
}


/* Styles du deuxième bouton *********************************************** */

.custom-block-2 {
	display: block;
	width: 250px; /* Largeur ajustable */
	height: 80px; /* Hauteur ajustable */
	background-color: #0067b8; /* Couleur de fond différente */
	/* background-color: #2980b9; /* Couleur de fond différente */
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	color: white;
	transition: background-color 0.3s, color 0.3s;
	position: relative;
	overflow: hidden;
	padding: 10px;
	box-sizing: border-box;
}

.custom-block-2:hover {
background-color: #3498db; /* Couleur au survol */
	color: #ffffff; /* Couleur du texte au survol */
}

.custom-block-2 .content {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.custom-block-2 span {
	font-size: 16px;
	font-weight: bold;
}

.custom-block-2::before {
	content: '';
	/* background: url('../images-corp/back-white.jpg') no-repeat center center; /* Même image de fond pour le deuxième bouton */
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.1; /* Transparence de l'image de fond */
	z-index: 0;
}

/* Responsivité */
@media (max-width: 768px) {
	.custom-block,
	.custom-block-2 {
		width: 100%; /* Pleine largeur sur les petits écrans */
	}
}

  
/*  Respnsivve banner ****************************************************************** */ 


/* Bannière sous le menu */
.banniere-container {
    position: relative; /* Permet de positionner les éléments texte et bouton */
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    overflow: hidden;
    max-width: 100vw;
}




/* Image bannière */
.banniere-image {
    max-width: 100%;
    width: 100%;
    height: auto; /* Maintient le ratio */
    min-height: 300px; /* Détermine la hauteur minimale (ajuster selon vos besoins) */
    display: block;
}


/* Conteneur du texte */
.banniere-texte {
    position: absolute; /* Permet de superposer le texte à l'image */
    top: 30%; /* Ajuster la position verticale du texte */
    left: 50%;
    transform: translate(-50%, -30%); /* Centre horizontalement */
    color: rgba(255, 255, 255, 0.9); /* Blanc légèrement transparent */
    text-align: center;
    z-index: 1; /* Place le texte devant l'image */
}

/* Style du titre */
.titre-blanc {
    font-size: 48px;
    font-weight: bold;
    margin: 0;
    padding: 0;
	color: white; /* Ajoutez cette ligne pour définir la couleur du texte en blanc */
}

/* Style du sous-titre */
.sous-titre {
    font-size: 24px;
    margin: 10px 0;
    padding: 0;
}

/* Bouton de soumission */
.submit_bleu_include {
    position: absolute; /* Positionne le bouton par rapport au conteneur */
    top: 80%; /* Position verticale du bouton */
    left: 20%; /* Position horizontale du bouton */
	transform: translate(-50%, -50%); /* Centre le bouton parfaitement */
    background-color: #0067b8;
	color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 14px;
	height: 50px;
	font-weight: bold;
}

.submit_bleu_include:hover {
    color: #a9a9a9;
}





/* Style général du conteneur */
.containerdouble {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Style des lignes */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Style des colonnes */
.column {
    flex: 1;
    padding: 10px;
}

.column.text {
    display: flex;
    align-items: center;
    justify-content: center;
}

.column.image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive : à partir de 768px, les colonnes passent en bloc vertical */
@media (max-width: 968px) {
    .row {
        flex-direction: column;
    }
}