@charset "utf-8";

/*!
Theme Name: theme-isa-martinez
Theme URI: http://underscores.me/
Author: Jean-Bernard MARTINEZ
Author URI: http://jb.martinez.free.fr
Description: Galerie d'art d'Isabelle Martinez
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: theme-isa-martinez
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

theme-isa-martinez is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/

    ## #####  ##     ##
    ## ##  ## #### ####
    ## #####  ## ### ## --- CSS Document
##  ## ##  ## ##  #  ##
  ##   #####  ##     ##     JB Simon MARTINEZ © 2022 - jb.martinez.free.fr
 

							--> conception Mobile First : du Mobile vert les grands écrans
*/


/* ***************************************************************************************************
		0 - RESET : RÉINITIALISER ==> [ Etablir les styles standards ]
****************************************************************************************************** */

* { /* --- Désigner tous les éléments d'une page en même temps. */

}

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

:root { /* --- pseudo-classe, cible le document comme <html> mais sa spécificité sera plus forte */

	/*	--------------------------------------
	* 				  VARIABLES
	*	-------------------------------------- */
	
	/*-- Couleurs --*/
	--color-1 :#fff ;
	--color-2 :#000 ;
	--color-3 :#07315f ;
	--color-4 :#0091e7 ;
	--color-5 :#c1d4df ;
	

}

body { /* --- Désigner le contenue de la page html */
	font-family: "Space Grotesk", sans-serif;
	background-color: var(--color-1);
	font-size: 16px;
}

.error-404 {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 54vh;
	text-align: center;
}

.entry-footer {
	text-align: center;
	margin-bottom: 3rem;
}


/* ***************************************************************************************************
		1 - BOOTSTRAP : AMORCER ==> [ col-1, col-md-1, col-lg-1... ]
****************************************************************************************************** */


/* ***************************************************************************************************
		2 - USUAL CLASSES : CLASSES USUELLES ==> [ Mise en place type : H1, a, p, button ]
****************************************************************************************************** */

.dsp-none {
	display: none;
}

.dsp-320 {
	display: block;
}

.dsp-992 {
	display: none;
}

/*-- Titre --*/
h1 {
	text-align: center;
}

/*-- Lien hypertexte --*/
a { 
	text-decoration:none;
}

a:hover {
	text-decoration:none;
}

button {
	
}

button:hover {
	
}

button:focus { /* Supprimer border de focus sur les bouton */
	outline-style:none;
}

/*-- images --*/

img {
	/* width: 100%; pour une gestion automatique des images callé sur la taille du bloque parent (figure, picture) */
	vertical-align: bottom;
}

/*-- Liste --*/
ul, ol {
	margin: 0;
	padding: 0;
}

li {
	list-style:none;
	margin-left:0;
	padding-left:0;	
}

/*-- Tableau --*/

table {
	
}

tr {
	
}

td {
	
}


/* ***************************************************************************************************
		3 - LAYOUT : DISPOSITION ==> [ Mise en place type : Header, nav, main, footer ]
****************************************************************************************************** */

/* --- HEADER : ENTÊTE DE LA PAGE --- */
header {
	position: relative;
}

h1 img {
	width: 90%;
}

/* --- NAV : MENU --- */

#flag {
	position: absolute;
	top : 0.75rem;
	right: 0.75rem;
	opacity: 0.5;
}

#flag:hover {
	opacity: 1;
}

.img-glass {
	position: relative;
}

.glass {
	position: absolute;
	display: none;
	left: 33%;
	font-size: 50px;
	opacity: 0.75;
	color: #fff;
	text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}

.glass-plus {
	position: absolute;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 50px;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.75;
	color: #fff;
	text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}

.glass-product {
	position: absolute;
	top: 0;
	left: 0.5rem;
	transform: translateY(-1.75rem);
	color: var(--color-4);
	opacity: 0.5;
}

.glass-reset {
	transform: translateY(-2rem);
}

.oacs-spl-icon {
	color: rgba(0, 26, 255, 0.4) !important;
}

.glass-product::before {
	position: absolute;
	top: 0.1rem;
	left: 0;
	transform: translateX(-0.5rem);
	width: 2px;
	height: 1rem;
	border-right: 1px solid rgba(0, 26, 255, 0.5);
	content: "";
}

