/*
Theme Name: Astrobjectif
Author: Astrobjectif
Description: Thème du site Astrobjectif
Version: 1.0
*/

@import url(css/properties.css);
@import url(css/fonts.css);
@import url(css/reset.css);
@import url(css/richtext.css);


body {
	height: 100%;
}

body {
	font-size: 16px;
	line-height: 24px;
	font-family: Luciole, sans-serif;
}

.Site {
	height: 100%;
	min-width: 320px;
}


/**
 * Grille
**/
.Grid {
	display: flex;
}

.Grid--align-middle {
	align-items: center;
}

.Grid--gutter {
	margin-left: -18px;
	margin-right: -18px;
}

.Grid--gutter .Grid-item {
	margin: 0 18px;
}

.Grid-item {
	flex-grow: 1;
}

.Grid--3 .Grid-item {
	width: calc(25%);
}

.Grid--6 .Grid-item {
	width: 50%;
}

@media screen and (max-width: 1024px) {

	.Grid {
		flex-wrap: wrap;
	}

	.Grid .Grid-item {
		width: auto;
	}

	.Grid--gutter {
		margin: -18px 0;
	}

	.Grid--gutter .Grid-item {
		margin: 18px 0;
	}

}


/**
 * Liens d'accès rapide (accessibilité)
**/
.Skiplinks{
	position: fixed;
	z-index: 100;
}

.Skiplinks-item {
	position: absolute;
	left: -999px;
	width:1px;
	height: 1px;
	top: auto;
	padding: 6px;
	color: black;
	background: var(--color-light);
}

.Skiplinks-item:focus {

	display: inline-block;
	height: auto;
	width: auto;
	position: static;
	margin: auto;
}

/**
 * Disposition du site
**/
.Site {
	display: flex;
	flex-direction: column;
	height: 100%;
	/* min-width: 1024px; */
}

.Site-body {
	padding: 36px 0;
	flex-grow: 1;
}

.Site-wrapper {
	margin: 0 auto;
	padding: 0 24px;
	max-width: var(--max-content-width);
}


/**
 * Entête
**/
.Site-header {
	top: 0;
	z-index: 1;
	position: -webkit-sticky;
	position: sticky;
	transition: background ease-in-out .3s;
}

.Site-header.is-scrolled {
	background: var(--color-light);
	box-shadow: var(--shadow-drop);
}

.Site-header .Site-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	padding: 24px 24px;
}

.Logo,
.Navigation {
	display: inline-block;
	vertical-align: middle;
}

.Navigation{
	margin-left: auto;
}


@media screen and (max-width: 1024px) {

	.Site-header .Site-wrapper {
		flex-wrap: wrap;
	}

	#header .NavToggle + nav {
		flex-grow: 1;
		overflow-y: auto;
	}

}

#navigation-toggle {
	display: none;
}

@media screen and (min-width: 767px) {

	.NavToggle {
		display: none;
	}

}

@media screen and (max-width: 768px) {

	.NavToggle {
		cursor: pointer;
		margin-left: auto;
		font-weight: bolder;
	}

	#navigation-toggle:not(:checked) + .Site-header .Navigation {
		display: none;
	}

	#navigation-toggle:checked + .Site-header {
		box-shadow: var(--shadow-drop);
	}

	#navigation-toggle:checked + .Site-header .Navigation {
		display: flex;
	}

	.Navigation {
		display: none;
	}

	.Site-header .Site-wrapper {
		position: relative;
	}

	#navigation-toggle:checked + .Site-header,
	.Navigation {
		background: #fff;
	}

	#header .NavToggle + nav {
		flex-grow: 1;
		width: 100%;
	}

	.Navigation {
		margin-top: 24px;
		flex-direction: column;
	}

	.Navigation .menu-item {
		margin: 12px 0;
	}


}

@media screen and (max-width: 480px) {

	#header .NavToggle {
		margin-top: 12px;
		flex-grow: 1;
		width: 100%;
		text-align: center;
	}

}


/**
 * Logo
**/
.Logo {
	position: relative;
	padding-left: calc(54px + 12px);
	color: inherit;
	text-decoration: none;
}

.Logo::before {
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	margin-top: -30px;
	width: 54px;
	height: 54px;
	content: "";
	background: url(img/logo-simple_astrobjectif.svg) center center no-repeat;
	background-size: contain;
}

.Logo-nom {
	font-weight: bold;
}

.Logo-description {
	color: var(--color-primary-d20);
}


@media screen and (min-width: 1025px) and (max-width: 1280px) {

	.Logo-nom,
	.Logo-description {
		display: none;
	}

}

