/*
Theme Name: Les Colombes Intercommunales
Theme URI: http://www.lescolombes.fr/
Date: Decembre 2011
Version: 2.0
*/

/* Imports */

@font-face {
       font-family: DEVROYE;
       src: local("DEVROYE"), url("../font/DEVROYE_.ttf") format("truetype");
       font-weight: normal;
       font-style: normal;
}

@font-face {
       font-family: KaushanScript-Regular;
       src: local("KaushanScript-Regular"), url("../font/KaushanScript-Regular.otf") format("opentype");
       font-weight: normal;
       font-style: normal;
}


/*---- GLOBAL ----*/

/*
Couleur principale: #330066 (violet)
Couleur secondaire: #ffccff
*/
*, *:before, *:after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html { 
	overflow-y: scroll;
	font-size: 1.3em;
	background-color: #330066;
}

body {
	min-height: 100vh;
	margin: 0;
	font-family: DEVROYE;
	display: grid;
	grid-template-rows: auto 1fr auto;
	background-image:
		url(../image/background/plume-top.png),
		url(../image/background/plume-bottom.jpg);
	background-attachment: fixed;
	background-position:
		top right,
		bottom left;
	background-repeat: no-repeat;
}

body.index {
  grid-template-rows: unset;
  justify-content: center;
  align-content: center;
}

/*---------------------------------------------
  Class pratiques
  -------------------------------------------*/

.hidden { display: none; }

.inline { display: inline-block; }

.capital { text-transform: uppercase; }

.bold { font-weight: bold; }

.italic { font-style: italic; }

.underline { text-decoration: underline; }

.cache  { /* <-- A privilegier pour accessibilite */
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.pasCache {
	height: auto;
	width: auto;
	overflow: visible;
}

.brouillard {
	opacity: 0;
}

.disparu {
	display: none;
}


/*---- ARCHITECTURE ----*/
main {
	display: flex;
	flex-flow: column wrap;
	margin: auto;
	padding: 4em 0 2em 0;
	font-size: 1.25rem;
	color: #FFFFFF;
	width: 100%;
	height: inherit;
	align-content: center;
}
body.index main {
	padding: unset;
	display: flex;
	flex-flow: column wrap;
	text-align: center;
}
header[role="banner"] {
	padding: 0.9rem 0;
	margin: 0;
	width: 100%;
	background-color: rgba(51,0,102,0.9);
	box-shadow: 0 7px 100px -5px white;

	display:flex; 
	justify-content: center;
	align-items: center;
	padding: 0 1rem;
}

footer[role="contentinfo"] {
	text-align: center;
}

/*---- SCULPTURE ----*/
main article {
  width: 800px;
  margin-bottom: 2em;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  border-bottom: solid 1px #fcf;
  padding-bottom: 1em;
}

main article:last-child {
  margin-bottom: 0;
}

article header, article footer {
	width: 100%;
	text-align: center;
}

.centrer { text-align: center; }

article.galerie ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
article div {
	text-align: center;
}

/* title */

header[role="banner"] h1 {
	background-image: url(../image/logo/small-colombe-logo.png);
	background-repeat: no-repeat;
	background-position-x: 30px;
	padding-left: 150px;
	font-size: 1.2rem;

	position: absolute;
	left: 0;
	top: 0;
	height: 80px;
	transform: translate(0, 30%);
}

header[role="banner"] h1 a {
	width: 11ch;
	text-align: center;
	display: block;
	font-weight: normal;
}

body.index h1 {
	margin-top: 30px;
	order: 2;
	font-weight: normal;
	line-height: 40px;
}

body.index h1 span {
	display: block;
}

h1, h2 {
	color: #FFFFFF;
	font-family: KaushanScript-Regular;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.6rem; }
h3 { 
	font-size: 1.6rem; 
	font-weight: bold; 
}
h4 { 
	font-size: 1.4rem; 
	margin-bottom: 0.9rem; 
	font-weight: bold; 
}

h1, h2, h3, h4 { margin: 0; }

article header h3, #video h3 {
	padding-bottom: 1.25rem;
	color: #ffccff;
}

article header h3:after {
	content: "-";
}

article header h3:before {
	content: "-";
}

article.galerie span[class*="plume"]::after {
	display: block;
	width: 65px;
	height: 50px;
	margin: 20px auto auto auto;
}

