/* 
Theme Name: Benoit (Hello Elementor Child)
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Benoit Roussiale
Author URI: https://benoit.roussiale.com/
Template: benoit
Version: 2.0.0
Text Domain: benoit-theme
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/*
général
*/

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
}

main {
	flex: 1;
}

a {
	color: var( --e-global-color-primary );
}

.lien-externe::after {
	content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
	margin: 5px -3px 0 -10px;
	padding-right: 25px;
	opacity: 0.5;
}

.italique {
	font-style: italic;
}

/*
navigation
*/

.site-header .site-navigation ul.menu li a,
ul#menu-principal li a,
ul#menu-principal-en li a {
	font-size: 1.5em;
	color:#fff;
	opacity: 0.7;
}

.site-header .site-navigation ul.menu li a:hover,
ul#menu-principal li a:hover,
ul#menu-principal-en li a:hover {
	opacity: 1;
}

ul#menu-principal li a.active,
ul#menu-principal-en li a.active{
	color: #1E73BE;
}

.elementskit-navbar-nav .elementskit-submenu-panel {
    min-width: 70px !important;
}

/*
menu footer
*/

.site-footer .site-navigation ul.menu li a {
	opacity: 0.75;

}

.site-footer .site-navigation ul.menu li a:hover {
	opacity: 1;
}


/*
accueil (page présentation)
*/

.home .site-main p {
	font-size: 1.2em;
}

.home .site-main {
}

.zone-accueil .e-child {
	border-collapse: collapse;
	border-radius: 25px;

}

.zone-accueil .e-con {
	grid-template-rows: auto;
}

.zone-accueil .e-child h2 {
	text-align: center;
}

.accueil-backend {
	border: 4px solid #474A8A;
}

.accueil-backend h2 {
	/*color: #474A8A !important;*/
}

.accueil-wordpress {
	border: 4px solid #3858e9;
}

.accueil-wordpress h2 {
	/*color: #3858e9 !important;*/
}

.accueil-frontend {
	border: 4px solid #f1dd3f;
}

.accueil-frontend h2 {
	/*color: #f1dd3f !important;*/
}

.accueil-hebergement {
	border: 4px solid grey;
}

.accueil-hebergement h2 {
	/*color: grey !important;*/
}

/*
page compétences
*/

.page-competences h2 {
	margin-top: 1em;
}

/*
page portfolio
*/

.benoit-wordpress-liste thead td,
.benoit-wordpress-liste thead th,
.benoit-wordpress-liste tfoot td,
.benoit-wordpress-liste tfoot th {
	background: black;
	color: #fff;
}

.benoit-wordpress-liste th {
	text-align: center;
}

.benoit-wordpress-liste td:not(.column-1) {
	text-align: center;
}

.benoit-wordpress-liste .dt-column-title .fa-solid {
	font-size: 2em;
}

.benoit-wordpress-liste td a {
	display: block;
}

/*
page contact
*/

.contact-infos .e-con {
	height: 4em;
}

.contact-lien a {
	font-size: 1.2em;
}

.benoit-formulaire .col {
	width: 50%;
	float: left;
}

.benoit-formulaire .obligatoire::after {
	content: "*";
	color: tomato;
}

.benoit-formulaire span.label {
	display: block;
}

.benoit-formulaire input[type="text"],
.benoit-formulaire input[type="email"],
.benoit-formulaire input[type="tel"],
.benoit-formulaire textarea
{
	width: 98%;
	border-radius: 5px;
}

.benoit-formulaire textarea {
	height: 5em;
}

.wpcf7 .btn-valider {
	margin-top: 1em;
	color: #1E73BE;
	border-color: #1E73BE;
	border-radius: 10px;
}

.wpcf7 .btn-valider:hover, 
.wpcf7 .btn-valider:focus
{
	color: white;
	background-color: #1E73BE;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output {
	clear: both;
	border-radius: 10px;
	font-weight: bold;
	text-align: center;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	background-color: #dc3232;
	border-color: #dc3232;
	color: #fff;
}

.wpcf7 form.sent .wpcf7-response-output {
	background-color: #46b450;
	border-color: #46b450;
	color: #fff;
	
}


/****************************************************************************
                                 WooCommerce
****************************************************************************/

.woocommerce .quantity .qty {
  width:6em;
  text-align:center
}