@charset "utf-8";
/* CSS Document */

@media all and (max-width : 1550px) {
	.div-inner {width: 94%; padding: 0 3%;}
    #menu-top, #logo-droit {right: 3%;}
    
    #logo-left {font-size: 40px;}
    #menu li { display: inline-block; margin-right: 50px;}
    
    #contenu-liste-gauche h1 {font-size: 30px;}
    #contenu-liste-gauche > .accordion > h3 {border-top: 2px solid #00a950; font-size: 18px;}
    #contenu-liste-gauche .accordion .ui-accordion-content h3 {font-size: 15px;}
    #contenu-liste-gauche ul a {font-size: 13px;}
    
    #contenu-liste-droit #accueil-boutons a {width: 350px; margin-bottom: 20px;}
    
    #accueil-liste-titre {font-size: 20px; letter-spacing: 0; margin-bottom: 20px;}
    #accueil-liste-titre span {font-size: 16px;}
    .accueil-liste-element-photo {height: 250px;}
    .accueil-liste-element-titre {font-size: 16px;}
    #accueil-texte h1 {font-size: 34px; margin-bottom: 30px;}
    #accueil-texte p {font-size: 16px; margin-bottom: 10px;}
    
    #accueil-boutons a {width: calc(40% - 40px); margin: 0 20px; padding: 15px 20px; background-color: #00a950; color: #fff; display: inline-block; text-decoration: none; position: relative; text-align: left; border-radius: 20px; vertical-align: top;}
    #accueil-boutons a i { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); font-size:50px;}
    #accueil-boutons a .accueil-boutons-titre, #accueil-boutons a p {padding-left: 80px;}
    #accueil-boutons a .accueil-boutons-titre { font-weight: bold; font-size: 24px;}
} 

@media all and (max-width : 1150px) {
    #menu-top a {font-size: 14px; padding: 10px;}
    #logo-left {font-size: 30px; padding-top: 50px; height: 80px;}
    #logo-left span {left: 70px; top: 25px;}
    #logo-left img {width: 50px; margin-top: 20px;}
    #logo-droit { top: 60px;}
    #logo-droit img {width: 200px; }
    #menu li { display: inline-block; margin-right: 30px;}
    #menu a { font-size: 14px; letter-spacing: 1px;}
    
    #accueil-liste-inner {padding-right: 40px;}
    .accueil-liste-element-photo {height: 200px;}
    #accueil-texte {width: calc(70% - 40px); float: right; padding-left: 40px;}
} 

@media all and (max-width : 900px) {
    #phrase-accueil-liste {display: none;}
    
    #contenu-liste-gauche {width: calc(100% - 60px); float: none; margin-bottom: 40px;}
    #contenu-liste-droit {width: 100%; float: none; padding-left: 0;}
} 

@media all and (max-width : 750px) {
    #accueil-liste {width: 100%; float: none;}
    #accueil-liste-inner {padding-right:0; border: 0;}
    .accueil-liste-element {display: inline-block; width: 45%; margin: 0 2%; vertical-align: top;}
    #accueil-texte {width: 100%; float: none; padding-left: 0; padding-bottom: 40px;}
    #accueil-texte h1 {font-size: 30px; margin-bottom: 20px;}
    
    #accueil-boutons a {width: calc(100% - 40px); margin: 0; margin-bottom:  20px;}
    #accueil-boutons a i { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); font-size:50px;}
    #accueil-boutons a .accueil-boutons-titre, #accueil-boutons a p {padding-left: 80px;}
    #accueil-boutons a .accueil-boutons-titre { font-weight: bold; font-size: 24px;}
} 


@media all and (max-width : 650px) {
    #menu {margin: 0; text-align: left;}
    #menu::before {display: none;}
    header .menu {
      clear: both;
      max-height: 0;
      transition: max-height .2s ease-out;
      overflow:hidden;
      list-style:none;
      margin: 0 0 20px 0;
    }
    #menu-top {position: relative; top: auto; right: auto; left: 50%; margin-left: -100px;}
    #menu li {display: block; background-color: transparent; margin-right: 0;}
    #logo-left {font-size: 21px; padding-top: 0; height: 80px; left: 50%; margin-left: -150px;}
    #logo-left span {left: 50px; top: 25px;}
    #logo-left img {width: 40px; margin-top: 20px;}
    #logo-droit { position: relative; right: auto; top: auto; left: 50%; transform: translateX(-50%); margin-bottom: 20px;}
    
    #contenu-liste-droit #accueil-boutons a {width: calc(100% - 60px); margin: 0 0 20px 0;}
    
    .lightgallery .fiche-media {width: 49%;}
    .lightgallery .fiche-media img {width: 100%;}
    
    #recherche {display: none;}
} 

@media all and (max-width : 450px) {
    .accueil-liste-element {display: inline-block; width: 100%; margin: 0; vertical-align: top;}
    
    #accueil-texte h1 {font-size: 24px; margin-bottom: 20px;}
}