/*
Theme Name: Extendable Child
Theme URI: 
Author: 
Author URI: 
Description: 
Version: 0.24
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: extendable
Text Domain: extendable-child
Tags: 
*/

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

:root {
	--dynamic-bg: #00ff00;
	--offre-color: #219ED6;
	--offre-color-hover: #295173;
	--offre-txt-color: #ffffff;
}

.db-hors-parcours {
	--dynamic-bg: #fba918;
}

.db-parcours-magenta {
	--dynamic-bg: #e43489;
}

.db-parcours-vert {
	--dynamic-bg: #AAD036;
}

.db-parcours-bleu {
	--dynamic-bg: #219ED6;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"]
{
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	color: #000;
	font-size: 1.2rem;
	padding: 0.5rem 0.5rem;
	margin: 0rem auto;
}

.wpcf7 input[type="file"]
{
	font-size: 1.2rem;
}

.with_border {
	border: 2px solid var(--offre-color);
}

#cf_button {
	display: flex;
	padding: 0.5rem 4rem;
	font-size: 1.2rem;
	font-weight: bold;
	justify-self: center;
	margin: 1rem auto;
	border: none;
	border-radius: 50px;
	background-color: var(--offre-color);
	box-shadow: 4px 3px 3px 2px lightgray;
}

#cf_button:hover {
	background-color: #295173;
}

.cf_title {
	font-size: 1.4rem;
	font-weight: bold;
	color: var(--offre-color);
}

/* Borrowed from Bootstrap */ 
/* Tutorial: https://youtu.be/HBriBrnRlQE?si=DLiSXEiBHt6lw91l */ 
/* Make sure you only have ONE link inside your card 😅 or this will not work!  */ 

.stretch-link{
	position: relative;
}

.stretch-link a::after{
	content: '';
	position: absolute;
	inset: 0;
}

.stretch-link a:is(:focus-visible)::after{
	outline: 2px solid;
}

.stretch-link a:is(:hover, :focus){
	outline: none;
}
/*
 Fin de sujet -----------
*/

.offre-dynamic-color {
	--offre-color-hover: hsl(from var(--offre-color) h calc(s + 20) calc(l + 20));
}