@font-face {    font-family: 'standard'; 	src:url('fonts/Kelvinch-Roman.otf')		; }
@font-face {	font-family: 'ita'; 		src:url('fonts/Kelvinch-Italic.otf')	; }
@font-face {	font-family: 'gras'; 		src:url('fonts/Kelvinch-Bold.otf')		; }
@font-face {	font-family: 'titre'; 		src:url('fonts/Quicksand-Bold.otf')		; }
@font-face {	font-family: 'picto'; 		src:url('fonts/modernpics.otf')			; }
@font-face {	font-family: 'social'; 		src:url('fonts/social.otf')				; }
@font-face {	font-family: 'maj';			src:url('fonts/mutlu.otf'),
												url('fonts/mutlu.TTF'),
												url('fonts/mutlu-webfont.woff'),
												url('fonts/mutlu-webfont.woff2'),
												url('fonts/bilbo.otf')				; }

/*Couleurs :

rgba(0,0,30,1)
rgba(10,0,50,1)
rgba(38,53,89,1)
rgba(170,210,230,1)*/

#titre {
text-shadow: 0 0 8px rgba(255,255,255,0.4); margin-bottom: -18px;
}

.portfolio { color: rgba(255,255,255,0.5); font-size: 80%; font-style: normal; display: inline-block; margin-bottom: -30px;
		border-bottom:	 	rgba(255,255,255,0.5)	 1px solid;  }
.up { 	border-top: 		rgba(255,255,255,0.5)	 1px solid; font-size: 70%; }


.note {
	padding-bottom: 2px; border-bottom: rgba(10,0,50,0.4) dashed 2px;
}

.courriel a { 
	font-weight: bold; color: rgba(38,53,89,1); font-family: titre; text-shadow: 1px 1px rgba(10,0,50,0.1); 
	text-decoration: none; padding-bottom: 2px; border-bottom: rgba(10,0,50,0.4) dashed 2px;
}

.social, .social a { font-family: social;
			color: rgba(255,255,255,0.3);
			background: none;
			font-size: 130%;
			padding-left: 0.4%; padding-right: 0.4%; }
.social a { display: inline-block; }
.social a:hover, .social span:hover { background: none;
				color: rgba(255,255,255,0.8) ;
				 }

.hover span { 
	margin-top: 8px; 
	margin-bottom: 8px; text-align: center; margin: 0 auto; }

* {      	box-sizing	: border-box;
    -webkit-box-sizing	: border-box;
    	-moz-box-sizing	: border-box;
    	}
* #footer { margin: 0;  }

@media all and (max-width: 860px) 	{ 
	body { font-size: 110%; }
	header { font-size: 130%; }
	.flex { flex-wrap: wrap; flex: vertical; }
	table {	width: 100%; font-size: 90%; }
	table img { width: 24px; min-width: 24px; max-width: 24px; }
	.prix { font-size: 95% }
	.comment, section { width: 95%; }
	#contenu { width: 85%; }
	#sommaire { width: 70%; font-size: 95%; }
	#mobile { display: block; }
	#pc { display: none; }
	nav a, .actuel { padding: 1%; font-size: 50%; }
	.cv { display: block; }
	main, footer { font-size: 90%; }
	.bank { width: 100%; }	
	.foot { width: 45%; }
	.grand_menu { width: 80%; margin: 0 auto; }
	#titre { font-size: 90%; } 							
						
									}

@media all and (min-width: 860px) 	{
	.parag { margin: 0 auto; width: 50%; }
	.foot { width: 30%; }
	header { font-size: 150%; }
	table { width: 70%; }
	.prix { font-size: 110%; }
	.comment { width: 90%; }
	section { width: 80%; }
	#contenu { width: 65%; }
	#sommaire { width: 60%; }
	#mobile { display: none; }
	#pc { display: block; }
	nav a, .actuel { padding: 0.5%; font-size: 65%; }
	.cv {	display: flex; justify-content: space-around; }
	.bank { width: 72%; }		
									}

html {    scroll-behavior: smooth;}

a.ancre {
    display: block;
    position: relative;
    top: -120px;
    visibility: hidden;
}

.global {
	position: fixed;
	padding: 2%;
	font-size: 130%;
}

.return, .courriel { right: 0; }
.return2, .telephone { left: 0; }
.return, .return2 { bottom: 0; }
.courriel, .telephone { top: 0; z-index: 1;}

