@font-face {
    font-family: Roboto;
    font-weight: 400;
    font-style: normal;
    font-display: auto;
    src: url(../fonts/roboto-regular.woff2), url(../fonts/roboto-regular.woff);
}


tr:nth-child(even){background-color: #f2f2f2}
.container-fluid { 
  width: 100%; 
  padding-right: 0px; 
  padding-left: 0px; 	
  margin-left: 0px;  
}

/* Texte défilant */

.defileParent {
	display: block;
	margin: 3em auto;
	overflow: hidden;
	position: relative;
	table-layout: fixed;
	width: 800px;
}
.defile {
	display:block;
	-webkit-animation:linear marqueelike 20s infinite ;
	-moz-animation:linear marqueelike 20s infinite ;
	-o-animation:linear marqueelike 20s infinite ;
	-ms-animation:linear marqueelike 20s infinite ;
	animation:linear marqueelike 20s infinite ;
	margin-left:-100%;
	padding:0 5em;
	text-align:left;
	height:25rem;
}


.defile:after {
	content:attr(data-text);
	position:absolute;
	white-space:nowrap;
	padding-left:10em;
}

@-webkit-keyframes marqueelike {
	0%, 100% {margin-left:0;}
	99% {margin-left:-100%;}
 }
@-moz-keyframes marqueelike {
	0%, 100% {margin-left:0;}
	99% {margin-left:-100%;}
 }
@-o-keyframes marqueelike {
	0%, 100% {margin-left:0;}
	99% {margin-left:-100%;}
 }
@-ms-keyframes marqueelike {
	0%, 100% {margin-left:0;}
	99% {margin-left:-100%;}
 }
@keyframes marqueelike {
	0%, 100% {margin-left:0;}
	99% {margin-left:-100%;}
 }

@media only screen and (max-width: 1200px) {
.defileParent {
	display: block;
	margin: 3em auto;
	overflow: hidden;
	position: relative;
	table-layout: fixed;
	width: 100%;
}

.defile {
	display:block;
	-webkit-animation:linear marqueelike 15s infinite ;
	-moz-animation:linear marqueelike 15s infinite ;
	-o-animation:linear marqueelike 15s infinite ;
	-ms-animation:linear marqueelike 15s infinite ;
	animation:linear marqueelike 15s infinite ;
	margin-left:-100%;
	padding:0 5em;
	text-align:left;
	height:25 em;
}
}

/*fin Texte défilant */



@font-face {
  font-family: "Segoe UI";
  src: url("/fonts/SegoeUI.woff2") format("woff2"),
       url("/fonts/SegoeUI.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


IMG.displayed {

    display: block;

    margin-left: auto;

    margin-right: auto; 

	}

#articleManagement,#introManagement{

margin-left:5%;

margin-right:5%;

}


#puces  li{

list-style-type: square; 

text-align:left;

position:left;

padding:0;

margin:0;

}


/* à droite.  */

.right {

    position: absolute;

    right: 10%;

    width: 20%;

	top:20%;

    border:none;

    padding: 0.5%;

}



ol{

color:black;
text-align:left;

position:left;

padding:0;

margin:0;

}


nav
{ 
display:inline;
position:justify;
width:100%; /*modif?*/
}

body 
   {
border:none;
width:100%; /* ou 1200px;  */ 
height:auto;
/*max-width:1200px; /* taille de la page bloque à 1200px... */
/* height:auto; */
margin: auto;
color: black;
text-align:center;
font-family:"Segoe UI"; /* demande de Raphael en Juillet 2026  
/*font-family: "'Times New Roman', Times, serif";*/
  }

#admin{
padding: 50px 30px 50px 80px;
}

#cell{
display:flex;

flex-wrap:wrap; /* ??? */

}

article
{

text-align:justify;

margin-left:3%;

margin-right:3%; /* modif le 11 Octobre 2017...verifiee la pertinence...*/

}

articlebis
{

text-align:justify;

margin-left:10%;

margin-right:35%; /* modif le 12 Octobre 2017...verifiee la pertinence...pour l'aside (a droite 20%)*/

}


#articlebis

{

/* supression du gradient... */

width:100%;

/* height:100%; */

color:black; /* #3b0071 violet foncé! */

background-color:  white; /*#80bfff; /* bleu claire... */

margin-right:2%;

 border-width:0px;

 border-style:none;

 /*border-color:#339fff; /* bleu moyen */

 padding:3%;

-moz-border-radius:10px ;

-webkit-border-radius:10px ;

border-radius:10px ;

 text-align:center;

}

#activite {color:transparent;}


#contenu{
border:none;
width:100%;
margin-left:5%;
margin-right:5%;

}


a{
color:#2d5986; /*#5858da; */
}


#section-article {

/* supression du gradient... */

width:100%;

height:auto; 

text-align:justify;

color:black ; /* #3b0071 violet foncé! noire*/

background-color:none; /*#80bfff; /* bleu claire... */

margin-left:2%;

margin-right:2%;

padding-right:10%;

border-width:0px;

