/*
 Theme Name: Studio Audrey Guillou 
 Description: Theme sur-mesure pour le Studio Audrey Guillou �� Vannes
 Author: Web Citronnade
 Author URI: https://webcitronnade.fr
 Version: 1.0.0
 Text Domain: studio-guillou
*/
@font-face {
    font-family: 'miagararegular';
    src: url('fonts/miagara-webfont.woff2') format('woff2'),
         url('fonts/miagara-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'martel_sansbold';
    src: url('fonts/martelsans-bold-webfont.woff2') format('woff2'),
         url('fonts/martelsans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'martel_sanslight';
    src: url('fonts/martelsans-light-webfont.woff2') format('woff2'),
         url('fonts/martelsans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'martel_sansregular';
    src: url('fonts/martelsans-regular-webfont.woff2') format('woff2'),
         url('fonts/martelsans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'martel_sanssemibold';
    src: url('fonts/martelsans-semibold-webfont.woff2') format('woff2'),
         url('fonts/martelsans-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*{
	margin:0;
	padding:0;
	font-family:'martel_sanslight',Calibri,sans-serif;
	font-size:15px;
	line-height:1.7;
	font-style: normal;
}
h1,h2,h3,
.fauxh1,.fauxh2,.fauxh3,
.fauxh2plus,
.font-spe{
	font-family: 'miagararegular', "Times New Roman", Times, serif;
	font-weight:300;
}
h1,.fauxh1,
.fauxh2plus{
	font-size:2.2rem;
}
span.fauxh1{
	font-size: 6.5rem;
	font-weight: 300;
	text-transform: lowercase;
	line-height:1;

}
h2,.fauxh2{
	font-size:1.3rem;
}
h3,.fauxh3{
	font-size:1.1rem;
}
p,
.faux-p{
	font-size:1rem;
}
p,
.faux-p,
.gros-p,
.big-p{
	margin:10px 0 15px 0;
	font-weight:400;
	text-transform:none;
}
.fontplus1{
	font-size:1.1rem;
}
.gros-p,.gros-p b,.gros-p strong{
	font-size:1.5rem;
}
.big-p,.big-p b,.big-p strong{
	font-size:2rem;
}
.bigbig-p{
	font-size:2.6rem;
}
b,strong{
	font-weight:600;
}
.weight300{
	font-weight:300;
}
.weight500{
	font-weight:500;
}
.weight600{
	font-weight:600;
}
span{
	display:block;
}
a{
	text-decoration:none;
	color:#000000;
}
.transition{
	transition:0.4s;
}
ul{
	list-style-type:disc;
	margin-left:6%;
}
ul li::marker{
	color:#BDA370;
}
.maj{
	text-transform:uppercase;
}
.center{
	text-align:center;
}
.max50{
	width:50%;
	margin:0 auto;
}
.max60{
	width:60%;
	margin:0 auto;
}
.max70{
	width:70%;
	margin:0 auto;
}


/* /// COULEURS /// */



.bg-ocre,.bg-ocre a,.bg-ocre p,.bg-ocre span,.bg-ocre b,.bg-ocre strong,.bg-ocre h1,.bg-ocre h2,.bg-ocre h3,
.bg-corail,.bg-corail a,.bg-corail p,.bg-corail span,.bg-corail b,.bg-corail strong,.bg-corail h1,.bg-corail h2,.bg-corail h3,
.bg-bleu,.bg-bleu a,.bg-bleu p,.bg-bleu span,.bg-bleu b,.bg-bleu strong,.bg-bleu h1,.bg-bleu h2,.bg-bleu h3
.bg-noir,.bg-noir a,.bg-noir p,.bg-noir span,.bg-noir b,.bg-noir strong,.bg-noir h1,.bg-noir h2,.bg-noir h3{
	color:#ffffff;
}




.noir{
	color:#000000;
}
.bg-noir{
	background-color:#000000;
}

.blanc{
	color:#ffffff;
}
.bg-blanc{
	background-color:#ffffff;
}
.border-left-blanc{
	border-left:1px solid #ffffff;
	padding-left:15px;
}

.ocre{
	color:#BDA370 !important;
}
.bg-ocre{
	background-color:#BDA370;
}

.vert{
	color:#9FA9A4;
}
.bg-vert{
	background-color:#9FA9A4;
}

.bg-vert.bg-opacity{
	background-color:rgba(159,169,164,0.46);
}

.bleu{
	color:#414F76;
}
.bg-bleu{
	background-color:#414F76;
}
.bg-bleu-clair{
	background-color:#628599;
}
.bleu-clair{
	color:#7F8EB5;
}

.corail{
	color:#EB866E;
}
.bg-corail{
	background-color:#EB866E;
}

.bg-gris{
	background-color:#f2f2f2;
}



/* /// WIDTH FLEX & CO /// */

.flexblock{
	display:flex;
}
.flexreverse{
	flex-direction:row-reverse;
}
.items-center{
	align-items:center;
}
.items-end{
	align-items:flex-end;
}
.items-start{
	align-items:flex-start;
}
.justif-center{
	justify-content:center;
}
.justif-evenly{
	justify-content:space-evenly;
}
.wrap{
	flex-wrap:wrap;
}
.midwidth{
	width:46%;
}
.un-tiers{
	width:29%;
}
.deux-tiers{
	width:73%;
}
.un-quart{
	width:21%;
}
.trois-quart{
	width:71%;
}
.midwidth,
.un-tiers,
.deux-tiers,
.un-quart,
.trois-quart{
	margin:20px 2%;
}
.capsule{
	max-width:1200px;
	margin:0 auto;
}
.capsule600{
	max-width:600px;
	margin:0 auto;
}
.capsule1000{
	max-width:1000px;
	margin:0 auto;
}
.capsule1200{
	max-width:1200px;
	margin:0 auto;
}
.bloc-center,
.bloc-align-right,
.bloc-align-left{
	display:block;
}
.bloc-center{
	margin:20px auto;
}
.bloc-align-left{
	margin:20px auto 20px 0;
}
.bloc-align-right{
	margin:20px 0 20px auto;
}
.bloc-txt{
	padding:30px;
}
.align-right{
	text-align:right;
}


section.all,
header,footer{
	width:80%;
	padding:30px 10%;
	margin:30px auto;
}
section.full{
	width:100%;
	padding:30px 0;
}
section.full figure.img-bg,
section.full div.trois-quart.bg-ocre{
	margin:20px 0 !important;
}


/* images */
figure.img-bg{
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
img{
	width:100%;
}
figure.img-top-pg{
	height:600px;
}
figure.max110{
	max-width:125px;
}
figure.img-bg.photo-portrait{
	height:550px;
}
figure.img-bg.photo-paysage{
	height:400px;
}
figure.img-bg.photo-paysage-bis{
	height:550px;
}
figure.carre350{
	width:350px;
	height:350px;
}


/* --- button --- */
button.bta{
	padding:3px 15px;
	border:none;
	box-shadow:none;
}
button.bta.bg-noir a{
	font-size:1.3rem;
}






.relative{
	position:relative;
}
.z1{
	z-index:1;
}
.z2{
	z-index:2;
}

.z-1{
	z-index:-1;
}
.z-2{
	z-index:-2;
}




/* --- /// HEADER /// --- */

header#header{
	position: fixed;
	  height: 110px;
	  align-items: flex-start;
	  padding-top: 5px;
	  margin-top: -30px;
	  z-index: 10;
	  width:90%;
	  padding-right:0;
}
header#header.menuscroll{
	background-color:#ffffff;
	height:60px;
	border-bottom:1px solid #E5E5E5;
}

/* logo */
figure#logo-start{
	margin-top:-10px;
}
header#header.menuscroll figure#logo-start{
	display:none;
}

figure#logo-scroll{
	display:none;
}
figure#logo-scroll.show{
	display:block;
	width: 280px;
  margin-top: 15px;
}

