/* albert2019main.css - paramètres généraux ----*/

/* à noter ----> dans les feuilles de style utiliser ce code :
	font-family: 'amaticbold', 'Comic Sans MS', cursive;

@font-face {
    font-family: 'amaticbold';
    src: url('../fontes/amatic-bold-webfont.eot');
    src: url('../fontes/amatic-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fontes/amatic-bold-webfont.woff') format('woff'),
         url('../fontes/amatic-bold-webfont.ttf') format('truetype'),
         url('../fontes/amatic-bold-webfont.svg#amaticbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* à noter ----> dans les feuilles de style utiliser ce code :
	font-family: 'amatic_scregular', 'Comic Sans MS', cursive;

@font-face {
    font-family: 'amatic_scregular';
    src: url('../fontes/amaticsc-regular-webfont.eot');
    src: url('../fontes/amaticsc-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fontes/amaticsc-regular-webfont.woff') format('woff'),
         url('../fontes/amaticsc-regular-webfont.ttf') format('truetype'),
         url('../fontes/amaticsc-regular-webfont.svg#amatic_scregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* Généré par Font Squirrel (http://www.fontsquirrel.com) le 8 octobre 2014
----> À activer si problème avec Google Fonts

@font-face {
    font-family: 'ralewayregular';
    src: url('../fontes/raleway-regular-webfont.eot');
    src: url('../fontes/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fontes/raleway-regular-webfont.woff') format('woff'),
         url('../fontes/raleway-regular-webfont.ttf') format('truetype'),
         url('../fontes/raleway-regular-webfont.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 */

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
	font-family: 'Raleway', Arial, sans-serif;
	
	/*font-family: 'Ralewayregular', Arial, sans-serif;
	letter-spacing:-1px; ----> À activer si problème avec Google Fonts */
	
  	font-size: 100%;

  	background-color: white;
	
  	color: #fff;
}

body, html {
  /* important */
  height: 100%;
}

h1,h2,h3 { font-weight:bold }

a {
  color: #f60000; /* rouge sang */
  /*color:#d7fe00;  vert pêtant */
  
  text-decoration: none;
}

