@charset "utf-8";
/* CSS Document */

:root {
	/*Vert (main) et orange (second) Sombre*/
	--main-color: #025959;
	--second-color: #F29441;
	
	/*Vert (main) et orange (second) Clair*/
	/*--main-color: #038C7F;*/
	/*--second-color: #F2B84B;*/
	
	/*Bleu (main) et beige (second)*/
	/*--main-color: #00A59E;*/
	/*--second-color: #FFE4C6;*/
	
	
}

html {
	font-size: 10pt;
	font-family: Georgia, DejaVu Serif, Norasi, serif;
	scroll-behavior: smooth;
}

body {
	background-color: var(--main-color);
	color: var(--second-color);
}

h1{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.6rem;
	text-transform: uppercase;
	font-style: normal;
	font-weight: lighter;
	letter-spacing: 0.4rem;
	line-height: 2.8rem;
}

p{
	text-indent: 2rem;
	position:relative;
	font-size: 1.3rem;
	font-style: normal;
	text-align: justify;
	text-justify: inter-word;
	letter-spacing: normal;
	line-height: 2.2rem;
}

.intro p{
	text-indent: 1rem;
	position:relative;
	font-size: 1rem;
	font-style: normal;
	text-align: justify;
	text-justify: inter-word;
	letter-spacing: normal;
	line-height: 1.8rem;
	padding:0rem 1rem;
}


a{
	color: var(--second-color);
	padding:0.1em;
	border-radius: 0.25rem;
	text-decoration:none;
}

a:link{
	transition: 0.5s;
	font-style: oblique;
	text-decoration:dotted underline;
}

a:hover{
	background-color: var(--second-color);
	color: var(--main-color);
	border-radius: 0.25rem;
	text-decoration:none;
}

a:visited{}

a:active {}

img{}

.imgtext{
	position:relative;
	width:1.8rem;
	height:1.8rem;  
	top:0.45rem;
}

figure{
	position:relative;
	margin:0rem;
	padding-bottom:0rem;
}

figure img{
	mix-blend-mode: luminosity;
	border: 0.1rem solid;
	border-radius:0.5rem; /*~5px*/
	border-color:var(--second-color);
	padding:0.15rem;
}

iframe{
	mix-blend-mode: luminosity;
	border: 0.1rem solid;
	border-radius:0.5rem; /*~5px*/
	border-color:var(--second-color);
	padding:0.5rem;
}

.large{
	width: 54rem;
	/* background-color:green; */
}

.large img{
	width: 99%;
}

.narrow{
	width:26.5rem;
	display: inline-block;
	/* background-color:red; */
}

.narrow img{
	width: 99%;
}

figcaption{
	position :relative;
	mix-blend-mode: luminosity;
	bottom:2.2rem;
	left:0.5rem;
	padding: 0.3rem;
	background-color : var(--main-color);
	border-radius: 0.25rem;
	display: inline;
}

figcaption a{
	mix-blend-mode: luminosity;
}

ul{
	font-size: 1.3rem;
	line-height: 1.8rem;
	/*background-color:red;*/
}

li{
	padding-top: 0rem;
	padding-left:0rem;
}

li.asterisk{
	list-style: none;
	background: url("icons/asterisk-sc.svg") no-repeat left top;
	padding-left: 2rem;
	margin-top : 0.9rem;
	margin-left: -1rem;
}

table{
	border-collapse: collapse;
	width: 54rem; /*~720px*/
	text-align:center;
	font-size: 1.3rem;
	font-style: normal;
	letter-spacing: normal;
	line-height: 1.8rem;
}

td{
	/*border: 1px dotted gold;*/
	width:33%;
	padding:1rem;
	vertical-align:top;
	text-align:center;
}

table img{
	position:relative;
	display:block;
	width:3rem;
	left:50%;
	margin-left:-1.5rem;
	padding:0.25rem;
	/* background-color:red; */
}

#pageTop{
	width:0.9rem;
	height:0.9rem;
	position:absolute;
	top:0rem;
	left:0rem;
}