.global a {
		border-radius: 40%;
		padding: 3%;
	background: rgba(255,255,255,0.3);
	border-right: 	1px dashed rgba(10,0,50,0.8);
	border-left:	1px dashed rgba(10,0,50,0.8);
}

.return a, .return a:visited, .return a:link, .return a:active, 
.return2 a, .return2 a:visited, .return2 a:link, .return2 a:active  { color: rgba(10,0,50,0.8); }

.return a:hover, .return2 a:hover {
	background: rgba(10,0,50,1); color: rgba(170,210,230,1);
}

@media screen 	{

	.overture { margin: 0 auto; width: 85%; }

#contenu { padding: 3.1%; }
h2, h3, h4, h5 { padding: 1%; }
h1 { padding: 0.4%; }
.footprint { display: none; }
	.hover {
	cursor: help;
		border-bottom: 1px dashed rgba(10,0,50,0.3);
}
	#contenu { 	border-right:	rgba(10,0,50, 0.3) 1px solid;
				border-left:	rgba(10,0,50, 0.3) 1px solid; }
	#head { position: sticky; top: 0; width: 100%; z-index: 1; }
	header { padding-top: 1.5%; padding-bottom: 0.8%; }
	#linear_head, #linear_foot { height: 16px; }
	#linear_nav { height: 0px; }
	.source { margin-top: 15px; }
	.print, .print2 { display: none; }
	section { border: rgba(10,0,50,0.2) dashed 2px; margin: 0 auto;  padding: 1.8%; border-radius: 15%; margin-bottom: 1.5%; }

.star { padding-top: 		0.5px;
		padding-bottom: 	0.5px; 
		padding-left: 		4px; 
		padding-right: 		4px;
 margin: 2px; border-radius: 5px; background: rgba(38,53,89,0.6); 
 border: 1px solid rgba(10,0,50,0); color: rgba(255,255,255, 0.8); font-size: 90%; }

	.info {
   position: relative;
   text-decoration: none; }

	.info span {
   display: none;
   color: rgba(10,0,50,1);
   font-size: 90%;
   min-width: 80px; }

	.info:hover {
   background: none;
   z-index: 500; }

	.info:hover span {
   display: inline-block;
   position: absolute;
   white-space: nowrap;
   top: 25px;
   left: 0px;
   background: rgba(214,233,243,1);
   color: rgba(10,0,50,1);
   padding: 3px;
   border-top: 		1px solid rgba(10,0,50,0.3);
   border-bottom: 	1px solid rgba(10,0,50,0.3);
   border-left:		1px dashed rgba(10,0,50,0.3);
   border-right:	1px dashed rgba(10,0,50,0.3);
   border-radius: 25%; }

	.region { height: 20px; width: 30px; display: inline-block; border: 1px rgba(10,0,50,0.5) solid; border-radius: 15%; margin-left: 1px; margin-right: 1px; }

	.conteneur { padding: 0.8%; max-width: 100%; }
	.miniflex {	height: 60px; }
					}

@media print {

.portfolio { display: none; }
#contenu { padding: 0.2%; }
h2, h3, h4, h5 { padding: 0.5%; }
h1 { padding: 0.2%; }
	.social { display: none; }
	body { font-size: 75%; }
	nav, .about, #sommaire, .retour, .source, .extrait, .info img, #media img, .return, .return2, .souris { display: none; }
	#contenu { width: 95%; border: none; }
	.overture { font-size: 80%; }
	header { padding-bottom:	0px; }
	#linear_head, #linear_nav, #linear_foot { height: 0px; display: none; }
	.print { display: block; }
	.print2 { display: inline-block; }
	.info_voyage, .nom_pays, .miniflex { display: inline-block; }
	.conteneur { padding: 0.1%; }
	.miniflex {	height: 10px; }
	.info .miniflex div { padding: 4px; margin-left: 3px; margin-right: 3px; }
	.bank { margin: 0 auto; padding-top: 10px; padding-bottom: 10px;
		border-top: 		1px dashed rgba(10,0,50,0.3);
		border-bottom: 		1px dashed rgba(10,0,50,0.3);  }
	#head { display: none; }
	.overture { margin: 0 auto; width: 95%; font-size: 68%; }
}