border-style:none;

 /*border-color:#339fff; /* bleu moyen */

 padding:1%;

-moz-border-radius:10px ;

-webkit-border-radius:10px ;

border-radius:10px ;
border:none;
 }

 

 #section-articlebis {

/* supression du gradient... */

width:100%;

height:auto;

color:black; /* #3b0071 violet foncé! */

background-color:none; /*#80bfff; /* bleu claire... */

margin-left:3%;

margin-right:3%;

border-width:0px;

border-style:none;

 /*border-color:#339fff; /* bleu moyen */

 text-align:justify;

 }

 

 /* page  activite expaertise : cartouche responsable */
/* refaire pour grand ecran et petit ecran :mobile  */

#fin-article{

width:100%;
margin-left:0px;
margin-right:0px;
background-color:#e6f2ff;
border-width:0px;
border-style:none;
padding:0px;
-moz-border-radius:10px ;
-webkit-border-radius:10px ;
border-radius:10px ;
 }

 

#PTIB{

width:50%;

position:center;

border:none;
 border-width:0px;

 border-style:none;

 border-color:transparent;

 padding-right:5rem;

 }

 

.arrondie{

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

}


/* refaire pour boostrap et petit ecran en fenetre modale? */
#aside1
{
/* ici mettre du code alternatif? */
position:relative; 

width:18%;

padding:0px;

display:inline-block; 

background-color:#ffffff; /* white */

float:right;
margin-right:2%;
height:auto;

text-align: center;	

}


#asideEq
{

position:relative; 

width:20%;

padding-left:5%;

display:inline-block; 

background-color:#ffffff; /* white */

float:right;
margin-right:2%;
height:auto;

text-align: center;	

}

#asideEqsm
{

position:relative; 

width:80%;

padding-left:5%;

display:inline-block; 

background-color:#ffffff; /* white */

float:right;
margin-right:2%;
height:auto;

text-align: center;	

}


#test a{color:#0059b3;}

#test, #page

{

clear:left;

text-align:center;

background-color:#ffffff; 

opacity:0.5;

}


table{
border:none;
width:100%;
height:auto;
margin: auto;
text-align: center;	
border: 1px solid black; 
border-collapse: collapse;
}


th, td {
    padding: 0.5%;

    text-align: left;
}



/* tableau des pulications... */



#tab {
    width: 95%;
}



#tab td {

    height: 50px;

    vertical-align: left;	

}



#tab tr {

    background-color:#339fff;  /* bleu moyen */

	border-spacing: white;  /* #004d99; */

	color:#fff7e6; /* jaune orangé  */

	text-align:center;

}


/* en tete de la table publications */
#tab th {

   background-color:#2d5986; /* bleu foncé du logo CIC-IT /*#3b0071; /* violet tres foncé */

   text-align:left;

   color:#80bfff; /* bleu claire */

}



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

/* mise en forme des formulaires ... */

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

 form {

text-align: center;

 padding:0%;

 margin-left:10%;

 /*width:80%;*/

background-color:transparent;

 }




 fieldset {

 padding:0 5px 5px 5px;

 margin-bottom:10px;

 border:1px solid white;

 width:90%;

 }

 
legend {

 color:white;

 font-weight:bold

 }


 label {

text-align:left;

 margin-top:10px;

 margin-left:10%;

 display:block;

 }


 label.inline {

 display:inline;

 margin-right:20px;

 }


input, textarea, select {

 padding:3px;

 border:1px solid white;

 border-radius:5px;

 width:70%;

 box-shadow:1px 1px 2px #C0C0C0 inset;

 }


select {

 margin-top:10px;

 }


input[type=radio] {

 background-color:transparent;

 border:none;

 width:20px;

 }


input[type=submit], input[type=reset] {

border:none;

color:bleu;

 margin-left:1px;

 box-shadow:1px 1px 1px #D83F3D;

 cursor:pointer;

 }


 input:focus, textarea:focus {

 background-color:white;

 }

input[type=submit]:focus, input[type=reset]:focus {

 background-color:white;

}

input[type=submit]:hover, input[type=reset]:hover {

 background-color:white;

 }


 /* quelques formulaire: */
 /* formulaire de contact(FdC) !  */

#FdC{

text-align: center;

 padding:0%;

 margin-left:10%;

 width:100%;

background-color:#b3d9ff; /* bleu... */

 }



 /* choix des langues(CdL)  */

#CdL {
padding:0%;
margin-right:2%;
margin-left:10%;
width:100%;
background-color:white;
border:none;
 }


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

/* les images, galerie d'images */

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

div.img {

    width: 100%;

    height: auto;

}

img{

  display:block;

    margin:0px; 

}

.img{

margin-left:20%;

}

.img2{

margin-left:10%;

padding-right:2px;

}

.img3{

margin-left:2%;

padding-right:2%;

margin-right:0%;

}
div.img {

    width: 100%;

    height: auto;
	
}


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

/* le calendrier des evenements */

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

table.calendrier {

	margin: auto;

	text-align: center;

	/* border: 1px solid black; */

	border-collapse: collapse;

}