.glass-product::after {
	position: absolute;
	top: 0.1rem;
	left: 0;
	transform: translateX(1.25rem);
	width: 2px;
	height: 1rem;
	border-right: 1px solid rgba(0, 26, 255, 0.5);
	content: "";
}

.img-glass #data, #magnifying .text {
	display: none;
}

#magnifying .img-glass #data {
	display: block;
}

.block-data {
	position: absolute !important;
	bottom: 0.5rem !important;
	right: 2rem !important;
	width: calc(100% - 4rem) !important;
	text-align: center;
	color: white;
	text-shadow: 1px 1px 2px blue, 0 0 1em white, 0 0 0.2em white;
	font-size: 12px;
}	

img ~ .glass, img ~ .glass-plus, #magnifying img ~ .glass, #magnifying img ~ .glass-plus, #magnifying img:hover ~ .glass-plus, #magnifying img:hover ~ .glass-product {
	display: none;
}

img ~ .glass-product {
	display: block;
}

img:hover ~ .glass {
	display: block;
}

img:hover ~ .glass-plus {
	display: flex;
}


.dropdown-menu {
	z-index: 2500;
}

nav a {
	position: relative;
	text-transform: uppercase;
	color: var(--color-2);
}

nav a:hover {
	color: var(--color-3);
	text-shadow: 1px 1px 2px blue, 0 0 1em blue, 0 0 0.2em blue;
}

nav .navbar-button {
	position: absolute;
	z-index: 2000;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	transform: translate(0,-10rem);
	color: rgba(0,0,0,1);
}

nav .navbar-button:hover {
	color: rgba(0,0,0,0.5);
}


nav .navbar-toggler {
	border: none !important;
	transition: none !important;
	box-shadow: none !important;
}

nav .nav-border::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 20px;
	transform: translateY(0.6rem);
	content: '';
}

nav .nav-link {
	text-align: center;
	background-color: var(--color-5);
}

nav .nav-link::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 20px;
	transform: translateY(0.6rem);
	content: '';
}

.dropdown-translate {
	transform: translateY(-17rem);
}

#header-navbar {
	position:relative;
	z-index: 2000;
	transform: translateY(0);
	margin-bottom: 1rem;
}

#submenu {
	position: relative;
	z-index: 1000;
	transform: translateY(-1rem);
	width: 100%;
	text-align: center;
}
#submenu select {
	width: 100px;
	border: none !important;
	font-size: 10px;
	text-transform: uppercase;
	text-align: center;
	background-color: transparent !important;
}

#search {
	position: absolute;
	width: 100%;
	transform: translateY(-3rem);
	text-align: center;
}

#search input[type="search"] {
	border: 1px solid rgba(0,0,0,0.25);
	border-radius: 20px;
	width: 250px;
	padding: 0.25rem 3rem 0.25rem 1rem;
}

#search .icon-search {
	position: absolute;
	transform: translate(-2rem, 0.4rem);
	opacity: 0.5;
}

/* --- MAIN : CONTENUE DE LA PAGE --- */
main {
	min-height: 50vh;
}

/* --- SECTION ABOUT --- */
#about {
	position: relative;
	display: flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 6rem 0;
	background-color: var(--color-5);
}

#about article {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 90%;
	padding: 3rem 10% 0;
}

#about article p:nth-child(1) {
	font-size: 1.1rem;
}

#about aside {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;	
	width: 90%;
	text-align: center;
	padding: 2rem 10% 4rem;
}

#about aside img {
	width: 100%;
}

#about article p {
	text-align: justify;
}	

/* --- carousel --- */
#carousel {
	position: relative;
	width: 100%;
	height: 300px;
	overflow: hidden;
	margin-bottom: 8rem;
}

#carousel aside {
	position: absolute;
	z-index: 200;
	top: 0;
	width: 50px;
	height: 100%;	
	background-color: rgba(0,0,0,0.15);
}

#carousel aside .prev, #carousel aside .next {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	color: white;
}

#carousel aside .prev:hover, #carousel aside .next:hover {
	text-shadow: 1px 1px 2px blue, 0 0 1em blue, 0 0 0.2em blue;
	background-color: rgba(255,255,255,0.25);
}

#carousel aside:first-child {
	left: 0;
}

#carousel aside:last-child {
	right: 0;
}

#carousel ul {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
	height: 100%;
}

#carousel li {
	position: relative;
	padding: 0 0.5rem;
}

