/*#############################################################
##                                                           ##
##                                                           ##
##       CSS BY AXD13 FOR FREELANCES.WEB-RESSOURCES.FR       ##
##                          RESPONSIVE                       ##
##                                                           ##
##                                                           ##
#############################################################*/

/*
@media only screen and (max-width: 600px) {
  .item1 {grid-area: 1 / span 6;}
  .item2 {grid-area: 2 / span 6;}
  .item3 {grid-area: 3 / span 6;}
  .item4 {grid-area: 4 / span 6;}
  .item5 {grid-area: 5 / span 6;}
}

@media only screen and (min-width: 600px) {
  .item1 {grid-area: 1 / span 6;}
  .item2 {grid-area: 2 / span 1;}
  .item3 {grid-area: 2 / span 4;}
  .item4 {grid-area: 3 / span 6;}
  .item5 {grid-area: 4 / span 6;}
}

@media only screen and (min-width: 768px) {

*/



/*#############################################################*/
/* les bases */

 .dark-mode-container2 {
    background-color: #434343;
	background: linear-gradient(145deg,rgba(53, 53, 53, 1) 0%, rgba(86, 86, 86, 1) 100%, rgba(67, 67, 67, 1) 99%);
hyphens: none;          /* Désactive les tirets de césure automatiques */
  word-break: normal;  
    padding: 20px;
    border-radius: 8px;
	border: 1px solid #6B7D87;
	box-shadow: 0 0 4px rgba(0,0,0, 0.4), 0 10px 6px rgba(0,0,0, 0.5);
	
 }
	
	 .dark-mode-container2:hover {
	
	border: 1px solid #7294A8;
	filter: brightness(1.12);
	            transform: translateY(-4px);
}
	
	
.titre_fondpage {


line-height:2.1em;font-size: 40px;color: #ffffff;font-family: 'Open Sans', sans-serif;font-weight:600;letter-spacing:-1px;text-shadow:0 1px 2px rgba(0,0,0,.5);padding-bottom:8px;}

}

.cadrebleu
{

background: #d0def2;
background: linear-gradient(149deg,rgba(208, 222, 242, 1) 0%, rgba(126, 183, 204, 1) 32%, rgba(58, 151, 194, 1) 60%, rgba(14, 109, 138, 1) 100%);
border: 1px solid #0F4C69;
}

.fontcadrebleu
{	

font-size: 25px;
color: white;
text-shadow: 1px 1px 1px #000;

}



.avatar
{
    display: inline-block;
    background-image:-webkit-linear-gradient(top, #FF9500 0%, #F2A941        100%);
    background-image: linear-gradient(to bottom, #FF9500 0%, #F2A941 100%);
 
    margin: 30px;
    color: white;
    background-color: #69A3B9;
 
    width: 130px;
    height: 130px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
   text-shadow: 1px 1px 1px #000;
    text-align: center;
    line-height: 3.0em;
    font-size: 2.4em;
} 
 
 
 .fond_infos{
	
background: #88D1F7;
    border-radius: 18px;
	border: 1px solid white;
	margin: 10px 10px 10px 10px;
	padding: 20px;
	text-align: left;
    width: 77%;    
	border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #0B405C; /* Main text color (yellow) */
	font-size: 18px;
box-shadow: 0px 0px 7px 5px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 7px 5px rgba(0, 0, 0, 0.4);

} 




 
.avatar
{
    display: inline-block;
background: linear-gradient(180deg,rgba(240, 231, 225, 1) 7%, rgba(193, 169, 149, 1) 54%, rgba(193, 169, 149, 1) 51%, rgba(193, 169, 149, 1) 39%, rgba(138, 122, 109, 1) 84%);    margin: 40px;

    margin: 30px;
    color: white;
    background-color: #69A3B9;
    border: 2px solid #694502;
    width: 130px;
    height: 130px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
 
    text-align: center;
    line-height: 2.0em;
    font-size: 4.5em;
	
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 8px;
} 
 
 
 
 
 .avatarentete
{
    display: inline-block;
 background: linear-gradient(180deg,rgba(240, 231, 225, 1) 7%, rgba(193, 169, 149, 1) 54%, rgba(193, 169, 149, 1) 51%, rgba(193, 169, 149, 1) 39%, rgba(138, 122, 109, 1) 84%);    
 margin: 10px;


    color: white;
    background-color: #69A3B9;
     border: 2px solid #694502;

    width: 80px;
    height: 80px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
   text-shadow: 1px 1px 1px #000;
    text-align: center;
    line-height: 2em;
    font-size: 2em;
	font-weight: bold;
} 
 
 
.modal-gauche {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background-color: #ffffff;
  box-shadow: 2px 0 5px rgba(0,0,0,0.3);
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  z-index: 999;
}







.colorpagesite {

background-color: #1B4B61;

}









/* Style de base du bouton d'ouverture */
.menu-btn {
  font-size: 1.2rem;
  padding: 10px 15px;
  cursor: pointer;
}

/* Le menu latéral (caché par défaut à gauche) */
.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background-color: #222;
  color: #fff;
  padding: 20px;
  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.3);
  transform: translateX(-100%); /* Masqué hors écran à gauche */
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
}

/* Classe active pour afficher le menu */
.side-menu.open {
  transform: translateX(0);
}

/* Fond obscurci derrière la modale */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  z-index: 999;
}

/* Affichage du fond sombre */
.modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

/* Styles internes du menu */
.side-menu h2 {
  margin-top: 0;
  font-size: 1.5rem;
}

.side-menu ul {
  list-style: none;
  padding: 0;
  margin-top: 30px;
}

.side-menu li {
  margin: 15px 0;
}

.side-menu a {
  color: #ddd;
  text-decoration: none;
  font-size: 1.1rem;
  display: block;
  transition: color 0.2s;
}