.web, #boutique h2, #chien, #pony, #gulliver { page-break-before: always }

body {
	font-size: 1.35rem;
	font-family: 'standard';
	margin: 0 auto;
	background: rgba(170,210,230,1);
	font-variant-ligatures: discretionary-ligatures;
	color: rgba(10,0,50,1);
}

.majuscule {
font-family: 'maj'; font-size: 130%;
}

img { max-width: 100%; }
h1, h2, h3, h4, h5 { font-family: 'titre'; text-align: center; letter-spacing: 1%; }
h1, h2, h3 { background: rgba(255,255,255,0.3); }
h1 { font-size: 160%; text-shadow: 1px 1px 2px rgba(255,255,255,1); }
h2 { font-size: 130%; font-variant : small-caps; }
h3 { font-size: 115%; width: 75%; margin: 0 auto; margin-top: 3%; margin-bottom: 3%; }

h2 .note { font-size: 65%; }

#map li {
	list-style: none; padding: 6px;
}

#map .s0 {
	font-variant: small-caps;
	margin-top: 14px;
}

#map .s1 {
	margin-left: 8px;
}

#map .s2 {
	margin-left: 20px;
}



.caps { font-variant: small-caps; }

em, .titre, .overture { font-style: normal; font-family: 'ita';  }

#sommaire, #prix { padding: 0.5%; }
h1, h2, h3, .screen, .book, #sommaire, .prix 
{ border-top: 1px solid rgba(10,0,50,0.2); border-bottom: 1px solid rgba(10,0,50,0.2); }

em { font-size: 100%; }
.overture { font-size: 90%; padding-top: 2%; }
.s2 { font-size: 85%; }
.pic { font-family: 'picto'; }
.big { font-size: 130%; }
.haut, .bas { margin: 4px; }
.voyages { text-align: center; margin: 0 auto; }
.separateur { width: 1px; height: 35px; background: rgba(10,0,50,0.3); padding: 1px;}
.screen { border-radius: 10%; }
.book { border-radius: 5%; }
.chien img { min-width: 300px; }
.mff img { min-width: 325px; }
.chien, .mff { margin-top: 1%; }

ul {
	list-style-type: square; font-weight: normal; font-family: 'gras'; padding: 0.8%; margin: 1%; color: rgba(10,0,50,1);
}

strong { font-weight: normal; font-family: 'gras'; color: rgba(0,0,30,1); }

#sommaire li { padding: 1%; }
#sommaire a { margin: 0 0 0 auto;  display: block; text-align: center; 
	border-left: 1px solid rgba(10,0,50,0.2); border-right: 1px solid rgba(10,0,50,0.2); }
.s1 a { width: 100%; }
.s2 a { width: 80%; }


#sommaire { margin: 0 auto; background: rgba(255,255,255,0.2); padding: 0.8%; border-radius: 10%; }

.small, .about, .quote, .comment, .small em, .quote em, .comment em { font-size: 88%; }
.prix { text-align: center; font-weight: normal; font-family: 'gras'; 
color: rgba(10,0,50,1); margin-bottom: 2.5%; background: rgba(170,210,230,1);
margin-top: 2.5%; }

.quote, .comment { margin: 0 auto; padding: 2%; margin-top: 1.5%; border-radius: 20px; background: rgba(255,255,255,0.4); border-right: rgba(10,0,50,0.2) 1px solid; border-left: rgba(10,0,50,0.2) 1px solid; }
.quote { width: 90%; }
.quote, p { text-indent: 5%; }

p {
	margin-top: 	0.5%;
	margin-bottom: 	0.5%;
}

table { border: 1px solid rgba(10,0,50,0.2);
background: rgba(170,210,230,1); margin : 0 auto; 
border-spacing: 1% ; padding:2px; border-style: hidden; padding: 2%;
border-collapse:collapse; margin-bottom: 10px; margin-top: 5px; border-radius: 25%;
}

th, td {
	border: 1px solid rgba(10,0,50,0.2); border-style: visible;
width: auto;
padding: 2%; text-align: center;}

#contenu {
	margin: 0 auto;

	background: rgba(255,255,255,0.3);
	 border-radius: 2%;
	
}

footer { padding: 0.4%; }
#footer { bottom: 0; width: 100%; }

html, body {
  height: 100%;
}

