/* reset */

* {
	margin:0;
	padding:0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  text-rendering: optimizeLegibility;
}

strong {
	font-weight:400;
}

p {
  margin:0;
}

ul {
  margin-left: 0;
  padding: 0;
}


ul, ol, dl {
  margin-top: 0;
  margin-bottom: 0;
}

ol {
  padding-left: 0;
}

dd {
  margin-left: 0;
}

body {
	font-family: "Hanken Grotesk", sans-serif;
}


@font-face {
    font-family: 'cal_roman_capitalsregular';
    src: url('https://chocolat-coulois.fr/wp-content/themes/g5_hydrogen/fonts/calroman-webfont.eot');
    src: url('https://chocolat-coulois.fr/wp-content/themes/g5_hydrogen/fonts/calroman-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://chocolat-coulois.fr/wp-content/themes/g5_hydrogen/fonts/calroman-webfont.woff2') format('woff2'),
         url('https://chocolat-coulois.fr/wp-content/themes/g5_hydrogen/fonts/calroman-webfont.ttf') format('truetype'),
         url('https://chocolat-coulois.fr/wp-content/themes/g5_hydrogen/fonts/calroman-webfont.svg#cal_roman_capitalsregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@keyframes animalogo {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
  
}



#bg {
	background:url("https://chocolat-coulois.fr/wp-content/uploads/2025/09/chocolaterie-saint-etienne-chocolat-saint-etienne-tablette-chocolat-coulois-background-2.jpg");
	width:100%;
	height:720px;
	background-repeat:no-repeat;
	background-position:top left;
	background-size:cover;
	
}

#bg #top {
	background:rgba(0,0,0,0.1);}

#bg #top img {
width:20px;
}

#bg #logo {
	width:240px;
	margin:auto;
	padding-top:200px;
	padding-bottom:50px;
	animation: animalogo 4s;
}

#bg #logo img {
	width:240px;
	margin:auto;
}

.container {
  max-width: 1300px;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
	padding:5px;
}


#bg .container h1, #bg .container p a {
	font-size:0.83em;
	color:#AB852E;
	font-weight:500;
}


#bg .container p a:hover {
	opacity:0.8;
}

#bg #texte-intro h2 {
	display:none;
	padding:30px;
	background:rgba(0,0,0,0.65);
	border:1px solid #AB852E; 
	font-size:2.5em;
	color:#fff;
	font-weight:700;
	text-align:left;
	font-family: "Quattrocento", serif;
}


#footer-home {
	background:#2E1E16;
}

#footer-home .container {
	padding:30px;
}

#logo-footer {
	width:16.33%;
	padding:20px;
}

#logo-footer img {
	width:150px;
	margin:auto;
}

#col-foot {
	width:33.33%;
}

#col-foot h2 {
	color: #fff;
  font-size: 1.15rem;
  line-height: 24px;
  text-decoration: none;
  transition: transform .2s;
	padding-bottom:10px;
}

#col-foot p {
color: #fff;
  font-weight: 500;
	  font-size: 0.8em;
  line-height: 18px;
  text-decoration: none;
  transition: transform .2s;
	text-align:left;
}

#horaires {
	width:33.33%;
	padding:20px;
}

#horaires h2 {
	color: #fff;
  font-size: 1.15rem;
  line-height: 24px;
  text-decoration: none;
  transition: transform .2s;
	padding-bottom:10px;
}

#horaires ul li {
color: #fff;
  font-weight: 300;
	  font-size: 0.85em;
  line-height: 18px;
  text-decoration: none;
  transition: transform .2s;
	text-align:left;
}

#horaires ul {
	list-style:none;
}

#horaires img {
  width: 20px;
}

#horaires p a {
  font-size: 0.83em;
  color: #AB852E;
  font-weight: 500;
}

#horaires p a:hover {
opacity:0.8;
}

#horaires h2:nth-child(2) {

}

#titre h2 {
	font-family: 'cal_roman_capitalsregular';
	color:#AB852E!important;
	font-size:4em;
	text-align:center!important;
	margin-top:75px!important;
	animation: animalogo 4s;
	font-weight:800!important;
}

