/*
Theme Name: Maison Regnier
Theme URI: https://schwanen.fr
Author: Walter SCHWANEN
Author URI: https://schwanen.fr
Description: Maison Regnier.
Version: 1.0
License: GPL-2.0+
Text Domain: maison-regnier
*/

@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");

/* Thin (100) */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/CabinetGrotesk-Thin.woff2') format('woff2'),
       url('fonts/CabinetGrotesk-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Extra Light (200) */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/CabinetGrotesk-ExtraLight.woff2') format('woff2'),
       url('fonts/CabinetGrotesk-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Light (300) */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/CabinetGrotesk-Light.woff2') format('woff2'),
       url('fonts/CabinetGrotesk-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular (400) */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/CabinetGrotesk-Regular.woff2') format('woff2'),
       url('fonts/CabinetGrotesk-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium (500) */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/CabinetGrotesk-Medium.woff2') format('woff2'),
       url('fonts/CabinetGrotesk-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* SemiBold (600) */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/CabinetGrotesk-SemiBold.woff2') format('woff2'),
       url('fonts/CabinetGrotesk-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/CabinetGrotesk-Bold.woff2') format('woff2'),
       url('fonts/CabinetGrotesk-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ExtraBold (800) */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/CabinetGrotesk-ExtraBold.woff2') format('woff2'),
       url('fonts/CabinetGrotesk-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Black (900) */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/CabinetGrotesk-Black.woff2') format('woff2'),
       url('fonts/CabinetGrotesk-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GlossAndBloom';
  src: url('fonts/Gloss_And_Bloom.ttf') format('truetype');
}

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
  margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}
.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}
.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}
a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}
a img.alignnone {
  margin: 5px 20px 20px 0;
}
a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}
a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%;
  /* Image does not overflow the content area */
  padding: 5px 3px 10px;
  text-align: center;
}
.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}
.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}
.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}
:root {
  --blue-color: #293851;
  --green-color: #78AC91;
  --font-size: 16px;

  
}


/* ###### HTML ###### */

* {
  box-sizing: border-box; /* Applique à tous les éléments */
}


body {
    font-family: "Rubik", sans-serif;
	margin:0;
	font-weight:300;
	line-height:1.35;

	font-size:22px;
	@media(max-width:768px){
		font-size:16px;
	}
}
html, body {
  overflow-x: hidden;
}
h2,h1{
	font-family: "Cabinet Grotesk", sans-serif;
	font-size:45px;
	text-align:center;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
	margin-bottom:0em;
	margin-top:0em;
	padding-bottom:1em;
	padding-top:1.5em;
	font-weight:700;
	@media(max-width:768px){
		font-size:24px;
		margin-bottom:20px;
		padding-bottom:0em;
	padding-top:1em
	}
	&:after{
		display:block;
		content:"";
		width:100px;
		border-top:2px solid black;
		position:relative;
		top:10px;
	}
}

h3{
	padding-top:2em;
	margin:0;
	
}
h4,h5{
	font-family: 'GlossAndBloom', sans-serif;
	font-size:33px;
	font-weight:300;
	
	@media(max-width:768px){
		margin:20px auto;
	}
	
	
}
h4 a,h5 a{
	text-decoration:none;
	color:inherit;
}

h4::after{
	display:block;
	border-top:2px solid black;
	width:150px;
	content:"";
	margin:auto;
	margin-top:30px;
	
}
section:target{
	background-color:var(--green-color);
	color:white;
}
section:target *{
	color:white;
}

section{
	/*padding-top:30px;*/
	padding-bottom:60px;
	@media(max-width:768px){
		padding-top:20px;
		padding-bottom:20px;
	}
	
}
section.bg-green h2{
	color:white;
	padding-bottom:0;
	
}
section.bg-green h2:after{
	border:none;
}
input,textarea,.btn{
	font-family: "Rubik", sans-serif;
	padding:0.5em 1em;
	border-radius:5px;
	border:2px solid grey;
	font-size:20px;
	max-width:500px;
	display:block;
	max-width:500px;
	width:100%
}
.btn{
	border-radius:2em;
}
.btn-white{
	border:2px solid white;
	color:white;
	text-decoration:none;
}
input[type=submit]{
	background-color:var(--green-color);
	color:white;
	border:none;
	
}
form{
	max-width:500px;
	margin:auto;
	padding:0 20px;
	
}

/* ###### UTILS ###### */

.container{
	max-width:1024px;
	width:100%;
	margin:auto!important;
}
.container-lg{
	max-width:1920px;
}
.bg-blue-left,
.bg-green-left,
.bg-green{
	position:relative;
}
.bg-green{
	background-color:var(--green-color);
}

