/* Feuille de style Gite Les agapanthes */
/* Gigi Lantenois */

/* Polices Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Handlee|Borel&display=swap');

/* Thème du site */
:root
{
	/* Marges et interlignes */
	--marge-tres-petite: 4px;
	--marge-petite: 7px;
	--marge-moyenne: 14px;
	--marge-grande: 15px;
	--interligne-tres-petite: 0.15em;
	--interligne-petite: 0.25em;
	--interligne-moyenne: 0.5em;
	--interligne-grande: 0.75em;
	
	/* Couleurs */
	--couleur-fond: #fdf9f7;
	--couleur-section: #2e959e;
	--couleur-texte: #000000;
	--couleur-bleue: #5a50e7;
	--couleur-claire: #ecfcfe;
	--couleur-moyenne: #cdf9f3;
	--couleur-foncee: #2e959e;
	--couleur-titre-media: #000000;

	/* Polices de caractères */
	--police-generale: 'Handlee', cursive;
	--police-titre: 'Borel', cursive;
	--police-champ: 'Arial', cursive;

	/* Tailles de police */
	--police-taille1: 0.8em;
	--police-taille2: 0.9em;
	--police-taille3: 1.0em;
	--police-taille4: 1.1em;

	/* Animations */
	--transition_duree: 0.25s;
}

/* Responsive Design : 
    - Polices de taille croissante
	- Diaporamas de taille croissante
*/
@media all
{
	.diaporama_boite_v
	{
		max-width: 300px;
		max-height: 450px;
	}
	.diaporama_boite_h
	{
		max-width: 300px;
		max-height: 225px;
	}
}

@media (min-width: 500px)
{
	:root
	{
		/* Marges */
		--marge-tres-petite: 4.5px;
		--marge-petite: 8px;
		--marge-moyenne: 16px;
		--marge-grande: 20px;
		
		/* Tailles de police */
		--police-taille1: 0.9em;
		--police-taille2: 1.0em;
		--police-taille3: 1.1em;
		--police-taille4: 1.3em;
	}
}

@media (min-width: 750px)
{
	:root
	{
		/* Marges */
		--marge-tres-petite: 5px;
		--marge-petite: 9px;
		--marge-moyenne: 18px;
		--marge-grande: 25px;
		
		/* Tailles de police */
		--police-taille1: 1.0em;
		--police-taille2: 1.1em;
		--police-taille3: 1.2em;
		--police-taille4: 1.6em;
	}
	.diaporama_boite_h
	{
		max-width: 400px;
		max-height: 300px;
	}
}

@media (min-width: 1000px)
{
	:root
	{
		/* Marges */
		--marge-tres-petite: 5.5px;
		--marge-petite: 10px;
		--marge-moyenne: 20px;
		--marge-grande: 30px;
		
		/* Tailles de police */
		--police-taille1: 1.1em;
		--police-taille2: 1.2em;
		--police-taille3: 1.3em;
		--police-taille4: 1.8em;
	}
	.diaporama_boite_h
	{
		max-width: 600px;
		max-height: 400px;
	}
}

/* Styles par élément HTML */
html
{
	 /* Dimensions calculées qu'avec width et height (sans padding, ni border) */
	box-sizing: border-box;
	background-color: var(--couleur-fond);
}

*, *::after, *::before
{
	box-sizing: inherit;
	margin: 0;
	border: 0;
	padding: 0;
}

.lien_invisible /* Lien hypertexte invisible */
{
	color: inherit;
	text-decoration: none;
}

.lien_invisible:hover /* Survol du lien */
{
	color: var(--couleur-bleue);
	transition: var(--transition_duree);
}

::selection /* Couleurs des sélections par l'opérateur */
{
	background-color: var(--couleur-moyenne);
	color: var(--couleur-bleue);
}