a:hover { color: #c8c7a1 } /* gris vert léger */

/*a:hover { color: #32ffb4; }  vert clair */

/* IMPORTANT ---> incidence sur la taille des textes */
p { font-size: 1.6rem; }

/* petite animation gif avec le fada qui courre - bas écran 2 */
picture {
	max-width: 100%;
}

/* copyright ---> placé sur l'avant dernière image fixe avec la fadette */
.style1 {
	font-size:18px;
	font-size:1.4rem;
	font-weight:400;
	
	/*color:#FFC;*/
	color:#000;
}

/* texte dans #header : "aCCueiL" */		
.style2 {
  	font-family: 'Amatic SC',  Arial, sans-serif, cursive;
  	font-size: 3em;
	
	color:#FC3;
	
  	height: 60px; /* init ---> 50px */
  	line-height: 60px; /* init ---> 50px */
  
  	vertical-align: middle; /* ajout */
	}

/* IMPORTANT ! */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
 /* width: 90%; --> init */
  width: 90%;
  max-width: 768px;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

/* IMPORTANT - ajout d'images ou de vignettes dans les écrans textes (.cd-scrolling-bg) */
.figure img {
	width:100%;
	/* padding: 0px 0; ---> init */
	padding: 12px 0;

	border:none;
	border:0;
	
	/*box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);*/
	
	cursor:pointer;
	}

/* vidéo ---> pas utilisé, ralenti trop l'affichage de la page
.video {	
	margin: 0 auto;
	/*padding: 0em;
	padding: 35px 0; ---> important : agit sur les images de fond
	text-align: center;
	}
	
.video p {
	letter-spacing:2px;
	color:#F90;
	}

/* Bandeau entête d'origine de Passion d'Avril =========================================== */
.cd-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
 /* height: 50px; ---> init */
  height: 64px;
  
	background: -moz-linear-gradient(top,  #0873c0 0%, #1c366e 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0873c0), color-stop(100%,#1c366e));
	background: -webkit-linear-gradient(top,  #0873c0 0%, #1c366e 100%); 
	background: -o-linear-gradient(top,  #0873c0 0%, #1c366e 100%);
	background: -ms-linear-gradient(top,  #0873c0 0%, #1c366e 100%);
	background: linear-gradient(to bottom,  #0873c0 0%, #1c366e 100%);

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0873c0', endColorstr='#1c366e',GradientType=0 );
	
	border-bottom:1px solid #2d4d93;

	-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.6);
	-moz-box-shadow:0 5px 10px rgba(0,0,0,0.6);
	-o-box-shadow:0 5px 10px rgba(0,0,0,0.6);
	box-shadow:0 5px 10px rgba(0,0,0,0.6);
   
	z-index: 2;
}

.cd-header:after {
  content: "";
  display: table;
  clear: both;
}

/* fada d'albert animé en gif ============================================================ */
.cd-header #cd-logo {
  float: left;
  margin: 5px 0 0 5%;
  z-index:1000;
}

/* logo fada */
.cd-header #cd-logo img {
  display: block;
  
  width:100%;
}

@media only screen and (min-width: 768px) {
  .cd-header {
   /* height: 70px; ---> init */
    height: 64px;
  }
}

/* Texte entête - Navigation =============================================================== */
.cd-main-nav {
													/*border:1px solid red;*/
  width: 100%;
  height: 100%;
  
  /* important ---> appel du hamburger ---> pas utilisé
  background: url("../images/2017/cd-icon-menu.svg") no-repeat center center;
  
  /* taille du hamburger
  background-size: 80px 60px; /* init ---> 44px 44px */
  
 /* cursor: pointer; */
}

/*
.cd-main-nav ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}

/* valeurs initiales
.cd-main-nav ul.is-visible {
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
} 

/* position du menu reprend la valeur "height" du header
.cd-main-nav ul.is-visible {
  -webkit-transform: translateY(64px);
  -moz-transform: translateY(64px);
  -ms-transform: translateY(64px);
  -o-transform: translateY(64px);
  transform: translateY(64px);
}
*/

.cd-main-nav a {										/*border:1px solid green;*/
  display: inline-block;
  
  height: 60px; /* init ---> 50px */
  line-height: 60px; /* init ---> 50px */
  
  vertical-align: middle; /* ajout */
  
  /*padding-left: 30%; /* init ---> 5%
   background : #111211; ---> couleur de fond du menu avec le hamburger uniquement */
    
  border-top: 1px solid #453c3d;
  
  font-family: 'Amatic SC',  Arial, sans-serif, cursive;
	
	/*font-family: 'amaticbold', cursive; ---> à activer si problèmes google */

	/*color:#83cfd4;*/
	
  color: #fff;
}


@media only screen and (min-width: 768px) {
  .cd-main-nav {
    width: auto;
    height: auto;
    background: none;
    cursor: auto;
  }
  
  .cd-main-nav ul {
  	position: absolute;
  	top: 0;
  	left: 20%;
  	width: 100%;
	  
/* je garde au cas où je veuille utiliser un hamburger

    position: static;
    width: auto;
	
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
	*/
	
    line-height: 55px; /* init : 70 px */
  }
  
/* je garde au cas où je veuille utiliser un hamburger

  .cd-main-nav ul.is-visible {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  */

  .cd-main-nav li {
    display: inline-block;
    /*margin-left: 1em;*/
  }

/* important ! */ 
  .cd-main-nav a {
    display: inline-block;
    height: auto;
    line-height: normal;
    background: transparent;
    padding: 0em 0em;
    border-top: none;
  }
  
  .no-touch .cd-main-nav a:hover {
	color:#83cfd4; /* ---> bleu clair */
	  
    /*color: #fc3; /* jaune orange */
  }
}

@media only screen and (min-width: 320px) {
  .cd-main-nav a {	
  	font-size: 3em;

	color:#fff;
	/*color:#83cfd4; ---> bleu clair */
  }
}

/* max-width ---> affichage inférieur à 780 px ========================================================== */
@media screen and (max-width: 767px) {
.cd-header {
  height: 64px;
}

.cd-main-nav a {	
  display : none;
  }
}
/* FIN NAVIGATION ////////////////////////////////////////////////////////////////////////////////////////////////////// */


.cd-main-content {
  /* you need to assign a min-height to the main content so that the children can inherit it*/
  height: 100%;
  position: relative;
  
  z-index: 1;
}

/* photos fonds en plein écran ===================================================== */
.cd-fixed-bg {
  position: relative;
  min-height: 100%;
  
  background-size: cover; /* ---> important */
  
  background-repeat: no-repeat;
  background-position: center center;
  
  z-index: 1;
}

/* photos de fonds d'écrans - textes titres h1 et h2  ========================= */
.cd-fixed-bg h1, .cd-fixed-bg h2, .cd-fixed-bg h3 {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  
  width: 90%;
  max-width: 1170px;
  text-align: center;
}

/* IMPORTANT - couleur des titres différenciées selon la photo de fond ================================ */

.cd-fixed-bg h1 { color:#ec0000 } /* rouge sang de bœuf */

.cd-fixed-bg h2 { color:#80ffec }  /* bleu-vert turquoise */

/*.cd-fixed-bg h3 {color:#FFC } blanc cassé */
.cd-fixed-bg h3 {color:#FFF } /* blanc */

/* IMPORTANT - photos fixes en arrière plan ============================================================== */

.cd-fixed-bg.cd-bg-1 {
 background-image: url("../images/pda/fada_albert.jpg");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("../images/pda/#.jpg");
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url("../images/pda/fada_exhib.jpg");
}
.cd-fixed-bg.cd-bg-4 {
  background-image: url("../images/pda/#.jpg");
}
.cd-fixed-bg.cd-bg-5 {
  background-image: url("../images/pda/#.jpg");
}
.cd-fixed-bg.cd-bg-6 {
  background-image: url("../images/pda/#.jpg");
}
.cd-fixed-bg.cd-bg-7 {
  background-image: url("../images/pda/#.jpg");
}

 /* IMPORTANT ! - taille texte sur photos selon taille écran */
@media only screen and (min-width: 320px) {
  .cd-fixed-bg {
    background-attachment: fixed;
  }
  
  .cd-fixed-bg h1, .cd-fixed-bg h2, .cd-fixed-bg h3 {
  /*font-size: 48px;
  font-size: 3rem;*/
  
  font-size: 64px; /* modifié le 26 février 2019 - voir */
  font-size: 4rem;
  }
}

@media only screen and (min-width: 768px) {
  .cd-fixed-bg h1, .cd-fixed-bg h2, .cd-fixed-bg h3 {
 /* font-size: 40px;
  font-size: 2.5rem; */
  
  /*font-size: 48px;
  font-size: 3rem;*/
  
  font-size: 64px; /* modifié le 26 février 2019 - voir */
  font-size: 4rem;
  
  font-weight: 800;
  }

/* ajouté pour avoir l'effet */
  .cd-fixed-bg {
    background-attachment: fixed;
  }  
}

@media only screen and (min-width: 1170px) {
  .cd-fixed-bg {
    background-attachment: fixed;
  }
 
  .cd-fixed-bg h1, .cd-fixed-bg h2, .cd-fixed-bg h3 {
  /*font-size: 48px;
  font-size: 3rem;*/
  
  font-size: 64px; /* modifié le 26 février 2019 - voir */
  font-size: 4rem;
  
  font-weight: bold;
  }  
}

/* IMPORTANT ! Écrans contenant le texte avec parfois des petites images-vignettes ================================================ */
.cd-scrolling-bg {
	/*box-shadow: 0 0 40px rgba(0, 0, 0, 1); /* ajout : est-ce vraiment indispensable ? voir */
	box-shadow: 0 0 50px rgba(28, 54, 110, 1); /* modif décembre 2017 - flouté bleu - voir */
	
  position: relative;
  min-height: 100%;
  
  padding: 4em 0;
  
	text-align:center;
	
  line-height: 1.6;
  
  z-index: 2;
}

.cd-scrolling-bg.cd-color-1 {
  background-color:#fff;
 /* color: #606060; --> init */
  color:#828282;
}

/* écran 2 ------> Texte : pourquoi ces pages... */
.cd-scrolling-bg.cd-color-2 {
  background-color:#fff;
 /* color: #606060; --> init */
  color:#828282;
}

/* ATTENTION - écran 3 ---> 2 couleurs de police différentes ================================ */

/* écran 3 ---> titre : Annonce des éditions 2011 et 2012 */
.cd-scrolling-bg h3 {
  font-size: 2.2rem;
  color: #003e79; /* Bleu foncé */
}

/* écran 3 ---> texte en gris avec 2 images de 250 x 354 en lien avec 2 vidéos 2011 et 2012 */
.cd-scrolling-bg.cd-color-3 {
  background-color:#fff;
 /* color: #606060; --> init */
  color:#828282;
  
  font-size: 2rem;
  /*font-size: 1.8rem;*/
}

/* écran 4 ----> ATTENTION, pas utilisé - erreur de ma part, mais j'ai pas envie de tout re-décalé... pas le courage
.cd-scrolling-bg.cd-color-4 {
  background-color:#fff;
  color:#828282;
  
  font-size: 2rem;
}

/* écran 5 --> IMAGE-LIEN vers vidéoshow de la 12ème édition de 2016 (juste un texte en gros caractère pour le lien) */
.cd-scrolling-bg.cd-color-5 {
  background-color:#fff;
  
  color:#828282;
  
  font-size: 2rem;
  /*font-size: 1.8rem;*/
}

.cd-scrolling-bg h1 {
  font-size: 3rem;
  
  color: #fc3; /* jaune orange ---> voir */
}

/* écran 6 ----> texte avec explication de la page d'accueil du site de 2011 réalisée en flash et ses inconvénients */
.cd-scrolling-bg.cd-color-6 {
  background-color:#fff;
  color: #828282;
  
  font-size: 2rem;
  /*font-size: 1.8rem;*/
}

/* écran 7 --> Écran texte et lien sur l'image facebook */
.cd-scrolling-bg.cd-color-7 {
  background-color:#fff;
  
  font-size: 2rem;
  /*font-size: 1.8rem;*/
  
  color: #003e79; /* Bleu foncé */
}

.cd-scrolling-bg h3 {
  font-size: 2.2rem;
  color: #003e79; /* Bleu foncé */
}
/* écran 8 --> vignettes des annonces 2016 et 2017 - les 2 liens renvoient sur les pages du site brossetoutcourt.net */
.cd-scrolling-bg.cd-color-8 {
  background-color:#fff;
  
  font-size: 2rem;
  /*font-size: 1.8rem;*/
  
  color: #828282; /* Bleu foncé */
}

@media only screen and (min-width: 320px) {
  .cd-scrolling-bg {
    font-size: 25px;
    font-size: 1.3rem;
    line-height: 1.3;
	}

/*.figure img { width:75% } ---> réduit le 25 avril 2016 */
.figure img { width:45% }
}

@media only screen and (min-width: 768px) {
  .cd-scrolling-bg {
    /*padding: 8em 0; ---> réduit le 25 avril 2016 */
    padding: 4em 0;
	
    font-size: 35px;
    font-size: 2.2rem;
    line-height: 1.4;
    font-weight: 400;
		
    /*font-size: 20px;
    font-size: 1.25rem;
    line-height: 2;
    font-weight: 300; ---> init */
  }
  
.figure img { width:25% }
}


@media only screen and (min-width: 1170px) {
.figure img { width:35% }
}

/* Sur la même page que l'écran 7 (facebook) ajout des deux textes dans l'encadré sur fond rouge concernant Léa et Albert (lien vers leur site) */
.footer {
	/*background-color:rgba( 28, 54, 110 , 0.2 );*/
	background-color:rgba( 202, 21, 21, 1 );
	
	z-index:1000;
	
	width:100%;

	position:absolute;
	bottom:10%;
	
	text-align: center;
	/*margin-top:1em;*/

	display: block;
	/*padding: 2em 0em; ---> annulé après festival 2016 suite à la réduction des crédits  */
	padding:0em 1em;;
	
   font-size: 1.4rem; /* à voir*/
}

.footer a {
	color:#fff;
}

.footer a:hover,
.footer a:focus {
		
	/* color: #84835a vert cramoisi */;
	color: #ffc600;
}

.footer p {
	margin: 1em auto;
	
	font-size : 1.4rem;
}


/* script légèrement modifié le 25 février 2019 - Philippe Brosse */