.bg-blue-left::before{
		display:block;
		content:"";
		position:absolute;
		z-index:-1;
		width:50vw;
		height:100%;
		left:0;
		top:0;
		background-color:var(--blue-color);	
}
.bg-green-left::before,
.bg-green::before,
.bg-green::after{
	display:block;
	content:"";
	position:absolute;
	z-index:-1;
	width:50vw;
	height:100%;
	left:0;
	top:0;
	background-color:var(--green-color);	
}
.bg-green::before{
	left:-50%;
}
.bg-green::after{

	left:50%;
}


.row{
	display:grid;
	gap:40px;
	@media (max-width: 768px) {
		gap:20px;
	}
	
}
.row img{
	max-width:100%;
	height:auto;
	display:block;

	
}
.flex img{

	@media (max-width: 768px) {
		max-width:100%;
		height:auto;
		display:block;
	}
	
}
.row-2{grid-template-columns: 1fr 1fr;}
.row-3{grid-template-columns: 1fr 1fr 1fr;}
.row-2-1{grid-template-columns: 2fr 1fr;}
.row-1-2{grid-template-columns: 1fr 2fr;}

.row-2as3{grid-template-columns: 1fr 2fr 2fr 1fr;}
.row-2as3 > :nth-child(1){grid-column:2}
.row-2as3 >:nth-child(2){grid-column:3}

.row-1as3{grid-template-columns: 1fr 1fr 1fr;}
.row-1as3 > :nth-child(1){grid-column:2}



.row-314{
	grid-template-columns: repeat(auto-fit, minmax(100px,314px));
	justify-content:center;
}
.gap-20{gap:20px;}
.gap-40{gap:40px;}
.gapm-20{
		@media (max-width: 768px) {
			gap:20px;
		}
	
}

.pv20{padding:20px 0;}
.pt20{padding-top:20px;}
.pt100{padding-top:100px;}





.flex{
	display:flex;
	@media (max-width: 768px) {
		flex-wrap:wrap;
	}
	
}
.flex-center{justify-content:center;}
.flex-center-v{align-items:center;}

.image-fit{
	position:relative;
	overflow:hidden;
	
}
.image-fit img{
	/* position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); */
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius:20px;
}

.relative{
	position:relative;
}

.owl-nav{
	width:100%;
	display:flex;
	justify-content:space-between;
	position:absolute;
	top:0%;
	left:0;
}
.owl-next{
	margin-left:auto;
}
.owl-nav button{
	font-size:80px!important;
	
}
.toggle{
	position: absolute;
    top: 0;
    right: 0;
    width: auto;
    text-align: right;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 10px;
    font-size: 17px;
    border-radius: 10px;
	@media(min-width : 769px){
		display:none;
	}
}

/* ###### HEADER ###### */

header{
	color:white;
   
}
.header_hasVideo{
	 background-size: cover;
	position:relative;
	padding-top:50vh;
	overflow:hidden;
	
}
.header_video{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	 width: 100vw;
    height: 100%;
    object-fit: cover; /* Remplit tout en conservant les proportions */
	
}
.header_background{
	background-position:center;
	background-size:cover;
	
}
.header_menu{
	/* background-color:rgba(0,0,0,0.8);*/
	position:fixed;
	position:absolute;
	z-index:1;
	top:0;
	width:100%;
}
.header_logo{
	display:none;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	max-width:80%;
	@media (max-width: 768px) {
		display:block;
	}
}


/* ###### MENU HEADER ###### */

.menu-header.visible{
		
	@media (max-width: 768px) {
		display:flex;
		align-items:center;
		background-color: rgba(0,0,0,0.9);
		margin: 0;
		padding: 10px 30px;
	}
}
.menu-header{
	padding-left:0;
	display:flex;
	justify-content:center;
	list-style:none;
	//gap:40px;
	font-weight:700;
	align-items:start;
	@media (max-width: 768px) {
		gap:10px;
		flex-direction:column;
		display:none;
		
	}
	

}
.menu-header .menu-item{
	margin-top:25px;
	
	@media (max-width: 768px) {
		margin-top:0;
	}
}
.menu-header a{
	color:white;
	text-decoration:none;
	font-weight:400;
	font-size:22px;
	display:block;
	padding:0 20px;
	
}

.menu-item-instagram a,.menu-item-facebook a{
	display:block;
	background-image:url('images/instagram.svg');
	width:35px;
	height:35px;
	background-size:contain;
	background-repeat:no-repeat;
	font-size:0!important;
	background-position: center;
}
.menu-item-facebook a{

	background-image:url('images/facebook.svg');

}