header.header-other figure#logo-scroll{
	display:block;
	width:280px;
	margin-top:10px;
}

/* menu principal */
nav#main-menu ul{
	list-style-type:none;
	/*display:flex;
	justify-content:flex-end;*/
	text-align:center;
}
nav#main-menu ul#menu-menu-principal{
	display:flex;
	justify-content:flex-end;
	align-items:center;
}
nav#main-menu ul li{
	margin:5px;
}
nav#main-menu ul li:after{
	content:"\00B7";
	color:#BDA370;
	margin-left:6px;
}
nav#main-menu ul li a{
	text-transform:uppercase;
	transition:0.4s;
	line-height:1.2;
}
nav#main-menu ul li a:hover{
	transition:0.4s;
	color:#BDA370;
}
nav#main-menu ul li:last-child:after,
nav#main-menu ul li:nth-last-child(2):after{
	content:" ";
}
nav#main-menu ul li:last-child a{
	text-transform:lowercase;
	color:#ffffff;
	padding:2px 10px 0px 20px;
}
nav#main-menu ul li.bg-ocre{
	transition:0.4s;
}
nav#main-menu ul li.bg-ocre:hover{
	transition:0.4s;
	background-color:#000000;
}
nav#main-menu ul li:nth-last-child(2){
	margin-right:3%;
}



/* --- /// HOMEPAGE /// --- */
/* intro home */
section#intro-home{
	position:relative;
}
section#intro-home figure.rond-ocre{
	position:absolute;
	right:0;
	width:33%;
	top:4vw;
}



/* section carte */
section.bg-carte{
	background-image:url('img/carte-bg.png');
	background-size:cover;
	background-position:bottom;
	background-repeat:no-repeat;
	margin-top: -200px;
	padding-top: 150px;
}

/* seance photo deroule */
section#seance-photo{
	position:relative;
}
section#seance-photo figure.rond-noir{
	position:absolute;
	left: 0;
  width: 53%;
  top: -5px;
  z-index: 1;
}

div.infos-seance-home article figure{
	width:135px;
	margin:5px auto;
}
div.infos-seance-home article{
	margin-bottom:60px;
}
div.infos-seance-home article p{
	margin:2px 0;
	font-size:1.1rem;
}


/* pour vous */
section#pour-vous{
	position:relative;
}
section#pour-vous figure.rond-blanc{
	position:absolute;
	left:0;
	width:40%;
	top:80px;
	z-index:1;
}
div.bg-vert.bg-superp-pour-vous{
	position:absolute;
	width:100%;
	height:950px;
	bottom:0;
	left:0;
	z-index:-1;
}


/* experience unique */
div.mosaic-img-home figure.img-bg{
	height:24vw;
}



/* --- /// BTA BG OCRE /// --- */
section.ocre-bta div.trois-quart.bg-ocre{
	padding-top:40px;
	padding-bottom:30px;
}
section.full div.flexblock div.trois-quart.bg-ocre{
	padding-left:4%;
}

