html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size:12px;
  color:#8DC0BC;
  color:#125382;

  display: flex;
  flex-direction: column;  
}

div, p {
  margin:0;
  padding:0;
}
.montserrat-regular {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.montserrat-medium {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.montserrat-bold {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.playfair-display-italic {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
}
.bold {
  font-weight:700;
}

header {
	background-color: #fff;
	margin-left: auto;
	margin-right: auto;
	width: 1280px;
	min-height: 100px;
	position: relative;
	text-align: center;
	padding-top: 0px;
}
#d-greyline {
	width: 100%;
	height: 1px;
	background-color: #8DC0BC;
  background-color:#125382;
}
footer {
  margin-bottom:24px;
  background-image: none; 
  height: 36px;
  border-top:1px #cccccc transparent;
  margin-top: auto;
}
h1, h2, h3, h4 {
  margin:0px;
  padding:0px;
}
#p-4logo {
	width: 325px;
	height: 100px;
	background-image: url("/css/images/logo-site-lrdlm.png");
	position: absolute;
	top: 0px;
  background-repeat: no-repeat;
  background-size: contain;
}
#p-4logo a {
  width:325px;
  height:100px;
  display:inherit;
}
#panier {
  width:128px;
  height:30px;
  cursor: pointer;
  background-repeat: no-repeat;
  position:absolute;
  right: 10px;
  top: 35px;
  background-color:#FD6800;
  color:#ffffff;
  border-radius:12px;
}
#basket-icon {
  background-image: url("/css/imgfront/basket-icon.png");
  width:21px;
  height:21px;
  position:relative;
  display: inline-block;
  top:4px;
  left: -40px;
}
#basket-text {
	position: absolute;
	display: inline-block;
	top: 3px;
	left: 40px;
	width: 78px;
	height: 24px;
	background-color: #FD6800;
  color: #ffffff;
  line-height: 2em;
  font-size:1em;
  text-align: center;
}
#account {
  width:128px;
  height:30px;
  cursor: pointer;
  background-repeat: no-repeat;
  position:absolute;
  right: 150px;
  top: 35px;
  background-color:transparent;
  color:#125382;
  border-radius:12px;
  background-position: top 4px left 10px;
  background-image: url("/css/imgfront/account-icon.png");
}
#account:hover {
  background-image: url("/css/imgfront/account-icon-on.png");
}
#account-icon {
  background-image: url("/css/imgfront/account-icon.png");
  width:21px;
  height:21px;
  position:relative;
  display: inline-block;
  top:4px;
  left: -40px;
}
#account-icon1 {
	display: inline-block;
	position: absolute;
	width: 24px;
	height: 24px;
	left: 8px;
	top: 3px;
}
#account-text {
	position: absolute;
	display: inline-block;
	top: 3px;
	left: 40px;
	width: 78px;
	height: 24px;
	background-color: transparent;
  color: #125382;
  line-height: 2em;
  font-size:1em;
  text-align: center;
}
#accroche {
  font-weight: 500; /*medium*/
  font-style: normal;
  font-size:1.6em;
}

#pageheadergen {
  /*background-image: url('imgfront/header_home.png');*/
  background-repeat: no-repeat;
  background-image: 
        linear-gradient(to bottom, rgba(141, 192, 188, 1), rgba(141, 192, 188, 0.2)),  url('../../css/imgfront/header_home.png');
  /*background-size: cover;  /* Assure que l'image couvre tout le div */
  background-blend-mode: overlay;  /* Mélange le dégradé avec l'image */  
  position:relative;      
}

#pageheader {
  background-repeat: no-repeat;
  background-blend-mode: overlay;  /* Mélange le dégradé avec l'image */  
  position:relative;      
}

/*#divmain {
  margin-right:auto;
  margin-left:auto;
}*/

.s-pageheader {
	width: 100%;
	aspect-ratio: 3.2737 / 1;
	margin-left: auto;
	margin-right: auto;
	background-size: contain;
}

h1 {
  font-weight: 700;
  text-align:center;
  font-size:5.16em;
  color:#ffffff;
/*  padding-top:126px;*/
  padding-top:9%;
}
h2, h3, h4 {
  font-weight: 700;
  text-align: center;
}

h2 {
  padding-top:78px;
  font-size:4em;
}

h3 {
  padding-top:48px;
  font-size:2.67em;
}

h4 {
  padding-top:24px;
  font-size:2em;
  border-bottom: 1px solid #8DC0BC;
  border-bottom: 1px solid #125382;
}

#crevette {
  width:102px;
  height:92px;
  position:absolute;
  background-image: url("imgfront/crevette_back.png");
  background-size: contain;
  background-repeat: no-repeat;
}

#st-jacques {
  width:208px;
  height:205px;
  position:absolute;
  background-image: url("imgfront/st-jacques_back.png");
  z-index:1;
  background-size: contain;
  background-repeat: no-repeat;
}