.menu-item-logo {
	margin-top:0!important;
	/* @media (max-width: 768px) {
		display:none;
		
	} */
}
.menu-item-logo a{
	display:block;
	background-image:url('images/logo.png');
	/*background-image:url('images/logo.svg');*/
	width:150px;
	height:150px;
	background-size:contain;
	background-repeat:no-repeat;
	font-size:0!important;
	/*background-size: 132%;*/
	background-size: contain;
	
    background-position: center;
	@media (max-width: 768px) {
		width:60px;
		height:60px;
		
	}

}
/* .logo-mobile{
	
	display:none;
	background-image:url('images/logo.svg');
	width:90px;
	height:90px;
	background-size:contain;
	background-repeat:no-repeat;
	font-size:0!important;
	background-size: 132%;
    background-position: center;
	@media (max-width: 768px) {
		display:block;
	}
	
} */





/* ###### FOOTER ###### */


footer {
    background: 
        linear-gradient(rgba(60, 75, 100, 0.9), rgba(60, 75, 100, 0.9)), /* Couche semi-transparente */
        url(images/footer-fond.png); /* Image de fond */
	background:#1C283B;
    background-repeat: repeat-x;
    background-size: cover; /* Ajuste l’image pour couvrir le footer */
	background-size: contain;
	
	min-height:250px;
	color:white;
	padding:20px;
	padding-top:40px;
}




.footer_logo_container{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:20;
	@media (max-width: 768px) {
		flex-direction:column;
	}
}
.footer_logo{
	max-width:100px;
	height:auto;
	z-index:1;
	
	
	
}
.footer_logo_textes span:nth-child(1){
	font-size:30px;
	font-weight:500;
}
.footer_logos{
	display:flex;
	justify-content:center;
	gap:20px;
	flex-wrap:wrap;
}
.footer_logo_artisan{
	height:100px; 
	border-radius:20px;
	
	@media (min-width: 769px){
		margin-left:40px;
	}
	
}
.footer_logo_wecandoo{
	height:100px;
}


/* ###### MENU FOOTER ###### */


.menu-footer{
	padding-left:0;
	display:flex;
	justify-content:center;
	align-items:center;
	list-style:none;
	//gap:30px;
	font-weight:400;
	text-transform:uppercase;
	padding-top:30px;
	@media (max-width: 768px){
		flex-direction:column;
		text-align:center;
	}
	
}

.menu-footer a{
	color:white;
	text-decoration:none;
	padding:0 20px;
}


/* ###### AVIS ###### */

.avis_clients{
	position:absolute!important;
	max-width:700px;
	color:white;
	top:30%;
	text-align:center;
	padding:0 100px;
	@media(max-width:768px){
		padding:0 30px;
	}
}
.avis_client{
	position:relative;
	font-weight:400;
	
}
.avis_client_nom{
	display:block;
	text-align:right;
	right:0;
	padding-top:30px;
	font-weight:300;
	font-size:16px;
}
.avis_image{
	width:100%;
	max-width:600px;
	height:auto;
}


/* ###### BLOCS ###### */

.bloc_atelier{
	color:white;
	
	
}
.bloc_atelier h2::after{

	border-top:2px solid white;
}

.bloc_cours_item,.bloc_atelier_item{
	/*background-color:grey;*/
	color:white;
	border-radius:20px;
	padding:20px;
	text-align:center;
	font-size:26px;
	background-size: cover;
    background-position: center;
	height:300px;
	
}

.ratio-16-9 {
  padding-top:calc(100%*9/16);
  overflow:hidden;
}
.carrousel{
	margin-top:40px;
	@media (max-width: 768px) {
		margin-top:0;
	}
}
.caroussel_image{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	min-height:100%;
	min-width:100%;
	width:auto;
	height:auto;
	
	
	
}
.caroussel_image_container{
	border-radius:20px;
	position:relative;
}


.owl-nav {
    top: 50%;
    width: 113%;
    left: 50%;
    transform: translate(-50%,-50%);
	@media (max-width: 768px) {
		width:100%;
	}
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {

    color: white;
}
/* ###### MOBILE ###### */


@media (max-width: 1024px) {
	article{
		padding:0 20px;
	}
	.pmh0{padding:0 0;}
	.pmh20{padding:0 20px;}
}



@media (max-width: 768px) {
	.row{
		grid-template-columns: 1fr!important;
		gap:20px;
		> *{
			grid-column:1 !important;
		}
	}
	.row-toReverseInMobile{
		display:flex;
		flex-direction:column-reverse;
	}
	.pmh0{padding:0 0;}
	.pmh20{padding:0 20px;}
}