i.material-symbols-outlined /* Icônes Google : décalage vers le bas pour s'aligner avec le texte */
{
	font-size: inherit;
	padding-right: var(--marge-tres-petite);
	position: relative;
	top: var(--interligne-tres-petite);
}

/* Conteneurs flexibles */
.boite_flex_multiligne /* Flex container multiligne */
{
	display: flex;
	flex-flow: row wrap;
}

.boite_flex_monocolonne /* Flex container monocolonne */
{
	display: flex;
	flex-flow: row wrap;
}

.boite_flex_monocolonne > *
{
	flex: 100%; /* Tous les enfants directs occupent 100% de la largeur => Monocolonne */
	max-width: 100%; /* pour ne pas déborder sur la droite ! */
}

/* Bandeau en en-tête de page : image - colonne de titres - image */
.bandeau_haut
{
	/* Flex container monoligne */
	display: flex;
	flex-flow: row nowrap;
}

.bandeau_haut > a
{
	/* Flex item non-étirable et si besoin contractable */
	flex: 0 auto;
	/* Flex container multiligne */
	display: flex;
	flex-flow: row wrap;
}

.bandeau_haut > a > img /* images */
{
	width: 100%;
	object-fit: contain;
}

.bandeau_haut > div /* titres = plusieurs lignes disposées en vertical */
{
	/* Flex item non-étirable et si besoin contractable*/
	flex: 1 auto;
	/* Flex container multiligne pour le texte */
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: space-between;

	/* image de fond sous le texte */
	background-image: url("../img/vue_mer_gite.jpg");
	background-size: cover;
	background-position-y: 60%;
	min-width: 9em; /* pour contenir le texte */
}

.bandeau_haut > div > p
{
	padding: var(--interligne-petite) 0.65em 0em;
	font-family: var(--police-titre);
	font-style: italic;
}

.bandeau_haut > div > p:nth-child(1) /* titre centré sur la 1ère ligne */
{
	width: 100%;
	text-align: center;
}

.bandeau_haut > div > p:nth-child(2)
{
	text-align: left;
}

.bandeau_haut > div > p:nth-child(3)
{
	text-align: right;
}

#nom_rubrique
{
	color: var(--couleur-foncee);
	font-size: var(--police-taille4);
	text-shadow: 0 0 0.2em white, 0 0 0.32em white;
}

#nom_page
{	
	color: white;
	font-size: var(--police-taille2);
	text-shadow: 0 0 1.5em white, 0 0 0.2em white;
}

/* Bandeau en pied de page = colonnes de texte */
.bandeau_bas
{
	/* Flex container multiligne */
	display: flex;
	flex-flow: row wrap;
}

.bandeau_bas > div /* colonne du bandeau */
{
	/* Flex element étirable et si besoin contractable */
	flex: 1 auto;
	/* Container flex monocolonne*/
	display: flex;
	flex-flow: column nowrap;
	padding: var(--interligne-moyenne) var(--marge-petite);
	
	background-color: var(--couleur-foncee);
	color: var(--couleur-claire);
	font-family: var(--police-generale);
	font-size: var(--police-taille1);
}

.bandeau_bas > div > a /* Lien hypertexte invisible */
{
	color: inherit;
	text-decoration: none;
	transition: var(--transition_duree);
}

.bandeau_bas > div > a:hover /* Survol du lien */
{
	color: var(--couleur-bleue);
}

/* Barre de menus avec hamburger déroulant */
.barre_navigation
{
	/* Flex container monoligne */
	display: flex;
	flex-flow: row nowrap;
	/* Le menu reste collé en haut en cas de scroll */
	position: sticky;
	top: 0;
	z-index: 100;
	
	background-color: var(--couleur-foncee);
}

.hamburger, .menu_deroulant > span
{
	background-color: var(--couleur-foncee);
	color: var(--couleur-claire);
	font-family: var(--police-generale);
	font-size: var(--police-taille2);
}

.menu_deroulant:hover .menu_items
{
	/* Affichage des items de menu,en cas de survol de .menu */
	display: flex;
	flex-flow: column nowrap;
}

