/* --------------------------------------------------------------

   layout.css
   Disposition des blocs principaux
   cf.: http://romy.tetue.net/structure-html-de-base

-------------------------------------------------------------- */

/* Elements principaux
------------------------------------------ */
body { text-align: left; background-color:#F4F4F4; margin:0; padding:0}


.page { margin:auto; padding:0; overflow:hidden}
.main { padding:0; margin:0; }
.footer { text-align:center; clear: both; padding: 20px; margin:0; border-top:1px solid #999; background-color:#000000; color:#FFFFFF }
.footer a { color:#FFFFFF}
.footer a:visited { color:#FFFFFF}
/* largeur calculee du wrapper: 960*70%  = 672px */
.wrapper { clear: both; float:left; width: 70%; overflow: hidden; }
.content { min-height: 350px; }
/* largeur calculee du aside: 672px / 3 = 224px = 23.333 %*/
.aside { float:right; width:300px; overflow: hidden; }    
  
/* Entete et barre de navigation
------------------------------------------ */
.header {
  width: auto;
  height: 250px;
  background-image: url('https://gate-microscopie.fr/image1.jpg'), 
                    url('https://gate-microscopie.fr/image2.jpg'), 
                    url('https://gate-microscopie.fr/image3.jpg'), 
                    url('https://gate-microscopie.fr/image4.jpg'),
                    url('https://gate-microscopie.fr/image5.jpg'),
                    url('https://gate-microscopie.fr/image6.jpg');
  background-size: cover;
  background-position: center;
  animation: changeBackground 30s infinite, moveBackground 20s infinite ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes changeBackground {
  0% {
    background-image: url('https://gate-microscopie.fr/image1.jpg'), 
                      url('https://gate-microscopie.fr/image2.jpg'), 
                      url('https://gate-microscopie.fr/image3.jpg'), 
                      url('https://gate-microscopie.fr/image4.jpg'),
                      url('https://gate-microscopie.fr/image5.jpg'),
                      url('https://gate-microscopie.fr/image6.jpg');
  }
  16.67% {
    background-image: url('https://gate-microscopie.fr/image2.jpg'), 
                      url('https://gate-microscopie.fr/image3.jpg'), 
                      url('https://gate-microscopie.fr/image4.jpg'), 
                      url('https://gate-microscopie.fr/image5.jpg'),
                      url('https://gate-microscopie.fr/image6.jpg'),
                      url('https://gate-microscopie.fr/image1.jpg');
  }
  33.33% {
    background-image: url('https://gate-microscopie.fr/image3.jpg'), 
                      url('https://gate-microscopie.fr/image4.jpg'), 
                      url('https://gate-microscopie.fr/image5.jpg'), 
                      url('https://gate-microscopie.fr/image6.jpg'),
                      url('https://gate-microscopie.fr/image1.jpg'),
                      url('https://gate-microscopie.fr/image2.jpg');
  }
  50% {
    background-image: url('https://gate-microscopie.fr/image4.jpg'), 
                      url('https://gate-microscopie.fr/image5.jpg'), 
                      url('https://gate-microscopie.fr/image6.jpg'), 
                      url('https://gate-microscopie.fr/image1.jpg'),
                      url('https://gate-microscopie.fr/image2.jpg'),
                      url('https://gate-microscopie.fr/image3.jpg');
  }
  66.67% {
    background-image: url('https://gate-microscopie.fr/image5.jpg'), 
                      url('https://gate-microscopie.fr/image6.jpg'), 
                      url('https://gate-microscopie.fr/image1.jpg'), 
                      url('https://gate-microscopie.fr/image2.jpg'),
                      url('https://gate-microscopie.fr/image3.jpg'),
                      url('https://gate-microscopie.fr/image4.jpg');
  }
  83.33% {
    background-image: url('https://gate-microscopie.fr/image6.jpg'), 
                      url('https://gate-microscopie.fr/image1.jpg'), 
                      url('https://gate-microscopie.fr/image2.jpg'), 
                      url('https://gate-microscopie.fr/image3.jpg'),
                      url('https://gate-microscopie.fr/image4.jpg'),
                      url('https://gate-microscopie.fr/image5.jpg');
  }
  100% {
    background-image: url('https://gate-microscopie.fr/image1.jpg'), 
                      url('https://gate-microscopie.fr/image2.jpg'), 
                      url('https://gate-microscopie.fr/image3.jpg'), 
                      url('https://gate-microscopie.fr/image4.jpg'),
                      url('https://gate-microscopie.fr/image5.jpg'),
                      url('https://gate-microscopie.fr/image6.jpg');
  }
}

@keyframes moveBackground {
  0% {
    background-position: center;
  }
  16.67% {
    background-position: 10% 10%;
  }
  33.33% {
    background-position: -10% -10%;
  }
  50% {
    background-position: 10% -10%;
  }
  66.67% {
    background-position: -10% 10%;
  }
  83.33% {
    background-position: 5% 5%;
  }
  100% {
    background-position: center;
  }
}


.header h1 {
  font-size: 26px; /* Taille de la police */
  line-height:25px;
  color:#003399;
  font-weight: bold; /* Met le texte en gras */
  text-align: center; /* Centre le texte */
  text-transform: uppercase; /* Met le texte en majuscules */
  letter-spacing: 2px; /* Espacement entre les lettres */
  text-shadow: 
    2px 2px 0px #ffffff,  /* Ombre droite en blanc */
    -2px -2px 0px #ffffff, /* Ombre gauche en blanc */
    2px -2px 0px #ffffff,  /* Ombre en haut à droite en blanc */
    -2px 2px 0px #ffffff;  /* Ombre en bas à gauche en blanc */
}
.header .spip_logo_site {margin: 0; line-height: 1; font-weight: bold; text-align:center;}
.header .spip_logo_site,
.header .spip_logo_site a,
.header .spip_logo_site a:hover { background: transparent; text-decoration:none; color:#000; }
.header .spip_logo_site a:hover img {opacity:0.7;}
.header .spip_logo {}
.header #slogan { margin: 0; }
.header h1 { margin: 5px; padding:5px; line-height:30px; }
.header img { margin: 0; padding:0; }

.formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }
.logo2 { width:100%; text-align:center; 

}
.nav { margin:10px}
.nav a {text-decoration: none;}
.nav li {display:inline;}
 
.nav li a { display: inline-block; padding: 0.25em 0.5em; margin: 0 0.25em 0.5em 0;border-radius: 10px;   background: #003399; color: #FFFFFF; }
.nav a:focus,
.nav a:hover,
.nav a:active {background: #FF3300; color:#FFFFFF; }
.nav .membre .membre_on a {font-weight:bold; border-bottom:#FF3300 thin dotted;}
.nav .membre .membre_off a {font-weight:bold;  border-bottom:#FF3300 thin dotted;}
.nav .membre li a {background:#FFFFFF; width:fit-content; border:#003399 thin solid;  padding: 0.25em 0.5em; margin: 0 0.25em 0.5em 0;border-radius: 10px; display: flex;
            align-items: center; }
.membre2 a {background: #333333; color: #FFFF00}
.membre2 a:focus,
.membre2 a:hover,
.membre2 a:active {background: #FF3300; color:#FFFFFF;}
.membre a:focus,
.membre a:hover,
.membre a:active {background: #FF3300; color:#FFFFFF; }

   .membre {float: right;
            
        }

        .membre img {
            width: 32px; /* Taille de l'icône */
            height: 32px;
            margin-right: 10px; /* Espace entre l'icône et le texte */
        }


.recherche {padding:10px; text-align:center;}
.recherche hr {display:inline; border:thin #003399; }
.recherche input .text {width:200px;}
.recherche .btn { width: fit-content; background-color:#003399; color:#FFFFFF; font-weight:bold;}

.formulaire_forum2 {float: left; padding-left:10px; margin:20px; width:fit-content; line-height:20px; font-size:16px; border-bottom:#003399 thin solid;}
.formulaire_forum2 a {color: #FF3300; text-decoration: none; font-weight:bold;}
 
.meme_rubrique { margin:10px; }
.meme_rubrique li {padding-bottom:10px; list-style:none }

.formulaire_reponse { width: 98%; margin:auto; padding:10px; background-color:#FFFFFF;}

.titres-rub ul{padding: 10px}
.titres-rub li a { text-decoration:none}
.titres-rub li {background-color:#FFFFFF;
border-radius:20px;
border:#003399 solid thin;
margin: 10px;
margin-bottom:10px;
text-align:justify;
padding:10px;
font-size:18px;
}
.titres-rub h3 {
}

.footer .colophon { float: left; height: 40px; width: 70%; margin: 0; }
.footer .generator { float: right; }
.footer .generator a { padding: 0; background: none; }
.footer .generator a:hover  {color:#c41558;}

/* Gabarit d'impression
------------------------------------------ */
@media print {
    .page,
    .wrapper,
    .content { width: auto; }
    .nav,
    .arbo,
    .aside,
    .footer { display: none; }
}

/* Affichage sur petits ecrans  
Cf.: http://www.alsacreations.com/astuce/lire/1177
------------------------------------------ */


 
/* largeur maximum 640px */
@media (max-width: 700px) {
     /* layout */
    .wrapper,
    .content,
    .aside { width: 100%;}

    /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
    .nav { }
    .nav ul li a { float: none; border: 0; }
    .arbo { margin-top:10px; }
    .footer .colophon { width: auto; float: none; }
    .footer .generator { display: none; }

    /* header du calendrier full-calendar */
    table.fc-header td { display: block; text-align: left; }
.nav .membre {float: left; width:100%; display: block;}
}

/* fin */