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

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

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

/* Elements principaux
------------------------------------------ */
body { text-align: center; background:#ddd;}
.page { position: relative; width:100%; padding:1em; text-align: left;  }
.header {}
.main { padding: 1em 0; }
.footer { clear: both; padding: 1em 0 0; margin:1em 0 0 0; border-top:1px solid #999; }
.soutien {background:url('./images/coins.svg') no-repeat, #c41558;background-size:2em auto; background-position: top 50% left 0.5em; width: fit-content; padding: 1em 1em 1em 3em; margin: 1em auto; color: #fff; border: solid 2px #c41558; transition: all .2s ease-out; font-weight:bold; }
.soutien:hover {background:url('./images/coins-hover.svg') no-repeat, transparent; background-size:2em auto; background-position: top 50% left 0.5em; color: #c41558; transition: all .2s ease-out; }

/* largeur calculee du wrapper: 960*70%  = 672px */
.wrapper { clear: both; width: 100%; overflow: hidden; }
.content { min-height: 350px; }
/* largeur calculee du aside: 672px / 3 = 224px = 23.333 %*/
.aside { display: none; }
  
/* Entete et barre de navigation
------------------------------------------ */
.header .spip_logo_site { display: block; margin: 0; line-height: 1; font-weight: bold; font-size: 0; }
.header .spip_logo_site,
.header .spip_logo_site a,
.header .spip_logo_site a:hover { background: transparent; text-decoration:none; color:#222; }
.header .spip_logo_site a:hover  {color:#db1762;}
.header .spip_logo_site a:hover img {opacity:0.7;}
.header .spip_logo {margin-bottom:0;}
.header #slogan { margin: 0; }
.borderheader { height: 1em; width: 100%; position: relative; }    
.borderheaderpartial { background-color: #28472b; position: absolute; width: 80%; height: 3px; margin: 0.5em 0 0 0; }
.menu_lang { margin-right: 1em;}
#menu_lang strong { color: #28472b; text-decoration: none; font-style: normal; background: #fff; padding: 0.25em; border-radius: 0.2em;}
#menu_lang a { color: #fff; text-decoration: none; padding: 0.25em; border-radius: 0.2em;}
#menu_lang a:hover { background-color: #28472b; text-decoration: none; padding: 0.25em; border-radius: 0.2em;}
.menu_lang div#formulaire_menu_lang.formulaire_spip.formulaire_menu_lang form div label { display: none;}
.menu_lang div#formulaire_menu_lang.formulaire_spip.formulaire_menu_lang form div select#var_lang {border-radius: 4px; padding: 0.25em; background-color: #28472b; color: #fff; font-weight: bold; border: none;}
.menu_lang div#formulaire_menu_lang.formulaire_spip.formulaire_menu_lang form div select#var_lang:hover {background-color: #fff; color: #28472b; cursor: pointer;}
.formulaire_menu_lang { position: absolute; right: 1em; top: 2em; display: block; border : 1px solid #28472b; border-radius: 5px; }

.nav {}
.nav li {display:inline;}
.nav li a { display: inline-block; padding: 0.25em 0.5em; margin: 0 0.25em 0.5em 0;border-radius: 0.25em;  text-decoration: none;  background: #f0f0f0; color: #db1762; }
.nav li.on a { background:#c41558; color:#fff; font-weight: normal; }
.nav li a:focus,
.nav li a:hover,
.nav li a:active { background: #c41558; color:#fff; }
 

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

/* Cards
------------------------------------------ */
.cards {margin: 1em auto 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 1em 0.5em;}
.card {padding: 0.5rem; height: auto; text-align: left; transition: all .2s ease-out; background: #fff; border: solid 2px #eee;}
.card a, .card a:visited, .card a:hover, .card a:active {color: #fff; text-decoration: none; background-color:transparent;}
.details { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1em 0.5em}
.detail {padding: 0.5rem; text-align: center; transition: all .2s ease-out; background-color: #28472b; border: solid 2px #28472b;}
.detail:hover {transition: all .2s ease-out; background-color: #fff; color: #28472b;}
.detail2 {padding: 0.5rem; text-align: center; transition: all .2s ease-out; background-color: #28472b; border: solid 2px #28472b;}
.detail2:hover {transition: all .2s ease-out; background-color: #fff; color: #28472b;}
.details_footer  { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1em 0.5em}
.detail_footer {padding: 0.5rem; text-align: left;}

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

/* Affichage sur petits ecrans  
Cf.: http://www.alsacreations.com/astuce/lire/1177
------------------------------------------ */
/* largeur maximum 1600px */
@media (max-width: 1600px) {
	.cards { grid-template-columns: repeat(4, 1fr); }
}

/* largeur maximum 1150px */
@media (max-width: 1150px) {
	.cards { grid-template-columns: repeat(3, 1fr); }
}

/* largeur maximum 960px */
@media (max-width: 960px) {
	.cards { grid-template-columns: repeat(2, 1fr); }
	.details_footer { grid-template-columns: repeat(1, 1fr); }
}

/* largeur maximum 767px */
@media (max-width: 767px) {
	body {   	width: 100%;		padding: 0 20px;	}
	.page {  	width: 100%;  	max-width: none; 	}
	.formulaire_menu_lang { position: static; }
	.menu_lang {float: none; text-align: center; width: fit-content; display: block; margin: 0 auto; padding-top: 1em;}
	.adjust_title {float: none; text-align: center; display: block; margin: 0;}
}
 
/* largeur maximum 640px */
@media (max-width: 640px) {
     /* layout */
    .wrapper,
    .content,
    .content,

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

    /* header du calendrier full-calendar */
    table.fc-header td { display: block; text-align: left; }
    .cards { grid-template-columns: repeat(1, 1fr); max-width: 384px;}

}

/* fin */