/* Pour la dimension des boites identiques même avec un padding   */
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}



/* Pour les ordinateurs "Times New Roman", Times, serif*/
HTML
{
    font-size: 100%;    
}


body
{

 font: 1.1em/1em "Times New Roman", Times, arial;
 
  
 max-width:1200px;
 margin: auto;

}

input, select, textarea:
{
 font-size: 100%;
 }
 
 h1{
    
    font: 2em/1em;
	line-height:30px;
}

h2{
    
    font: 1.5em/1em;
}

h3{
    
    font: bold 1.2em/1em ;
	margin-bottom: 0.5em;
	margin-top: 0em;
} 

#logo
{
  width :100% ;
  height : auto;        
  background : ;
  float: none;
}

#logo img {
  width: 100%;
  height: auto;
  display: block;
}

#menu
{
	display:none ;
	
}

#gauche
{
  width :20% ;
  height : auto;        
  background : ;
  float: left;
  padding-left: ;
  word-wrap: break-word;
   overflow: auto;
  
}

#gauche2
{
  width :100% ;
  height : 1500px;        
  background :#B0CC99 ;
  float: left;
  padding-left: 1%;
  word-wrap: break-word;
  overflow: auto;
  
}

#gauche1
{
  width :100% ;
  height : auto;        
  background :black ;
  color: white;
  float: left;
  padding-left: 1%;
  word-wrap: break-word;
  overflow: hidden;
}
#gauche1 a:link {  color: white ; text-decoration:undreline;}
#gauche1 a:visited {  color: white ; text-decoration:undreline;}
#gauche1 a:hover {  color: red ; text-decoration:undreline;}
  
}

#gauche3
{
  width :100% ;
  height : auto;        
  background : ;
  float: left;
  word-wrap: break-word;
  overflow: hidden;
  
}



#gauche3 img
{
	max-width :100% ;
	height: auto;
}

#gauche4
{
  width :100% ;
  height : auto;        
  background :#B0CC99 ;
  float: left;
  padding-left: 1%;
  word-wrap: break-word;
  overflow: hidden;
  
}
 

#centre
{
  padding: 0.5em;	
  width :51% ;
  background : ;
  height : auto;
  float: left;
}

#centreresponsive
{
  	
  width :600px ;
  background: #EFEFEF;
  height : auto;
  border-style:solid;
  border-width:1px;
  float: left;
  word-wrap: break-word;
  
}

#centre1
{
  
  width :53% ;
  height : auto;
  background :#EFEFEF ;
  float: left;
  word-wrap: break-word;
   overflow: hidden;
   padding: 1%;

  
}

#centre11
{
 
  width :15% ;
  height : auto;
  background : ;
  float: right;
  word-wrap: break-word;
   overflow: hidden;
   padding: 1%;

  
}

#centre11 img
{
	max-width :100% ;
	height: auto;
	
	
}


#centre2
{
  
  width :40% ;
  height : 100%;
  background: #EFEFEF;
  float: right;
  word-wrap: break-word;
  text-align: center;
  padding: 1%;
 
  
}

#centre2 img
{
	max-width :100% ;
	height: auto;
	
	
}

#centre3
{
  
  width :100% ;
  height : 100%;
  background: ;
  float: right;
  word-wrap: break-word;
  text-align: center;
  padding: 1%;
 
  
}

#centre3 img
{
	max-width :100% ;
	height: auto;
	
	
}


 

#droit
{
  padding-left: 0.5em;
  width :29% ;
  background : ;
  height : auto;
  float: left;
}

#droit1
{
  padding-top: 1em;
  width :100% ;
  background : ;
  height : auto;
  float: left;
}

#droit1 img
{
	width :100% ;
	height : auto;
}

#droit2 {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Aligne gauche/droite pour les duos */
}

/* 1. Règle par défaut pour TOUTES les images (elles se mettent par deux) */
#droit2 img {
  width: 48%; /* Environ la moitié de la largeur */
  height: auto;
  margin-bottom: 20px;
}

/* 2. On cible une image spécifique pour qu'elle prenne 100% */
#droit2 img:nth-child(3),
#droit2 img:nth-child(6) {
  width: 100%; 
}

a:link {  color: black ; text-decoration:undreline;}
a:visited {  color: black ; text-decoration:undreline;}
a:hover {  color: red ; text-decoration:undreline;}

#pied
{
	width :100% ;
	height : auto;
	background-color: #008080;
	color: white;
	overflow: hidden;
}

/* Définit la couleur des liens hypertexte dans le div footer */
#pied a:link {  color: white ; text-decoration:undreline;}
#pied a:visited {  color: white ; text-decoration:undreline;}
#pied a:hover {  color: red ; text-decoration:undreline;}


 /* ***********************************************************************************Pour les tablettes **************************************************************************/
@media all and (max-width: 1200px) /* Pour les tablettes */
{
  
	
  #body
    {
    width: auto;
  }
  
  #gauche
{
  width :30% ;
  height : auto;        
  background : ;
  float: left;
}

 
#centre
   {
	  width :70% ;
	  background : ;
	  height : auto;
	  float: left;
  }
   
  #droit
    {
	display: none;
	
  }

  
  
  


  
}

/******************************************************************************** Pour les smartphones *********************************************************************************/

@media all and (max-width: 600px) /* Pour les smartphones */
{
	
	
  #body
    {
   	
   width: auto;
  }
  
 #logo
    {
   position:relative;
	top:0px;
  }
 
 #menu
{
	display:block ;
	font-size: 0.6em;
	
}
  
  #gauche
{
  
  display: none;
  
  
}

  
  #droit
    {
	display: none;
	
  }

  
  #centre
   {
	  width :100% ;
	  background : ;
	  height : auto;  /* La hauteur se définit automatiquement */
	  float: none;
	  overflow : hidden;
	   word-wrap: break-word;
  }
  
  #centreresponsive
   {
	  width :100% ;
	  height : auto;  /* La hauteur se définit automatiquement */
	  float: none;
	  overflow : hidden;
  }
  
  #centre1
{
  padding: 0.3em;
  font-size: 0.6em;
  width :70% ;
  
  height : auto;
  float: left;
}

#centre2
{
  width :30% ;
  background : ;
  height : auto;
  float: left;
}

#pied
{
	width :100% ;
	height : auto;
	background-color: #008080;
	color: white;
	overflow: hidden;
}
  
}

/* Barre d'appel à l'action */
.cta-banner {
  background-color: black;
}

.cta-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.cta-text {
  color: white;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  flex: 1;
  line-height: 1.4;
}

.cta-buttons {
  display: flex;
  gap: 15px;
  flex-shrink: 0;
}

.btn {
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.btn-primary {
  background-color: #e84c3d; /* Rouge comme Pourdebon */
  color: white;
}

.btn-primary:hover {
  background-color: #d63c2d;
  transform: scale(1.05);
}

.btn-secondary {
  background-color: white;
  color: #2d2d2d;
  border: 2px solid #2d2d2d;
}

.btn-secondary:hover {
  background-color: #f5f5f5;
}

/* Responsive */
@media (max-width: 768px) {
  .cta-container {
    flex-direction: column;
    text-align: center;
  }
  
  .cta-text {
    flex: none;
  }
}

.btn a {
  text-decoration: none; /* Supprime le soulignement */
  color: inherit;        /* Permet au lien de prendre la couleur blanche du bouton */
}