.side-menu a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Bouton de fermeture (croix) */
.close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  position: absolute;
  top: 15px;
  right: 20px;
  cursor: pointer;
}








 
 .animate-on-scroll {
    /* Définit une opacité initiale de 0 pour les éléments */
    opacity: 0.2;
    /* Définit une transition d'opacité d'une seconde */
    transition: opacity 1s;
}
.animate-on-scroll.is-visible {
    /* Définit une opacité de 1 pour les éléments avec la classe 'is-visible' */
    opacity: 1;
}
/* Ensemble, ces styles permettent aux éléments d'être rendus
    transparents et de devenir progressivement plus opaques en 1 seconde
    lorsque la classe 'is-visible' est ajoutée. Cela peut créer un effet
    d'animation pour les éléments. */

 
 
  a.zoom{
   display: inline-block;
   overflow: hidden;
   position: relative;
   text-decoration: none;
}

a.zoom:before{
   display: block;
   background-color: black;
   content: "";
   height: 100%;
   opacity: 0;
   position: absolute;
   width: 100%;
   z-index: 2;
}



a.zoom:hover:before{
  # opacity: 0.3;     
}

a.zoom:hover:after{
   left: 0;
}
 
  
  
  
  img:hover{
	filter: brightness(1.15);

}
 
  
 
 
 
 
 .colorpagesite {

background-color: #1B4B61;

}

.titre_fondpage {

color: #ffffff;
.titre_fondpage {


line-height:1.1em;color: #ffffff;font-family: 'Open Sans', sans-serif;font-weight:600;letter-spacing:-1px;text-shadow:0 1px 2px rgba(0,0,0,.5);padding-bottom:8px;}

}
}
 
 
 
 
 
 


*
 {
  box-sizing: border-box;
}

body 
{
  overflow-x: hidden; /* Empêche tout dépassement horizontal sur la page */
  margin: 0;
}

body {
  margin: 10;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

max-width: 100%; 
  font-size: 1.1em;
  line-height: 1.3em;
  color: #f2f2f2;
  text-align: left;
  height: auto;
background: #2F2F36;

width: 100%;
height : 100%;
font-family: trebuchet MS;


}


.page {
	
	
width: 100%;
max-width: 100%;	
	
	
	
}

 /* unvisited link */
a:link {
  color: white;
  text-decoration: none; 
}

/* visited link */
a:visited {
  color: white;
}

/* mouse over link */
a:hover {
  color: skyblue;
}

/* selected link */
a:active {
  color: skyblue;
} 


/*#############################################################*/
/* le boutton */

.button {
text-decoration: none;
padding: 15px;
font-family: verdana;
font-weight: bold;
color: #ffffff;
  text-shadow: 2px 2px 2px #216682;
background-color: #52b1d7;
width: auto;
border: 2px groove #f2f2f2;
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 9px 5px rgba(0,0,0, 0.5);
border-radius: 9px;
}

.button:hover {
padding: 15px;
color: #ffffff;
  text-shadow: 2px 2px 2px #7A4904;
background-color: #E3BA5F;
border: 2px groove #52b1d7;
border-radius:9px;
transform: scale(0.95);
}

 /*#############################################################*/
/* div fond_infos */ 
  
  
  
.fond_infos{
	
background: #D9F7FA;
    border-radius: 8px;
	border: 2px solid black;
	margin: 18px 18px 18px 18px;
	padding: 20px;
    width: 82%;    
	border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #e0e0e0; /* Main text color (yellow) */
 
} 



[data-tooltip] { position: relative; cursor: help; }

[data-tooltip]::before, [data-tooltip]::after {
  position: absolute; 
  opacity: 0; 
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none; z-index: 1000;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  background: rgba(53, 94, 192, 0.65);
  color: #ffffff;
  padding: 13px 16px;
  border-radius: 6px;
  max-width: 259px;
  width: max-content;
  text-align: center;
  font-size: 14px;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
}

[data-tooltip]::after { content: ""; border: 8px solid transparent; }



[data-direction="left"]::before, [data-direction="left"]::after { top: 50%; right: 100%; transform: translateY(-50%) translateX(10px); }
[data-direction="left"]::after { border-left-color: rgba(53, 94, 192, 0.65); margin-right: -4px; }
[data-direction="left"]::before { margin-right: 12px; }



 /*#############################################################*/
/* div menuax */ 
  
.menuax

{
	
	width: auto;
	  padding: 12px;
  padding-left: 25px;
  padding-right: 25px;
  margin: 18px;
  box-sizing: border-box;
  color: #ffffff;
  text-shadow: 1px 2px 1px #000;

	text-shadow: 1px 1px 1px #000;
text-decoration: none; 
  font-family: verdana;
  font-size: 1.0em;
}


/* unvisited link */
menuax a:link {

color: #ffffff;
text-shadow: 1px 1px 1px #000;
text-decoration: none; 
  font-family: verdana;
  font-size: 1.0em;
}

/* visited link */
.menuax a:visited {
  font-family: verdana;
  font-size: 1.0em;
color: #ffffff;
text-shadow: 1px 1px 1px #000;
text-decoration: none; 
}

/* mouse over link */
.menuax a:hover {
  font-family: verdana;
  font-size: 1.0em;
color: #d4c865;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
transform: scale(1.06);
}

/* selected link */
.menuax a:active {
  color: #ffffff;
  font-family: verdana;
  font-size: 1.0em;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
} 

 /*#############################################################*/
/* div fond_table */ 
 

  
.fond_table{
	
background: #353535;
background: linear-gradient(145deg,rgba(53, 53, 53, 1) 0%, rgba(86, 86, 86, 1) 100%, rgba(67, 67, 67, 1) 99%);
    border-radius: 8px;
	border: 1px solid grey;
	box-shadow: 0 0 4px rgba(0,0,0, 0.4), 0 10px 6px rgba(0,0,0, 0.5);
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #e0e0e0; /* Main text color (yellow) */
hyphens: none;          /* Désactive les tirets de césure automatiques */
  word-break: normal;  
}  