section.full div.flexblock.flexreverse div.trois-quart.bg-ocre{
	padding-right:4%;
}
section.full div.flexblock div.trois-quart.bg-ocre div.midwidth{
	margin:0 auto;
}
section.full div.flexblock div.trois-quart.bg-ocre div.midwidth p{
	font-size:1.2rem;
}

section.ocre-bta button.bta-debord-left{
	margin-left:-20%;
}
section.ocre-bta div.flexreverse div.un-quart{
	margin-right: -15%;
	margin-left: 15%;
}

section.ocre-bta button{
	transition:0.4s;
	position:relative;
	z-index:4;
}
section.ocre-bta button:hover{
	transition:0.4s;
	background-color:#9B7B3C;
	
}



/* --- /// PAGE STUDIO /// --- */
figure.img-bg.photo-duo{
	height:450px;
}
div.infos-duo-equipe article{
	margin-bottom:75px;
}
figure.photo-lieu{
	height:500px;
}
figure#plan-pg-studio{
	max-width:850px;
}

figure.rond-blanc.rond-top-about{
	position: absolute;
  left: 0;
  width: 33%;
  top: 6vw;
}
figure.rond-ocre.rond-lieu-about{
	position: absolute;
  left: 0;
  width: 45%;
  top: 1vw;
}



/* --- /// PAGE PORTRAITS /// --- */

div.questions-formes-bg article,
article.bulle-entrepr,
article.bulle-horaires{
	padding:80px 75px;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
div.questions-formes-bg article.bg-forme-vert{
	background-image:url('img/forme-vert.png'); 
}
div.questions-formes-bg article.bg-forme-ocre,
article.bulle-entrepr{
	background-image:url('img/forme-ocre.png'); 
}
div.questions-formes-bg article.bg-forme-bleu-clair{
	background-image:url('img/forme-bleu-clair.png'); 
}
article.bulle-horaires{
	background-image:url('img/forme-gris.png');
}

article.type-portrait{
	width:21%;
	margin:10px 2%;
}
h2.ocre.titre-type-portrait{
	width: 65%;
	max-width: 350px;
}
article.type-portrait img{
	width:90%;
	height:auto;
	max-height:130px;
	width:auto;
}
section.details-portraits article.type-portrait{
	width:100%;
	text-align:center;
}
figure.img-type-portrait{
	width:250px;
	height:250px;
	margin:20px 10px;
}
section.details-portraits div.deux-tiers.flexblock{
	position:relative;
}
div.carre-gris-portraits{
	width:250px;
	height:250px;
	position:absolute;
	top:190px;
	right:155px;
	background-color:#F5F5F5;
	z-index:-1;
}
figure.img-type-portrait.img2{
	display:block;
	margin:35px -40px -35px 40px;
}
figure.img-type-portrait.img3{
	display:block;
	margin:80px auto -80px -45px;
}
section.details-portraits figure.rond-ocre{
	position:absolute;
	top: 4vw;
	right: 20%;
	width: 30vw;
}
section.details-portraits.envers figure.rond-ocre{
	left:25%;
}

section.all.details-portraits.relative:nth-child(even) div.flexblock{
	flex-direction: row-reverse !important;
}
section.all.details-portraits.relative:nth-child(even) figure.rond-ocre {
  left: 25%;
}


/* --- /// PAGE ENTREPRISES /// --- */
.titre-haut-page,
.titre-haut-page-right{
	font-size: 3rem;
  font-weight: 200;
  text-transform: uppercase;
  position: absolute;
  z-index: 2;
}
.titre-haut-page{
  top: 50px;
  left: 3%;
}
.titre-haut-page-right{
	top:58px;
	right:3%;
}
.titre-haut-page.ocre{
	color:#BDA370 !important;
}
section.valeurs-entrepr figure.rond-ocre{
	position: absolute;
  left: 20%;
  width: 33%;
  bottom: 4vw;	
}
section.histoires-entrepr figure.rond-noir{
	position: absolute;
  right: 20%;
  width: 26%;
  bottom: 4vw;
}
div.max80pourcent{
	max-width: 600px;
  width: 80%;
  margin-right: 20%;
}
article.bulle-entrepr{
	width:50%;
}


/* --- /// CARTE IDENTITE /// --- */
div.conseils-id{
	border-top:1px solid #BDA370;
	border-bottom:1px solid #BDA370;
	column-count:2;
	padding:30px;
}

/* prendre rdv */
iframe#lbIFrameAllSchedulingCalendars #body-embedded{
	background-color:#ffffff !important;
}


/* --- /// PAGE CONTACT /// --- */
article.bulle-horaires p,
article.bulle-horaires span{
	line-height:1.1;
	margin:3px 0;
}
div.form-contact{
	padding:35px;
}
#gform_wrapper_2{
	display:block !important;
}