/*Div de définition du calque d'ornement*/
#ornament{
	position:absolute;
	width: 100vw;
	top: 0%;
	left: 0%;
	background-image: url("icons/ornament.svg");
	background-attachment: local;
	background-size: 600px 352px;
	background-repeat: repeat;
	filter: opacity(10%);
	pointer-events: none;
	z-index:99;
}

#ornament-two{
	position:absolute;
	width: 100vw;
	top: 0%;
	left: 0%;
	background-image: url("icons/pattern.svg");
	background-attachment: local;
	background-size: 30px 30px;
	background-repeat: repeat;
	filter: opacity(10%);
	pointer-events: none;
	z-index:98;
}

/*Div de définition du menu de langue*/
#lang{
	font-size:1rem;
	position:fixed;
	z-index:97;
	top: 1.5rem; 
	right: 1.5rem;
	padding:0.5rem;
	border-radius: 0.25rem;
	background-color:var(--main-color);
}

#lang a:link{text-decoration:none;}

/*Class de définition de la zone de contact fixe (permanente)*/

a.contact {
	position:fixed;
	z-index:96;
	top: 1rem; 
	left: 1rem;
	height:5rem;
	width:5rem;
	border:5px;
	background: url("icons/contact-sc.svg") no-repeat left top;
}
	
a:hover.contact{background: url("icons/contact-mc.svg") no-repeat left top;}

/*Classe de définition du pied de page*/
#lowtech{
	font-size:1rem;
	font-style: normal;
	letter-spacing: normal;
	line-height: 1.8rem;
	position:fixed;
	width: 100vw;
	bottom:0rem;
	left:0rem;
	padding:0.8rem;
	padding-left:1.5rem;
	z-index:96;
	background-color:var(--main-color);
}

#lowtech a:link, .outlink a:link{
	transition: 0.5s;
	text-decoration:none;
	background-color: var(--second-color);
	color: var(--main-color);
}

#lowtech a:hover, .outlink a:hover{
	background-color: var(--main-color);
	color: var(--second-color);
	text-decoration:underline;
}

.lowopacity{
	opacity: 0.25;
	transition: 0.5s;
}

.lowopacity:hover{
	opacity: 1;
}

/*Div de définition de la page d'accueil*/
#home{
	position:relative;
	width: 54rem; /*~720px*/
	height: 20rem; /*~260px*/
	left: calc(100vw/2);
	top: calc(100vh/2);
	margin-left: -27rem;
	margin-top: -10rem;
	text-align: center;
	z-index:10;
	/*background-color:red;*/
}

.gitesfr:hover{background-color:inherit;}

/*Div de définition du CV*/
.content{
	position:relative;
	width: 54rem;
	left: calc(100vw/2);
	top: 90vh;
	margin-left: -27rem;
	padding-top: 2rem; /*~150px*/
	text-align: left;
	background-color:var(--main-color);
	z-index:11;
	/*background-color:red;*/
}

/*Classe de définition des liens du menu*/
.menu{
	font-size:1.2rem;
	padding:0.3rem;
	/*background-color:green;*/
}

.menu li{
	list-style: none;
	display: inline;
	/*background-color:red;*/
}

.menu a:link{
	font-style: oblique;
	text-decoration:none;
}

.menu a:visited{}

.menu a:active{}

.footer{
	position:relative;
	width: 54rem;
	height:inherit;
	padding-bottom: 4rem;
	padding-top: 0rem;
	background-color:var(--main-color);
	z-index:20;
	/*background-color:red;*/
}

/*Classe de définition du surlignage*/
.highlight{
	background-color: var(--second-color);
	color: var(--main-color);
	padding-left: 0.2rem;
	padding-right: 0.2rem;
	padding-top: 0.1rem;
	padding-bottom: 0.1rem;
	border-radius: 0.25rem;
	text-align: center;
}

.lowlight{
	padding-left: 0.2rem;
	padding-right: 0.2rem;
	padding-top: 0.1rem;
	padding-bottom: 0.1rem;
	margin-top: 0rem;
	border : 0.1rem solid var(--second-color);
	border-radius: 0.25rem;
	text-align: center;
}