.fond_table:hover{
	
	
background: #353535;
background: linear-gradient(145deg,rgba(53, 53, 53, 1) 0%, rgba(86, 86, 86, 1) 100%, rgba(67, 67, 67, 1) 99%);
    border-radius: 8px;
	border: 1px solid skyblue;
	box-shadow: 0 0 4px rgba(0,0,0, 0.4), 0 10px 6px rgba(0,0,0, 0.5);
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #e0e0e0; /* Main text color (yellow) */
filter: brightness(1.15);
            transform: translateY(-4px);
}


/*#############################################################*/
/* div table gris */

.fond_tablegris{
	
background: linear-gradient(278deg,rgba(194, 194, 194, 1) 4%, rgba(189, 189, 189, 1) 8%, rgba(94, 94, 94, 1) 100%, rgba(56, 56, 56, 1) 28%);   
  border-radius: 8px;
	border: 1px solid #e0cfb2;
	vertical-align: top;
	margin: 8px 8px 8px 8px;
	padding: 6px;
	box-shadow: 0 0 4px rgba(0,0,0, 0.4), 0 10px 6px rgba(0,0,0, 0.5);
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #e0cfb2; /* Main text color (yellow) */
 
}

.fond_tablegris:hover{
	
background: linear-gradient(278deg,rgba(194, 194, 194, 1) 4%, rgba(189, 189, 189, 1) 8%, rgba(94, 94, 94, 1) 100%, rgba(56, 56, 56, 1) 28%);   
	border: 1px solid #cccccc; 
	vertical-align: top;
	margin: 8px 8px 8px 8px;
	padding: 6px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    color: #e0cfb2; /* Main text color (yellow) */
 
}



 /* unvisited link */
.fond_tablebeige a:link {
  color: #ba1223;
text-decoration: underline; 
}

/* visited link */
.fond_tablebeige a:visited {
  color: grey;
text-decoration: underline; 
}

/* mouse over link */
.fond_tablebeige a:hover {
  color: #ff0000;
    text-decoration: none ; 
}

/* selected link */
.fond_tablebeige a:active {
  color: #ba1223;
    text-decoration: none ; 
} 



/*#############################################################*/
/* div table rouge */
  
.fond_tablerouge{
	
background: linear-gradient(91deg,rgba(186, 18, 35, 1) 0%, rgba(186, 18, 35, 1) 55%, rgba(230, 44, 62, 1) 100%, rgba(130, 129, 129, 1) 95%);    border-radius: 8px;
	border: 1px solid #e0cfb2;
	vertical-align: top;
	margin: 8px 8px 8px 8px;
	padding: 6px;
	box-shadow: 0 0 4px rgba(0,0,0, 0.4), 0 10px 6px rgba(0,0,0, 0.5);
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #e0cfb2; /* Main text color (yellow) */
 
}

.fond_tablerouge:hover{
	
background: linear-gradient(91deg,rgba(186, 18, 35, 1) 0%, rgba(186, 18, 35, 1) 55%, rgba(230, 44, 62, 1) 100%, rgba(130, 129, 129, 1) 95%);    border-radius: 8px;
	border: 1px solid #cccccc; 
	vertical-align: top;
	margin: 8px 8px 8px 8px;
	padding: 6px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    color: #e0cfb2; /* Main text color (yellow) */

 
}



/*#############################################################*/
/* div table bleue */
.fond_tablebleu{
	
background: #10536e;
background: linear-gradient(139deg,rgba(16, 83, 110, 1) 0%, rgba(38, 119, 163, 1) 50%, rgba(83, 163, 237, 1) 100%);
 border-radius: 8px;
	border: 1px solid #e0cfb2;
	vertical-align: top;
	margin: 8px 8px 8px 8px;
	padding: 6px;
	box-shadow: 0 0 4px rgba(0,0,0, 0.4), 0 10px 6px rgba(0,0,0, 0.5);
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #e0cfb2; /* Main text color (yellow) */
 
}


.fond_tablebleu:hover{

background: linear-gradient(139deg,rgba(16, 83, 110, 1) 0%, rgba(38, 119, 163, 1) 50%, rgba(83, 163, 237, 1) 100%);
	
	border: 1px solid #cccccc; 
	vertical-align: top;
	margin: 8px 8px 8px 8px;
	padding: 6px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    color: #e0cfb2; /* Main text color (yellow) */

 
}



/*#############################################################*/
/* div table beige */

.fond_tablebeige{
	
background: linear-gradient(278deg,rgba(194, 194, 194, 1) 4%, rgba(189, 189, 189, 1) 8%, rgba(94, 94, 94, 1) 100%, rgba(56, 56, 56, 1) 28%);    color: #ba1223; /* Main text color (yellow) */
 
}

 /* unvisited link */
.fond_tablebeige a:link {
  color: #ba1223;
text-decoration: underline; 
}

/* visited link */
.fond_tablebeige a:visited {
  color: grey;
text-decoration: underline; 
}

/* mouse over link */
.fond_tablebeige a:hover {
  color: #ff0000;
    text-decoration: none ; 
}

/* selected link */
.fond_tablebeige a:active {
  color: #ba1223;
    text-decoration: none ; 
} 



/*#############################################################*/
/* div table rouge */
  
.fond_tablerouge{
	
background: linear-gradient(91deg,rgba(186, 18, 35, 1) 0%, rgba(186, 18, 35, 1) 55%, rgba(230, 44, 62, 1) 100%, rgba(130, 129, 129, 1) 95%);    border-radius: 8px;
	border: 1px solid white;

	box-shadow: 0 0 4px rgba(0,0,0, 0.4), 0 10px 6px rgba(0,0,0, 0.5);
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #e0cfb2; /* Main text color (yellow) */
 
}

 /* unvisited link */
.fond_tablerouge a:link {
  color: #e0cfb2;
text-decoration: underline; 
}

/* visited link */
.fond_tablerouge a:visited {
  color: grey;
text-decoration: underline; 
}

/* mouse over link */
.fond_tablerouge a:hover {
  color: #ffffff;
    text-decoration: none ; 
}