/* formulaire gravity form */
form#gform_2 fieldset{
	margin:20px auto !important;
	border:none !important;
}
p.gform_required_legend,
div#input_2_1,
form#gform_2 legend,
form#gform_2 label{
	display:flex !important;
	align-items:space-around !important;
}
form#gform_2 label{
	margin-top:25px;
}
form#gform_2 div.ginput_container input{
	width:75% !important;
	padding:5px !important;
}
form#gform_2 div.ginput_container input.gfield-choice-input,
form#gform_2 div.ginput_container input#input_2_23_1{
	width:fit-content !important;
	margin-right:5px !important;
	padding:0 !important;
}
select.large gfield_select{
	padding:5px !important;
}
form#gform_2 h3{
	margin-top:30px !important;
}
label.gform-field-label--type-inline{
	margin-top:0 !important;
}
form#gform_2 .ginput_container_textarea textarea{
	width:100% !important;
}
form#gform_2 div#gfield_consent_description_2_23,
.gform_required_legend,
.gfield_consent_label{
	font-size:0.8rem !important;
}
.gform_button.button{
	padding:3px 15px;
	border:none;
	box-shadow: none;
	background-color: #000000;
	color:#ffffff !important;
	transition:0.4s;
}
.gform_button.button:hover{
	transition:0.4s;
	cursor:pointer !important;
	background-color:#BDA370;
}
div.gchoice.gchoice_2_7_0,
div.gchoice.gchoice_2_7_1,
div.ginput_container.ginput_container_consent{
	display:flex !important;
}






/* ------------------------------------------ */


/* --- /// FOOTER /// --- */
footer{
	margin-bottom:0;
}
nav#menu-legal ul{
	justify-content:center;
	list-style-type:none;
	margin:0;
}
nav#menu-legal ul li:after{
	content:"-";
	color:#BDA370;
	margin:0 2px;
}
nav#menu-legal ul li:last-child:after{
	content:none;
}
nav#menu-legal ul li a{
	color:#BDA370;
	transition:0.4s;
}
nav#menu-legal ul li a:hover{
	color:#ffffff;
	transition:0.4s;
}
div.rs-footer{
	margin-bottom:3px;
}

/* rsx scx */
div.rs-footer a img{
	width:50px;
}


/* --- bouton flottant rdv --- */
div.bta-flottant-rdv{
	position: fixed;
  right: 0;
  top: 80px;
  z-index: 15;
}
div.bta-flottant-rdv a{
	padding: 2px 20px 1px 10px;
	transition:0.4s;
}
div.bta-flottant-rdv a:hover{
	transition:0.4s;
	background-color:#000000;
}



/* --------------------------- */


/* --- MARGIN & PADDING --- */
.no-margin{
	margin:0 !important;
}


.mt100{
	margin-top:100px !important;
}
.mt150{
	margin-top:150px !important;
}
.mt-80{
	margin-top:-80px !important;
}
.pt100{
	padding-top:100px !important;
}
.pt150{
	padding-top:150px !important;
}
.pb100{
	padding-bottom:100px !important;
}
.pb300{
	padding-bottom:300px !important;
}

.mt-350{
	margin-top:-350px !important;
}
.mt-250{
	margin-top:-250px !important;
}
.mt-150{
	margin-top:-150px !important;
}
.mt-140{
	margin-top:-140px !important;
}
.mt-130{
	margin-top:-130px !important;
}
.mt-100{
	margin-top:-100px !important;
}
.mt-88{
	margin-top:-88px !important;
}
.mt-85{
	margin-top:-85px !important;
}
.mt-80{
	margin-top:-80px !important;
}
.mt-50{
	margin-top:-50px !important;
}
.mb-80{
	margin-bottom:-80px !important;
}
.pt-80{
	padding-top:-80px !important;
}





