/*#############################################################
##                                                           ##
##                                                           ##
##       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: scale(1.02);
}
	
	
	

.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: 25px;
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);

} 




 
.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;
} 
 
 
 
 .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);

}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


*
 {
  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: url(https://adx-multiservices.fr/img/body.gif) repeat-x #212121;

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

{
	border: 1px solid #353535;
	width: auto;
	  padding: 12px;
  padding-left: 25px;
  padding-right: 25px;
  margin: 18px;
  box-sizing: border-box;
  color: #ffffff;
  text-shadow: 1px 2px 1px #000;
  border-radius: 8px;
  background-color: #5DA7C7;
  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 #7AC9EB,
    inset -2px -2px 3px #2A4F5E;
	text-shadow: 1px 1px 1px #000;
text-decoration: none; 
}


/* unvisited link */
menuax a:link {
font-family: verdana;
color: #ffffff;
text-shadow: 1px 1px 1px #000;
text-decoration: none; 
}

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

/* mouse over link */
.menuax a:hover {
font-family: verdana;
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;
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: scale(1.02);
}


/*#############################################################*/
/* 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: 0;
  padding: 0 16px;
  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=password] {
  height: 45px;
  padding: 12px;
  margin: 12px 0;
  box-sizing: border-box;
   border:1px solid grey;
 background-color:  #333333 ;
   border-radius: 12px;
   color: #f2f2f2;
}

input[type=email] {
  height: 45px;
  padding: 12px;
  margin: 12px 0;
  box-sizing: border-box;
   border:1px solid grey;
 background-color:  #333333 ;
   border-radius: 12px;
   color: #f2f2f2;
}

input[type=text] {
  height: 45px;
  padding: 12px;
  margin: 12px 0;
  box-sizing: border-box;
   border:1px solid grey;
 background-color:  #333333 ;
   border-radius: 12px;
   color: #f2f2f2;
}

select {
	

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

textarea  {
	
  
width: 80%;
max-width: 100%;
  padding: 12px;
  margin: 12px 0;
  box-sizing: border-box;
   border:1px solid grey;
 background-color:  #333333 ;
   border-radius: 12px;
   color: #f2f2f2;
}
      
li{	
	
list-style-type: "\2705";
}

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: grey;
text-decoration: none; 
}

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

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

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



.footertd
{


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: 20px;
	border: 2px solid grey;
    border-collapse: collapse;
    color: #e0e0e0; /* Main text color (yellow) */
hyphens: none;          /* Désactive les tirets de césure automatiques */
  word-break: normal;  


	
opacity: 0.8;
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; 
padding: 10px;  
text-align: left; 
vertical-align: top;
	
}






/*#############################################################*/
/* 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: 400px;
        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)}