.menu_items
{
	/* Les items de menu sont cachés par défaut */
	display: none;
	position: absolute;
	
	background-color: var(--couleur-foncee);
	color: var(--couleur-claire);
	font-family: var(--police-generale);
	font-size: var(--police-taille2);
}

.menu_items > a /* Lien hypertexte invisible */
{
	padding: var(--interligne-tres-petite) var(--marge-petite);
	color: inherit;
	text-decoration: none;
	transition: var(--transition_duree);
}

.menu_items > a:hover /* Survol du lien */
{
	background-color: var(--couleur-moyenne);
	color: var(--couleur-bleue);
}

/* Sections et texte */
.section
{
	padding: var(--interligne-grande) var(--marge-moyenne) var(--interligne-petite);
	color: var(--couleur-section);
	font-family: var(--police-generale);
	font-size: var(--police-taille3);
}

.texte, ul
{
	padding: 0 var(--marge-moyenne) var(--interligne-petite) var(--marge-grande);
	color: var(--couleur-texte);
	font-family: var(--police-generale);
	font-size: var(--police-taille1);
}

li
{
	margin: 0 0 var(--interligne-petite) var(--marge-grande);
}

.section::first-letter, .texte::first-letter
{
	font-size: 120%; /* Agrandissement de la 1ère lettre */
}

/* Formulaire de contact */
.boite_formulaire
{
	/* Flex container monocolonne */
	display: flex;
	flex-flow: column wrap;
	padding: 0 var(--marge-moyenne) var(--interligne-petite) var(--marge-grande);
	width: 100%; /* pour ne pas déborder sur la droite ! */
}

.boite_formulaire form
{
	/* Flex element étirable et si besoin contractable */
	flex: 1 auto;
	width: 100%; /* pour ne pas déborder sur la droite ! */
}

.champ_formulaire
{
	/* Flex container multiligne */
	display: flex;
	flex-flow: row wrap;
	align-items: baseline;
	padding-bottom: var(--interligne-moyenne);

	color: var(--couleur-texte);
	font-family: var(--police-generale);
	font-size: var(--police-taille1);
}

.champ_formulaire input
{
	/* Flex item étirable */
	flex: 1 auto;
	margin-left: 0.5em;
	padding: 0.2em;
	border: 1px solid var(--couleur-texte);

	font-family: var(--police-generale);
	font-size: var(--police-taille1);
}

.champ_formulaire input[id="contact_nom"]
{
	/* On force les majuscules pour le nom */
	text-transform: uppercase;
}

.champ_formulaire input[id="contact_bouton"]
{
	margin-left: 0;
	font: inherit; /* plutôt que la police de l'input */
}

.champ_formulaire input[id="contact_bouton"]:hover
{
	margin-left: 0;
	transform: scale(1.01);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.19);
	transition: var(--transition_duree);
}

.champ_formulaire textarea
{
	/* Flex item étirable et si besoin contractable */
	flex: 1 auto;
  	margin-left: 0.5em;
	padding: 0.2em;
	border: 1px solid var(--couleur-texte);
	height: 10em;

	font-family: var(--police-generale);
	font-size: var(--police-taille1);
	resize: none; /* Pas de redimensionnement manuel */
}

.resultat_envoi_formulaire /* utilisé par gite_agapanthes.php (ne pas supprimer !!!) */
{
	/* Flex item étirable et si besoin contractable */
	flex: 1 auto;
	width: 100%; /* pour ne pas déborder sur la droite ! */
	height: 6rem;

	color: var(--couleur-texte);
	font-family: var(--police-generale);
	font-size: var(--police-taille1);
	text-align: center;
	animation: animation_clignote 0.75s ease-in-out infinite;
}

@keyframes animation_clignote
{  
	0% { color: var(--couleur-texte); }
	100% { color: var(--couleur-section); }
}