/* selected link */
.fond_tablerouge a:active {
  color: #e0cfb2;
    text-decoration: none ; 
}





/*#############################################################*/
/* table logo header */
.logo
{	  

 height: 350px;
 width: 100%;
 background-repeat: no-repeat; 
 background-image: url('https://freelances.web-ressources.fr/site/img/header_bg.jpg'); 
 background-size: 100% 420px; 



}


 .entete
{
    display: inline-block;
	
background: #023447;
background: linear-gradient(0deg, rgba(2, 52, 71, 1) 0%, rgba(0, 99, 138, 1) 17%, rgba(44, 120, 150, 1) 25%, rgba(57, 139, 184, 1) 44%, rgba(51, 137, 178, 1) 65%, rgba(32, 131, 158, 1) 73%, rgba(4, 69, 97, 1) 100%);	
	
    width: auto;
    color: #d4c865;
    height: 75px;
	text-shadow: 2px 2px 2px #000;
    border-radius: 40px;
	padding: 26px;
	bottom: 18px;
    text-align: center;
    line-height: 0.6em;
    font-size: 1.8em;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.72); 
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.72);
}

 .entete2
{
    display: inline-block;
	
background: #023447;
background: linear-gradient(0deg, rgba(2, 52, 71, 1) 0%, rgba(0, 99, 138, 1) 17%, rgba(44, 120, 150, 1) 25%, rgba(57, 139, 184, 1) 44%, rgba(51, 137, 178, 1) 65%, rgba(32, 131, 158, 1) 73%, rgba(4, 69, 97, 1) 100%);	
	
    width: auto;
    color: #d4c865;
    height: 75px;
	text-shadow: 2px 2px 2px #000;
    border-radius: 40px;
	padding: 26px;
	bottom: 18px;
    text-align: center;
    line-height: 0.6em;
    font-size: 1.8em;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.72); 
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.72);
}


 .enteteblog
{
    display: inline-block;
	
background: #023447;
background: linear-gradient(0deg, rgba(2, 52, 71, 1) 0%, rgba(0, 99, 138, 1) 17%, rgba(44, 120, 150, 1) 25%, rgba(57, 139, 184, 1) 44%, rgba(51, 137, 178, 1) 65%, rgba(32, 131, 158, 1) 73%, rgba(4, 69, 97, 1) 100%);	
	
border: 1px solid #ededed;
    color: #f2f2f2;
    height: 45px;
	width: 100%;
	padding: 8px;
    text-align: center;
	text-shadow: 1px px 1px #535353;
    line-height: 1.0em;
    font-size: 1.4em;
	font-weight: bold;

}


.entetefont  {
        font-size: 50px;
		text-shadow: 2px 2px 2px #000;
		font-weight: bold;

    }
	








div.home_freelancestop{
background: #227B9B;
color: #ffffff;
    width: 100%;
    height: 1500px;
        padding: 80; 
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
	text-align: center;
}






div.home_freelances{
background: #227B9B;
background: linear-gradient(180deg, rgba(34, 123, 155, 1) 0%, rgba(18, 89, 112, 1) 60%, rgba(6, 58, 74, 1) 81%, rgba(9, 47, 59, 1) 100%);    height: 600px;
        padding: 80; 
   position: relative;
       height: 500px;
    overflow: hidden;
    box-sizing: border-box;
	text-align: center;
}















.titreheadff {
  
        position: sticky;
        top: 0;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



.head_light {
    position: sticky;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}


.sticky-header {
background: #f7e3c3;
background: linear-gradient(180deg,rgba(247, 227, 195, 1) 16%, rgba(250, 225, 187, 1) 19%, rgba(250, 225, 187, 1) 75%, rgba(247, 181, 82, 1) 100%);    color: black;
    position: sticky;
		border: 2px solid #000000;
	text-shadow: 2px 2px 2px #fff;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 2px -2px gray;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.sticky-header.sticky {
background: #f7e3c3;
background: linear-gradient(180deg,rgba(247, 227, 195, 1) 16%, rgba(250, 225, 187, 1) 19%, rgba(250, 225, 187, 1) 75%, rgba(247, 181, 82, 1) 100%);    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3); /* Ombre plus marquée */
    transform: translateY(-5px); /* Légère remontée */
    opacity: 0.80; /* Ajout d'un effet de transparence */
			border: 2px solid #000000;
				box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 18px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;

}
.sticky-header nav ul {
    list-style: none;
    text-align: left;
			border: 2px solid #000000;
				box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 18px 6px, rgba(0, 0, 0, 0.1) 0px 6px 8px 4px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;

}
.sticky-header nav ul li {
    display: inline-block;
    margin: 0 5px;

}
.sticky-header nav ul li a {
    color: #000000;
		text-shadow: 2px 2px 2px #fff;
    text-decoration: none;
    padding: 5px 10px;
    display: inline-block;
    transition: background-color 1.0s ease;

}
.sticky-header nav ul li a:hover {
    background: #92c9e8;
	    color: #000000;
		border: 2px solid #535353;


}
section {
    padding: 20px 10px;
    margin: 20px 0;
}
h1, h2 {
    text-align: center;
    margin-bottom: 20px;
}

/*#############################################################*/
/* texte fondu clignotant */
.blink-smooth {
  animation: blink-smooth 1.5s linear infinite;

}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; } /* Visible */
  25%, 75% { opacity: 0; }      /* Invisible */
}

@keyframes blink-smooth {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
  	box-shadow: 0 0 4px rgba(0,0,0, 0.4), 0 10px 6px rgba(0,0,0, 0.5);
}



/*#############################################################*/
/* images transparence */

.fond_image{
display:inline-block;
}
.fond_image img{
-moz-transition: opacity 0.9s;
-webkit-transition: opacity 0.9s;
-o-transition: opacity 0.9s;
}
.fond_image img:hover{
opacity:0.6;
-moz-transition: opacity 0.7s;
-webkit-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
}


/*#############################################################*/
/* agrandissement */

