html {
  font-family:Robot, sans-serif;
  font-weight: 300;
}

.champ_code {
   height: 30px; /* Hauteur des champs */
   width: 60px; /* Longueur des champs */
   border: 1; /* Epaisseur de la bordure s\'il y a lieu */
   border-color: grey; /* Couleur de la bordure s\'il y a lieu */
   #background: xxx; /* Couleur du fond du champ */
   #font-family: xxx; /* Police utilisé pour les champs remplis par l\'utilisateur */
   #font-size: xxxpx; /* Taille de la police */
   #color:#xxxxxx; /* Couleur de la police */
}

.oblique, .oblique_bleu, .oblique_rouge {
  font-style: oblique;
}

.oblique_bleu {
  color:blue;
}

.oblique_rouge {
  color:red;
}

div.annonce{
        text-align:left;
        float:left;
        width:100%;
        height: 100px;
        #border: 1px solid #9EA0A1;
        margin:2px;
        padding:5px;
}
    
div {
    display: block;
    font-family:Roboto, sans-serif;
}

div.gauche, div.centre, div.droite {
    #border: solid 1px #eeeeee;
    padding: 5px;
    margin: 5px;
    text-align: left;
    background: white;
    float: left;
    font-size: 110%;
    width: 60%;
    #height: 300px;
}

div.gauche {
  width : 20%;
}

img {
  border-radius: 5px;
}

div.filtre, div.avenir, div.retroactif6, div.retroactifa, div.sejour_retro, div.sanscr,div.detail, div.code, div.sejour, div.formation, div.jours, div.lundi, div.mardi, 
div.mercredi, div.jeudi, div.vendredi, div.samedi, div.dimanche {
  border-radius: 10px;
  width:100%;
  margin:7px;         /* de 5 à 7 */
  background:#a5a4a7; /* gris clair */
  color:black;
  font-weight: normal;
  float:left;
}

div.text_acti {
  width:68%;
  #height: 60px;
  float:left;
  #background:yellow;
  color:white;
  #margin:10px;
}

div.text_acti:hover {
  width:68%;
  #height: 60px;
  float:left;
  #background:yellow;
  color:white;
}

div.image_acti {
  width:32%;
  #height:60px;
  float:left;
  #background:green;
}



/* contenu des blocs d'activités */
div.content {
      position: relative;
      z-index: 2;
      top:-22px;
      color: white;
}
  

div.content:hover {
      position: relative;
      z-index: 2;
      color: black;
      #text-align: center;
}


div.formation {
  background:#b7fda5;
}

div.avenir, div.sejour, div.jours, div.lundi, div.mardi, 
div.mercredi, div.jeudi, div.vendredi, div.samedi, div.dimanche {
  #background:#d2eae8; /* bleu clair avenir */
  background:#418b86;
}

div.avenir:hover {
  background:#418b86;
  font-size: 130%;
  color:white;
}

div.jours:hover, div.lundi:hover,div.mardi:hover,div.mercredi:hover,div.jeudi:hover,div.vendredi:hover,div.samedi:hover,div.dimanche:hover 
{
  background:#418b86;
  font-size: 130%;
  color:white;
}



div.formation:hover {
  background:#4aa034; /* vert foncé */
  font-size: 130%;
  color:white;
}

div.retroactif6,div.retroactifa,div.sejour_retro {
  background : #f4d3fa; /* rose clair */
}

div.retroactifa:hover,div.retroactif6,div.sejour_retro:hover {
  background : #b351e3;
  font-size: 130%;
  color:white;
}

div.detail {
  background : #ebf9b0;
  font-size:100%;
  font-weight: normal;
}

div.creation, div.nbact {
  background : #ebf9b0;
  font-size:60%;
  color:grey;
  text-align:right;
}

div.nbact {
    background : white;
}


div.interne {
  background : #f0f4cf;
  font-size:100%;
  color:#094104;
  margin:0px;
}

td, input, textarea {
  font-family: Roboto, sans-serif ;
  font-size : 100%;
}




a { 
 text-decoration:none;
} 

div.part1,div.part2,div.part_etat, div.part19, div.part19_r, div.part19_v,div.part33, div.part22, div.part15, div.part1_r, div.part_etat_r, div.part2_r, div.part1_v, div.part_etat_v, div.part2_v {
        text-align:left;
        float:left;
        width:15%;
        height: 45px;
        border: 1px solid #9EA0A1;
        background-color:white;
        font-size : 90%;
        #margin:2px;
        #padding:5px;
}



div.part33 {
  width:33%;
}
div.part19, div.part19_v,div.part19_r {
  width:19%;
}
div.part22 {
  width:26%;
}

div.part2, div.part2_r, div.part2_v {
  width:27%;
}

div.part_etat, div.part_etat_r, div.part_etat_v {
  width:13%;
}

div.part1_r, div.part2_r, div.part_etat_r, div.part19_r {
  color:red;
}

div.part1_v, div.part2_v, div.part_etat_v, div.part19_v {
  color:green;
  font-weight: bold;
}

.bcenter {
  display : inline-block;
  text-align:center;
}