#fish {
	bottom: 0px;
	right: 0px;
	width: 180px;
	height: 171px;
	position: absolute;
	background-image: url("imgfront/poisson_angle.png");
  background-size: contain;
  background-repeat: no-repeat;
}

#s-engagements {
/*  width:1280px;*/
  height:297px;
  background-color: #F3F3F3;
  margin-top:64px;
  position:relative;
  margin-left: auto;
  margin-right: auto;
}
#s-engagements h3 {
  padding-top:48px;
  font-size:2.67em;
}
#d-engagements {
  width:640px;
  margin-left:auto;
  margin-right: auto;
  margin-top:40px;
  text-align: center;
}

#d-engagements article.a-vignettes {
  width:160px;
  height:100px;
  display: inline-block;
  margin-right: 25px;
  margin-left: 26px;
  text-align: center;
  color:#125382;
}

#p-hometruck, #p-homeflack, #p-homemap  {
  margin-left:auto;
  margin-right:auto;
}
#p-hometruck  {
  width:68px;
  height:48px;
  background-image: url("imgfront/home_truck.png");
  background-repeat: none;
}

#p-homeflack {
  width:54px;
  height:54px;
  background-image: url("imgfront/home_flake.png");
  background-repeat: none;
}

#p-homemap {
  width:55px;
  height:54px;
  background-image: url("imgfront/home_map.png");
  background-repeat: none;
}

#d-engagements p.p-libengagement {
  font-weight:700;
  font-size:1em;
  margin-top:16px;
}
#d-engagements p.p-libengagement span {
  font-weight:400;
}
#s-bottom {
/*  width:1280px;*/
  margin-left: auto;
  margin-right: auto;
  background-color: #8DC0BC;
  background-color: #125382;
  color:white;
}

#s-bottom a, #d-left a {
  text-decoration: none;
  color:#ffffff;
  border-bottom:none;
}
#s-bottom a:hover {
  border-bottom: 4px solid #ffffff;
}
#s-bottom > div:first-child {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding: 36px 0px;
	width: 100%;
}
#d-left a, a.aforgentext {
  color:#8DC0BC;
  color: #125382;  
  cursor:pointer;
  text-decoration: none;
}

#d-left a:hover, a.aforgentext:hover {
  border-bottom: 4px solid #8DC0BC;
  border-bottom: 4px solid #125382;
}

#p-logo {
  height:96px;
  width:188px;
  border-bottom:2px white solid;
}
.center {
  text-align:center;
}
.d-bottom {
  display: inline-block;
  width:320px;
  margin-top:16px;
  vertical-align: top;
}
.d-bottom p.p-ftitle {
  font-size:1.33em;
  font-weight:700;
  margin-bottom:16px;
}
.d-bottom p.p-ftext {
  line-height:2em;
  font-size:1.2em;
}

a.forroundbtn, button.forroundbtn {
  text-decoration: none;
  padding: 8px 12px;
  background-color: #FD6800;
  margin-top: 12px;
  display: inline-block;
  border-radius: 12px;
  color: white;
  font-weight: 700;
  font-size: 1em;
  border:1px #FD6800 solid;
  cursor:pointer;
}

a.forroundbtn:hover, button.forroundbtn:hover {
  background-color: #FFFFFF;
  color:#FD6800;
}

.txtgeninput {
  border: 1px solid #F3F3F3;
  font-size: 1em;
  width: 100%;
  line-height: 18px;
  letter-spacing: 1px;
  padding-bottom: 8px;
  padding-top: 8px;
  background-color: #FFFFFF;
  padding-left:4px;
  border-radius:4px;
}
select.txtgeninput {
  padding-top:8px;
  padding-bottom:8px;
/*  opacity:0.5;*/
}
.txtgeninput:invalid {
  background-color:#FD6800;    
}
input[type=number].txtgeninputsmall {
  width:70px;
  text-align:right;
} 

.password {
	position: relative;
}
p.gentext {
  font-size: 1.4em;
}

.adjust {
  max-width:1230px;
  margin:auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  font-size:1.2em;
}    
thead, tbody, tfoot {
  color: grey;
  /* height:5em; */
  text-align:left;
/*      text-transform: uppercase;*/
}
tfoot {
  border-bottom:none;
}
thead tr,  tbody tr {
  border-bottom: 1px grey solid;
  height:5em;
}
thead tr th,  tbody tr td {
  padding:8px 4px;
}
tbody tr td, tfoot tr td {
  color:#125382;
}
table a.forroundbtn {
  font-size:0.8em;
  margin-top:0px;
}




#windialog {
  position:absolute;
  top:0px;
  left:0px;
  background-color:#fafafa;
  opacity:0.5 ;
  background-image:url(/images/Loading_icon.gif);
  background-position: center;
  background-repeat: no-repeat;
}
.unmask {
  cursor: pointer;
  background: url(../images/eye-password.png);
  background-size: 28px 18px;
  background-repeat: no-repeat;
  width: 30px;
  height: 20px;
  border: none;
  position: absolute;
  bottom: 8px;
  right: 16px;
}
.ushow {
  background: url(../images/no-eye-password.png);
  background-size: 28px 18px;
  background-repeat: no-repeat;
}