.loupe{
-moz-transition: opacity 0.9s;
-webkit-transition: opacity 0.9s;
-o-transition: opacity 0.9s;
transition: transform 0.3s;
}
.loupe:hover{
opacity:0.9;
-moz-transition: opacity 0.7s;
-webkit-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
transform: scale(1.05);
}


/*#############################################################*/
/* liens des images (transparence) */

a img{
-moz-transition: opacity 0.9s;
-webkit-transition: opacity 0.9s;
-o-transition: opacity 0.9s;
transition: transform 0.3s;
}
a img:hover{
opacity:0.7;
-moz-transition: opacity 0.7s;
-webkit-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
transform: scale(1.1);
}


/*#############################################################*/
/* les menus axel */

div.menuaxel{
  background-color: #91ccf5;
  color: black;
    width: 100%;
    min-height: 400px;
        padding: 5;
    margin: 5;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
	text-align: center;
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}
div.menuaxel2{
  background-color: #ffffff;
  color: black;
    width: 90%;
    min-height: 400px;
        padding: 5;
    margin: 5;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
	text-align: center;
    border: 2px solid #cccccc;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}


/*#############################################################*/
/* les containeurs */

	.containeur
	{
	width: 80%;
	align: center;
	
	}

.containeur2{
  width: 60% ;
  text-decoration: none;
}



/*#############################################################*/
/* barre de recherche dans le header */

#texte_recherche {
	width: 30%;
	height: 65px;
	padding: 10px 10px 10px 10px;
	background-color: #ffffff;
	border: solid 3px #22409B;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 20px;
	font-family: arial, verdana, sans-serif;
	color: #000000;
	font-size: 20px;
}

  
/*#############################################################*/
/* clignotement de texte */


.text-clignote  {
   animation-duration: .8s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}

@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}




/*#############################################################*/
/* apparence responsive */






label, #toggle
{
    display: none;
}

label
{
    display: none;
}	
    }
	
	    td .label 
    {
        display: none;

    }
	    table .label 
    {
        display: none;

    }

label, #toggle
{
    display: none;
}

label
{
    display: none;
}
 



input[type=submit], input[type=reset] {
  border: 1px solid #000000;
  padding: 0 13px;
  height: 45px;
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 9px;
  background-color: #d4c865;
  background-image: linear-gradient(
    to top left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0)
  );
  box-shadow:
    inset -2px -2px 3px #644304;
	
}

input[type=submit]:hover, input[type=reset]:hover {
     background-color: skyblue;
	   text-shadow: 1px 1px 1px #000;
  color: #ffffff;
  transform: scale(0.95);
 }
input[type=submit]:active, input[type=reset]:active {
  box-shadow:
    inset -2px -2px 3px #ed5864,
    inset 2px 2px 3px black;
  color: #ffffff;
    text-shadow: 1px 1px 1px #000;
 } 




input[type=text],input[type=password],input[type=email] {
  height: 45px;
  padding: 10px;
  margin: 12px 8px;
  box-sizing: border-box;
   border:1px solid grey;
background: #2B2B2B;
background: linear-gradient(180deg,rgba(43, 43, 43, 1) 0%, rgba(51, 51, 51, 1) 35%, rgba(51, 51, 51, 1) 69%, rgba(43, 43, 43, 1) 100%);
   border-radius: 12px;
color: #969292;
font-size: 1.0rem;
}


input[type=text]:hover,input[type=password]:hover,input[type=email]:hover {
  height: 45px;
  padding: 10px;
  margin: 12px 8px;
  box-sizing: border-box;
   border: 1px solid #74D1F2;
background: linear-gradient(180deg,rgba(43, 43, 43, 1) 0%, rgba(51, 51, 51, 1) 35%, rgba(51, 51, 51, 1) 69%, rgba(43, 43, 43, 1) 100%);

 
   border-radius: 12px;
color: #969292;
font-size: 1.0rem;
}

input[type=text]:focus,input[type=password]:focus,input[type=email]:focus {
  height: 45px;
  padding: 10px;
  margin: 12px 8px;
  box-sizing: border-box;
   border: 1px solid #548DBA;
background: linear-gradient(180deg,rgba(43, 43, 43, 1) 0%, rgba(51, 51, 51, 1) 35%, rgba(51, 51, 51, 1) 69%, rgba(43, 43, 43, 1) 100%);

 
   border-radius: 12px;
color: #969292;
font-size: 1.0rem;
}



input[type=date] {
  height: 45px;
  padding: 12px;
  margin: 12px 0;
  box-sizing: border-box;
   border: 1px solid grey;
background: linear-gradient(180deg,rgba(43, 43, 43, 1) 0%, rgba(51, 51, 51, 1) 35%, rgba(51, 51, 51, 1) 69%, rgba(43, 43, 43, 1) 100%);

 
   border-radius: 12px;
color: #969292;
font-size: 1.0rem;
}




select {
	

  height: 45px;
  padding: 12px;
  margin: 12px 0;
  box-sizing: border-box;
   border:1px solid grey;
background: linear-gradient(180deg,rgba(43, 43, 43, 1) 0%, rgba(51, 51, 51, 1) 35%, rgba(51, 51, 51, 1) 69%, rgba(43, 43, 43, 1) 100%);

 
   border-radius: 12px;
color: #969292;
font-size: 1.0rem;
}

textarea  {
	
  
width: 80%;
max-width: 100%;
  padding: 12px;
  margin: 12px 0;
  box-sizing: border-box;
   border:1px solid grey;
background: linear-gradient(180deg,rgba(43, 43, 43, 1) 0%, rgba(51, 51, 51, 1) 35%, rgba(51, 51, 51, 1) 69%, rgba(43, 43, 43, 1) 100%);

 
   border-radius: 12px;
color: #969292;
font-size: 1.0rem;
}
      