.nodesk,
header#header-mobile{
	display:none;
}
/* ////////////////////////////////////// RESPONSIVE /////////////////////////////////////// */
@media screen and (max-width: 700px){
	.nomobile,
	header#header{
		display:none;
	}
	.nodesk,
	header#header-mobile{
	display:block;
	}
	.flexblock,
	.midwidth,
	.un-tiers,
	.deux-tiers,
	.un-quart,
	.trois-quart{
		display:block;
		width:96%;
		margin:20px 2%;
	}
	/* --- MENU BURGER --- */
	header#header-mobile{
		display:block;
		position:relative;
		height:60px;
		margin: 0;
	}
	#hamburger-button {
		position:absolute;
	  z-index: 10;
	  display: inline-block;
	  height:50px;
	  width:50px;
	  top: 20px;
	right: 0;
	padding: 20px;
	}

	#hamburger-button:hover {
	  cursor:pointer;
	}

	#hamburger-button > span {
	  display: block;
	  height: 1px;
	  margin-bottom: 6px;
	  width: 26px;
	  background-color:#000000;
	  border-radius:5px;
	 -webkit-transition-timing-function: linear; /* Safari and Chrome */
	transition-timing-function: linear;
	transition-duration:0.6s;
	}
	
	#hamburger-button > span:first-child{
		width:22px
	}
	#hamburger-button > span:last-child{
		width:20px
	}

	#hamburger-button.open > span:first-child {
	-webkit-transform: translateY(9px) rotate(45deg); /* Chrome, Safari, Opera */
	transform:translateY(9px) rotate(45deg);
	width:30px;
	}


	#hamburger-button.open > span:nth-child(2) {
	   -webkit-transform: rotateY(90deg); /* Safari */
		transform: rotateY(90deg);
	  /* rotates the second child on the Y AXIS ONLY 90 degrees so it disappears into a point */
	}

	#hamburger-button.open > span:last-child {
	 -webkit-transform: translateY(-10px) rotate(-45deg); /* Chrome, Safari, Opera */
		transform: translateY(-10px) rotate(-45deg);
		width:30px;
	}


	#header-mobile .navbar .primary{
		display:block;
	  position:absolute;
	  opacity:.975;
	  z-index:6; /*so its above the content but below the burger button*/
	  height:100vh;
	  width: 100vw;
	  left:-100vw;
	  transition:1s;
	  background-color:rgba(255,255,255,0.985);
	  color:white;
	  top:-20px;
	  padding-top:20px;
	}

	#header-mobile .navbar .primary.open{
	  left:0;
	}
	#header-mobile .navbar .primary{
	  list-style:none;
	  margin-top:100px;
	  font-size:1.5em;
	}

	#header-mobile .navbar .primary li{
	  margin-bottom: 10px;
		padding: 5px 0 5px 25px;
		font-size: 24px;
		font-weight: 500;
		text-transform: uppercase;
	}
	#header-mobile .navbar .primary li a,
	#header-mobile .navbar .primary.open li a,
	#header-mobile div.navbar ul div ul.primary li a{
		font-size: 1.2rem;
		font-weight: 500;
		text-transform: uppercase !important;	
		color:#000000;
	}
	#header-mobile .navbar .primary li:hover{
	  cursor:pointer;
	}
	header#header-mobile div.navbar div.menu-menu-principal-container ul{
		display:block;
		margin-left:0 !important;
	}
	
	figure#logo-mobile{
	  width: fit-content;
	  max-width: 200px;
	  position:relative;
	  z-index:7;
	}
	
	
	/* --- PARTOUT --- */
	h1, .fauxh1, .fauxh2plus {
	  font-size: 1.6rem;
	  line-height: 1.4;
	}
	figure.max110 {
	  max-width: 100px;
	  margin: 0 auto;
	}
	section.ocre-bta button.bta-debord-left,
	section.ocre-bta button.bta-debord-right{
		margin: -35px auto 0 auto;
		text-align: center;
		display: block;
	}
	section.full div.flexblock.flexreverse div.trois-quart.bg-ocre{
		padding-right:0;
	}
	section.ocre-bta div.flexreverse div.un-quart{
		margin-right:0;
		margin-left:0;
	}
	span.fauxh1{
		font-size:2rem;
	}
	
	
	/*section.all, header, footer{
		width:100%;
	}*/
	
	/* --- PAGES --- */
	figure.img-top-pg{
		height:200px;
	}
	figure.img-bg.photo-paysage,
	figure.img-bg.photo-paysage-bis,
	figure.img-bg.photo-duo,
	figure.photo-lieu,
	figure.img-bg.photo-portrait{
		height:250px;
	}
	.gros-p, .gros-p b, .gros-p strong {
	  font-size: 1.2rem;
	}
	
	.titre-haut-page{
		font-size:2rem;
		position:relative;
		top:0;
		left:2%;
	}
	.titre-haut-page.align-right{
		text-align:left;
	}
	
	.flex-mobile{
		display:flex;
		flex-wrap:wrap;
	}
	
	
	/* accueil */
	div.mosaic-img-home figure.img-bg {
	  height: 64vw;
	}
	section.bg-carte{
		margin-top:0;
	}
	section.last-section-home{
		margin-bottom:80px !important;
	}
	
	
	/* studio */
	section.nomtmobile{
		margin-top:0 !important;
	}
	
	/* portraits */
	div.questions-formes-bg article{
		padding:30px;
	}
	div.questions-formes-bg article p.blanc.fontplus1{
		width: 80%;
		margin: 0 auto;
		display: block;
	}
	section.details-portraits div.deux-tiers aside figure:last-child{
		display:none;
	}
	
	
	/* identit�� */
	div.conseils-id{
		column-count:1;
	}
	div.cadres-ocre-bleu-id{
		display: flex;
		flex-wrap: wrap;
	}
	section.relative-id-vous{
		position:relative;
	}
	div.vous-mobile-id{
		position: absolute;
		top: -20px;
		left: 10px;
	}
	
	
	/* entreprise */
	article.un-tiers.bulle-entrepr.center.bg-forme-ocre{
		margin-left:-25%;
	}
	.width100mobile{
		width:100%;
	}
	
	/* offrir */
	section.titre-offrir{
		margin-top:0 !important;
	}
	
	
	/* contact */
	section.intro-contact#intro-home{
		display:none;
	}
	
	/* --- FOOTER --- */
	nav#menu-legal ul{
		display:flex;
	}
	
	/* bouton flottant rdv */
	div.bta-flottant-rdv{
		top: 80px;
    transform: rotate(-90deg);
    right: -55px;
	}
	div.bta-flottant-rdv a{
		font-size:0.8rem;
	}
}


/* =====================================================
   STUDIO AUDREY GUILLOU �� Additions CSS
   Navigation d��roulante (desktop + mobile) + Blog
   �0�8 ajouter �� la fin de style.css
   ===================================================== */



/* =====================================================
   1. DROPDOWN DESKTOP �� Sous-menu au survol
   ===================================================== */

/* Chaque item parent doit pouvoir contenir le sous-menu en absolu */
nav#main-menu ul#menu-menu-principal > li {
	position: relative;
}

/* Sous-menu : cach�� par d��faut, animation fluide */
nav#main-menu ul li .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	background-color: #ffffff;
	border-top: 2px solid #BDA370;
	min-width: 210px;
	padding: 8px 0;
	margin: 0;
	list-style: none;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
	opacity: 0;
	pointer-events: none;
	z-index: 200;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Sous-menu visible au survol */