.textSansSerif{
	font-family: Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-style: normal;
	font-weight: lighter;
}

/*Classe de définition des liens avec icones*/

.mylinks{
	/*background-size: contain;*/
	width:1.8rem;
	height:1.8rem;
	background-position:left center;
	background-repeat:no-repeat;
	background-size:1.8rem;
	padding-left:1.8rem;
	margin-right:0.5rem;
}

.download{
	background-image:url("icons/download-mc.svg");
}
.download:hover{
	background-image:url("icons/download-sc.svg");
}

.totop{
	background-image:url("icons/to-top-mc.svg");
}
.totop:hover{
	background-image:url("icons/to-top-sc.svg");
}

.linkico{
	background-image:url("icons/link-mc.svg");
}
.linkico:hover{
	background-image:url("icons/link-sc.svg");
}

hr.myHr {
	border-top: 1px solid var(--second-color);
}

.phone {
	background: url("icons/phone-sc.svg") no-repeat left top;
	padding-left: 2rem;
	margin-top : 0.9rem;
	margin-left: -1rem;
}

.phone:hover{
	background-image:url("icons/phone-mc.svg");
}

.mail {
	background: url("icons/mail-sc.svg") no-repeat left top;
	padding-left: 2rem;
	margin-top : 0.9rem;
	margin-left: -1rem;
}

.mail:hover{
	background-image:url("icons/mail-mc.svg");
}

.web {
	background: url("icons/web-sc.svg") no-repeat left top;
	padding-left: 2rem;
	margin-top : 0.9rem;
	margin-left: -1rem;
}

.web:hover{
	background-image:url("icons/web-mc.svg");
}

.gps {
	background: url("icons/gps-sc.svg") no-repeat left top;
	padding-left: 2rem;
	margin-top : 0.9rem;
	margin-left: -1rem;
}

.gps:hover{
	background-image:url("icons/gps-mc.svg");
}

.enlarge {
	position:absolute;
	right: 0.5rem;
	top: 0.5rem;
	width:3rem;
	height:3rem;
	border-radius:0.5rem;
	background: url("icons/enlarge-sc.svg") no-repeat center center;
	background-color:var(--main-color);
	background-size:3rem;
	cursor:pointer;
}

.enlarge:hover{
	background-image:url("icons/enlarge-mc.svg");
	background-color:var(--second-color);
}

.linkto {
	position:absolute;
	right: 0.5rem;
	top: 0.5rem;
	width:3rem;
	height:3rem;
	border-radius:0.5rem;
	background: url("icons/linkto-sc.svg") no-repeat center center;
	background-color:var(--main-color);
	background-size:3rem;
	cursor:pointer;
}

.linkto:hover{
	background-image:url("icons/linkto-mc.svg");
	background-color:var(--second-color);
}

.overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(2, 89, 89, 0.7); /*Correspond à var(--main-color);*/
	transition: opacity 250ms;
	visibility: hidden;
	opacity: 0;
	z-index:100;
}
.overlay:target {
	visibility: visible;
	opacity: 1;
}

.popup {
	position: relative;
	width: 75%;
	margin: 4rem auto;
	padding:0.15rem;
	background: var(--main-color);
	border: 0.1rem solid;
	border-radius:0.5rem; /*~5px*/
	border-color:var(--second-color);
	transition: all 250ms ease-in-out;
}

.contactPP {
		width: 30%;
}


.popup img{
	position: relative;
	width: 100%;
	border-radius:0.3rem; /*~5px*/
}

.popup h2 {
	
}

.popup .close {
	position:absolute;
	right: 0.5rem;
	top: 0.5rem;
	width:3rem;
	height:3rem;
	border-radius:0.5rem;
	background: url("icons/close-sc.svg") no-repeat center center;
	background-color:var(--main-color);
	background-size:3rem;
	transition: all 200ms;
}

.popup .close:hover{
	background-image:url("icons/close-mc.svg");
	background-color:var(--second-color);
}

.popup .ppcontent {
	max-height: 30%;
	overflow: auto;
}