/**
 * Navigation principale
**/
.Navigation {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

.Navigation .menu-item {
	position: relative;
}

.Navigation .menu-item > a {
	display: flex;
	padding: 12px;
	white-space: nowrap;
}

.Navigation .menu-item.current-menu-ancestor > a,
.Navigation .menu-item.current-menu-item > a{
	color: var(--color-primary);
	font-weight: bold;
}

.Navigation .menu-item > a {
	color: inherit;
	text-decoration: none;
}

.Navigation .menu-item a:hover,
.Navigation .menu-item a:focus {
	color: var(--color-primary);
	text-decoration: underline;
}

.Navigation .current_page_item > a{
	font-weight: bold;
	color: var(--color-primary);
}

/* Sous menus */

@media screen and (min-width: 769px) {

	.Navigation > .menu-item-has-children > a::after {
		display: inline-block;
		width: 24px;
		vertical-align: middle;
		font-family: 'Material Icons';
		font-weight: normal;
		font-style: normal;
		font-size: 24px;  /* Preferred icon size */
		line-height: 24px;
		display: inline-block;
		line-height: 1;
		text-transform: none;
		letter-spacing: normal;
		word-wrap: normal;
		white-space: nowrap;
		direction: ltr;
		-webkit-font-smoothing: antialiased; /* Support for all WebKit browsers. */
		text-rendering: optimizeLegibility; /* Support for Safari and Chrome. */
		-moz-osx-font-smoothing: grayscale; /* Support for Firefox. */
		font-feature-settings: 'liga'; /* Support for IE. */
		content: 'expand_more'
	}

	.Navigation .sub-menu {
		position: absolute;
		left: 0;
		top: 100%;
		opacity: 0;
		overflow: hidden;
		width: 0;
		height 0;
		background: var(--color-light);
		box-shadow: var(--shadow-drop);
	}

	.Navigation > .menu-item a:hover + .sub-menu,
	.Navigation > .menu-item a:focus + .sub-menu,
	.Navigation > .menu-item .sub-menu:hover {
		opacity: 1;
		width: auto;
		height auto;
	}

}

@media screen and (max-width: 768px) {

	.Navigation .sub-menu {
		display: none;
	}

}

.Navigation .sub-menu .menu-item {
	display: block;
	color: var(--color-dark);
}

.Navigation .sub-menu .menu-item a {
	text-decoration: none;
}

/* Lien Nous soutenir */
.Navigation .menu-button a,
.Navigation .menu-button.current-menu-item a,
.Navigation .menu-button a:hover,
.Navigation .menu-button a:focus {
	color: var(--color-light);
	font-weight: normal;
}

.Navigation .menu-button a {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 3px;
	background: var(--color-primary-d20);
}

.Navigation .menu-button a:hover,
.Navigation .menu-button a:focus {
	text-decoration: none;
	background: var(--color-primary);
}


/* Lien Accessibilité */
.Navigation .menu-icon-accessibilite {
	position: relative;
	width: 60px;
	height: 60px;
	margin-left: 12px;
	overflow: hidden;
}

.Navigation .menu-icon-accessibilite::before {
	content: url(img/accessibilite.svg);
}

.Navigation .menu-icon-accessibilite a {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
	text-indent: -1;
}

.Navigation .menu-icon-accessibilite a::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	content: "";
}


/**
 * Fil d'Ariane
**/
.Breadcrumb {
	display: table;
	max-width: var(--max-paragraph-width);
	margin: 0 auto 24px auto
}
.Breadcrumb a {
	color: inherit;
}

.Breadcrumb a:hover,
.Breadcrumb a:focus {
	color: var(--color-primary);
	text-decoration: none;
}

.Breadcrumb .breadcrumb_last {
	color: var(--color-dark-2);
}

/**
 * Page
**/
.Page-title {
	margin: 24px;
	color: var(--color-primary);

	text-align: center;
}

@media screen and (min-width: 769px) {
	.Page-title {
		font-size: 68px;
		line-height: 84px;
	}
}

@media screen and (max-width: 768px) {
	.Page-title {
		font-size: 32px;
		line-height: 36px;
	}
}

.Page-date {
	display: table;
	margin: 12px auto;
}


/**
 * Pied de page
**/
.Site-footer {
	padding: 24px 0;
	color: var(--color-light);
	background: var(--color-dark-2);
}

.Footlinks {
	display: table;
	margin: 0 auto 36px auto;
}

.Footlinks > nav {
	text-align: center;
}