article.galerie span.plume-video::after {
	content: url(../image/picto/video.png);
}

article.galerie span.plume-photo::after {
	content: url(../image/picto/photo.png);
}

/*  text  */
p {
	margin-bottom: revert;
}
article footer p { color: #ffccff; }

footer[role="contentinfo"] p {
	font-size: 0.7rem;
	color: #ffccff;
}

#video p { color: #FFFFFF; }

.special {
	font-size: 1.5rem;
}

/* ANCHORS */

a { color: #ffccff; }

a:hover { color: #FFFFFF; }

a, a:hover { text-decoration: none; outline: none; }

address {
  font-style: normal;
  word-break: break-all;
}
/*Pastille*/
#pastille {
	background-image: url('../image/logo/pastille_1993.png');
	background-repeat: no-repeat;
	width: 200px;
	height: 200px;
	position: fixed;
	top: 17%;
	right: 2%;
	-webkit-transform: rotate(5deg);
	transform: rotate(5deg);
	text-align: center;
	padding: 3px 0;
	z-index: 1000;
	margin: 0;
}
body.index #pastille { 
	top: 2%; 
}
#pastille span {
	color: #330066;
	font-weight: bold;
	visibility: hidden;
	position: relative;
}
#pastille a {
  display: block;
  width: 100%;
  height: 100%;
}

header[role="banner"] h1 a {
	color: #FFFFFF;
}

/* navigation */

nav {
	text-transform: uppercase;
	font-family: DEVROYE;
	color: #FFFFFF;
}
body.index main nav {
	order: 3;
	margin: 1.5rem auto 0 auto;
}
header[role="banner"] nav {
	padding: 2.5rem 0;
}
nav ul {
	display:flex;
	row-gap: 0.5rem;
	column-gap: 1.5rem;
	list-style: none;
	padding-left: 0px;
}
nav li {
	position: relative;
}
nav li:hover, nav li:hover a, nav li:focus a,
nav li.current_page_item, nav li.current_page_item a
{
  text-decoration: none;
  color: #FFFFFF;  
}
nav li a::after {
	background-size: 1rem;
	display: block;
	position: absolute;
	right: -0.9rem;
	top: -0.7rem;
	transform: rotate(23deg);
}
nav li a:hover::after, nav li a:focus::after, nav li.current_page_item a::after {
	content: url(../image/picto/white-star.png);
}
nav li#pastille a:hover::after, nav li#pastille a:focus::after {
	content: none;
}
/*  lists  */
ul { 
	padding: 0; 
	margin: 0; }
li { 
	list-style-type: none; 
	padding: 0; }
.starList{
	margin-left: 1.5rem;
}
.starList li {
	list-style-image: url(../image/picto/white-star.png);
	padding-bottom: 0.5rem;
}
/* video */
.intrinsic-container {
	position: relative;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
}
video {
  width: 100%;
  height: auto;
  border: none;
}
/* image */
img {
  max-width: 100%;
  height: auto;
}
img, img a { border: 0; outline: none; }
article img {
	margin-bottom: 1em;;
}
embed {
	width: 100%;
	height: auto;
}
article.galerie div ul li {
	padding: 10px 15px 10px 15px;
	width: 245px;
  text-align: center;
}
/* Description list */
dl div {
  display: flex;
  flex-flow: row wrap;
  padding: 15px 0 5px 80px;
	border-bottom: 1px solid #9999CC;
}
dl dt {
  margin-right: 20px;
  width: 130px;
}

dl dd {
  margin: 0;
}
/* MODULE DISPLAY */

article.seul { margin-bottom: 0; }

.deux-colonnes {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	text-align: center;
}

.deux-colonnes > * {
  padding: 0 20px;
  margin-bottom: 10px;
}

article footer {
	background-repeat: no-repeat;
	background-position: 50%;
	height: 30px;
	font-size: 0.7rem;
	font-family: DEVROYE;
	display: table;
	margin-top: 20px;
	border-top: solid 1px #ffccff;
}

article.seul {
	border-bottom: unset;
}

#video { text-align: center; }

.annee {
	position: fixed;
	font-size: 1.8rem;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 15px;
	right: 20%;
	transform:rotate(15deg);
	-moz-transform:rotate(15deg);
}