/* --- highlight --- */
#highlight {
	position: relative;
	width: 95%;
	margin: 8rem auto;
}

#highlight ul {
	display: flex;
	flex-direction: row;
	justify-content:center;
	flex-wrap: wrap;
	width: 100%;
}

#highlight ul li {
	padding: 0.5rem;
	margin: 0.5rem;
}

#highlight ul li img {
	width: 250px;
	height: auto;
}
#highlight ul li p {
	position: relative;
	width: 100%;
	text-align: center;
	padding: 1rem 0 0;
	text-transform: uppercase;
}

#highlight ul li p::after {
	position: absolute;
	top: 3rem;
	left: calc(50% - 25px);
	width: 50px;
	height: 2px;
	border-bottom: 1px solid black;
	content: "";
}

/* --- CONTACT --- */
#contact {
	position: relative;
	width: 90%;
	margin: 5rem auto;
	text-align: center;
}

#contact > div {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

#contact input {
	width: 100%;
	margin-bottom: 0.5rem;
}

#contact hr {
	line-height: 0.5rem;
}

#contact textarea {
	width: 100%;
}

.wpcf7 form .wpcf7-response-output {
	position: relative;
	margin: 0 auto 3rem !important;
	text-align: center;
}

/* --- PAGINATION --- */
#paging {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 3rem 0;
	width: 100%;
	text-align: center;
}

#paging aside, #paging div {
	padding: 0 2rem;
}

#paging aside a {
	color: #000;
	font-size: 18px;
}

/* --- FOOTER : PIED DE PAGE --- */
#footer-navbar {
	display: none;
}

#icon-footer {
	position: relative;
	width: 100%;
}

#icon-footer ul {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	margin: 1rem 0;
}

.copyright a, #icon-footer a {
	color: var(--color-2);
}

#icon-footer a {
	font-size: 25px;
	padding: 0.5rem;
	color: rgba(0,0,0,0.5);	
}

#icon-footer a:hover {
	color: var(--color-5);
	text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
}

.copyright a:hover, {
	color: var(--color-3);
	text-shadow: 1px 1px 2px blue, 0 0 1em blue, 0 0 0.2em blue;
}

/* ***************************************************************************************************
		4 - MODULAR ELEMENTS : ELEMENTS MODULAIRES ==> [ caroussel, galerie... ]
****************************************************************************************************** */

/* --------------------------------------------------------------------------------------------------
												WORDPRESS
----------------------------------------------------------------------------------------------------- */

.entry-header {
	display: none;
}

.hentry {
	width: 100% !important;
	padding: 0 !important;
}

/* --------------------------------------------------------------------------------------------------
											  WOOCOMMERCE
----------------------------------------------------------------------------------------------------- */

#products {
	position: relative;
	width: calc(100% - 1rem);
	margin: 2rem 0;
}

#products ul {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content:center;
	align-items: center;
	flex-wrap: wrap;
}

#products ul li {
	position: relative;
	margin: 1rem;
	text-align: center;
}

#products ul li p {
	position: relative;
	padding-top: 1rem;
	text-align: center;
	text-transform: uppercase;
}

#products ul li p::after {
	position: absolute;
	top: 3rem;
	left: calc(50% - 25px);
	width: 50px;
	height: 2px;
	border-bottom: 1px solid black;
	content: "";
}

/* .woocommerce-loop-product__title */
.woocommerce-result-count, .product_type_simple {
	display: none !important;
}

.oacs_spl_before_button, .oacs-spl-like-button-wrapper, .oacs_spl_after_button {
	position: absolute;
	z-index: 2000;
	top:0;
	left: 2.25rem;
	transform: translateY(-2rem);
}

.oacs-spl-counter {
	transform: translate(0.15rem, -0.1rem);
}

#post-25 .likebtn_container, #post-40 .likebtn_container, #post-30 .likebtn_container, #post-43 .likebtn_container, .likebtn_container {
	display: none !important;
} 

.wc-block-components-sidebar-layout {
	width: 95%;
	margin: 0 auto;
}

.wc-block-product-new, .wp-block-woocommerce-empty-cart-block h2:nth-last-child(2) {
	display: none !important;
}

#product-single {
	text-align: center;
}

#data .price {
	position: absolute;
	z-index: 5;
	transform: translateY(-3rem);
	top: 0;
	right: 0;
	width: 80px;
	height: 80px;
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 2.5rem;
	padding-left: 1rem;
	color: #000;
	text-shadow:none !important;
}

