/*-------------------------------------------------------------------------
 * file: style.css
/*
Theme Name: monSite
Author: Céline leblond 
Description: Site pour association MJCL Connerre LOMBRON TT
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: 

couleur logo
#46545D = gris
#356AA7 = bleu
#B90609 = rouge
#FFFFFF =blanc

body
#fcffd3

bandeau 
#46545D
*/
 ----------------------------------------------------------------------- */

 
html {
  font-size: 100%;
}
body {
  margin: 0px;
  padding: 0px;
  background: #fcffd3 top center no-repeat;
  font-family: arial;
  font-size: 13px;
  color: #1a1718;
  line-height: 1;
}
header, nav, aside, footer, figure, section, article,  {
  display: block;
}
* {
  outline: none;
}
a {
  color: #333;
  text-decoration: none;
}
a:hover {
  color: #B90609;
  text-decoration: none;
}

#content {
/*  width: 1060px;*/
  margin: 0 auto;
}
@media (min-width:768px){#content{width:890px}}
@media (min-width:992px){#content{width:970px}}
@media (min-width:1200px){#content{width:1060px}}
/*
 *==============================================================
 * HEADER
 *=========
 */
header {
  height: 350px;
  position: relative;
}
#logo {
  position: absolute;
  top: 5px;
  left: 270px;
  display: block;
  width:620px;
  height: 290px;
  background: url('img/logo club.png') top right no-repeat;
  text-indent: -7000px;
}
.menu {
  position: absolute;
  bottom: 0px;
  left: 0px;
  list-style-type: none;
  margin: 0px;
  margin-bottom: 5px;
  padding: 0px;
  background: #46545D;
  width: 1060px;
  height: 40px;
  text-align: left;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.menu li {
  display: inline-block;
}
.menu li a {
  display: block;
  padding: 0px 10px;
  height: 24px;
  line-height: 24px;
  font-size: 19px;
  color: #ffffff; /*#a6a6a6;*/
  margin-top: 8px;
  margin-left: 2px;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
}
.menu li a:hover {
 color: #3282F6;
}
.menu li.current a {
  background-color: #B90609;
  color: #FFFFFF;
  box-shadow: 0px 1px 0px #4f4d4d;
} 
#recherche {
  position: absolute;
  top: 40px;
  right: 20px;
} 
#recherche input[type="text"] {
  padding: 10px;
  font-family: Georgia;
  font-size: 12px;
  font-style: italic;
  color: #848484;
  width: 80px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: none;
  border: 1px solid #dedede;
  background-color: #efefef;
  -webkit-transition: 0.5s;
} 
#recherche input[type="text"]:focus {
  border: 1px solid #ccc;
  width: 250px;
  background-color: #fff;
} 
.Priorites{
  position: absolute;
  top: 70px;
  left: 0px;
  display: block;
/*
  border: 4px solid  #96bf0f;
  width: 100%;
  padding: 0%;
  margin : 0px;
  background: url(img/intergeneration.png) 100% 20% no-repeat;
*/

}
.Priorites_Texte{
  width: 680px;
/*  background: url(img/bulleg2.png) top left no-repeat;
  background-size: 680px 175px;
    */
  padding: 1%
    
}
.Priorites ul{
    padding-left: 10px;
    padding-right: 150px;
    font-size: 18px;
    line-height: 18px;       
}

.Priorites ul:hover{
    font-size: 15px;
}