.Footlinks .menu-item {
	display: inline-block;
	vertical-align: middle;
}

.Footlinks .menu-item {
	padding: 0 12px
}

.Footlinks .menu-item a {
	color: inherit;
}

.Footlinks .menu-item a:hover,
.Footlinks .menu-item a:focus {
	text-decoration: none;
}

/* Association et nous supporter */
.Association-support {
	border-radius: 6px;
	padding: 24px;
	background: var(--color-light);
}

.Association-support-titre {
	position: relative;
	padding-bottom: 12px;
	font-size: 18px;
	color: var(--color-dark);
}

.Association-support-titre::after {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	content: " ";
	height: 2px;
	width: 48px;
	background: var(--color-primary);
}

.Association-support-actions {
	margin-top: 24px;
}

.Association-support-actions .Button {
	margin: 6px;
}

.Association-description {
	margin-top: 36px;
}

.Association-description strong {
	font-weight: bold;
}

/* Contacts et informations d'accès */
.Contact-titre {
	position: relative;
	padding-bottom: 12px;
	font-size: 18px;
}

.Contact-titre::after {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	content: " ";
	height: 2px;
	width: 48px;
	background: var(--color-primary);
}

.Contact p:not(.Contact-titre) {
	margin: 24px 0;
}

.Contact-link {
	color: inherit;
}

.Contact-link:hover,
.Contact-link:focus {
	text-decoration: none;
}

.Contact-reseaux {
	display: inline-block;
	height: 36px;
	width: 36px;
	color: var(--color-light);
	text-indent: -1;
	overflow: hidden;
}

.Contact-reseaux + .Contact-reseaux {
	margin-left: 24px;
}

.Contact-reseaux::before {
	display: inline-block;
}

.Contact-reseaux--facebook::before {
	content: url(img/facebook.svg);
}

.Contact-reseaux--twitter::before {
	content: url(img/twitter.svg);
}

.Contact-reseaux--instagram::before {
	content: url(img/instagram.svg);
}

.Contact-reseaux--youtube {
	width: 43px;
}
.Contact-reseaux--youtube::before {
	content: url(img/youtube.svg);

}

/* Liens de pied de page */
.Widget {
	display: block;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.Widget:hover,
.Widget:focus {
	text-decoration: underline;
}

.Widget::before {
	display: block;
	content: url(img/widget-link.svg);
}

.Widget--meteo::before {
	content: url(img/widget-meteo.svg);
}

.Widget--espace-adherents::before {
	content: url(img/widget-intranet.svg);
}

.Widget--webcam::before {
	content: url(img/widget-webcam.svg);
}

/**
 * Section
**/

.Section-titre {
	position: relative;
	margin: 24px 0 12px 0;
	padding-bottom: 12px;
}

.Section-titre::after {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	content: " ";
	height: 2px;
	width: 48px;
	background: var(--color-primary);
}

@media screen and (min-width: 481px) {

	.Section-titre {
		font-size: 42px;
		line-height: 48px;
	}

}

@media screen and (max-width: 480px) {

	.Section-titre {
		font-size: 32px;
		line-height: 36px;
	}


}


/**
 * Boutons
**/
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
	text-decoration: none;
}

.Button,
.wp-block-button .wp-block-button__link,
.wp-block-contact-form-7-contact-form-selector input[type="submit"] {
	color: var(--color-light);
	display: inline-block;
	padding: 6px 12px;
	border-radius: 3px;
	text-decoration: none;
	border: none;
	font-size: inherit;
	line-height: inherit;
}

.Button--primary,
.wp-block-button.is-style-primary .wp-block-button__link,
.wp-block-contact-form-7-contact-form-selector input[type="submit"] {
	background: var(--color-primary-d20);
}
.Button--primary:hover,
.Button--primary:focus,
.wp-block-button.is-style-primary:hover,
.wp-block-button.is-style-primary:focus,
.wp-block-contact-form-7-contact-form-selector input[type="submit"]:hover,
.wp-block-contact-form-7-contact-form-selector input[type="submit"]:focus {
	background: var(--color-primary);
}

.Button--secondary,
.wp-block-button.is-style-secondary .wp-block-button__link{
	background: var(--color-dark);
}
.Button--secondary:hover,
.Button--secondary:focus,
.wp-block-button.is-style-secondary:hover,
.wp-block-button.is-style-secondary:focus {
	background: var(--color-dark-1);
}

.Button--tertiary,
.wp-block-button.is-style-tertiary .wp-block-button__link{
	color: var(--color-primary-d20);
	border: 1px solid;
	background: var(--color-light);
}