/* Media = titre + photo/vidéo/pdf centrés */
.media
{
	/* Flex element étirable et si besoin contractable */
	flex: 1 auto;
	/* Flex container monocolonne */
	display: flex;
	flex-flow: column nowrap;
}

.media > img
{
	object-fit: contain;
	padding: 0 var(--marge-moyenne) var(--marge-moyenne);
	max-width: 100%; /* pour ne pas déborder sur la droite ! */
	max-height: 350px;
	border-radius: 5%; /* NB : fonctionne mal avec padding */
}

.media > iframe
{
	object-fit: contain;
	margin: 0 var(--marge-moyenne) var(--marge-moyenne);
	max-width: 100%; /* pour ne pas déborder sur la droite ! */
	height: 350px;
	border-radius: 2%;
}

.media_titre
{
	/* Flex element étirable et si besoin contractable */
	flex: 1 auto;
	/* Flex container monocolonne */
	display: flex;
	flex-flow: column nowrap;
	/* texte du titre */
	color: var(--couleur-titre-media);
	font-family: var(--police-generale);
	font-size: var(--police-taille2);
	text-align: center;
}

.media_titre > img
{
	object-fit: contain;
	margin: 0 var(--marge-moyenne) var(--marge-moyenne);
	max-width: 100%; /* pour ne pas déborder sur la droite ! */
	max-height: 300px;
	border-radius: 2%;
}

.media_titre > iframe
{
	object-fit: contain;
	margin: 0 var(--marge-moyenne) var(--marge-moyenne);
	max-width: 100%; /* pour ne pas déborder sur la droite ! */
	height: 300px;
	border-radius: 2%;
}

.media_titre > iframe:hover, .media_titre > img:hover /* Zoom + ombre de l'image du media */
{
	transform: scale(1.02);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	transition: var(--transition_duree);
}

/* Boîtes de diaporamas */
.diaporama_boite_v, .diaporama_boite_h
{
	/* Flex container monoligne */
	display: flex;
	flex-flow: row nowrap;
	overflow: hidden;
}

.diaporama_translate_g
{
	/* Flex element étirable et si besoin contractable */
	flex: 1 auto;
	/* Flex container monoligne = 10 images alignées horizontalement */
	display: flex;
	flex-flow: row nowrap;
	
	width: 1000%;           /* 10 images = 10 x 100% */
	animation: animation_translate_g 50s infinite;
}

.diaporama_translate_g > img
{
	width: 100%;	/* Chaque image occupe 100% de la zone visible */
	flex-shrink: 0;
}

/* Arrêt du défilement en cas de survol de la souris */
.diaporama_translate_g:hover
{
	animation-play-state: paused;
}

.diaporama_translate_g img:hover
{
	transform: scale(1.02);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Animation qui décale la bande d'images vers la gauche, puis retour rapide à la 1ère image */
@keyframes animation_translate_g
{
	0%,   5% { transform: translateX(0%); }
	10%, 15% { transform: translateX(-100%); }
	20%, 25% { transform: translateX(-200%); }
	30%, 35% { transform: translateX(-300%); }
	40%, 45% { transform: translateX(-400%); }
	50%, 55% { transform: translateX(-500%); }
	60%, 65% { transform: translateX(-600%); }
	70%, 75% { transform: translateX(-700%); }
	80%, 85% { transform: translateX(-800%); }
	90%, 95% { transform: translateX(-900%); }
	100%     { transform: translateX(0%); }
}

/* Test
@keyframes animation_test
{
	from   { font-size: 1.2em; }
	25%, 75%   { font-size: 0.7em; }
	50%   { font-size: 1.5em; }
	100%   { font-size: 3.0em; }
}

.bandeau_bas:hover
{
	animation: animation_test 10s ease-in-out 0.1s;
}
*/

/* DEBUG : affichage du contour des éléments HTML 
div, img, a, p, li
{
	border: 1px dashed red;
} */