/*
 * Gris #40557c
 * rouge brique #842e1b 
 * bleu #0af
 */
 
 /************** Base **********************/ 
 
header{
	width: 70%;
	margin: 0 auto;
	padding-top: 10px;
	display: inline-block;
}


.base{
	width: 70%;
	text-align: left;
	line-height: 150%;
	margin: 0 auto;
}
 
/*************************************************************************************************/


.gen_up{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 auto;
    padding: 20px;
    margin: 20px 0;
	background: #f6f7f8; 
    border-radius: 5px;
    border: 1px solid #ddd; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); 
}

.gen_txt{
    flex: 1;
    text-align: justify;
    z-index: 2;
    position: relative;
    padding: 25px;

}


.gen_img {
    flex: 1;
    position: relative;
    overflow: hidden;
    max-width: 500px;
	border-radius: 5px;
}

.gen_img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.gen_img:hover img {
    transform: scale(1.05); /* léger zoom au survol */
}

.gen_img .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.2));
    pointer-events: none; /* laisse l'image cliquable */
}

/*************************************************************************************************/


.imgX2_up {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.imgX2 {
  width: calc(50% - 10px); /* toujours 2 par ligne */
  max-width: 600px;
  overflow: hidden;
  border-radius: 5px;
}

.imgX2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.imgX2:hover img {
  transform: scale(1.1);
}

/*************************************************************************************************/

.imgLarg{
	max-width: 2560px;
	margin-top: 50px;
}

.block_txt{
    border-radius: 10px;
	padding: 25px;
    border-radius: 5px;
	background: #f6f7f8;
    border: 1px solid #ddd; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
	text-align: center;
}

.block_txt{
    border-radius: 10px;
	padding: 25px;
    border-radius: 5px;
	background: #f6f7f8;
    border: 1px solid #ddd; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
	text-align: center;
}



 /************** Contact **********************/

 
.gen_up_cont{
	align-items: flex-start;
	/* background: #f6f7f8; */
}


.gen_txt_cont{
    flex: 1;
    text-align: justify;
    z-index: 2;
    position: relative;
    padding: 25px;
	margin : 0 20px;
	line-height: 4;
    border-radius: 5px;
}


.contactForm{
	width: 90%;
	text-align: center;
}

.nomChamps{
	font-size: 15px;
	color:#555;
	padding-left: 20px ;
	margin-bottom: -15px;
	margin-top: 20px;
	text-align: left;
}

.champs_up{
	width: 100%;
	text-align: center;
}

.champs{
	width: 94%;
	border:solid 1px transparent;
	padding: 20px;
	border-radius:10px;
	box-shadow:2px 2px 6px #999;
	background:#fff;
	font-family:'Open Sans', sans-serif;
	font-size: 15px;
	color:#555;
	margin-top:20px;
}

.blockBoutons{
	text-align: left;
	padding-left: 50px;
}

.captcha{
	margin-top: 30px;
	
}

.bouton_actions {
	border:solid 1px transparent;
	padding: 5px;
	border-radius:5px;
	box-shadow:2px 2px 6px #999;
	background:#fff;
	font-size: 13px;
	font-family:'Open Sans', sans-serif;
	color:#555;
	margin:20px 10px 20px 10px;
	display: inline-block;
}


.bouton_actions:hover {
	border:solid 1px #ccc;
	box-shadow: 2px 2px 6px transparent;
	border-radius: 2px;
}

.largTextAera{
	width: 94%;
	border:none;
	padding: 20px;
	border-radius:10px;
	box-shadow:2px 2px 6px #999;
	background:#fff;
	font-family:'Open Sans', sans-serif;
	font-size: 15px;
	color:#555;
	margin-top:20px;
}


/************** Mail **********************/




/************** Footer **********************/ 

.footer {
    background: #842e1b;
    color: #eee;
    padding: 50px 20px;
    font-family:'Open Sans', sans-serif;
	font-size: 15px;
	text-transform: uppercase;
}

.foot_up {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.foot_l {
	flex: 0 0 350px; /* largeur fixe pour le logo */
}


.foot_c,
.foot_r {
    flex: 1 1 250px;
    display: flex;
    flex-direction: column;
    gap: 5px; /* réduit l'espacement vertical */
    max-width: 300px;
    text-align: left; /* liens justifiés à gauche */
	/*border-left: solid 1px #eee;*/
}

/* Logo */
.foot_l {
    align-items: center;
    justify-content: flex-start;
    padding-top: 8px;
}
.foot_l img {
    max-width: 280px;
    height: auto;
}


/* Texte et liens */
.foot_c p,
.foot_r p,
.foot_c a,
.foot_r a {
    color: #eee;
    line-height: 0.9; /* réduit l'espacement vertical entre lignes */
    text-decoration: none;
    text-align: left; /* liens alignés à gauche */
}

.foot_c a:hover,
.foot_r a:hover {
    color: #0af;
}

.sep {
    width: 1px;
    background: #40557c;
    height: 120px;
    flex-shrink: 0;
}


/* ----------------------------------
   RESPONSIVE (mobile & tablette)
---------------------------------- */
@media (max-width: 900px) {

    .foot_up {
        flex-direction: column;
        align-items: center;
        gap: 10px; /* réduit l'espacement vertical entre colonnes */
    }

    .sep {
        display: none;
    }

    .foot_l,
    .foot_c,
    .foot_r {
        align-items: center;
        text-align: center; /* centrage mobile */
        flex: 0 0 auto; /* la hauteur s'adapte au contenu */
        gap: 5px; /* espacement intérieur réduit */
    }
}