#data-home {
	position:relative;
	z-index: 200;
	transform: translateY(70%);
	bottom: 0;
	top:initial;
	right:initial;
	width: 100%;
}

#data-home .price {
	position: relative;
	z-index: 5;
	top: 0;
	right: 0;
	transform: translate(70vw, -3rem);
	width: 80px;
	height: 80px;
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 2.5rem;
	padding-left: 1rem;
	color: #000;
	text-shadow:none !important;
	text-align: center;
}

#data .btn-add-to-cart {
	position:relative;
	z-index: 0;
	bottom: 0;
	right: 0;
	width: 100%;
}

#data-home .btn-add-to-cart {
	position:relative;
	z-index: 0;
	top: 0;
	right: 0;
	width: 100%;
	padding: 0 10%;
}

#data .btn-add-to-cart p, #data-home .btn-add-to-cart p {
	padding: 0;
}

#data .btn-add-to-cart img, #data-home .btn-add-to-cart img {
	width: 25%;
	height: auto;
	top:0;
}

#data .btn-add-to-cart a, #data-home .btn-add-to-cart a {
	position:relative;
	display: block;
	padding: 0.5rem 1rem;
	color: #000;
	background-color: #fff;	
	text-shadow:none !important;
	box-sizing:unset;
	border-radius: 10px;
	text-align: center;
}

#data p::after {
	display: none;
}

.woocommerce {
	width: 95%;
	margin: 3rem auto;
}

.woocommerce-notice {
	text-align: center;
}


/* ***************************************************************************************************
		5 - MEDIA QUERIES : GESTION TAILLE ECRAN
****************************************************************************************************** */

/* SMALL SCREEN : smartphone à partir de 576px */
@media (min-width: 576px) {

	/* --- HEADER : ENTÊTE DE LA PAGE --- */
	h1 img {
		width: 50%;
	}

	/* --- NAV : MENU --- */
	nav .navbar-button {
		transform: translate(0.25rem,-13rem);
	}

	/* --- MAIN : CONTENUE DE LA PAGE --- */
	main {

	}

	#magnifying .block-data {
		display: none !important;
	}	

	/* --- FOOTER : PIED DE PAGE --- */
	footer {

	}
	
}

/* MEDIUM SCREEN : Tablette à partir de 768px */
@media (min-width: 768px) {
	
	/* --- HEADER : ENTÊTE DE LA PAGE --- */
	h1 img {
		width: 70%;
	}

	/* --- NAV : MENU --- */
	nav .navbar-button {
		transform: translate(0.25rem,-19.5rem);
	}

	/* --- MAIN : CONTENUE DE LA PAGE --- */
	main {

	}

	/* --- FOOTER : PIED DE PAGE --- */
	footer {

	}	
	
}

