/*
Theme Name: Il était une Cuisine 2025
Theme URI: https://www.iletaitunecuisine.com/
Description: Thème créé par Net-tendance.com
Version: 1
Author: Net-tendance - Erwan Girerd
Author URI:   https://www.net-tendance.com
*/

:root
{
	--CouleurJaune:#dbaf00;
	--CouleurBleu:#1a0d64;
	--CouleurBeige:#faf9f5;
}

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body, html{font: 14px/20px 'Roboto', sans-serif; font-weight: 300; color:#1d1d1d; border:0px; margin:0px; padding: 0px;}
@media screen and (min-width: 1024px) 
{
	body{padding-top:120px;}
}
body.home{padding-top: 0px;}

a{ color:#1d1d1d; text-decoration: underline !important;}
/* STRUCTURE*/
div#first{ width: 100%; display: block; text-align: center; float: left;}

@media screen and (max-width: 1024px) 
{
	div#first div#second{ width:  calc(100% - 20px);padding:10px; display: inline-block; text-align: left;  }
	div.CaseLimite{width: calc(100% - 20px); padding: 20px 10px; display: inline-block;}
}
@media screen and (min-width: 1024px) 
{
	div#first div#second{ width: 944px; display: inline-block; text-align: left;  }
	div.CaseLimite{width: 50%; display: inline-block;}
}
@media screen and (min-width: 1200px) 
{
	div#first div#second{ width: 1120px; display: inline-block; text-align: left;  }
	div.CaseLimite{max-width: 400px; width: calc(100% - 100px); display: inline-block;padding: 50px;}
}
@media screen and (min-width: 1400px) 
{
	div#first div#second{ width: 1320px; display: inline-block; text-align: left;  }
	div.CaseLimite{max-width: 500px; width: calc(100% - 100px); display: inline-block; padding: 50px;}
}

@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (min-width: 1024px) {
	.row{width: 100%;display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex; display: flex !important;  -webkit-flex-direction: row;  -moz-flex-direction: row;  -ms-flex-direction: row;  flex-direction: row !important; float: none; display: inline-block; position: relative;}
	.row.h100{height: 100%;}
 	.row .case1{ flex: 1;display: inline-block; position: relative; }.row .case2{ flex: 2;display: inline-block; position: relative; }.row .case3{ flex: 3; display: inline-block; position: relative; max-width: calc(100% / 4);}.row .case4{ flex: 4; display: inline-block; position: relative;}.row .case5{ flex: 5; }.row .case6{ flex: 6; max-width: 50%; }.row .case7{ flex: 7; }.row .case8{ flex: 8; }.row .case9{ flex: 9; }.row .case10{ flex: 10; }.row .case11{ flex: 11; }.row .case12{ flex: 12; }
	
	.column{width: 100%;display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex; display: flex !important;  -webkit-flex-direction: row;  -moz-flex-direction: row;  -ms-flex-direction: row;  flex-direction:column ; float: none; min-height: 100%; height: 100%; }
 	.column .case1{ flex: 1; flex-direction: column;}.column .case2{ flex: 2;flex-direction: column; }.column .case3{ flex: 3;flex-direction: column; }.column .case4{ flex: 4;flex-direction: column; }.column .case5{ flex: 5;flex-direction: column; }.column .case6{ flex: 6; max-height: 50%;flex-direction: column; }.column .case7{ flex: 7; flex-direction: column;}.column .case8{ flex: 8; flex-direction: column;}.column .case9{ flex: 9;flex-direction: column; }.column .case10{ flex: 10;flex-direction: column; }.column .case11{ flex: 11; flex-direction: column;}.column .case12{ flex: 12; flex-direction: column;}
	
	.row > div, .column > div{position: relative;}	
}
@media screen and (max-width: 1024px) 
{
	.row, .column{float: left; width: 100%;}
}

.txtcenter { text-align:center;}
/*
* HEADER
*/
.HeaderTop{ position: absolute; top: 0px; left: 0px; width: 100%; z-index: 10; height: 40px; max-height: 40px;}
.HeaderMenu{position: absolute; top: 40px; left: 0px; width: 100%; z-index: 9; }
.HeaderMenu .ContentLogo{}
.HeaderMenu .ContentLogo .Logo{}
.HeaderMenu .Menu{}
.HeaderMenu .Menu ul#menu-menu-principal{}
.HeaderMenu .Menu ul#menu-menu-principal li{}
.HeaderMenu .Menu ul#menu-menu-principal li a{ text-decoration: none !important; color:var(--CouleurBleu); position: relative; font: 16px/80px "Oswald", sans-serif; text-transform: uppercase; overflow: hidden;}
.HeaderMenu .Menu ul#menu-menu-principal li a::after{background: var(--CouleurBleu); position: absolute; bottom: -5px; left: 0px; height: 5px; content: ""; width: 100%; transition: bottom 0.5s ease; }
.HeaderMenu .Menu ul#menu-menu-principal li a:hover::after{ bottom: 0px; }
.HeaderMenu .Menu ul#menu-menu-principal li.active a::after{bottom: 0px;}

body.elementor-editor-active .HeaderTop, 
body.elementor-editor-active .HeaderMenu{position: relative !important;}
body.elementor-editor-active .HeaderMenu{margin-bottom: 80px;}

.HeaderTop.fixe{position: fixed; top:0px; z-index: 9999991;}
.HeaderMenu.fixe{position: fixed; top:40px; z-index: 999999;}

@media screen and (min-width: 1024px) {
	
.HeaderMenu.fixe .Menu{height: 40px; padding: 0px; margin: 0px;}
.HeaderMenu.fixe .Menu ul#menu-menu-principal{height: 40px; padding: 0px; margin: 0px;}
.HeaderMenu.fixe .Menu ul#menu-menu-principal li{height: 40px; padding: 0px; margin: 0px;}
.HeaderMenu.fixe .Menu ul#menu-menu-principal li a{font: 16px/40px "Oswald", sans-serif; height: 40px; padding: 0px 10px 0px 10px; margin: 0px;}
.HeaderMenu.fixe .ContentLogo .Logo img{max-height: 30px !important;}
.HeaderMenu.fixe > div{ max-height: 40px !important; }
}

@media screen and (max-width: 1024px) {
	.elementskit-menu-container.active{margin-top: 40px;}
	
}
@media screen and (max-width: 767px) {
	
.HeaderTop{ position: relative; top: 0px; left: 0px; width: 100%; height: 80px; z-index: 1; height: 40px; max-height: 40px;}
.HeaderMenu{position: relative; top: inherit; left: inherit; width: 100%; z-index: 1; }
.HeaderMenu .Menu ul#menu-menu-principal li a{ font: 16px/40px "Oswald", sans-serif; }
	
}

/*
* diaporama
*/
.diaporama{min-height:400px !important;}
@media screen and (max-width: 767px) {
.diaporama > .elementor-container{height:calc(100vh - 140px);}
}

/*
* Boutons
*/
.BtnRDV{width: 100%; height: 40px; position: relative;}
.BtnRDV a{ border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); background: var(--CouleurJaune); height: 60px; color: var(--CouleurBleu); font: 16px/60px 'Oswald', sans-serif; font-weight:700; text-transform: uppercase; letter-spacing: 2px; padding: 0px 20px 0px 20px; white-space: nowrap;}
.BtnRDV a:hover{background: var(--CouleurBleu); color:#FFFFFF;}

.Btn1 a, a.Btn1{ border-radius: 10px; background:var(--CouleurJaune); height: 60px; color:#FFFFFF; font: 20px/60px 'Oswald', sans-serif; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; padding: 0px 20px 0px 20px; white-space: nowrap; transition: background 0.5s ease; display: inline-block;}
.Btn1 a:hover, a.Btn1:hover, a.Btn1.active{background: var(--CouleurBleu);}

.Btn2 a, a.Btn2{ border-radius: 10px; background:#FFFFFF; height: 60px; color:var(--CouleurJaune) !important; font: 20px/60px 'Oswald', sans-serif; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; padding: 0px 20px 0px 20px; white-space: nowrap; transition: background 0.5s ease; display: inline-block;}
.Btn2 a:hover, a.Btn2:hover{background: var(--CouleurBleu); color:#FFFFFF !important;}

@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 767px) {
	.BtnRDV{width: 100%; height: 40px; position: relative;}
	.BtnRDV a{ height: 40px; font: 16px/40px 'Oswald', sans-serif; letter-spacing: 0px; padding: 0px 5px 0px 5px;}
	
	.Btn1 a, a.Btn1, .Btn2 a, a.Btn2{height: 40px; font: 20px/40px 'Oswald', sans-serif; letter-spacing: 0px; padding: 0px 5px 0px 5px;}
}


.BtnRetour{color:var(--CouleurBleu); font-weight: 700; font: 16px/32px 'Oswald', sans-serif; padding: 0px 10px 0px 50px; display: inline-block;  position: relative; text-decoration: none;  border-radius:5px;}
.BtnRetour::before{content: ""; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); left: 15px; background: var(--CouleurBleu);-webkit-mask: url('charte/IconeFleche2-bis.svg') no-repeat 50% 50%;  mask: url('charte/IconeFleche2-bis.svg') no-repeat 50% 50%; display: block; z-index: 1; position: absolute;}
.BtnRetour:hover{background:var(--CouleurJaune);}

/*
* Titres
*/
h1.TitreDesign1{ font: 40px/60px 'Oswald', sans-serif; font-weight: 500; color:var(--CouleurBleu); text-transform: uppercase; /*text-shadow: 0px 0px 8px #000000;*/}
.Titre1 h1{ font: 40px/60px 'Oswald', sans-serif; font-weight: 500; color:#FFFFFF; text-transform: uppercase; text-shadow: 0px 0px 8px #000000;}
.Titre2 h2{ font: 30px/50px 'Oswald', sans-serif; font-weight: 300; color:var(--CouleurBleu); text-transform: uppercase; letter-spacing: 2px;}
.Titre3 h2, .Titre3 h3{ font: 20px/35px 'Oswald', sans-serif; font-weight: 300; color:var(--CouleurBleu); text-transform: uppercase; letter-spacing: 2px;}
.Titre4 h3, h3.Titre4{ font: 16px/24px 'Oswald', sans-serif; font-weight: 300; color:var(--CouleurBleu); text-transform: uppercase; letter-spacing: 0px;}

@media screen and (max-width: 1024px) {
	.Titre1 h1{ font: 25px/40px 'Oswald', sans-serif; font-weight: 500; color:#FFFFFF; text-transform: uppercase; text-shadow: 0px 0px 8px #000000;}
	.Titre2 h2{ font: 20px/30px 'Oswald', sans-serif; font-weight: 300; color:var(--CouleurBleu); text-transform: uppercase; letter-spacing: 2px;}
	.Titre3 h2{ font: 18px/30px 'Oswald', sans-serif; font-weight: 300; color:var(--CouleurBleu); text-transform: uppercase; letter-spacing: 2px;}
	.Titre4 h3, h3.Titre4{ font: 16px/24px 'Oswald', sans-serif; font-weight: 300; color:var(--CouleurBleu); text-transform: uppercase; letter-spacing: 0px;}
}

@media screen and (max-width: 767px) {
	.Titre1 h1{ font: 20px/30px 'Oswald', sans-serif; font-weight: 500; color:#FFFFFF; text-transform: uppercase; text-shadow: 0px 0px 8px #000000;}
	.Titre2 h2{ font: 18px/24px 'Oswald', sans-serif; font-weight: 300; color:var(--CouleurBleu); text-transform: uppercase; letter-spacing: 2px;}
	.Titre3 h2{ font: 16px/22px 'Oswald', sans-serif; font-weight: 300; color:var(--CouleurBleu); text-transform: uppercase; letter-spacing: 2px;}
	.Titre4 h3, h3.Titre4{ font: 14px/24px 'Oswald', sans-serif; font-weight: 300; color:var(--CouleurBleu); text-transform: uppercase; letter-spacing: 0px;}
}

/*
* CAses
*/
.CaseDesign1 figure img{}
.CaseDesign1 .elementor-image-box-description, .CaseDesign1  h3{ font: 24px/30px 'Oswald', sans-serif; font-weight: 300; text-transform: uppercase; color:var(--CouleurBleu);}

/*
* Bloc de texte
*/
.BlocDesign1{margin: auto; text-align: center;max-width: 600px;}

/*
* Fil d'arianne
*/
.FilArianne{background: var(--CouleurBeige); padding:5px;ont: 12px/20px 'Oswald', sans-serif; font-weight: 500; }

/*
* Réalisation
*/
/* Filtres */
.realisation-filters {    text-align: center;    margin: 30px 0;}
/*.filter-btn {    display: inline-block;    margin: 5px;    padding: 10px 18px;    border: 1px solid #333;    border-radius: 20px;    text-decoration: none;    color: #333;    font-weight: 500;    transition: all 0.3s ease;}
.filter-btn:hover {    background: #333;    color: #fff;}
.filter-btn.active {    background: #333;    color: #fff;    pointer-events: none;}*/
/* Grille */
.realisations-grid {    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 20px;    margin: 40px auto; padding: 0 20px;}
/* Case */
.realisation-item {    overflow: hidden;        position: relative; border-bottom-left-radius: 50px; border-top-right-radius: 50px;}
.realisation-link {    display: block;    text-decoration: none;    color: inherit; }
.realisation-figure {    margin: 0;    position: relative;    height: 100%;}
.realisation-img {    width: 100%;    height: 250px;    object-fit: cover;    transition: all 0.3s ease;    display: block;}
.realisation-link:hover .realisation-img {    transform: scale(1.05);}
/* Titre */
.realisation-title-content {   z-index: 4; position: absolute; top: calc(100% - 120px); left: 0px; width: 100%; height: 100%; color: #FFFFFF; transition: top 0.5s ease; padding: 10px;box-sizing: border-box; display: block;}
.realisation-title {text-align: center; width: 100%; height: 120px;display: flex; /* active le mode flex */    align-items: center;/* centre verticalement */    justify-content: center; /* centre horizontalement si tu veux aussi */}
.realisation-title h3 {    ont: 30px/60px 'oswald', sans-serif; color:#FFFFFF; text-align: center;}
.realisation-link:hover .realisation-title-content{top: 0px;}

.realisation-link .realisation-Degrade{z-index: 3; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: linear-gradient(0deg,rgba(11, 27, 51, 0.8) 0%, rgba(11, 27, 51, 0) 50%); transition: background 0.5s ease;}
.realisation-link:hover .realisation-Degrade{background: linear-gradient(0deg,rgba(11, 27, 51, 1) 0%, rgba(11, 27, 51, 0) 100%);}

/* Effet au survol : centre le titre */
/*.realisation-link:hover .realisation-title {    top: 50%;    bottom: auto;    transform: translateY(-50%);    background: rgba(0,0,0,0.7);    width: auto;    left: 50%;    right: auto;    padding: 15px 20px;    transform: translate(-50%, -50%);    border-radius: 5px;
}*/

/* Pagination */
.pagination {    text-align: center;    margin: 30px 0;}
.pagination a,
.pagination span {    display: inline-block;    margin: 0 5px;    padding: 8px 12px;    border: 1px solid #ccc;    color: #333;    text-decoration: none;    border-radius: 4px;}
.pagination a:hover {    background: #333;    color: #fff;}

/*
* Galerie photo
*/
.case_table{display:table !important;height:100%; width: 100%;}.case_table .vertical_align{display:table-cell;vertical-align:middle; width: 100%;}
.photo-gallery {  display: flex;  gap: 1rem;   margin: auto; height: 600px; position: relative;}

.main-photo {  flex: 1; /* prend 50% de l’espace */  height: 100%;}

.main-photo img {  width: 100%;  height: 100%;  object-fit: cover;  border-radius: 8px;}

.grid-4-photos {  flex: 1;  display: grid;  grid-template-columns: 1fr 1fr;  grid-template-rows: 1fr 1fr;  gap: 0.5rem; height: 100%;}
.grid-4-photos div {  width: 100%;  overflow: hidden;  border-radius: 6px;}
.grid-4-photos img {  width: 100%;  height: 100%;  object-fit: cover;  border-radius: 6px;}

.photo-gallery a.SelectGalerie{background: #000000; position: relative; object-fit: cover; display: block; height: 100%;border-radius: 6px;}
.photo-gallery a.SelectGalerie:hover img{ opacity: 0.5;}
.photo-gallery a.SelectGalerie:hover::before{content: ""; position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); background: var(--CouleurJaune); -webkit-mask: url('charte/IconePhoto.svg') no-repeat 50% 50%;  mask: url('charte/IconePhoto.svg') no-repeat 50% 50%; width: 60px; height: 60px; z-index: 1;}


@media (max-width: 1024px) {
  .photo-gallery {    flex-direction: column;    height: auto;  }

  .main-photo {    height: 300px;  }

  .grid-4-photos {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    height: auto;
  }

  .grid-4-photos div {
    height: 150px;
  }
}

@media (max-width: 768px) {
  .grid-4-photos {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4-photos div {
    height: 120px;
  }
}

.BtnGalerie{ position: absolute; bottom: -20px; left: 87%; transform: translateX(-50%); z-index: 1; height: 40px; background: var(--CouleurJaune); border-radius: 5px; padding: 0px 10px 0px 40px; color:var(--CouleurBleu); line-height: 40px; font-weight: 700;   }
.BtnGalerie::before{content: ""; position: absolute; top: 10px; left:10px; background: var(--CouleurBleu); -webkit-mask: url('charte/IconePhoto.svg') no-repeat 50% 50%;  mask: url('charte/IconePhoto.svg') no-repeat 50% 50%; width: 20px; height: 20px; z-index: 1;}

@media (max-width: 768px) {
	.BtnGalerie{left: 50%; }
}