hr {
    border: 0;
    height: 5px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

div.enhaut{
  background-color: #cccccc;
  color: white;
    width: 200px;
    height: 70px;
        padding: 10;
    margin: 10;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;

    border: 2px solid red;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}
div.liste{
  background-color: #ffffff;
  color: black;
    width: 95%;
    height: 30px;
        padding: 5;
    margin: 5;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid red;
    border-radius: 6px;
    box-shadow: -1px 5px 10px black;
	opacity: 0.7;
}


/*#############################################################*/
/* publication validé ou echec */

div.nok{
  background-color: #FF6262;
  color: black;
    width: 200px;
    height: 60px;
        padding: 10;
    margin: 10;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;

    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}

div.ok{
  background-color: #95E8A1;
  color: black;
    width: 200px;
    height: 60px;
        padding: 10;
    margin: 10;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;

    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}






div.barreok{
  background-color: #ffffff;
  color: black;
    width: 100%;
	background-color: #b6caa0;
    height: 32px;
        padding: 10;
    margin: 10;
text-align: center;	
   position: sticky;
    overflow: hidden;
    box-sizing: border-box;
    border: 4px solid green;
}

div.barrenok{
  background-color: #ffffff;
  color: black;
    width: 100%;
	background-color: #caa0a4;
    height: 32px;
        padding: 10;
    margin: 10;
text-align: center;	
   position: sticky;
    overflow: hidden;
    box-sizing: border-box;
    border: 4px solid red;
}





div.barreinfo{
  background-color: #ffffff;
  color: black;
    width: 70%;
	background-color: #FFFBA6;
    height: 52px;
        padding: 15px;
    margin: 15px;
text-align: center;	
   position: sticky;
    overflow: hidden;
    box-sizing: border-box;
    border: 4px solid #CDE309;
		    border-radius: 16px;
    box-shadow: -1px 5px 10px grey;
	opacity: 0.9;
}


div.barrenote{
  background-color: #ffffff;
  color: black;
    width: 70%;
	align: center;
	background-color: #D0F0F7;
    height: 52px;
        padding: 15px;
    margin: 15px;
text-align: center;	
   position: sticky;
    overflow: hidden;
    box-sizing: border-box;
    border: 4px solid #4BABBF;
		    border-radius: 16px;
    box-shadow: -1px 5px 10px grey;
	opacity: 0.9;
}



 .entete
{
    display: inline-block;
background: #b5700e;
background: linear-gradient(0deg,rgba(181, 112, 14, 1) 0%, rgba(219, 169, 86, 1) 26%, rgba(219, 180, 88, 1) 51%, rgba(221, 189, 123, 1) 68%, rgba(237, 237, 216, 1) 92%);
 
    margin: 40px;
    color: white;
    background-color: #c1a995;
 
    width: auto;
    height: 150px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
 
    text-align: center;
    line-height: 4em;
    font-size: 3em;

}
 



	
	
	
/*#############################################################*/
/* menu apparence responsive */	
	


  .dropbtn {
  background-color: #f2f2f2;
  color: black;
    width: 80px;
  padding: 14px;
  font-size: 16px;
  border: 1px solid gray;
      box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.5);
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #cccccc;
  border: 2px solid black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 99;
    font-size: 16px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
    font-size: 16px;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #ffffff;}

  


	
	
	
	
	
	
	
	
	
	
	
	
	
}

/*#############################################################*/
/* menu apparence responsive */


  .dropbtn {
  background-color: #f2f2f2;
  color: black;
    width: 80px;
  padding: 14px;
  font-size: 16px;
  border: 1px solid gray;
      box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.5);
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #cccccc;
  border: 2px solid black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 99;
    font-size: 16px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
    font-size: 16px;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #ffffff;}

  






/*#############################################################*/
/* formulaires */

.fond_infos{
	
background: #d4c865;
    border-radius: 18px;
	border: 1px solid white;
	margin: 10px 10px 10px 10px;
	padding: 20px;
	text-align: left;
    width: 77%;    
	border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #0B405C; /* Main text color (yellow) */
box-shadow: 0px 0px 16px 5px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 16px 5px rgba(0, 0, 0, 0.4);

} 




div.enhaut{
  background-color: #cccccc;
  color: white;
    width: 200px;
    height: 70px;
        padding: 10;
    margin: 10;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;

    border: 2px solid red;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}
div.liste{
  background-color: #ffffff;
  color: black;
    width: 95%;
    height: 30px;
        padding: 5;
    margin: 5;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid red;
    border-radius: 6px;
    box-shadow: -1px 5px 10px black;
	opacity: 0.7;
}


/*#############################################################*/
/* publication validé ou echec */

div.nok{
  background-color: #FF6262;
  color: black;
    width: 200px;
    height: 60px;
        padding: 10;
    margin: 10;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;

    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}

div.ok{
  background-color: #95E8A1;
  color: black;
    width: 200px;
    height: 60px;
        padding: 10;
    margin: 10;  
   position: relative;
    overflow: hidden;
    box-sizing: border-box;

    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 10px black;
}






div.barreok{
  background-color: #ffffff;
  color: black;
    width: 100%;
	background-color: #b6caa0;
    height: 32px;
        padding: 10;
    margin: 10;
text-align: center;	
   position: sticky;
    overflow: hidden;
    box-sizing: border-box;
    border: 4px solid green;
}

div.barrenok{
  background-color: #ffffff;
  color: black;
    width: 100%;
	background-color: #caa0a4;
    height: 32px;
        padding: 10;
    margin: 10;
text-align: center;	
   position: sticky;
    overflow: hidden;
    box-sizing: border-box;
    border: 4px solid red;
}





div.barreinfo{
  background-color: #ffffff;
  color: black;
    width: 70%;
	background-color: #FFFBA6;
    height: 52px;
        padding: 15px;
    margin: 15px;
text-align: center;	
   position: sticky;
    overflow: hidden;
    box-sizing: border-box;
    border: 4px solid #CDE309;
		    border-radius: 16px;
    box-shadow: -1px 5px 10px grey;
	opacity: 0.9;
}


