/*** Base ***/
html
{
    scroll-behavior: smooth;
}

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

:root 
{
	--header-outer-height: 110px; /* Hauteur extérieure */
	--header-inner-height: 70px; /* Hauteur interne */
	--header-height-difference: calc(
		var(--header-outer-height) - var(--header-inner-height)
	);
	--bg-header: #F8F7F4; /* Couleur de fond en-tête */
	--text-header: #212529; /* Couleur texte en-tête */
	--bg-body: #f2f5f7; /* Couleur de fond corps du site*/
	--bg-presta: #456e6a; /* Couleur bloc prestations */
	--txt-white: #fffBF7; /* Couleur texte */
	--txt-black: #342C2A; /* Couleur texte */
	--grey: #686868;
	--bg-footer: #141414; /* /* Couleur de fond pied de page */ 
}

/* Corps */
body 
{
	background-color: var(--bg-body); /* Couleur de fond */
	position: relative;
}
/* Liens */
body a
{
	text-decoration: none; /* Suppression soulignement bleu */
}
/*** /Base ***/

/***********************/
/*** Version mobile ***/
/*********************/

/***********************/
/*** Page index.php ***/
/*********************/

.responsive-wrapper 
{
	width: 90%; /* Largeur */
	margin-left: auto; /* Marge externe gauche */
	margin-right: auto; /* Marge externe droite */
}

/* En-tête externe */
.header-outer 
{
	/* En-tête fixe */
	height: var(--header-outer-height); /* Hauteur */
	position: sticky; /* Fixe */
	top: calc(
		var(--header-height-difference) * -1
	); /* Multiply by -1 to get a negative value */
	display: flex;
	align-items: center; /* Alignement vertical (centré) */
	background-color: var(--bg-header); /* Couleur de fond */
	box-shadow: 0 2px 10px 0 rgba(0,0,0, 0.1); /* Ombre */
	z-index: 999; /* Au premier plan */
}

/* En-tête interne */
.header-inner 
{
	height: var(--header-inner-height); /* Hauteur */
	position: sticky; /* Fixe */
	top: 0; /* Depuis le haut */
	display: flex;
	align-items: center; /* Alignement vertical (centré) */
	justify-content: space-between; /* Alignement horizontal */
}

/* Logo */
.header-logo img 
{
	display: block;
	height: calc(var(--header-inner-height) - 3px); /* Hauteur */
}

/* Titre du site */
.headerTitle
{
    margin-right: auto; /* Marge externe depuis la droite */
	margin-top: 15px; /* Marge externe depuis le haut */
}

/* Au survol de la souris */
.headerTitle a
{
	text-decoration: none; /* Suppression soulignement */
	color: var(--text-header); /* Couleur */
}

/* Navigation */
.header-navigation 
{
	display: flex;
	flex-wrap: wrap; /* Retour automatique */
}

/* Navigation, liens, bouton menu (version mobile) */
.header-navigation a,
.header-navigation span 
{
	font-size: 1.125rem; /* Taille police */
	color: var(--text-header); /* Couleur */
	margin-left: 1.75rem; /* Marge externe gauche */
	position: relative;
	font-weight: 500; /* Graisse */
}

/* Navigation, Liens */
.header-navigation a 
{
	display: none; /* Invisible */
	font-size: 1.125rem; /* Taille police de caractère */
	color: var(--text-header); /* Couleur */
	text-decoration: none; /* Suppression soulignement */
}

.header-navigation a:hover, .header-navigation span:hover
{
	color:#c25616; /* Couleur texte menu */ 
}

/* Navigation, bouton menu */
.header-navigation span
{
	border: 0; /* Bordure */
	background-color: transparent; /* Couleur de fond */
	padding: 0; /* Marge interne */
}

/* Navigation en superposition (version mobile) (background) */
.overlay 
{
	display: block;
	/* Hauteur et largeur de la superposition */   
	width: 0; /* Largeur */
	height: 100%; /* Hauteur */
	position: fixed; /* Fixe */
	z-index: 1; /* Au 1er plan */
	left: 0; /* A partir de la gauche */
	top: 0; /* A partir du haut */
	background-color: rgb(0,0,0); 
	background-color: rgba(0,0,0, 0.9); 
	overflow-x: hidden; /* Défilement horizontal interdit */
	transition: 0.5s; /* Effet de transition */
}

