/*!
Theme Name: BulleGraphic
Author: Amélie Le Rolland
*/

@font-face {
font-family: "MyriadWebPro";
	src: url('/wp-content/themes/bullegraphic/font/MyriadWebPro.woff') format(woff);
}

@font-face {
	font-family: "Quicksand";
	src: url('/wp-content/themes/bullegraphic/font/Quicksand.woff') format(woff);
}

@font-face {
	font-family: "Lieberuth-regular";
	src: url('/wp-content/themes/bullegraphic/font/Lieberuth-regular.woff') format(woff);
}



body{
	width:100%;
	margin : 0;
	}

.menu{
	position:fixed;
	top:0;
	width:100%;
	text-align:center;
	z-index:999;
	display:block;
	background-color:#000;
	outline : #000 4px dotted;
}

.menu-container{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:10px;
	max-width:900px;
	margin-inline:auto;
}

.menu-listing{
	display:flex;
	list-style:none;
	font-family:"Lato", sans-serif;
	margin:0;
}

.menu-listing a{
	text-decoration:none;
	color:#fff;
	text-transform:uppercase;
	font-size:16px;
}

.menu-listing li{
	padding:20px 22px;
	}

.menu-listing li a {
    position: relative;
    z-index: 1;
}

/* Cercle */
	
.menu-listing li a::before {
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e5d4d1;
    left: -10px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    transition: transform .3s ease;
    z-index: -1;
}

/* Apparition au survol */
.menu-listing li a:hover::before {
    width: 36px;
    height: 36px;
}

.menu-listing li:not(.contact) a:hover::before,
.menu-listing li:not(.contact).active a::before {
    transform: translateY(-50%) scale(1);
}

.menu-listing li.contact a::before {
    display: none;
}

.contact a{
	color:#fff;
	background-color:#dcc2bb;
	padding:10px 25px;
	border-radius:30px;
	text-transform:uppercase;
	}	

.contact a:hover{
		color:#000;
}

.contact{
	transition: all 0.3s ease;
}
	
.contact:hover{
	transform: scale(1.05);
}

.slide, .slide2{
	text-align:center;
	animation-name:couleur;
	animation-duration:10s;
	animation-iteration-count:infinite;
	background-color:#FFFFFF;
	background-size:cover;
	background-repeat:no-repeat;
	height:100%;
	width:100%;
	background-position:center;
}

.slide{
	margin:60px 0 0 0;
	display:block;
	}

.slide-mobile, .slide-mobile2{display:none;}

.logo{width:100%;}