.Priorites li{

    list-style: disc;
    padding: 4px;

}
/*
.Priorites li:hover{
    padding: 1px;
    font-size: 18px;
}
*/
.L1{color: #46545D}
.L2{color: #356AA7}
.L3{color: #B90609}
.L4{color: #B90609}



.Priorites h2{
    line-height: 30px;
    font-size:10px;
    padding-left: 10px;
    
}
.Priorites strong{
    font-size: 20px;
    color : black;
}


.lien a {
  color: #356AA7;
  font-size:20px;
}
.lien a:hover {
  color: #B90609;
  font-size:25px;
}

 /*
 *==============================================================
 * SLIDER
 *=========
 */
 #slider {
  height: 600px;
  width: 80%;
  overflow: hidden;
  margin-top: 20px;
}

 /*
 *==============================================================
 * Content-blank
 *=========
 */

#content-blank {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
/*    height: 550px;*/
    background: #ffffff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    
    
}

#content-blank p{
    color: #777B7A;
    line-height: 40px;
    font-size: 20px;
    margin-top: 10px;
}
/*=========================================================================*/

.colonne{
    border: 2px solid  #d1012e;
    width: 100%;
    padding: 30px;
  margin : 3px;
  display: flex;
    flex-wrap: wrap;
}
.colonne ul ol{
    padding-left: 40px;
    width: 90%;
}

.colonne ul li{
    font-size: 20px;
    /*line-height: 15px;*/
    list-style: disc;
    padding: 10px;
    
}
.colonne ol li{
    font-size: 20px;
    /*line-height: 15px;*/
    list-style: decimal;
    padding: 10px;
    
}

.colonne li a:hover{
    color: #d1012e;
    font-weight: 900;
}
.colonne li a{
    color: #96bf0f;
    font-weight: 700;
}

.colonne h1{
    font-size: 40px;
    line-height: 40px;

}
.colonne h2{
    font-size:12px;
    display: inline-block;
    width: 100%;
    padding-bottom: 10px;
    padding-top: 10px;
}
.colonne strong{
    font-size: 35px;
    color : black;
}
.colonne bold{
    font-size: 20px;
    color : mediumvioletred;
}
.colonne  a{
    font-size: 20px;
    color : blue;
}
.colonne  a:hover{
    font-size: 22px;
    color : mediumvioletred;
}

.affichette{
    display: block;
    width: 100%;
    color :blue;
    margin-bottom: 10px;
}
.affichette a{
    color :blue;
    text-decoration: underline;
}
.affichette a:hover{
    color :#d1012e;
    text-decoration: underline;
}
.suite {
    display: block;
    margin-top : 10px;
    padding: 5px 10px;
    background: #ffdd03;
    border: 3px solid #ffdd03;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    color: black;
    text-transform: uppercase;
    font-weight: 700;
    transition: 0.5s;
}
.suite:hover{
    padding: 5px 30px;
    color: #d1012e;
}
.colonne p{
    display: block;
    width: 80%;
}
.tabulation {
margin-left: 100px;
}

.image-salles {
  height: 200px;
   width: 800px;
}
.image-tarifs {
  height: 550px;
    width: 475px;    /*  Maintient le ratio hauteur/largeur */
}
.image-entrainement {
  height: 420px;
  width: 800px;     /* Maintient le ratio hauteur/largeur */
}
/*=========================================================================*/


.activites{
    border: 2px solid  #d1012e;
    width: 100%;
    padding: 30px;
    margin : 3px;
    display: flex;
    flex-wrap: wrap;
}

.activites h2{
    font-size:20px;
    display: inline-block;
    width: 100%;
    padding-bottom: 20px;
}

.activites ul {
    padding-left: 40px;
    width: 80%;
}
.activites li{
    font-size: 20px;
    /*line-height: 15px;*/
    list-style: disc;
    padding: 10px;
    
}
.texte {
    margin-bottom : 10px;
    margin-top : 10px;
    text-align: justify;
    padding-right: 30px;
}
.texte2 {
    width: 100%;
    margin-top : 20px;
    text-align: justify;
    padding-right: 30px;
}

.activites strong{

    font-size: 25px;
    color : black;
    margin-right: 10px;
}

.activites img {
    /*padding-right: 20px;*/
    text-align: right;
    display: block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
.responsable {
    display: block;
    width: 60%;
    text-align: left;
}
.responsable span{
    font-size: 20px;
    font-weight: 550;
    color:#96bf0f; 
}
.texte span{
    font-size: 20px;
    font-weight: 550;
    color: #96bf0f;
}
.texte bold{
    font-weight: 550;
    color: #d1012e;
}
.texte2 bold{
    font-weight: 550;
    color: #d1012e;
}

/*=========================================================================*/

.affiche {
    width: 100%;
}
/*=========================================================================*/
/*
.portrait .visage {
    display: block;
    width : 200px;
    height :200px;    
}

.portrait .poste {
    position:absolute;
    top : 70%;
    text-align: center;
    width : 100%;
    
}
*/
.vignette{
    width: 100%;
}
.portrait {
/*    width: 200px;
    height: 280px;
    position:relative;
    margin: auto;
*/
/* ul style*/
    list-style: none;
}
ul.portrait li{
    text-align: center;
    list-style: none;
}
.col-2 {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}
.bustePoste{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
}
.poste{
    width: 80%;
    text-align: left;
    margin: auto;

}
.buste{
    padding: 10px;
}


ul.portrait li h2{
    font-size: 17px;
    font-weight: bold;
    text-align: left;
}
ul.portrait li img{
    display: block;

    width:120px;
    height: auto;
    vertical-align: middle;
}
/*=========================================================================*/

.infos {
    text-decoration: underline;
    color: blue;
    text-decoration-color: blue;
    text-align: center;
    font-style: italic;
}
/*=========================================================================*/

.Connexion form{
    width: 100%;
    color: #d1012e;
    text-align: center;
     
}
.Connexion input{
    margin: 10px;
    font-size: 20px;
    width: 40%;
    text-align: center;   
}
.Connexion label{
    margin: 10px;
    font-size: 20px;
   display: inline-block;
    width: 40%;
    text-align: right;   
    
}
.connexion a:hover{
    color: #d1012e;
    font-weight: 900;
}
.connexion a{
    color: #96bf0f;
    font-weight: 700;
}
.confirmation{
    font-weight: 600;
    text-align: center;
    font-size: 25px;
    margin: 50px;
}

.confirmation a{
    color: #96bf0f;
    font-weight: 700;
}
.confirmation a:hover{
    color: #d1012e;
    font-weight: 900;
}


#texte {
    position:absolute;
    z-index:2;
    top: 50px;
    left: 10px;
}
.confirmation {
    
}


#copyright{
    padding: 20px;
    text-align: center;
}