/* WIDE SCREEN : Tablette et Ordinateur (desktop) à partir de 992px */
@media (min-width: 992px) {

	.dsp-992 {
		display:inline-block;
	}

	.dsp-320 {
		display: none !important;
	}

	/* --- HEADER : ENTÊTE DE LA PAGE --- */
	h1 img {
		width: 40%;
	}

	#search {
		transform: translateY(-2rem);
	}


	#search input[type="search"] {
		width: 500px;
	}

	#header-navbar {
		position: absolute;
		transform: translateY(-5rem);
	}	

	/* --- NAV : MENU --- */
	nav {

	}

	nav .nav-link {
		background-color: transparent !important;
	}

	nav .nav-border::before {
		border-right: 1px solid var(--color-2);
	}	

	nav .nav-link::after {
		text-align: left;
		border-right: 1px solid var(--color-2);
	}
	
	#flag {
		position: absolute;
		top : 1rem;
		right: 2rem;
		opacity: 0.5;
	}	

	#submenu {
		transform: translateY(0.5rem);
	}	

	/* --- MAIN : CONTENUE DE LA PAGE --- */

	.woocommerce {
		width: 50%;
	}

	#products {
		position: relative;
		width: 75%;
		margin: 5rem auto;
	}

	#data .price {
		position: absolute;
		transform: translateY(-65%);
		top: 0;
		right: 80%;
		width: 80px;
		height: 80px;
		background-repeat: no-repeat;
		background-size: contain;
		padding-top: 2.5rem;
		padding-left: 1rem;
		color: #000;
		text-shadow:none !important;
	}

	#data-home {
		position: absolute;
		z-index: 200;
		top: 5rem;
		bottom: initial;
		right: 5rem;
		width: 20%;
	}

	#data-home .price {
		position: relative;
		z-index: 5;
		transform: translateY(-3rem);
		top: 0;
		right: 0;
		width: 80px;
		height: 80px;
		background-repeat: no-repeat;
		background-size: contain;
		padding-top: 2.5rem;
		padding-left: 1rem;
		color: #000;
		text-shadow:none !important;
		text-align: center;
	}

	#data .btn-add-to-cart {
		position: absolute;
		z-index: 0;
		bottom: -12rem;
		right: 0;
		width: 100%;
	}

	#data-home .btn-add-to-cart {
		position:relative;
		z-index: 0;
		top: 8rem;
		right: 8rem;
		width: 100%;
	}

	#data .btn-add-to-cart img {
		width: 40%;
		height: auto;
		top:0;
	}

	#data .btn-add-to-cart a:hover {
		background-color: #07315f;
		color: #fff;
	}

	#products ul {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	#magnifying .img-glass #data, #magnifying .block-data, #magnifying .text {
		display: block !important;
	}

	#magnifying .text {
		font-size: 12px;
		text-align: justify;
		text-transform: initial;
	}

	#magnifying .text::after {
		display: none;
	}

	.block-data {
		position: absolute !important;
		top: 10vh !important;
		bottom: initial !important;
		right: 1rem !important;
		width: calc(25% - 2rem) !important;
		padding: 1rem;
		background-color: rgba(255,255,255,0.15) !important;
	}	


	/* --- about --- */
	#about {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 8rem 0;
	}

	#about article {
		width: 80%;
		padding: 3rem 5%;
	}

	#about aside {	
		width: 40%;
		text-align: center;
		padding: 2rem 0;
	}
	
	#about article p, #about aside  {
		text-align: left;
	}
	
	#about aside img {
		width: 90%;
	}

	#about article p:nth-child(1) {
		font-size: 1.1rem;
		text-align: justify;
	}
	
	/* --- carousel --- */
	#carousel {
		width: 100%;
		height: 400px;
		margin-bottom: 8rem;
	}

	#carousel aside {
		width: 150px;
	}

	/* --- highlight --- */

	#highlight {
		width: calc(100% - 6rem);
		margin: 3rem auto;
	}

	#highlight ul {
		justify-content: space-between;
	}
		
	/* --- CONTACT --- */
	#contact {
		position: relative;
		width: 75%;
		margin: 5rem auto;
		text-align: center;
	}
	
	#contact > div {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	#contact input {
		width: calc(50% - 1rem);
		margin-right: 0.5rem;
		margin-bottom: 0.5rem;
		border: none;
		border-bottom: 1px solid rgba(0,0,0,0.5);		
	}
	

	#contact input:nth-child(2), #contact input:nth-child(4) {
		margin-right: 0;
	}

	#contact input[type="submit"] {
		width: 200px;
		border-top: 1px solid rgba(0,0,0,0.25);
		border-left: 1px solid rgba(0,0,0,0.25);
		border-right: 1px solid rgba(0,0,0,0.5);
		border-bottom: 1px solid rgba(0,0,0,0.5);
	}

	.wpcf7-spinner {
		position: absolute;
	}

	#contact input[type="submit"]:hover {
		border-top: 1px solid rgba(122, 145, 189,0.25);
		border-left: 1px solid rgba(122, 145, 189,0.25);
		border-right: 1px solid rgba(122, 145, 189,0.5);
		border-bottom: 1px solid rgba(122, 145, 189,0.5);
		background-color: rgba(122, 145, 189,0.5);
	}

	#contact input[type="submit"]:active {
		border-top: 1px solid rgba(0,0,0,0.5);
		border-left: 1px solid rgba(0,0,0,0.5);
		border-right: 1px solid rgba(0,0,0,0.25);
		border-bottom: 1px solid rgba(0,0,0,0.25);
	}	

	#contact hr {
		line-height: 0.5rem;
	}

	#contact textarea {
		width: 97%;
		transform: translateX(-0.5%);
		border: 1px solid rgba(0,0,0,0.15);
		border-bottom: 1px solid rgba(0,0,0,0.5);		
	}	

	.wpcf7 form .wpcf7-response-output {
		position: relative;
		width: 70%;
		margin: 1rem auto 3rem !important;
		text-align: center;
	}


	.wc-block-components-sidebar-layout {
		width: 50%;
	}

	/* --- FOOTER : PIED DE PAGE --- */
	#footer-navbar {
		display: block;
	}	
	
}