/* Position du contenu dans la superposition */
.overlay-content 
{
	position: relative;
	top: 25%; /* 25% depuis le haut */
	width: 100%; /* Largeur */
	text-align: center; /* Texte centré */
	margin-top: 30px; /* Marge externe depuis le haut */
}

/* Lien de navigation à l'intérieur de la superposition */
.overlay a 
{
	padding: 8px; /* Marges internes */
	text-decoration: none; /* Aucun soulignement */
	font-size: 18px; /* Taille police de caractère */
	color: #818181; /* Couleur */
	display: block; 
	transition: 0.3s; /* Effet de transition au survol de la souris (couleur) */
}

/* Au survol sur les liens de navigation (modification de la couleur) */
.overlay a:hover, .overlay a:focus 
{
  	color: #c25616; /* Couleur */
}

/* Position fermeture de la superposition (haut droite) */
.overlay .closebtn 
{
	position: absolute;
	top: 20px; /* Depuis le haut */
	right: 45px; /* Depuis la droite */
	font-size: 30px; /* Taille fermeture */
}

.main-container, .second-container, .presentation-container,
.description, .coordonnees, .footer, .mentionsLegales ul li a, 
.mentionsLegales p, .footer-tarifs, .devis
{
	display:flex;
	justify-content: center; /* Axe horizontal (centré) */
	align-items: center; /* Axe vertical (centré) */
}

.presentation-container, .prestation-container, .description, .coordonnees
{
	color: var(--txt-black); /* Couleur texte */
}

.footer, .footer ul li a, .mentionsLegales ul a, .mentionsLegales p, .rowPlanSite ul a
{
	color: var(--txt-white); /* Couleur texte */
}

.presentation-container, .prestation-container
{
	width: 760px; /* Largeur */
	height: 570px; /* Hauteur */
	background-color: var(--bg-body);
	font-size: 15px; /* Taille police de caractère */
}

/* Contenu du bloc présrentation */
.presentation-container
{
	display: flex;
	justify-content: center; /* Axe horizontal (centré) */
	align-items: center; /* Axe vertical (centré) */
	flex-direction: column; /* En colonne */
}

/* Titre bloc présentation */
.presentation-title h4, .competences-title h5
{
	text-transform: uppercase; /* Majuscule */
	font-weight: 900; /* Graisse */
	text-align: center; /* Texte centré */
}


.presentation-title h4
{
	font-size: 34px; /* Taille police de caractère */
}

.competences-title h5
{
	font-size: 30px; /* Taille police de caractère */
}

/* Texte sous-titre */
#typing-text
{
	font-weight: lighter; /* Graisse */
	letter-spacing: 6px; /* Espace entre les lettres */
}

/* Texte début animation */
#typing-text::after 
{
    content: 'Conception web,'; /* Texte */
}

/* Durée animation texte */
#typing-text::after 
{
    animation: change-text 7s infinite; /* Modification du texte */
}

/* Animation */
@keyframes change-text 
{
    from { content: 'Conception web'; }
    25%  { content: 'Interfaces utilisateurs'; }
    50%  { content: 'Maquettage'; }
    75%  { content: 'Intégration web'; }
    to   { content: 'Conception web'; }
}

/* Conteneur principal & secondaire */
.main-container, .second-container
{
	flex-wrap: wrap; /* Retour automatique */
}

/* Conteneur secondaire */
.second-container
{
	background-color: #e9cdd9; /* Couleur de fond */
}

/* Conteneur compétences, bloc titre compétences, conteneur compétences (competences.php) */
.prestation-container, .competences-title, .skills-container
{
	display: flex;
	justify-content: center; /* Axe horizontal (centré) */
	align-items: center; /* Axe vertical (centré) */
}