table.calendrier th {

	border-bottom: 1px solid black;

}

table.calendrier td {

	/* border: 1px solid black; */

	width: 4%; /*20px; */

	height:4%; /* 20px; */

}



table.calendrier td div {

	padding: 0px;

}



.jourEvenement {

	background-color: rgb(253, 241, 184);

}



.lienCalendrierJour {

	background-color: rgb(203, 206, 250);

}


.calendrier caption {

	margin: auto;

	margin-bottom: 3px;

}


/* Administration */

#tabAjoutEvent {

	margin: auto;

}

#tabAjoutEvent td {

	width: 50%;

	text-align:center;

}





/* Infobulles */

a.info {

	position: relative;

	color: black;

	text-decoration: none;

	display: block;

}

a.info span {

	display: none; /* on masque l'infobulle */

}

a.info:hover {

	background: none; /* correction d'un bug IE 

	z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

}

a.info:hover span {

	display: inline; /* on affiche l'infobulle */

	position: absolute;



	white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré 

*/

	top: 30px; /* on positionne notre infobulle */
	left: 20px;

	

	text-align: left;

	background: white;

	padding: 3px;

	border: 1px solid black;

}


/* Liste des événements à supprimer */

table.listeEvent {

	width: 100%;

	border: 1px solid black;

	border-collapse: collapse;

}

table.listeEvent td {

	padding: 5px;

}

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

/* fin du calendrier des evenements */

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



h1 {
 font-size: 4.0 vh; 
 line-height:6.0vh;margin-top:2.0vh;margin-bottom:2.0vh;
}
h2 {
 font-size: 4.5vh;
 line-height:5.0vh;margin-top:1.5vh;margin-bottom:1.5vh;
}
h3{
 font-size: 2.5vh;
 line-height:2.0vh;margin-top:0vh;margin-bottom:0vh;
}
h4,h5,h6{
 font-size: 2.5vh;
 line-height:2.5vh;margin-top:0vh;margin-bottom:0vh;
}
/*
p {
 font-size: 2vmin;
}


h1{font-size:2.6em;line-height:1.0em;margin-top:0;margin-bottom:0.0em;}

h2{font-size:2.2em;line-height:1.0em;margin-top:0.5em;margin-bottom:0.5em;}

 h3{font-size:1.8em;line-height:1.0em;margin-top:0 em;margin-bottom:0em;}

h4,h5,h6{font-size:1.2em;line-height:1.0em;margin-top:0.25em;margin-bottom:0.25em;}
*/


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

/* position de l'image en tete */

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

.ex2 {
    table-layout: fixed;
	border:none;
}

ol{

color:black;
text-align:left;

position:left;

padding:0;

margin:0;

}

/*                                                   */
/* blink doux: effacement doux des logos partenaires */
/*                                                   */

.blink_meb {

    -webkit-animation-name: blinker;

    -webkit-animation-duration: 10s;

    -webkit-animation-timing-function: linear;

    -webkit-animation-iteration-count: infinite;


    -moz-animation-name: blinker;

    -moz-animation-duration: 10s;

    -moz-animation-timing-function: linear;

    -moz-animation-iteration-count: infinite;

    
    animation-name: blinker;

    animation-duration: 10s;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

}



@-moz-keyframes blinkerb {  

    0% { opacity: 1.0; }

    50% { opacity: 0.2; }

    100% { opacity: 1.0; }

}



@-webkit-keyframes blinker {  

    0% { opacity: 1.0; }

    50% { opacity: 0.2; }

    100% { opacity: 1.0; }

}



@keyframes blinker {  

    0% { opacity: 1.0; }

    50% { opacity: 0.2; }

    100% { opacity: 1.0; }

}
/*              fin  du blink doux                        */

.blink_me {

    -webkit-animation-name: blinker;

    -webkit-animation-duration: 1s;

    -webkit-animation-timing-function: linear;

    -webkit-animation-iteration-count: infinite;


    -moz-animation-name: blinker;

    -moz-animation-duration: 1s;

    -moz-animation-timing-function: linear;

    -moz-animation-iteration-count: infinite;

    
    animation-name: blinker;

    animation-duration: 1s;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

}

@-moz-keyframes blinker {  

    0% { opacity: 1.0; }

    50% { opacity: 0.0; }

    100% { opacity: 1.0; }

}

@-webkit-keyframes blinker {  

    0% { opacity: 1.0; }

    50% { opacity: 0.0; }

    100% { opacity: 1.0; }

}

@keyframes blinker {  

    0% { opacity: 1.0; }

    50% { opacity: 0.0; }

    100% { opacity: 1.0; }

}

color:#2d5986;

h1{font-size:2.5em;line-height:1.3em;margin-top:0;margin-bottom:0.5em;}

h2{font-size:2em;line-height:1.3em;margin-top:0.667em;margin-bottom:0.667em;}

h3{font-size:1.6em;line-height:1.3em;margin-top:1.0em;margin-bottom:0.9em;}

h4,h5,h6{font-size:1.2em;line-height:1.3em;margin-top:0.909em;margin-bottom:0.909em;}