@keyframes couleur{
	from{background-color:#FFFFFF;}
	25%{background-color:#DAC9B2;}
	50%{background-color:#DCC2BB;}
	75%{background-color:#DAC9B2;}
}

.home-section2{
	background-color:#B1D5D9;
}

.section1, .section2, .section3{
	position:inherit;
	max-width:900px;
	margin-inline:auto;
	padding-bottom:50px;
	}
	
.home-about{
	padding:110px 0 70px 0;
}

.home-contact{
	padding:90px 0;
}

h1{
	text-align:center;
	font-family:Lieberuth-regular;
	text-transform:uppercase;
	margin:50px 0 !important;
	font-size:40px;
	font-weight:lighter;
	padding:25px 50px 10px 50px;
	border:solid 3px #000;
	border-radius:20px;
	position:relative;
	z-index:0;
	line-height:1.20;
}

h1::after{
	content:"";
	position:absolute;
	top: 10px;
  	left: 10px;
  	width: 100%;
 	height: 133px;
  	border: 2px solid black;
  	border-radius: 20px;
  	z-index: 1;
}

.h1-about{
	margin:auto;
	font-size:30px;
	text-align:right;
	border-radius:20px;
	background:#fff;
	padding:50px 25px;
	}


h2{
	font-family:Lieberuth-regular;
	font-size:27px;
	line-height:2.5;
	margin:0 0 15px 0;
	font-weight:inherit;
	text-transform: uppercase;
}

.uagb-heading-text {
	line-height: 1.5;
}

h3{
	font-family:"Lato", sans-serif;
	font-size:20px;
	text-align:center;
}

li{
	font-family:Lieberuth-regular;
	font-size:18px;	
	line-height:150%;
	margin:0;
}

p{
	font-family: "Lato", sans-serif;
	font-size:18px;
	line-height:150%;
	margin:0;
}


.mobile-menu{
	width:100%;
	position:sticky;
	top:0;
	height:100px;
	background:#B1D5D9;
	z-index:9999;
	box-sizing:border-box;
	display:flex;
	align-items:center;
	padding-inline:20px;
	display:none;
}


.row{display:flex;}

.col-md-4{
	width:33%;
	padding: 30px 0;
	border-bottom: solid 3px #000;
	text-align:center;
	position:relative;
}

.col-md-4 p {padding:0 15px;}

.col-md-4:first-child p{padding:0 15px;}

.col-md-4:first-child{
	background:#2B5559;
	color:#fff;
}

.col-md-4:last-child{
	background:#eee;
	margin:0;
}

.col-md-4:first-child a{color:#dcc2bb;}

.col-md-4:first-child a:hover{color:#000;}

.plus-btn {
	position: absolute;
	bottom: -22px;
	left: 50%;
	transform: translateX(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #d8bcb2;
	color: #ffffff;
	font-size: 28px;
	line-height: 44px;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
	transition: all 0.3s ease;
	z-index: 2;
}

.col-md-4 {
    width: 33%; /*à supprimer quand nouvelle page ACCUEIL en ligne*/
    margin-right: 3%; /*à supprimer quand nouvelle page ACCUEIL en ligne*/
    padding: 50px 0;
    border-bottom: solid 3px #000;
    text-align: center;
    position: relative;
}

/* Bouton */
.btn-plus {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);

    width: 46px;
    height: 46px;

    background: #E8D9D3;
    border:3px solid #000;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
	transition: all .3s ease;
}

/* Cercle intérieur */
.btn-plus::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 2px solid #000;
    border-radius: 50%;
	background:#fff;
	transition: all .3s ease;
}

/* Croix */
.btn-plus span {
    position: relative;
    width: 14px;
    height: 14px;
}

.btn-plus span::before,
.btn-plus span::after {
    content: "";
    position: absolute;
    background: #000;
}

.btn-plus span::before {
    width: 2px;
    height: 20px;
    left: 50%;
    transform: translateX(-50%);
	top:-18%;
}

.btn-plus span::after {
    width: 20px;
    height: 2px;
    top: 40%;
    transform: translateY(-50%);
	left:-18%;
}

/* SURVOL */
.btn-plus:hover {
    transform: translateX(-50%) scale(1.15);
    background: #2B5559;
}

.btn-plus:hover::before {
    inset: 2px;
}

.col-md-4:first-child .plus-btn{color:#fff;}

.plus-btn:hover {
	background-color: #c7a69b;
	transform: translateX(-50%) scale(1.1);
	color:#fff !important;
}

a{
	color:#2B5559;
	text-decoration:none;	
}

.aligncenter{
	display:block;
	margin:auto;
}

.col-md-8{width:67%;}

.accroche-a-propos{
	display:flex;
	position:relative;
	gap:20px;
	flex-direction:column;
}

.texte-accroche{
	right:40%;
	position:absolute;
	top:25%;
}

.bullegraphic{
	text-align:right;
	font-family:'Brittany Signature';
	font-size:70px;
	width:80%;
	margin:0 auto 20px auto;
}


/* CONTENEUR */
.btn-decouvrir-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    margin:50px 0;
}

/* LIGNES */
.btn-decouvrir-wrapper::before,
.btn-decouvrir-wrapper::after{
    content:"";
    flex:1;
    height:3px;
    background:#000;
}

/* BOUTON */
.btn-decouvrir{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
font-weight:400;
    min-width:140px;
    height:45px;
font-style:normal;
    background:#E8D9D3;
    border:3px solid #000;
    border-radius:40px;
    font-family: "Lato", sans-serif;
    font-size:16px;
    color:#000;
    text-transform:uppercase;
    text-decoration:none;
    transition:all .3s ease;
}

/* CONTOUR INTÉRIEUR */
.btn-decouvrir::before{
    content:"";
    position:absolute;
    inset:4px;
    border:2px solid #000;
    border-radius:35px;
    background:#fff;
    transition:all .3s ease;
}

/* TEXTE */
.btn-decouvrir span{
    position:relative;
    z-index:2;
}

/* HOVER IDENTIQUE AUX BOUTONS + */
.btn-decouvrir:hover{
    background:#2B5559;
    transform:scale(1.05);
}

.btn-decouvrir:hover::before{
    inset:2px;
}

.btn-decouvrir:hover span{
    color:#000;
}

/*formulaire de contact version destop*/

.formulaire_contact{
	display:flex;
}

.col-md-6{width:49%;}

.champ{
	border :none;
	padding:17px;
	background-color:#FFF;
	font-family:"Lato", sans-serif;
	font-size:13px;
	text-transform:uppercase;
	color:#a6a6a6;
	border-radius:5px;
	outline:solid #d8bbb2 2px;
	width:80%;
}

.wpcf7-form-control.wpcf7-email.wpcf7-validates-as-required.wpcf7-text.wpcf7-validates-as-email.champ:focus-visible, .wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.champ:focus-visible, .wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required.champ_msg:focus-visible{
	outline: solid 2px #000;
	color:#000;
	text-transform: initial;
}

.champ:focus::-webkit-input-placeholder,
.champ_msg:focus::-webkit-input-placeholder {
    opacity: 0;
}

.champ:focus::placeholder,
.champ_msg:focus::placeholder {
    opacity: 0;
}

.wpcf7-form-control-wrap{
	margin-bottom:30px;
	display:block;
}

.wpcf7-not-valid-tip{
	color: #2B5559;
}

.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 {
  border-color: transparent !important;
  font-family: 'Lato';
  text-align: center;
  color: #2B5559;
  font-weight: 800;
}

.champ_msg{
	font-size:13px;
	padding:17px 0 0 17px;
	font-family:"Lato", sans-serif;
	border:none;
	text-transform:uppercase;
	color:#a6a6a6;
	width:100%;
	max-width:100%;
	border-radius:5px;
	outline:solid #d8bbb2 2px;
	height:130px;
}


input[type="submit"]{
    position:relative;
    min-width:150px;
    height:55px;
    border:3px solid #000;
    border-radius:40px;
    background:#E8D9D3;
    color:#000;
    font-size:16px;
    text-transform:uppercase;
    cursor:pointer;
    transition:all .3s ease;
    overflow:hidden;
}

/* contour intérieur */
input[type="submit"]::before{
    content:"";
    position:absolute;
    inset:4px;
    border:2px solid #000;
    border-radius:35px;
    background:#fff;
    transition:all .3s ease;
    z-index:0;
}

/* texte */
input[type="submit"]{
    z-index:1;
}

/* hover */
input[type="submit"]:hover{
    background:#2B5559;
    color:#fff !important;
    transform:scale(1.05);
}

input[type="submit"]:hover::before{
    inset:2px;
}


.envoyer{
    width:100%;
    text-align:right;
}

/* Structure du pied de page */
.footer {
  background-color: #000;           /* fond noir */
  color: #fff;
  text-align: center;
  position: relative;
  padding: 60px 0 20px;            /* espace intérieur */
}

/* Bloc arrondi au-dessus du footer */
.footer-social {
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  border-radius: 10px 10px 0 0;
  padding: 30px 110px;
  display: flex;
  gap: 25px;
  justify-content: center;
  align-items: center;
}

/* Icônes des réseaux sociaux */
.footer-social a {
  color: #fff;
  font-size: 25px;
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: #dcc2bb;
}

#contact, #creation_graphique, #conception_web{height:50px;}

.bwg-title1:hover{
	background:#000000;
}

.bwg-item0:hover .bwg-title1{
	opacity:0.8 !important;
	transition:all 0.7s ease-out;
}


#bwg_thumbnails_0{
	padding-left: 0 !important;
}


/*style version smartphone*/

@media screen and (max-width:820px){
	
	.menu{
		transform:translateX(-100%);
		transition:.3s ease;
		border-bottom:none;
		}
				
	.mobile-menu{
		display:flex;
		background:#000;
	}	

	.material-symbols-outlined{
	color:#fff;
	}
	
	
	.menu-container{
		width:93%;
		height:100vh;
		display:flex;
	}
	
	.menu-listing{
		flex-direction:column;
		padding:0;
		margin: auto;
	}
	
	.menu-listing li{
	border-bottom:none;
	width:100%;
	margin: auto;
	padding:30px 0;
	}
	

	.menu-listing a{
		box-sizing:border-box;
		display:bloc;
		font-size:18px;
	}
	
	.slide, .slide2{display:none;}
	
	.slide-mobile, .slide-mobile2{
	text-align:center;
	animation-name:couleur;
	animation-duration:5s;
	animation-iteration-count:infinite;
	background-color:#fff;
	background-size:cover;
	background-repeat:no-repeat;
	height:100%;
	width:100%;
	background-position:center;
	display:block;
	}
	
	.entry-header, .section1, .section2, .section3, .wp-block-uagb-container.\.section1.uagb-block-70c3ff1b.default.uagb-is-root-container{width:80%;}
	
	h1{
		font-size:25px;
	}

	h1::after{display:none;}
	
	h2{
		margin-top:20px;
		}
	
	.row{display:block;}
	
	.col-md-4, .col-md-8, .col-md-6{
		width:100%;
		margin-right:0%;
	}
	
	.col-md-4{padding:80px 30px;}

	.box-1, .box-2, .box-3{
	border-bottom:none;
	}
	
	.accroche-a-propos{
		display:grid;
		background:#B1D5D9;
	}
	
	.texte-accroche{position:initial;}
	
	.bullegraphic{
		text-align:center;
		font-size:60px;
		width:100%;
		line-height:0.3;
		margin:revert;
	}

	.h1-about{
		margin:auto;
		font-size:23px;
		text-align:center !important;
		border:none;
		background:transparent;
		padding:0 25px;
		color:#fff;
	}
	
	.img-accroche{padding-bottom:40px;}
	
	.formulaire_contact{
	display:block;
	}
	
	.wpcf7-form-control-wrap{
		width:100%;
		display:grid;
	}
	
	.champ_msg{width:96%;}
	
	.champ{
		width:90%;
	}
	
	.champ_msg{
		max-width:95%;
		width:95%;
		margin-bottom:30px;
	}
	
	.box{margin-bottom:50px;}

	.bwg-item{width:100% !important;}
	
	.bwg-title1{display:none !important;}
	
}