/* Bloc prestations */
.prestation
{
	width: 335px; /* Largeur */
	height: 400px; /* Hauteur */
	border-radius: 7px; /* Bords arrondis */
	padding: 20px; /* Marges internes */
	background-color: var(--bg-presta); /* Couleur de fond */
	color: var(--txt-white); /* Couleur texte */
	border: solid 1px #818181; /* Epaisseur & couleur bordure */
	border-width: 0 1px 1px 0; /* bordure droite & basse */
}

/* Bloc prestations titre */
.prestation h5
{
	display: flex;
	justify-content: center; /* Axe horizontal (centré) */
	font-weight: 700; /* Graisse */
	text-transform: uppercase; /* En majuscule */
}

/* Dimension bloc description & coordonnées */
.description, .coordonnees
{
	width: 760px; /* Largeur */
	height: 230px; /* Hauteur */
	flex-direction: column; /* En colonne */
}

/* Titre blocs description & coordonnées */
.description h6, .coordonnees h6
{
	text-transform: uppercase; /* En majuscules */
	font-weight: 700; /* Graisse */
}

.description
{
	text-align: justify; /* Texte justifié */
	padding: 11.5px; /* Marges internes */
}

.coordonnees
{
	margin-top: 25px; /* Marges externes */
}

/* Pied de page */ 
.footer
{
	width: 100%; /* Largeur */
	height: 276px; /* Hauteur */
	background-color: var(--bg-footer); /* Couleur de fond */
}

/* Liste plan du site */
.rowPlanSite
{
	display: flex;
    font-size: 13px; /* Taille police de caractère */
}

/* Titre plan du site */
.rowPlanSite ul h6
{
	margin-top: 20px; /* Marge externe depuis le haut */
	font-weight: 800; /* Graisses */
}

/* Liens plan du site */
.rowPlanSite ul a, .mentionsLegales
{
	line-height: 2.5; /* Interligne */
}

/* Mentions légales */
.mentionsLegales
{
	display: flex;
	justify-content: center; /* Axe horizontal (centré) */
	align-items: center; /* Axe vertical (centré) */
	background-color: var(--bg-footer); /* Couleur de fond */
	border-top: 1px solid #818181; /* Bordure haut */
	height: 150px;
}

/* Listes liens mentions légales */
.mentionsLegales ul 
{
	padding-top: 9px; /* Marge interne depuis le haut */
}

/* Liens au survol */
.mentionsLegales ul a, .rowPlanSite ul a
{
	text-decoration: none; /* Suppression soulignement */
}

/* Liens */
.mentionsLegales ul, .rowPlanSite ul 
{
    list-style-type : none; /* Suppression puce de liste */
}

/* Bouton retour haut de page */
#myBtn 
{
  	display: none;
  	position: fixed; /* Fixe */
  	bottom: 56px; /* Depuis le bas */
  	right: 20px; /* Depuis la droite */
  	z-index: 99; /* Au dessus de la pile */
	border: 2px solid var(--grey); /* bordure */
  	background-color: transparent; /* Couleur de fond */ 
  	color: var(--grey); /* Couleur texte */
  	cursor: pointer; /* Forme du curseur (main) */
  	border-radius: 7px; /* Bords arrondis */
	padding: 5px 5px 2px 5px; /* Marges internes */
}

/* Chevron */
.fa-circle-chevron-up
{
	font-size: 25px; /* Taille */
}

/*****************************/
/*** Page competences.php ***/
/***************************/

/* Titre */
.competences-title 
{
	height: 115px; /* Hauteur bloc */
	background-color: transparent; /* Couleur de fond */
	text-decoration: underline #c25616; /* Couleur */
	text-decoration-thickness: 3px; /* Epaisseur du trait */
	text-underline-offset: 10px; /* Espace entre le mot & le soulignement */
}

/* Titre */
.competences-title h5
{
	font-size: 22px; /* Taille police de caractère */
}

/* Conteneur compétences */
.competences-container
{
	display: flex;
	justify-content: center; /* Axe horizontal (centré) */
	flex-wrap: wrap; /* Retour automatique */
	height: 850px; /* Hauteur bloc */
}