nav#main-menu ul#menu-menu-principal > li:hover > .sub-menu {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* Items du sous-menu */
nav#main-menu ul li .sub-menu li {
	display: block;
	margin: 0;
	text-align: left;
}

nav#main-menu ul li .sub-menu li::after {
	content: none !important; /* Retire les "��" s��parateurs */
}

nav#main-menu ul li .sub-menu li a {
	display: block;
	padding: 9px 22px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #000000;
	transition: color 0.3s, background-color 0.3s;
}

nav#main-menu ul li .sub-menu li a:hover {
	color: #BDA370;
	background-color: #faf8f5;
}

/* Petite fl��che indicatrice sur les items parents */
nav#main-menu ul#menu-menu-principal > li.menu-item-has-children > a::after {
	content: " \25BE";
	font-size: 0.65em;
	color: #BDA370;
	margin-left: 4px;
}



/* =====================================================
   2. DROPDOWN MOBILE �� Accord��on
   ===================================================== */

#header-mobile .navbar .primary li.menu-item-has-children {
	position: relative;
}

/* Bouton "+" / "�6�1" �� droite de l'item parent */
button.submenu-toggle {
	position: absolute;
	right: 16px;
	top: 4px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px 12px;
	z-index: 7;
}

.submenu-arrow {
	font-size: 1.5rem;
	color: #BDA370;
	font-weight: 300;
	line-height: 1;
	display: inline-block;
}

/* Sous-menu mobile : ferm�� par d��faut */
#header-mobile .navbar .primary li .sub-menu {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
	background-color: #faf8f5;
	border-left: 2px solid #BDA370;
	margin: 0 0 0 20px !important;
	padding: 0;
	list-style: none;
}

/* Sous-menu mobile ouvert */
#header-mobile .navbar .primary li .sub-menu.open {
	max-height: 500px;
}

/* Items du sous-menu mobile */
#header-mobile .navbar .primary li .sub-menu li {
	font-size: 16px !important;
	padding: 0 !important;
	border: none !important;
}

#header-mobile .navbar .primary li .sub-menu li a {
	display: block;
	padding: 10px 16px !important;
	font-size: 0.95rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em;
	color: #555 !important;
	font-weight: 400 !important;
	transition: color 0.3s;
}

#header-mobile .navbar .primary li .sub-menu li a:hover {
	color: #BDA370 !important;
}



/* =====================================================
   3. BLOG �� Liste des articles (home.php)
   ===================================================== */

/* En-t��te de la page blog */
section#blog-intro {
	padding-top: 120px;
	position: relative;
}

.sous-titre-blog {
	display: block;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #BDA370;
	margin-bottom: 8px;
}

/* S��parateur ocre court */
.blog-separator {
	width: 40px;
	height: 2px;
	background-color: #BDA370;
	margin: 12px 0 25px;
}

/* Grille des articles : 3 colonnes, premier article featured sur 2 colonnes */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 30px;
	margin: 50px 0;
}

/* Carte article */
article.blog-card {
	display: flex;
	flex-direction: column;
}

article.blog-card.featured {
	grid-column: span 2;
}

/* Image de la carte */
article.blog-card .blog-card-img {
	display: block;
	height: 280px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	position: relative;
}

article.blog-card.featured .blog-card-img {
	height: 420px;
}

article.blog-card .blog-card-img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(189, 163, 112, 0);
	transition: background 0.4s ease;
}

article.blog-card:hover .blog-card-img::after {
	background: rgba(189, 163, 112, 0.15);
}

/* Contenu sous l'image */
article.blog-card .blog-card-content {
	padding: 20px 0 10px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.blog-card-meta {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #BDA370;
	margin-bottom: 8px;
}

.blog-card-meta .blog-cat {
	margin-right: 10px;
}

.blog-card-meta .blog-date::before {
	content: " \00B7 ";
	color: #BDA370;
}

article.blog-card h2 {
	font-size: 1.4rem;
	font-weight: 300;
	line-height: 1.3;
	color: #000000;
	margin-bottom: 10px;
	transition: color 0.3s;
}

article.blog-card.featured h2 {
	font-size: 2rem;
}

article.blog-card:hover h2,
article.blog-card:hover h2 a {
	color: #BDA370;
}

article.blog-card h2 a {
	color: inherit;
	transition: color 0.3s;
}

article.blog-card .blog-card-excerpt {
	font-size: 0.9rem;
	color: #555;
	line-height: 1.7;
	flex: 1;
	margin-bottom: 15px;
}

article.blog-card .blog-card-lire {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #000000;
	border-bottom: 1px solid #BDA370;
	padding-bottom: 2px;
	display: inline-block;
	align-self: flex-start;
	transition: color 0.3s;
}

article.blog-card .blog-card-lire:hover {
	color: #BDA370;
}

/* Pagination */
.blog-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 30px 0 60px;
}

.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid #E5E5E5;
	font-size: 0.85rem;
	color: #000;
	transition: all 0.3s;
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
	background-color: #BDA370;
	border-color: #BDA370;
	color: #fff;
}



/* =====================================================
   4. BLOG �� Article individuel (single.php)
   ===================================================== */

.single-post-header {
	padding-top: 130px;
	padding-bottom: 50px;
	max-width: 800px;
}

.single-post-meta {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #BDA370;
	margin-bottom: 20px;
}

