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

   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%; margin:2em auto 0 auto; text-align: left;  }
.header {}
.main { padding: 1.5em 1rem; }
.footer { clear: both; padding: 0; margin:0; text-align: justify; background-color : #1a1a1a; color : #fff; box-shadow: 0px -3px teal;}

/* 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 { float: right; width: 23.333%; overflow: hidden; }    

/* Elements modif
------------------------------------------ */
.search_intro {
  margin-top: -35px;
}
.page_article main.main .spip_logo { float:right; margin: -42px 0 0 0; padding: 0; border: none; width: auto; border-radius: 50%;}
  
/* Entete et barre de navigation
------------------------------------------ */
.header { padding: 0 1rem 0 1rem; }
.header .spip_logo_site { display: block; margin: 0; line-height: 1; font-weight: bold; font-family: "Satisfy", serif;  padding-left: 0.1em;  }
.header .spip_logo_site,
.header .spip_logo_site a,
.header .spip_logo_site a:hover { background: transparent; text-decoration:none; color:teal; }
.header .spip_logo_site a:hover  {background-color:teal; color:#fff;}
.header .spip_logo_site a:hover img {opacity:0.7;}
.header .spip_logo {margin-bottom:0;}
.header #slogan { margin: 0; }

.formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }

.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: 70%; margin: 0; }
.footer .generator { float: right; }
.footer .generator a { padding: 0; background: none; }
.footer .generator a:hover  {color:#c41558;}


/* Cards
------------------------------------------ */
.card {height: auto; text-align: left; transition: all .2s ease-out; padding: 0; background: #fff; border: solid 2px #eee;}
.cards {margin: 3em auto 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.5em;}
.card .frame_inside img.spip_logo {width: 100%; height: auto;}
.card img.spip_logo {height: 2em; float: left; margin: .5em .5em 0 0;}
.card a .derniers_articles_outside img.spip_logo {height: auto; float: left; margin: 0.3em 0.5em 0.2em 0; border-radius: 50%;}
.card:hover {background-color: teal; color: #fff;}
.cards a, .cards a:hover, .cards a:visited { text-decoration:none; color:#000000; }
.cards a:hover {color: #fff;}
.cardsintro3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1em; align-items: stretch; }
.cardintro3 { padding: 0 1rem; }
.cardsintro a, .cardsintro a:hover, .cardsintro a:visited, .cardsintro a:active { text-decoration:none; color:#000000; }
.cardintro {height: auto; transition: all 0.2s ease-out; background-color: #fff; border: 1px solid #D3D3D3; padding: 0; min-height: 175px;}
.cardintro:hover {background-color: teal; color: #fff;}
.cardsintro a:hover { color:#fff; }
.website_intro_outside {padding: 1em;}
.cardsintro { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 5em; width: 80%;  margin: 3em auto;}
.cardsintro img.spip_logo {margin: 0 1em 1em 0; border-radius: 50%;}
.website_intro_outside, .derniers_articles_outside {padding: 1em;}

/* Search
------------------------------------------ */
.formulaire_spip.formulaire_recherche { float: right; padding: 0;}
.formulaire_spip.formulaire_recherche label { font-size: 0px;}

/* Captcha
------------------------------------------ */
.captcha-card .captcha-input label { color: #000;}

/* Menu
------------------------------------------ */  	
/* Hamburger source inspiration : https://sharkcoder.com/blocks/hamburger */
.menu-conteneur.navbar-inner { display: none;}
.menu__icon:hover { cursor: pointer;}
.menu__icon { height: 26px; width: 26px; margin: 0.5em 0 0 0; position: absolute; top: 0; right: 1em; display: inline-block; z-index: 20;}
.menu__icon span { display: block; background: teal; width: 100%; height: 4px; margin-top: -2px; position: absolute; left: 0; top: 50%;}
.pas_surlignable.page_article li.on:nth-child(3) > a:nth-child(1) { height: auto;}
.page_sommaire li.hometag a.menu-items__lien, li.on.active a.menu-items__lien { height: auto;}
.menu__icon:before,
.menu__icon:after { content: ""; display: block; background: teal; width: 100%; height: 4px; position: absolute; left: 0; transform-origin: center center; transform: rotate(0deg); transition: all 0.3s ease;}
.menu__icon:before { top: 2px; margin-top: -2px;}
.menu__icon:after { bottom: 2px; margin-bottom: -2px;}
.menu_shown .menu__icon span { background: transparent;}
.menu_shown .menu__icon:before { top: 50%; transform: rotate(45deg);}
.menu_shown .menu__icon:after { bottom: 50%; transform: rotate(-45deg);}
.mobile.menu { position: absolute; top: 0; left: 0; width: 100%; min-height: 100vh; text-align: center; padding-top: 112px; background: #000; z-index: 10; transition: all .4s ease-in-out; transform: translateX(-100%);}
.menu_shown .mobile.menu { transform: translateX(0);}
.mobile .menu__item { display: block; line-height: 2; padding: 25px 0;}
a.menu__icon.mobile:hover{ background:none;}
ul.menu.mobile li.menu-entree a.menu-items__lien:hover { color:#fff; background:teal; height: 5em;}
ul.menu.mobile li.menu-entree.item.contribute_menu a.menu-items__lien { padding: .25em; margin: 0; }
li.menu-entree.item.menu-items__item.menu-items__item_objet.menu-items__item_mot.gaia_commons { margin: 0;}
ul.menu.mobile li.menu-entree.item.gaia_commons a.menu-items__lien { background: #EFBF04; box-shadow: none; padding: .25em; margin: 0; color: #000000}
ul.menu.mobile li.menu-entree.item.gaia_commons a.menu-items__lien:hover{ background-color: teal; transition: all 0.2s linear; }
ul.menu.mobile li.menu-entree a.menu-items__lien { color:#fff; font-size: 1.5em;}
li.menu-entree.item {padding: 1em 0;}
li.menu-entree.item.hometag a.menu-items__lien {background: none;}

/* 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
------------------------------------------ */

.smallonly { display: none;}
.notoosmall { display: none;}            

/* largeur maximum 1600px */
@media (max-width: 1600px) {
	.cards { grid-template-columns: repeat(4, 1fr); }
	.frame_inside {min-height: 380px;}
}

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



/* largeur maximum 1000px */
@media (max-width: 1000px) {
	.article_frame { float: none; width: 100%; margin: 0;}
	.cardsintro3, .cardsintro {grid-template-columns: repeat(1, 1fr); align-items: normal;}
	.nosmall2 { display: none;}
}

/* largeur maximum 960px */
@media (max-width: 960px) {
	#footer .colophongauche, #footer .colophoncentre, #footer .colophondroite {float: none; width: 100%; padding: 0 0 1em 0; display: block; text-align:center;}
	body {   	width: 100%;		padding: 0;	}
	.page {  	width: 100%;  	max-width: none; 	}
	.header {max-width: 100%;}
	.rechercher {top: 0; position: relative; right: 0;}
	.cards { grid-template-columns: repeat(2, 1fr); }
	.formulaire_spip.formulaire_recherche {float: none; text-align: center;}
	.search_intro { margin-top: 0;}
}

/* largeur maximum 767px */

@media (max-width: 767px) {
.logo_article img { margin: 2em 0 0 0;}
.nosmall { display: none;}
.smallonly { display: block;}
.page { padding-top: 0;}
.header {position: relative; height: auto; line-height: normal ; padding: 1em;}
.clearfix.header div.smallonly img.spip_logo {float: none; height: 4em;}
.headersmall {text-align: center;}
.adjust_title {float: none; text-align: center; display: block; margin: 0;}
.header .spip_logo_site {padding: 0;}
#formulaire_menu_lang.formulaire_spip.formulaire_menu_lang {text-align: center; display: block; margin: 2em 0 1em 0;}
.menu_lang {float: none; text-align: center; width: 100%; display: block; margin: 0;}
#container_website nav {width: 100%;}
#container_website nav ul { transition: opacity 0ms, visibility 0ms;}
#container_website nav:hover ul{transition: opacity 0ms, visibility 0ms;}
.cardsintro {width: 100%;}
.cards { grid-template-columns: repeat(1, 1fr); }
} 

/* largeur maximum 640px */
@media (max-width: 640px) {
     /* layout */
    .wrapper,
    .content,
    .aside { width: 100%;}
    .content,
    .aside { clear: both; float: none; width: 100%;  margin: 1em 0;}

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

    /* header du calendrier full-calendar */
    table.fc-header td { display: block; text-align: left; }

}

/* fin */