/* Bloc domaines de compétences & technologies employées */
.domaines, .technologies
{
	width: 550px; /* Largeur */
	margin: 0 15px 0 0; /* Marges externes */
	padding-left: 15px; /* Marge interne droite */
}

/* Titre blocs domaines de compétences & titre technologies empluyées */
.domaines h4, .technologies h4
{
	text-align: center; /* Texte centré */
	margin: 5px 0 22px 0; /* Marges externes */
	font-weight: 700; /* Graisses */
}

/* Titre de la définition domaines de compétences & définition */
.domaines dt, .domaines dd
{
	font-size: 12px; /* Taille police de caractère */
	text-align: start; /* Texte au début */
}

/* Titre de la définition */
.domaines dt
{
	text-transform: uppercase;
}

/*****************************************************/
/* Barres de progression des technologies utilisées */
/***************************************************/

/* Conteneur barres de progression */
.bar-container
{
	margin-top: 39px; /*Marge externe depuis le haut */
}

/* Espaces entre chaque barre de progression */ 
.bar:not(:last-child)
{
    margin-top: 15px; /* Marge externe depuis le haut */
    margin-bottom: 15px; /* Marge externe depuis le bas */
}

/* Barre de progression */
.bar
{
    width: 100%; /* Largeur */
    border-radius: 7px; /* Bords arrondis */
    background-color: #d2d2d2;
}

/* Contenu barres de progression */
.bar-stat
{
    padding: 9.5px 20px; /* Marges internes */
    border-radius: 5px; /* Bords arrondis */
    color: var(--txt); /* Couleur texte */
}

/* Texte barre de progression */
.bar-text
{
    font-size: 14px; /* Taille de la police */
	color: var(--txt-white); /* Couleur texte */
}