.ulerreurs {
  padding: 0px 4px 0px 4px;
  font-size: 1em;
  margin: 0px;
  list-style:none;
  color:#ffffff;
}

/***************************************************
Dialogs et messages
****************************************************/

#popupContainer, #popupWindow {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
	height: 200px;
	background-color: white;
	border: 1px solid rgb(128, 128, 128);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	display: none;
	border-radius: 16px;
}

#divboxcnxpopup {
	margin: auto;
	width: 100%;
	max-width: 750px;
	min-height: 320px;
	background-color: #4e95c6;
	opacity: 1;
	margin-top: 56px;
	position: relative;
	color: #ffffff;
	font-size: 1.339em;
	text-align: center;
	/* padding-top: 40px; */
}

#windialog, #dialog {
  position:fixed;
  top:0px;
  left:0px;
  background-color:#ffffff;
  opacity:0.8 ;
  background-image:url(images/Loading_icon.gif);
  background-position: 50% 250px;
  background-repeat: no-repeat;
  z-index:6000;
}
/* CSS Document */
#popupContainer, #popupWindow {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: white;
  border: 1px solid rgb(128, 128, 128);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* add box shadow */
  display: none;
  border-radius: 16px;
  z-index:1001;
}

#popupContainer p, #popupWindow p {
  margin: 8px;
}

#popup-button {
	font-family: "Raleway", sans-serif;
  display: block;
  margin: 20px auto;
}

#popup-button .fordlgbtn, #popup-button .fordlgbtn:hover, #popup-button .fordlgbtnsmall, #popup-button .fordlgbtnsmall:hover {
	display: inline-block;
	border: 2px solid #f4783d;
	background-color: #f4783d;
	color: white;
	border-radius: 24px;
	font-size: 12px;
	font-weight: bold;
/*	min-width: 130px;*/
	cursor: pointer;
}

#popup-button .fordlgbtn:hover, #popup-button .fordlgbtnsmall:hover, #popup-button .isactive {
	border: 2px solid #f4783d;
	background-color: white;
	color: #f4783d;  
	text-decoration: none;
}

#popup-button .forbntcenter {
	margin-left: auto;
	margin-right: auto;
}

#popup-button .fordlgbtn {
	max-width: 300px;
	margin-top: 12px;
	margin-left: 8px;
	margin-right: 8px;
}

#popup-button .fordlgbtn, #popup-button .fordlgbtnsmall {
	padding: 4px 8px;
}
.bodypopuptext {
  font-size:1.2em;
}
/***************************************************
FIn Dialogs et messages
****************************************************/

@media only screen and (max-width: 1300px) {
  header {
    width: 1230px;
  }
}

@media only screen and (max-width: 1280px) {
  header {
    width: 100%;
    background-size:contain;
  }
}

@media only screen and (max-width: 1024px) {
  h2 {
    font-size:3.2em;
    padding-top:62px
  }
  header {
    min-height:80px;
  }
  #p-4logo, #p-4logo a {
    width: 260px;
    height:80px;
  }
  #account {
    top:28px;
    right: 140px;
  }
  #panier {
    top: 28px;
    right:8px;
  }
  #fish {
    width: 144px;
    height: 137px;
  }
  #crevette {
    width: 82px;
    height: 74px;
  }  
  #s-bottom > div:first-child {
    text-align: center;
    padding-top: 29px;
  }
  .d-bottom {
    width:290px;
  }
  #st-jacques {
    width: 134px;
    height:164px;
  }
  #s-engagements {
    height: 237px;
    margin-top: 51px;
  } 
  #s-engagements h3 {
    padding-top:38px;
    font-size:2.136em;
  }
  .d-bottom {
    width:256px;
  }
  .d-bottom p.p-ftitle {
    font-size:1.0640em;
    margin-bottom: 13px;
  }
  .d-bottom p.p-ftext {
    line-height: 1.6em;
    font-size:0.96em;
  }
}

@media only screen and (max-width: 768px) {
  #st-jacques {
    width: 138px;
    height: 138px;
  }
}

@media only screen and (max-width: 600px) {
  #st-jacques {
    width: 107px;
    height: 107px;
  }
  #crevette {
    width: 79px;
    height: 72px;
  }  
}

@media only screen and (max-width: 480px) {
  body {
    font-size:8px;
  }
  h1 {
    font-size:4em;
  }
  #account-text, #basket-text {
    font-size:1.4em;
  }
  #p-4logo {
    width: 230px;
    top: 15px;
  }  
}

@media only screen and (max-width: 320px) {
  h1 {
    font-size:3em;
  }
}