/* VERY LARGE SCREEN : affichage pour les écrans Xlarges (desktop) à partir de 1200px */
@media (min-width: 1200px) {
	
	/* --- HEADER : ENTÊTE DE LA PAGE --- */
	h1 img {
		width: 30%;
	}

	#header-navbar {
		position: absolute;
		transform: translateY(-6.5rem);
	}
	
	#search {
		transform: translateY(-3rem);
	}

	/* --- NAV : MENU --- */
	#submenu {
		transform: translateY(-1rem);
	}	

	/* --- MAIN : CONTENUE DE LA PAGE --- */

	/* --- about --- */

	#about article {
		width: 50%;
		padding: 3rem 10%;
	}

	#about aside {	
		width: 30%;
	}	

	#about aside img {
		width: 70%;
	}

	#about article p:nth-child(1) {
		font-size: 1.2rem;
		text-align: left;
	}	
	
	/* --- highlight --- */
	#highlight {
		width: 50%;
		margin: 8rem auto;
	}

	.block-data {
		position: absolute !important;
		top: 10vh !important;
		bottom: initial !important;
		right: 5rem !important;
		width: calc(20% - 4rem) !important;
		padding: 2rem;
		background-color: rgba(255,255,255,0.15) !important;
	}
	
	/* --- CONTACT --- */
	#contact {
		position: relative;
		width: 50%;
		margin: 5rem auto;
		text-align: center;
	}
	
	#contact > div {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	#contact input {
		width: calc(50% - 1rem);
		margin-right: 0.5rem;
		margin-bottom: 0.5rem;
		border: none;
		border-bottom: 1px solid rgba(0,0,0,0.5);		
	}
	

	#contact input:nth-child(2), #contact input:nth-child(4) {
		margin-right: 0;
	}

	#contact input[type="submit"] {
		border-top: 1px solid rgba(0,0,0,0.25);
		border-left: 1px solid rgba(0,0,0,0.25);
		border-right: 1px solid rgba(0,0,0,0.5);
		border-bottom: 1px solid rgba(0,0,0,0.5);
	}

	#contact input[type="submit"]:hover {
		border-top: 1px solid rgba(122, 145, 189,0.25);
		border-left: 1px solid rgba(122, 145, 189,0.25);
		border-right: 1px solid rgba(122, 145, 189,0.5);
		border-bottom: 1px solid rgba(122, 145, 189,0.5);
		background-color: rgba(122, 145, 189,0.5);
	}

	#contact input[type="submit"]:active {
		border-top: 1px solid rgba(0,0,0,0.5);
		border-left: 1px solid rgba(0,0,0,0.5);
		border-right: 1px solid rgba(0,0,0,0.25);
		border-bottom: 1px solid rgba(0,0,0,0.25);
	}	

	#contact hr {
		line-height: 0.5rem;
	}

	#contact textarea {
		width: 82.75%;
		transform: translateX(-0.5%);
		border: 1px solid rgba(0,0,0,0.15);
		border-bottom: 1px solid rgba(0,0,0,0.5);		
	}	

	.wpcf7 form .wpcf7-response-output {
		position: relative;
		width: 35%;
		margin: 1rem auto 3rem !important;
	}
	
	#data .price {
		position: absolute;
		transform: translateY(0);
		top: 0;
		right: 0;
		width: 80px;
		height: 80px;
		background-repeat: no-repeat;
		background-size: contain;
		padding-top: 2.5rem;
		padding-left: 1rem;
		color: #000;
		text-shadow:none !important;
	}

	#data-home .price {
		position: relative;
		z-index: 5;
		transform: translateY(-3rem);
		top: 0;
		right: 0;
		width: 80px;
		height: 80px;
		background-repeat: no-repeat;
		background-size: contain;
		padding-top: 2.5rem;
		padding-left: 1rem;
		color: #000;
		text-shadow:none !important;
		text-align: center;
	}

	/* --- FOOTER : PIED DE PAGE --- */
	footer {

	}	
	
}