div.barrenote{
  background-color: #ffffff;
  color: black;
    width: 70%;
	align: center;
	background-color: #D0F0F7;
    height: 52px;
        padding: 15px;
    margin: 15px;
text-align: center;	
   position: sticky;
    overflow: hidden;
    box-sizing: border-box;
    border: 4px solid #4BABBF;
		    border-radius: 16px;
    box-shadow: -1px 5px 10px grey;
	opacity: 0.9;
}



 .entete
{
    display: inline-block;
background: #b5700e;
background: linear-gradient(0deg,rgba(181, 112, 14, 1) 0%, rgba(219, 169, 86, 1) 26%, rgba(219, 180, 88, 1) 51%, rgba(221, 189, 123, 1) 68%, rgba(237, 237, 216, 1) 92%);
 
    margin: 40px;
    color: white;
    background-color: #c1a995;
 
    width: auto;
    height: 150px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
 
    text-align: center;
    line-height: 4em;
    font-size: 3em;

}
 


div.barreok{
  background-color: #ffffff;
  color: black;
    width: 70%;
	background-color: #b6caa0;
    height: 52px;
        padding: 15px;
    margin: 15px;
text-align: center;	
   position: sticky;
    overflow: hidden;
    box-sizing: border-box;
    border: 4px solid green;
	    border-radius: 16px;
    box-shadow: -1px 5px 10px grey;
	opacity: 0.9;
}

div.barrenok{
  background-color: #ffffff;
  color: black;
    width: 70%;
	background-color: #caa0a4;
    height: 52px;
        padding: 15px;
    margin: 15px;
text-align: center;	
   position: sticky;
    overflow: hidden;
    box-sizing: border-box;
    border: 4px solid red;
		    border-radius: 16px;
    box-shadow: -1px 5px 10px grey;
	opacity: 0.9;
}

div.barreinfo{
  background-color: #ffffff;
  color: black;
    width: 70%;
	background-color: #FFFBA6;
    height: 52px;
        padding: 15px;
    margin: 15px;
text-align: center;	
   position: sticky;
    overflow: hidden;
    box-sizing: border-box;
    border: 4px solid #CDE309;
		    border-radius: 16px;
    box-shadow: -1px 5px 10px grey;
	opacity: 0.9;
}


div.barrenote{
  background-color: #ffffff;
  color: black;
    width: 70%;
	align: center;
	background-color: #D0F0F7;
    height: 52px;
        padding: 15px;
    margin: 15px;
text-align: center;	
   position: sticky;
    overflow: hidden;
    box-sizing: border-box;
    border: 4px solid #4BABBF;
		    border-radius: 16px;
    box-shadow: -1px 5px 10px grey;
	opacity: 0.9;
}






/*#############################################################*/
/* gestion des mots longs */


	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */

	img {
		height: auto;
	}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
	
		word-wrap: break-word; /* passage à la ligne forcé */
	}

/*#############################################################*/
/* footer  */


.footer  {
color: #cccccc
}


.footer a:link {
  color: #535353;
text-decoration: none; 
}

/* visited link */
.footer a:visited {
  color: #353535;
text-decoration: underline; 
}

/* mouse over link */
.footer a:hover {
  color: #238abd;
    text-decoration: none ; 
}

/* selected link */
.footer a:active {
  color: #ba1223;
    text-decoration: none ; 
}


/*#############################################################*/
/* le reste */





article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}



	table,
	td,
	code,
	pre,
	samp {
				-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word;
	}





div.scrollmenu {
  background-color: #ccc;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  width:120px;
  border-weigth: 1px;
  border-color:white;
  border-style: solid;

 
}

div.scrollmenu a:hover {
  background-color: #777;  
}


div.footer a
{
  display: inline-block;
  
  text-decoration: none;

 

 
}



.containaxel {
    margin: 0 auto;
    padding: 0 0px;
    max-width: 90%;
}

.navBar {
    background: #455A64;
	width: 80%;
	height: 80px;
	border-radius: 20px;
}

.nav {
    list-style: none;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

.nav > li > a {
    padding: 20px 0px;
    display: block;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
}

.nav > li > a.active {
    border-bottom: 2px solid #E64A19;
}






fieldset
{

	
  


  padding: 22px;
  margin: 12px 0;
  box-sizing: border-box;
   border:1px solid grey;
 background-color:  #333333 ;
   border-radius: 12px;
   color: #f2f2f2;

}







boutton#copie-code {
    background: #b3d9eb;
    padding: 4px 25px;
    border-radius: 5px;
    color: #000;
    margin-bottom: 5px !important;
    display: inline-block;
	cursor:pointer;
}

button[name="btnEnvoiForm"] {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}
code, pre{
    white-space: pre-wrap!important;
    word-break: break-word!important;
}
.commentaires-format-home * {
    color: #fff !important;
}
table.vignets {
    background-position: 0px;
    background-repeat: no-repeat;
max-width:100%;
    height: 350px !important;
}
html, body {
    padding: 0 !important;
}

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}







code {
  font-size: 1.1em;
  color: #ff214f;
  word-break: break-word;
  overflow-x: scroll;
  
}

a > code {
  color: inherit;
  overflow-x: scroll;
}

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 87.5%;
  color: #fff;
  background-color: #212529;
  border-radius: 0.1rem;
}

kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: 700;
}

pre {
  display: block;
  font-size: 87.5%;
  color: #ff5477;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: auto
  width: 400px;
  overflow-x: scroll;
}

.pre-scrollable {
  max-height: 300px;
  overflow-y: scroll;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1.1em;
}





footer {
  text-align: center;
  padding: 0px;
  background-color: #CCCCCC;
  width: 100%;
  height: 280px;
  color: #000;
opacity: 0.83;
    vertical-align : top;
  
}

 


	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}

code, pre {
	width: 80%;
	  overflow: scroll;
  white-space: nowrap;
	
}





 