/* Animation de chaque logiciel */
#figma
{
    background-color: #16164f; /* Couleur de fond */
    animation: figmaSlide 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes figmaSlide
{
    0%{width: 0%;}
    100%{width: 75%;}
}

#htmlcss
{
    background-color: #e54c22; /* Couleur de fond */
    animation: htmlcssSlide 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes htmlcssSlide
{
    0%{width: 0%;}
    100%{width: 85%;}
}

#js
{
    background-color: #c8b343; /* Couleur de fond */
    animation: jsSlide 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes jsSlide
{
    0%{width: 0%;}
    100%{width: 60%;}
}

#php
{
    background-color: #4f5c93; /* Couleur de fond */
    animation: phpSlide 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes phpSlide
{
    0%{width: 0%;}
    100%{width: 75%;}
}

#sql
{
    background-color: #20758f; /* Couleur de fond */
    animation: sqlSlide 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes sqlSlide
{
    0%{width: 0%;}
    100%{width: 80%;}
}

#bootstrap
{
    background-color: #7810f7; /* Couleur de fond */
    animation: bootstrapSlide 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes bootstrapSlide
{
    0%{width: 0%;}
    100%{width: 85%;}
}

/******************************/
/*** Page realisations.php ***/
/****************************/

/* Conteneur réalisations */              
.realisations-container
{
	display: flex;
	justify-content: center; /* Alignement horizontal (centré) */
    align-items: center; /* Alignement vertical (centré) */
    flex-wrap: wrap; /* Retour à la ligne */
	margin-bottom: 40px; /* Marge externe depuis le bas */
}  

/* Carte réalisations */
.realisations
{
	width: 340px; /* Largeur */
    height: 300px; /* Hauteur */
    background-color: var(--bgBody); /* Couleur de fond */
    border-radius: 7px; /* Bords arrondis */
    overflow: hidden; /* Contenu rogné si besoin */
    box-shadow: 0px 2px 4px rgba(0,0,0,0.2); /* Ombre */
    margin: 20px; /* Marges externes */
    position: relative;
}

/* Copies écrans réalisations */
.realisations img
{
	width: 100%; /* Largeur */
	height: 175px; /* Hauteur */
}

/* Contenu */
.realisations-content
{
	margin: 15px 0 7px 9px; /* Marges externes */
}

/* Titre & descriptif */
.realisations-content h6, .realisations-content p
{
    color: var(--txt-black); /* Couleur du texte */
	font-size: 16px; /* Taille police de caractère */
}

.realisations-content h6
{
    font-weight: bold; /* Graisse */
}

/* Détail */
.realisations-content p 
{
    font-size: 14px; /* Taille police de caractère */
    line-height: 1.3; /* Hauteur des lignes */
	padding: 5px; /* Marges internes */
}

/* Etiquettes compétences de chaque réalistion */
.tag
{
    display: inline-flex; /* Affichage */
    color: var(--txt-white); /* Couleur du texte */
    font-size: 11px; /* Taille police de caractère */
    padding: 4px 10px; /* Marges internes */
    border-radius: 25px; /* Bords arrondis */
    background-color: #2196F3; /* Couleur de fond */
    margin-top: 0; /* Marge externe depuis le haut */
	position: absolute;
		right: 13px;
		top: 10px;
}

/******************/
/* Superposition */
/****************/

/* Texte de la superposition
.overlay-text 
{
	color: var(--txt-white); /* Couleur du texte
    font-size: 15px; /* Taille de la police 
	font-family: "DM Sans", sans-serif; /* Police de caractère 
    position: absolute; /* Position 
        top: 50%; /* Centré 
        left: 50%; /* Centré 
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}*/

/* Icônes logiciels utilisés */
.overlay-text img
{
    width: 30px; /* Largeur */
    height: 30px; /* Hauteur */
}

/* Etiquettes logiciels utilisés pour chaque chaque projet */
.log-tag
{
	display: inline-flex; /* Affichage en ligne */
    /*background-color:rgb(16, 16, 16); /* Couleur de fond */
	background-color: transparent;
	border: 1px solid var(--txt-black); /* bordure */
	color: var(--txt-black); /* Couleur du texte */
}

.tag
{
	color: var(--txt-white); /* Couleur du texte */
}

/* Etiquettes compétences & logiciels */
.tag, .log-tag
{
    font-size: 11px; /* Taille police de caractère */
    padding: 4px 10px; /* Marges internes */
    border-radius: 15px; /* Bords arrondis */
    margin-top: 0; /* Marge externe depuis le haut */
}

.realisations-overlay
{
    display: flex;
    justify-content: center; /* Alignement horizontal (centré) */
    align-items: center; /* Alignement vertical (centré) */
    position: absolute; /* Position */
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    cursor: default;
    border-radius: 7px 7px 0 0; /* Bords arrondis */
    opacity: 0; /* Opacité */
    visibility: none; /* Invisible */
    transition: .5s ease;
	background-color: var(--bg-presta); /* Couleur de fond */
}

/* Au survol de la souris sur la superposition */
.realisations-content:hover .realisations-overlay
{
    opacity: 0.9; /* Opaque à 100% */
    width: 340px; /* Largeur */
    height: 300px; /* Hauteur */
}

/* Bouton plus sur superposition */
.btn-plus
{
    width: 75px; /* Largeur */
    height: 40px; /* Hauteur */
	background-color: #345b58; /* Couleur de fond */
    border-radius: 7px; /* Bords arrondis */
	position: relative;
}

/* Au survol sur le bouton plus */ 
.btn-plus:hover
{
    cursor: pointer; /* Main */
}

/* Signe plus */
.fa-plus
{
	color: var(--txt-white); /* Couleur */
	position: absolute; /* Position */
		top: 12px; /* Depuis le haut */
		left: 30px; /* Depuis la gauche */
}

/**********************/
/* Boite de dialogue */
/********************/
.modal-dialog
{
    background-color: transparent; /* Couleur de fond */
}

/* Boîte de dialogue */
.modal
{
    display: none; /* aché par défaut */
    position: fixed; /* position fixe */
    left: 0; /* Depuis la gauche */
    top: 50px; /* Depuis le haut */
    overflow: auto; /* Défillement si besoin */
}

/* Titre boite de dialogue */
.modal-title h4
{
    font-weight: bold; /* Graisse */
	color: var(--txt-black); /* Texte */
}

/* Contenu boite de dialogue */
.modal-content 
{
    position: relative;
    margin: auto; /* Marges automatique */
    padding: 0; /* Marges internes */
    width: 100%; /* Largeur */
    border: none; /* Sans bordure */
	background-color: var(--bg-body); /* Couleur de fond */
}
	
/* Bouton fermeture (X) boite de dialogue */
.btn-close:hover
{
    cursor: pointer; /* Main */ 
}
		
/* Corps boite de dialogue */
.modal-body
{
    background-color: var(--bg-body); /* Couleur de fond */
}
		
/* Dimension image projet dans boite de dialogue */
.modal-body img
{
    width: 225px; /* Largeur */
    height: 110px; /* Hauteur */
	border-radius: 7px;
}

/* Disposition img */
.modal-img
{
	text-align: center; /* Centré */
}

/* Paragraphe */
.modal-body p
{
    color: var(--txt-black); /* Couleur */
    font-size: 15px; /* Taille police de caractère */
    text-align: left; /* Texte aligné à gauche */
}

/* Pied de page boite de dialogue */
.modal-footer
{
    background-color: var(--bg-body); /* Couleur de fond */
    color: var(--txt-white); /* Couleur */
    padding: 1px 0 1px 0; /* Marges internes */
    justify-content: center; /* Centré (Axe horizontal) */
    align-items: center; /* Centré (Axe vertical) */
}

/* Bouton sur la superposition */
/* Couleur du bouton projets en ligne */
.btn-skills
{
    background-color: #C20020; /* Couleur de fond */
    cursor: pointer; /* Main */ 
}

/* Au survol de la souris (bouton réalisations en ligne boutons me contacter sur la page tarifs) */
.btn-skills:hover, .button-tarifs:hover, .button-contact:hover
{
	opacity: 0.7; /* Opacité */
}

/* Couleur du bouton projets en local */
.btn-skills-disabled
{
    background-color: #FEA92A; /* Couleur de fond */
    cursor: default;
}

.btn-skills, .btn-skills-disabled
{
    padding: 10px 25px; /* Marges internes */
    margin: 15px; /* Marges externes */
    display: inline-block; /* En ligne */
    color: var(--txt); /* Couleur du texte */
    text-decoration: none; /* Suppression soulignement bleu du lien */
    border-radius: 7px; /* Bords arrondis */
    font-size: 16px; /* Taille de la police de caractère */
}

/********************/
/*** Page tarifs ***/
/******************/

/* Phrase d'accroche */
.devis h5
{
	font-size: 17px; /* Taille police de caractère */
	margin-bottom: 35px; /* Marge depuis le bas */
	font-weight: 700; /* Graisse */
	color: var(--txt-black); /* Couleur texte */
}

/* Au survol de la souris */
.devis h5:hover
{
	text-decoration: underline; /* Souligné */
}

/* Conteneur tarifs */
.tarifs-container
{
    display: flex;
    justify-content: center; /* Alignement horizontal (centré) */
	flex-wrap: wrap; /* Retour automatique */
	height: 757px; /* Hauteur */
	margin-bottom: 15px; /* Marge externe bas */
}

/* Cartes prix site web & dev. */
.siteWeb, .dev
{
	width: 290px; /* Largeur */
}

/* Liste non ordonnée */
.price 
{
	list-style-type: none; /* Suppression puces */
	margin: 0; /* Marges externes */
	padding: 0; /* Marges internes */
	-webkit-transition: 0.3s;
	transition: 0.3s;
	font-size: 16px; /* Taille police de caractère */
}

/* Au survol de la souris */
.price:hover
{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* Ombre */
}

/* Carte prix & ent-tête */
.price, .header-tarifs
{
	background-color: var(--text-header); /* Couleur de fond */
	color: var(--txt-white); /* Couleur texte */
}

/* En-tête */
.header-tarifs
{
	text-transform: uppercase; /* En majuscule */
	font-size: 20px; /* Taille police de caractère */
	font-weight: 700; /* Graisse */
}

/* Lignes */
.price li 
{
	padding: 5px; /* Marges internes */
	text-align: center; /* Texte centré */
}

/* Liste prestations */
.fa-li
{
	position: relative;
}

/* Icônes check */
.fa-check
{
	color: #306b32; /* Couleur */
	position: absolute;
		left: 7px; /* Depuis la gauche */
		top: 3px; /* Depuis le haut */
}

/* Montant prestations */
.price .grey 
{
	background-color: var(--grey); /* Couleur de fond */
	font-size: 20px; /* Taille police de caractère */
}

/* Texte */
.grey p
{
	color: var(--text-header); /* Couleur */
	text-transform: uppercase; /* Majuscule */
	font-size: 14px; /* Taille police caractère */
}

/* Titre */
.grey h1
{
	font-weight: 900; /* Graisse */
}

/* Pied de page */
.footer-tarifs
{
	height: 70px; /* Hauteur */
	background-color: #686868; /* Couleur de fond */
}

/* Bouton me contacter */
.button-tarifs, .button-contact
{
	background-color: #306b32; /* Couleur de fond */
	border: none; /* Suppression bordure */
	color: var(--txt-white); /* Couleur texte */
	padding: 10px 25px; /* Marges internes */
	text-align: center; /* Texte centré */
	text-decoration: none; /* Suppression soulignement */
	font-size: 16px; /* Taille police de caractère */
	border-radius: 7px; /* Bords arrondis */
}

.asterisque
{
	text-align: center; /* Texte centré */
	margin-bottom: 30px; /* Marges depuis le bas */
}

/*************************/
/*** Page contact.php ***/
/***********************/

/* Conteneur carte profil */
.profil-container
{
	height: 851px; /* Hauteur */
}

/* Phrase d'introduction & carte profil */
.profil-intro, .profil-card
{
	margin: 0 15px 0 15px; /* Marges externes */
}

.profil-intro
{
	text-align: center; /* Texte centré */
}

.profil-card
{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* Ombre */
	width: 320px; /* Largeur */
	height: 377px; /* Hauteur */
	margin: 25px auto; /* Marges externes & centré */
	margin-bottom: 75px; /* Marge externe depuis le bas */
	padding: 15px; /* Marges internes */
	text-align: center; /* Texte centré */
	background-color: var(--bg-header); /* Couleur de fond */
}

/* Prénom & nom */
.profil-card h3
{
	font-weight: 700; /* Graisse */
}

/* Titre */
.profil-title
{
	color: var(--grey); /* Couleur texte */
  	font-size: 18px; /* Taille police de caractère */
}

/* Coordonnées */
.profil-adress
{
	list-style-type: none; /* Suppression puces */
	color: var(--txt-black); /* Couleur texte */
	line-height: 2; /* Interligne */
	text-align: start; /* Texte à gauche */
}

/* Icône LinkedIn */
.fa-linkedin
{
	font-size: 25px; /* Taille */
	color: #0b66c3; /* Couleur */
	margin-left: 2px; /* Marge externe depuis la gauche */
	margin-top: 10px;
}
/* Liens */
a
{
	color: var(--txt-black); /* Couleur texte */
}

/* Bouton me contacter */
.button-contact
{
	display: inline-block; /* En ligne */
	width: 100%; /* Largeur */
	outline: 0; /* Sans contours */
}

/******************************/
/*** Page mentions légales ***/
/****************************/

.ml-container
{
	line-height: normal; /* Hauteur interligne */
	padding: 25px; /* Marges internes */
	text-align: justify; /* Texte justifié */
}

/* Conteneur rubriques */
.content p
{
	line-height: 1.5; /* Interlignes */
}

/* Titres rubriques */
.ml-titre
{
	font-size: 20px; /* Taille police de caractère */
	font-weight: 700; /* Graisse */
	text-align: center; /* Texte centré */
}


/******************************/
/*** Version tablette & PC ***/
/****************************/

/* Media queries */
@media only screen and (min-width: 800px) /* 800px et supérieure */
{
	/***********************/
	/*** Page index.php ***/
	/*********************/

	/* Menu en ligne */
	.header-navigation a 
    {
		display: inline-block; /* Affichage en ligne */
	}

	/* Bouton menu hamburger invisible */
	.header-navigation span, .overlay
    {
		display: none; /* Invisible */
	}

	/* Titre du site */
	.headerTitle
	{
		margin-top: 5px; /* Marge externe depuis le haut */
	}

	/* Conteneur principal */
	.main-container
	{
		flex-wrap: wrap; /* Retour automatique */
	}

	/* Titre présentation */
	.presentation-title h4
	{
		font-size: 42px; /* Taille police de caractère */
	}

	/* Texte sous-titre */
	#typing-text
	{
		font-size: 25px; /* Taille police de caractère */
	}

	/* Conteneur secondaire */
	.second-container, .competences-container
	{
		flex-wrap: nowrap; /* Sur une ligne */
	}

	/* Bîtes compétences */
	.prestation
	{
		width: 570px; /* Largeur */
		height: 355px; /* Hauteur */
	}


	/*****************************/
	/*** Page compétences.php ***/
	/***************************/

	/* Conteneur compétences */
	.competences-container
	{
		height: 460px; /* Hauteur bloc */
	}

	/* Titre */
	.competences-title h5
	{
		font-size: 30px; /* Taille police de caractère */
	}

	/* Titre de la définition domaines de compétences & définition */
	.domaines dt, .domaines dd
	{
		font-size: 16px; /* Taille police de caractère */
	}


	/******************************/
	/*** Page realisations.php ***/
	/****************************/

	/* Carte réalisations */
	.realisations
	{
		width: 402px; /* Largeur */
	}

	/* Au survol de la souris sur la superposition */
	.realisations-content:hover .realisations-overlay
	{
		width: 402px; /* Largeur */
	}


	/********************/
	/*** Page Tarifs ***/
	/******************/

	/* Bloc site web & développement */
	.siteWeb, .dev
	{
		width: 370px; /* Largeur */
	}

	/* Phrase d'accroche */
	.devis h5
	{
		font-size: 25px; /* Taille police de caractère */
		margin-bottom: 35px; /* Marge depuis le bas */
		font-weight: 900; /* Graisse */
	}

	/* Conteneur des tarifs */
	.tarifs-container
	{
		justify-content: space-around; /* Espace tout autour des éléments */
		flex-wrap: nowrap; /* Sur une ligne */
		height: 521px; /* Hauteur */
		margin-top: 10px; /* Marge externe depuis le haut */
	}


	/*************************/
	/*** Page contact.php ***/
	/***********************/

	/* Phrase d'introduction */
	.profil-intro
	{
		text-align: center; /* Texte centré */
	}

	/* Carte profil */
	.profil-card
	{
		width: 400px; /* Largeur */
		height: 405px; /* Hauteur */
		padding: 25px; /* Marges internes */
	}


	/******************************/
	/*** Page mentions légales ***/
	/****************************/

	/* Conteneur mentions légales */
	.ml-container
	{
		width: 85%; /* Largeur */
		margin: 0 auto; /* Centré horizontal & vertical*/
		padding-left: 100px; /* Marge interne depuis la gauche */
	}
}


/********************************/
/*** Galaxy z Fold 5 (344px) ***/
/******************************/

/* Media queries */
@media only screen and (width: 344px)
{

	/**************************/
	/*** Page réalisations ***/
	/************************/

	/* Bouton plus sur superposition */
	.btn-plus
	{
		right: 17px; /* Centré */
	}
}


/********************************/
/*** Ipad Mini (768px) ***/
/******************************/

/********************/
/*** Page Tarifs ***/
/******************/

/* Media queries */
@media only screen and (width: 768px)
{
	/* Conteneur tarifs */
	.tarifs-container
	{
		display: flex;
		justify-content: space-evenly; /* Eléments sont séparés par le même espace */
	}
}