.single-post-meta span + span::before {
	content: " \00B7 ";
	color: #BDA370;
	margin: 0 6px;
}

.single-post-title {
	font-size: 3rem;
	font-weight: 300;
	line-height: 1.2;
	color: #000000;
	margin-bottom: 25px;
}

/* Image hero pleine largeur */
.single-post-img {
	width: 100%;
	height: 560px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin-bottom: 60px;
}

/* Contenu de l'article */
.single-post-content {
	max-width: 780px;
	margin: 0 auto;
}

.single-post-content p {
	font-size: 1.05rem;
	line-height: 1.85;
	color: #222;
	margin-bottom: 22px;
}

.single-post-content h2 {
	font-size: 1.8rem;
	font-weight: 300;
	color: #000;
	margin: 40px 0 15px;
}

.single-post-content h3 {
	font-size: 1.3rem;
	font-weight: 300;
	color: #000;
	margin: 30px 0 10px;
}

.single-post-content blockquote {
	border-left: 3px solid #BDA370;
	padding: 15px 25px;
	margin: 30px 0;
	background-color: #faf8f5;
}

.single-post-content blockquote p {
	font-size: 1.3rem;
	font-style: italic;
	color: #333;
	margin: 0;
}

.single-post-content img {
	width: 100%;
	height: auto;
	margin: 25px 0;
}

/* Lien "Retour au blog" */
.back-to-blog {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #000;
	margin-bottom: 40px;
	transition: color 0.3s;
}

.back-to-blog::before {
	content: "\2190";
	color: #BDA370;
	font-size: 1rem;
}

.back-to-blog:hover {
	color: #BDA370;
}

/* Tags */
.single-post-tags {
	margin-top: 40px;
	padding-top: 25px;
	border-top: 1px solid #E5E5E5;
}

.single-post-tags a {
	display: inline-block;
	margin: 4px 4px 4px 0;
	padding: 5px 14px;
	border: 1px solid #BDA370;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #BDA370;
	transition: all 0.3s;
}

.single-post-tags a:hover {
	background-color: #BDA370;
	color: #fff;
}

/* Section "�0�8 lire aussi" */
section.articles-lies {
	border-top: 1px solid #E5E5E5;
	padding-top: 50px;
	margin-top: 60px;
}

.articles-lies-titre {
	font-size: 1.8rem;
	font-weight: 300;
	margin-bottom: 30px;
}

.articles-lies-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
}



/* =====================================================
   5. RESPONSIVE �� Blog mobile
   ===================================================== */

@media screen and (max-width: 700px) {

	section#blog-intro {
		padding-top: 80px;
	}

	.blog-grid {
		grid-template-columns: 1fr;
		gap: 40px;
		margin: 30px 0;
	}

	article.blog-card.featured {
		grid-column: span 1;
	}

	article.blog-card.featured .blog-card-img {
		height: 260px;
	}

	article.blog-card .blog-card-img {
		height: 230px;
	}

	article.blog-card.featured h2 {
		font-size: 1.5rem;
	}

	.single-post-title {
		font-size: 2rem;
	}

	.single-post-img {
		height: 280px;
		margin-bottom: 40px;
	}

	.single-post-header {
		padding-top: 100px;
	}

	.articles-lies-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

}



/* =====================================================
   6. CORRECTION �� Template "Type de portrait"
   Masque le rond ocre g��ant qui appara�0�6t entre
   les 3 photos et le bandeau ocre sur ce template.
   ===================================================== */
body.page-template-template-portrait-type section.all.relative figure.rond-ocre {
	position: absolute;
	width: 20%;
	right: 5%;
	bottom: -30px;
	z-index: -1;
	pointer-events: none;
}
/* =====================================================
   FAQ accord��on - Styling des questions
   ===================================================== */
details {
	margin: 15px 0;
	padding: 15px 20px;
	border-left: 3px solid var(--ocre, #BDA370);
	background: #fafaf8;
	transition: background 0.3s;
}
details:hover {
	background: #f5f3ee;
}
details summary {
	cursor: pointer;
	font-family: var(--font-serif, 'miagararegular'), serif;
	font-size: 1.15rem;
	color: var(--noir, #000);
	padding: 5px 0;
	list-style: none;
	position: relative;
	padding-right: 30px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	color: var(--ocre, #BDA370);
	transition: transform 0.3s;
}
details[open] summary::after {
	content: "\2212";      /* code Unicode du signe moins, r��sistant �� la minification */
}
details p {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #e5e5e5;
	line-height: 1.7;
}
/* =====================================================
   7. CORRECTIONS �� Bugs report��s mai 2026
   - Titre top qui d��borde sur pages "Type de portrait"
   - Menu d��roulant qui dispara�0�6t au clic
   - "+" mobile cach�� par le bouton RDV flottant
   ===================================================== */

/* --- Bug 1 : Titre top qui sort de la page (pages Type de portrait) --- */

body.page-template-template-portrait-type section.all.full#intro-home {
	position: relative;
	overflow: hidden;
}

body.page-template-template-portrait-type .titre-haut-page {
	font-size: 2.2rem;
	max-width: 60%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* --- Bug 2 : Menu d��roulant qui dispara�0�6t au clic --- */

/* On supprime le translateY qui cr��ait un micro-gap pendant la transition,
   et on ajoute un padding-top "tampon" qui cr��e une zone de survol invisible
   entre le menu parent et le sous-menu */
nav#main-menu ul li .sub-menu {
	transform: none !important;
	padding-top: 20px !important;
	margin-top: 0 !important;
}

/* On adoucit la transition et on ajoute un d��lai de fermeture
   pour laisser le temps �� la souris de rejoindre le sous-menu */
nav#main-menu ul li .sub-menu {
	transition: opacity 0.25s ease, visibility 0s linear 0.2s !important;
}

nav#main-menu ul li:hover .sub-menu,
nav#main-menu ul li:focus-within .sub-menu {
	transition: opacity 0.25s ease, visibility 0s linear 0s !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}