/*#############################################################*/
/*#############################################################*/
/*#############################################################*/
/*#############################################################*/




 @media all and (max-width: 751px) 
{
	

 html {
font-size: 15pt;

 }
*
 {
  box-sizing: border-box;
}

body 
{
  overflow-x: hidden; /* Empêche tout dépassement horizontal sur la page */
  margin: 0;
          font-size: 25px;
}

	
	
	* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden; /* Empêche tout dépassement horizontal sur la page */
  margin: 0;
}
    nav
    {
        height: 60px;
    }
 
    div#main_pages 
    {
        display: none;

    }
	
	    td.affich 
    {
        display: none;

    }
	    table.affich 
    {
        display: none;

    }
	    affich 
    {
        display: none;

    }
 
    div .main_pages a {
        width: 50%;
    }
 
    label 
    {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-size: 25px;
        cursor: pointer;
    }
 
    #toggle:checked {
        display: flex;
    }
	


    div .entetefont  {
		line-height: 1.2em;
        font-size: 38px;
		text-shadow: 2px 2px 2px #000;
		font-weight: bold;
		color: #C9F3FF;
    }
	
	
	


  /* Transformer chaque ligne en bloc indépendant */
  .ent table tr {
    display: block;
    margin-bottom: 15px;
		width: 90%;
  }

  /* Transformer chaque cellule en ligne séparée (en dessous des autres) */
  .ent table td {
    display: block;
    text-align: center;
    position: relative;
	width: 90%;

  }



	
	
	
	
 .entete2
{
    display: inline-block;
	
background: #023447;
background: linear-gradient(0deg, rgba(2, 52, 71, 1) 0%, rgba(0, 99, 138, 1) 17%, rgba(44, 120, 150, 1) 25%, rgba(57, 139, 184, 1) 44%, rgba(51, 137, 178, 1) 65%, rgba(32, 131, 158, 1) 73%, rgba(4, 69, 97, 1) 100%);	
	height: auto;
    width: auto;
    color: #d4c865;
	text-shadow: 2px 2px 2px #000;
    border-radius: 40px;
	padding: 26px;
	bottom: 18px;
    text-align: center;
    line-height: 0.6em;
    font-size: 1.8em;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.72); 
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.72);
}	
	
	
	
	
	
	


	
}
 
 
 
 
 
 
 
 



 
 
 




/*#############################################################*/
/*#############################################################*/
/*#############################################################*/




 @media all and (max-width: 751px) 
{
	

 html {
font-size: 11pt;

 }
*
 {
  box-sizing: border-box;
}

body 
{
  overflow-x: hidden; /* Empêche tout dépassement horizontal sur la page */
  margin: 0;
}

	
	* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden; /* Empêche tout dépassement horizontal sur la page */
  margin: 0;
}
    nav
    {
        height: 60px;
    }
 
    div#main_pages 
    {
        display: none;

    }
	
	    td.affich 
    {
        display: none;

    }
	    table.affich 
    {
        display: none;

    }
	    affich 
    {
        display: none;

    }
 
    div .main_pages a {
        width: 50%;
    }
 
    label 
    {
        width: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-size: 25px;
        cursor: pointer;
    }
 
    #toggle:checked {
        display: flex;
    }
	
	
 
 
 
 


  .entete
{
    display: inline-block;
background: #f0e7e1;
background: linear-gradient(180deg,rgba(240, 231, 225, 1) 7%, rgba(193, 169, 149, 1) 54%, rgba(193, 169, 149, 1) 51%, rgba(193, 169, 149, 1) 39%, rgba(138, 122, 109, 1) 84%);    margin: 40px;
    color: #2A92B0;
    background-color: #c1a995;
	border: 2px solid #535353;
    width: auto;
    height: 130px;
    border-radius: 40px;
	padding: 30px;
	bottom: 10px;
    text-align: center;
    line-height: 1.1em;
    font-size: 3em;
 box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 15px 10px rgba(0,0,0, 0.7);
}


 .siglenouveau
{
    display: inline-block;
background: #073304;
background: linear-gradient(0deg,rgba(7, 51, 4, 1) 4%, rgba(22, 130, 14, 1) 15%, rgba(32, 247, 12, 1) 72%, rgba(64, 235, 12, 1) 100%);    color: #2A92B0;
    background-color: #c1a995;
	border: 1px solid #535353;
	color: black;
    width: auto;
    height: 50px;
    border-radius: 5px;
	padding: 5px;
	bottom: 10px;
    text-align: center;
    line-height: 0.6em;
    font-size: 0.6em;
-webkit-box-shadow: 0px 0px 14px 4px rgba(0,0,0,0.72); 
box-shadow: 0px 0px 14px 4px rgba(0,0,0,0.72);
}	
 
 
 
.fond_ok{
	
background: #C4F2AA;
    border-radius: 18px;
	border: 1px solid green;
	margin: 10px 10px 10px 10px;
	padding: 20px;
	text-align: center;
    width: 60%;    
	border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #3E612B; /* Main text color (yellow) */
	font-size: 25px;
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.4);

} 

.fond_nok{
	
background-color: #FFAFAB;
    border-radius: 18px;
	border: 2px solid red;
	margin: 10px 10px 10px 10px;
	padding: 20px;
	text-align: center;
    width: 60%;    
	border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #96322D; /* Main text color (yellow) */
	font-size: 45px;
box-shadow: 0px 0px 2px 5px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.4);

} 
 
.imgapp  {
   animation-duration: 2.4s;
   animation-name: app;
   transition: none;
}

@keyframes app {
  0%   { opacity:0; }
  10%   { opacity:0.1; }
  20%   { opacity:0.2; }
  30%   { opacity:0.3; }
  40%   { opacity:0.4; }
  50%   { opacity:0.5; }
  60%   { opacity:0.6; }
  70%   { opacity:0.7; }
  80%   { opacity:0.8; }
  90%   { opacity:0.9; }
  100% { opacity:1; }
}

h1{font-size:3rem;font-weight:700;margin-bottom:1rem;text-shadow:0 2px 4px rgba(0,0,0,0.3)}