#titre h3 {
		font-size:1.3em;
	color:#2E1E16!important;
	font-weight:700;
	text-align:center!important;
	font-family: "Quattrocento", serif;
	margin-bottom:10px!important;
}


#titre #arabesque {
	width:180px;
	margin:auto;
}


#titre #arabesque img {
	width:180px;
}

 .et-db #et-boc .et-l .et_pb_section {
    padding: 0px 0;
  }


#texte-courant .marge-3 {
	margin-top:20px!important;
}

#texte-courant h3:last-child {
	margin-top:20px!important;
}

#texte-courant p {
	font-weight:300;
}

#texte-courant h2 {
		font-family: 'cal_roman_capitalsregular';
	color:#AB852E!important;
	font-size:2em!important;
	font-weight:700;	
}

#texte-courant h3 {
	color:#AB852E!important;
	font-size:1.3em!important;
	font-weight:700;
	margin-top:20px;
}

#col-test h2 {
		font-family: 'cal_roman_capitalsregular';
	color:#AB852E!important;
	font-size:2.3em!important;
	font-weight:700;
	
}

#col-test p {
	font-weight:300;
}


#mosa {
	padding:30px!important;
	padding-top:0px!important;
	padding-bottom:0px!important;
}

#mosa-marge {
	margin-bottom:0px!important;
}


#horaires-lien {
	margin-bottom:20px;
}


#bloc-formu {
	font-family: "Hanken Grotesk", sans-serif;

}


#bloc-formu #formu {
	border:1px solid #AB852E;
	padding:30px;
	padding-top:10px;
	padding-bottom:10px;
}


#bloc-formu #formu input, #bloc-formu #formu select, #bloc-formu #formu text-area {
	border:1px solid #AB852E!important;
	
}

#bloc-formu #formu button {
	color:#AB852E!important;
	border:1px solid #AB852E!important;
}

#bloc-formu #formu button:hover {
	color:#fff!important;
	border:1px solid #AB852E!important;
	background: #AB852E!important;
}

.et-db #et-boc .et-l .et_pb_module .wpforms-container .wpforms-field, .et-db #et-boc .et-l .et_pb_module .wp-core-ui div.wpforms-container .wpforms-field {
  padding: 10px 0;
}

.et-db #et-boc .et-l .et_pb_module div.wpforms-container-full:not(:empty) {
	margin-top:10px;
}


.et-db #et-boc .et-l .et_pb_module .wpforms-container .wpforms-field-label {
	font-weight:500;
}

#btn-home-light {
	margin:auto;
	max-width:320px;text-align:center;
}

#btn-home-light a {
font-size: 1.08em;
	  color: #fff;
  font-weight: 500;
	padding:10px;
	  border: 1px solid #fff;
}


#btn-home-light a:hover {

  color: #AB852E;
  font-weight: 500;
	padding:10px;
	  border: 1px solid #AB852E;
	
}
	


@media screen and (max-width: 640px) {
	
	#bloc-formu #formu {
	margin:20px;
}
	
	#bg {
	background-position:center center;
		max-height:640px;
	
}
	#texte-courant {
	padding:30px!important;
	padding-top:0px!important;
	padding-bottom:0px!important;
}
	
 #bg #texte-intro h2 {
	font-size:1.2em;
}
	
	#bg .container h1 {
		display:none;
	}
	
#bg .container p a {
	font-size:0.73em;
}
	
	#footer-home .container {
		display:block;
	}
	
	#col-foot, #logo-footer, #horaires {
		width:90%;
		margin:auto;
	}
	#logo-footer {
		text-align:center;
	}
	
	 #bg .container h1 {
		display:none;
	}
	
	#titre h2 {
  font-size: 2.5em;
		margin-top: 45px;

}
	
	#titre h3 {
  font-size: 1em;
}
	
	#bg #logo {
  padding-top: 100px;
  padding-bottom: 50px;
		width:220px;
}
	
	#bg #logo img {
		width:220px;
	}
	
}