/* --- Bug 3 : Bouton RDV flottant cache le "+" du menu mobile --- */

/* Quand le menu mobile burger est ouvert, on masque le bouton RDV flottant */
@media screen and (max-width: 700px) {
	body:has(#hamburger-button.open) div.bta-flottant-rdv {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════════
   FIX LCP — fetchpriority="high" sur image hero
   Permet à <img> de remplacer background-image sur figure.img-top-pg
   Reproduit exactement le comportement de background-size:cover
   ═══════════════════════════════════════════════════════════════ */

.img-bg.img-top-pg {
	overflow: hidden;
	position: relative;
}

.img-bg.img-top-pg > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   AGRANDISSEMENT DES BOUTONS CTA
   ═══════════════════════════════════════════════════════════════ */

/* Boutons principaux des bandeaux ocre 
   (Demander un devis, Réserver une séance, Offrir, etc.) */
button.bta {
	padding: 14px 35px;
}

button.bta.bg-noir a {
	font-size: 1.5rem;
}

/* Bouton flottant RDV (en haut à droite sur desktop) */
div.bta-flottant-rdv a {
	padding: 12px 28px 12px 18px;
	font-size: 1.1rem;
}


/* Adaptations mobile (max-width: 700px) */
@media screen and (max-width: 700px) {

	button.bta {
		padding: 12px 25px;
	}

	button.bta.bg-noir a {
		font-size: 1.3rem;
	}

	/* Le bouton flottant est tourné -90deg sur mobile, on l'ajuste */
	div.bta-flottant-rdv a {
		padding: 8px 22px 8px 14px;
		font-size: 0.95rem;
	}
}

/* ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   FIX NAVIGATION — Chevauchement bouton + chevrons agrandis
   ═══════════════════════════════════════════════════════════════ */

/* 1. Bouton flottant RDV : descendre pour ne plus chevaucher le header */
div.bta-flottant-rdv {
	top: 130px;
}

/* 2. Agrandir les chevrons ▾ des items avec sous-menu */
/*    (les points · séparateurs restent intacts, hérités du CSS d'origine) */
nav#main-menu ul#menu-menu-principal > li.menu-item-has-children > a::after {
	font-size: 1em;          /* était 0.65em → +50% */
	margin-left: 6px;        /* léger air autour */
	vertical-align: middle;  /* centre verticalement */
}

/* ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   FIX MENU NAVIGATION (suite)
   1. Items de menu sur une ligne (titre + chevron inline)
   2. Sous-menus déroulants : délai avant disparition (navigation confortable)
   ═══════════════════════════════════════════════════════════════ */

/* 1a. Forcer chaque item du menu à rester sur UNE ligne */
nav#main-menu ul li a {
	white-space: nowrap;
}

/* 1b. S'assurer que le chevron reste collé au titre sur la même ligne */
nav#main-menu ul#menu-menu-principal > li.menu-item-has-children > a::after {
	display: inline;
	white-space: nowrap;
}

/* 2. DÉLAI avant fermeture du sous-menu (~400ms grace period) 
   Permet de bouger la souris du parent vers le sous-menu sans qu'il disparaisse */
nav#main-menu ul li .sub-menu {
	transition: opacity 0.25s ease 0.4s, transform 0.25s ease 0.4s;
}

/* Au survol : apparition immédiate (pas de délai) */
nav#main-menu ul#menu-menu-principal > li:hover > .sub-menu,
nav#main-menu ul#menu-menu-principal > li:focus-within > .sub-menu {
	transition: opacity 0.25s ease 0s, transform 0.25s ease 0s;
}

/* Zone "fantôme" invisible entre l'item parent et le sous-menu pour éviter le saut */
nav#main-menu ul#menu-menu-principal > li.menu-item-has-children::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 12px;
	background: transparent;
	pointer-events: auto;
}
/* =====================================================
   Correctifs mobile — octobre 2026
   À coller tout à la fin de style.css (thème studio-guillou)
   ===================================================== */
@media screen and (max-width: 700px) {

	/* Menu mobile fermé : le cacher entièrement.
	   Avant, une bande blanche d'environ 23 px restait visible
	   sur le bord gauche et masquait la 1re lettre des titres. */
	#header-mobile .navbar .primary {
		left: -110vw;
		visibility: hidden;
		transition: left 1s, visibility 0s linear 1s;
	}
	#header-mobile .navbar .primary.open {
		left: 0;
		visibility: visible;
		transition: left 1s, visibility 0s;
	}

	/* Titre en haut des pages "Type de portrait" :
	   passer à la ligne au lieu d'être coupé par "…" */
	body.page-template-template-portrait-type .titre-haut-page {
		white-space: normal;
		max-width: 90%;
		font-size: 1.8rem;
		line-height: 1.15;
	}
}
/* ═══════════════════════════════════════════════════════════════ */