.annul  { 
  position: relative; 
  top: 0px; left: 400px;
  width:150px;
}

.clignote {
  color:black;
  animation: clignote 3s linear infinite;
}

@keyframes clignote {  
  50% { opacity: 0; }
}

div.rgpd, div.rgpd:hover {
  Display :inline;
  background:#a5a4a7; /* gris clair */
  font-size:80%;
  color:yellow;
  text-align:center;
}

.viewa {
    display: none;
    opacity: 0;
    transition: opacity 2s;
}

.viewa.active {
    display: block;
    opacity: 1;
}

button.help {
 height: 50px;
 width: 150px;
 border-radius: 50px;
 background:green;
}

.form-container {
    display: flex;
    gap: 20px; /* Espace entre les boutons */
    text-align:center;
}

.btn {
 height: 50px;
 width: 100px;
 border-radius: 50px;
 background:green;  
}

/* rendre les boutons presque carrés et séparés */
.button,
input[type=submit],
button[type=submit] {
  background:#00A6D0 !important; /* bleu priorité absolue */
  border-radius: 5px !important; /* Force un faible arrondi */
    -webkit-border-radius: 5px !important; /* Compatibilité anciens navigateurs */
    -moz-border-radius: 5px !important;
  margin: 1px;
  border:none !important;
}

input[type=submit]:hover,
button[type=submit]:hover {
   background:black !important;
}

input[type="password"],
input[type="text"]
{
  color:black !important; 
  background-color:#fafafa !important; 
  border-color:blue !important;
}

/* partie css specifique au bloc-notes */

div.day, div.lday, div.finl {
        text-align:left;
        float:left;
        width:14%;
        height: 60px;
        border: 1px solid #9EA0A1;
        background-color:yellow;
        #margin:2px;
        #padding:5px;
}

div.finld {
        width:1%;
        height: 30px;
        border:1px solid  #FFFFFF;
        background-color:white;
}
div.finl {
        width:1%;
        border:1px solid  #FFFFFF;
        background-color:white;
}
div.lday {
        height: 30px;
        border: 1px solid #9EA0A1;
        background-color:grey;
}

td.note {
  background-color:  #ebf9b0; ;  /* idem div detail */
  #text-align: center; 
  #vertical-align: middle;
}

input.admin {
  background:#e86109;
}

/* The Modal (background) */
.modal1 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


/* Modal Content/Box */
.modal1-content {
  background-color: #fefefe;
  margin: 200px auto; /* 15% from the top and centered */
  padding: 10px;
  border: 1px solid #888;
  width: 350px; 
  height:300px;
  border-color:black;
  border-radius:4%;
  color:blue;
}

.modal1:target {
  display:block;
}

.modal1_close {
  right:30px;
  top:30px;
  color:blue;
  font-family:sans-serif;
  text-decoration:none;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

table.normal {
  border : 2px solid green;
  table-layout: fixed;       /* largeur des colonnes fixe fixée par width */
  width: 12rem;
}

td.noir {
  border:2px solid black;
  background-color:  #d9e5f7 ;  /* gris très clair */
}

th.noir {
  border:4px solid black;
  background-color:  #d9e5f7 ;  /* gris très clair */
}


th.bleu, td.bleu {
  border : 2px solid blue;
  background-color:#F3EEED ;    /* bleu sur gris clair */
  color:blue;  /* text en bleu */ 
}

th.rouge, td.rouge {
  border : 2px solid red;
  background-color:#fdf0e6;   /* rouge très très clair */
  font-weight: bold; /* texte en gras */
  color:red;         /* text en rouge */
}

div.filtre {
  border-radius: 10px;
  width:100%;
  margin:5px;
  background:#a5a4a7; /* gris clair */
  color:black;
}

div.annonce{
  text-align:left;
  float:left;
  width:100%;
  height: 100px;
  #border: 1px solid #9EA0A1;
  margin:2px;
  padding:5px;
}

/* css propre à testwp */
div.cadre {
  display:block;
  text-align:left;
  float:left;
  border:1px solid  black;
  color:blue;
  font-size:100%;
  width:40%;
  height: 20px;
  background : #1cf9b0;
  font-weight: bold;
}

div.adherent {
  float:left;
  border:1px solid  grey;
  color:black;
  font-size:80%;
  width:30%;
  height: 20px;
  background : #ebf9b0;
}

div.petit {
  font-size : 60%;
}

div.nbre {
  float:left;
  text-align:center;
  border:1px solid  grey;
  color:black;
  font-size:80%;
  width:10%;
  height: 20px;
  background : #ebf9b0;
}

div.vide {
  float:left;
  width:60%;
  height: 20px;
  background : #ebf9b0;
}

/* partie testwp sur lws */
.detail {
  font-weight: 300 !important;
}

table.detail,tr.detail
{
  background : #ebf9b0;
  padding-bottom : 0px;
  padding-top : 0px;
  cellspacing : 0px !important;
  border:1;
}

table.detail { 
  border-spacing: 0px !important; 
} /* cellspacing */


th.detail, td.detail {
 padding: 0px !important; 
}