.Button--tertiary:hover,
.Button--tertiary:focus,
.wp-block-button.is-style-tertiary:hover,
.wp-block-button.is-style-tertiary:focus {
	color: var(--color-dark);
}

/**
 * Liens
**/
.Link {
	color: var(--color-primary-d20);
	text-decoration: underline;
}

.Link:hover,
.Link:focus {
	color: var(--color-primary);
	text-decoration: none;
}


/* Icons dans les boutons et liens */
.Link[class*=icn-]::after,
.Link[class*=icn-]::before,
.Button[class*=icn-]::after,
.Button[class*=icn-]::before,
.wp-block-button[class*=icn-] .wp-block-button__link::before,
.wp-block-button[class*=icn-] .wp-block-button__link::after {
	display: inline-block;
	width: 24px;
	vertical-align: middle;
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	line-height: 24px;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-smoothing: antialiased; /* Support for all WebKit browsers. */
	text-rendering: optimizeLegibility; /* Support for Safari and Chrome. */
	-moz-osx-font-smoothing: grayscale; /* Support for Firefox. */
	font-feature-settings: 'liga'; /* Support for IE. */
}

.Link.icn-next::after,
.Button.icn-next::after,
.wp-block-button.icn-next .wp-block-button__link::after {
	content: 'chevron_right';
}

.Link.icn-back::before,
.Button.icn-back::before,
.wp-block-button.icn-back .wp-block-button__link::before {
	content: 'chevron_left';
}


/**
 * Formulaires
**/
input[type="text"],
input[type="email"],
input[type="number"],
input[type="passord"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select {
	border-radius: 3px;
	border: 1px solid var(--color-light-2);
	padding: 11px 12px;
}

input[type="file"]:focus {
	border-radius: 3px;
	border: 1px solid var(--color-light-2);
	padding: 11px 12px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="passord"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
	outline-color: var(--color-primary);
}




/**
 * Partenaires
**/
.wp-block-sponsors {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	margin: 0 -18px;
}

.Sponsor {
	margin: 18px;
	max-width: 250px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.Sponsor-logo {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.Sponsor-logo img {
	display: block;
	max-width: 100%;
}

.Sponsor-nom {
	color: var(--color-primary-d10);
	font-size: 18px;
	line-height: 24px;
	text-align: center;
}


/**
 * Acteurs
**/
.wp-block-acteurs {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 -18px;
}

.Acteur {
	margin: 36px 18px;
	box-sizing: border-box;
}

@media screen and (min-width:769px) {
	.Acteur {
		width: calc(25% - 36px);
	}
}

@media screen and (min-width:481px) and (max-width:768px) {
	.Acteur {
		width: calc(50% - 36px);
	}
}


.Acteur-photo {
	position: relative;
	overflow: hidden;
}

.Acteur-photo img {
	height: auto;
	width: 100%;
	min-height: 100%;
	height: auto;
	display: block;
	border-radius: 50%;
}

/* .Acteur-photo::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	content: "";
	border-radius: 50%;
	background-image: url(img/acteur-masque.svg);
	background-size: cover;
	opacity: .2;
} */

.Acteur figcaption {
	margin-top: 12px;
	text-align: center;
	text-shadow:
	   -1px -1px 0 var(--color-light),
	    1px -1px 0 var(--color-light),
	    -1px 1px 0 var(--color-light),
	     1px 1px 0 var(--color-light);
}

h3.Acteur-nom {
	margin: 0;
	font-size: 18px;
	line-height: 24px;
}

.Acteur-nom {
	color: var(--color-primary-d10);
}


/**
 * Pagination
**/
.Pagination {
	display: flex;
	justify-content: center;
}

.Pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 6px;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	color: var(--color-primary-d20);
}

.Pagination .page-numbers {
	margin: 0 9px;
	padding: 6px;
}

.Pagination .page-numbers.current {
	color: var(--color-d20);
	font-weight: bold;
	background: var(--color-primary-l10);
}

.Pagination .page-numbers.next,
.Pagination .page-numbers.prev {
	color: var(--color-light);
	text-decoration: none;
	background: var(--color-primary-d10)
}

.Pagination .page-numbers:not(.current):hover,
.Pagination .page-numbers:not(.current):focus,
.Pagination .page-numbers.next:hover,
.Pagination .page-numbers.next:focus,
.Pagination .page-numbers.prev:hover,
.Pagination .page-numbers.prev:focus {
	color: var(--color-light);
	text-decoration: none;
	background: var(--color-dark-2);
}