#content {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
#content:after {
  content: "";
  display: block;
}
#footer, #content:after {
  height: 142px; 
}
#footer {
  background: rgba(10,0,50,1);
}

header {
background: rgba(10,0,50,1); color: rgba(170,210,230,1); text-align: center;
}

sup { padding: 0.1%; }
.bank { margin-top: 	1.3%; 
		margin-bottom: 	1.3%;	
		font-size: 75%;
		max-width: 420px;
		background: rgba(255,255,255,0.12);
					}

#linear_head { background-image: linear-gradient(rgba(10,0,50,1), rgba(38,53,89,1)); }
#linear_nav { background-image: linear-gradient(rgba(38,53,89,1), rgba(170,210,230,1)); }
#linear_foot { background-image: linear-gradient(rgba(170,210,230,1), rgba(10,0,50,1)); } 

.point { padding: 4px; display: inline-block; background: rgba(170,210,230,0.4); border-radius: 35%; margin: 0.2%;}

nav {
text-align: center;
background: rgba(38,53,89,1);
color: rgba(170,210,230,1);
font-size: 150%;
padding: 0.6%; 
box-shadow: rgba(10,0,50,0.3) 0px 10px 15px; 
border-bottom: rgba(10,0,50,1) 2px solid;
}

nav a { background: rgba(10,0,50,0.5) ; color: rgba(170,210,230,1); box-shadow: 4px 4px black; border: 1px solid rgba(10,0,50,0.9); }
nav a, .actuel { margin-top: 10px; margin-bottom: 10px; display: inline-block; }
nav a:hover { background: rgba(170,210,230,0.5); color: rgba(10,0,50,1); }

a { padding: 0.4%; border-radius: 20%; font-weight: normal; font-family: 'gras'; text-decoration: none; }

article {
background: rgba(170,210,230,1); color: rgba(10,0,50,1); 
text-align: justify; padding-top: 0.2%; padding-bottom: 2%;
}

details > summary {
  list-style: none;
}

details > summary::marker, /* Latest Chrome, Edge, Firefox */ 
details > summary::-webkit-details-marker /* Safari */ {
  display: none;
}
article a, summary { color: rgba(38,53,89,1); background: rgba(38,53,89,0.2); }
article a:hover, summary:hover { color: rgba(170,210,230,1); background: rgba(38,53,89,1); }

summary, summary:focus { cursor: pointer; outline: none; }
summary, .retour a {
	padding: 4px; display: block; font-weight: normal; font-family: 'gras';
	text-align: center; max-width: 30%; margin: 0 auto; margin-top: 1.3%; border-radius: 20%;
	border-top: 1px solid rgba(10,0,50,0.3); border-bottom: 1px solid rgba(10,0,50,0.3);
}

#sommaire summary { max-width: 50%; }
details { padding-bottom: 6px; }

footer a { color: rgba(10,0,50,1); background: rgba(170,210,230,0.5); margin: 0.5%; }
footer a:hover { background: rgba(10,0,50,1); color: rgba(170,210,230,0.5); }
footer { background: rgba(10,0,50,1); color: rgba(170,210,230,1); }

.flex, .miniflex, .flexmap { display: flex; }
.flexmap { justify-content: space-between; }
.flexmap .conteneur { min-width: 50%; }
.flexmap, .flexmap .conteneur { margin: 0 auto; }

.flex, .miniflex {
		align-items: center;
		justify-content: space-around; 
}

.miniflex {
	flex-wrap: wrap;
	text-align: center;
	margin: 0 auto;
}

.cv { width: 100%; min-width: 100%; flex: 1 1 0; }
.cv .conteneur { flex: 1 1 0; }

.left { text-align: left; }
.center, .about, .retour { text-align: center; }
.right { text-align: right; }
.justify {text-align: justify;}

.about { margin-top: 6px; }

 .margin {
 	margin-left: 8px;
 	margin-right: 8px;
 	margin-top: 4px;
 	margin-bottom: 4px;

 }

.inblock { display: inline-block; }
.stars { display: inline-block; padding: 0.2%;  }
.flags:hover { transform: scale(1.3); }

hr { border-bottom: 2px dashed rgba(10,0,50,0.3); border-right: none; border-left: none; border-top: none; width: 80%; margin: 0 auto; padding: 1%; margin-bottom: 1%; }