body, table, tr, td, form, input, textarea, select {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;

}

hr {
  border-top: 1px solid silver;
}

.vertical-align {
	display: table-cell;
	vertical-align: middle;
}

.menu-item {
	display: table-cell;
	vertical-align: middle;
	width: 60px;
	text-align: left;
	padding-right: 6px;
	// border-right: 1px solid gainsboro;
	// border-bottom: 1px solid gainsboro;
	// border-top: 1px solid gainsboro;
}

.menu-icon {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding: 6px;
	width: 75px;
	// border-left: 1px solid gainsboro;
	// border-bottom: 1px solid gainsboro;
	// border-top: 1px solid gainsboro;
}

.tab {
	display: table-cell;
	vertical-align: middle;
	padding-left: 25px;
}

.menu-logged-in {
	display: table-cell;
	vertical-align: middle;
	padding-left: 25px;
	text-align: center;
	color: silver;
}

.footer {
	color: gray;
	overflow: hidden;
	padding: 8px;
	background-color: ghostwhite;
	font-size: 12px;
}

a {
	color: #0066CC;
}

td.list-header {
	padding: 5px;
	background-color: gainsboro;
}

table.list {
	border-collapse: collapse;
}

td.list {
	padding: 5px;
	border-top: 1px solid gainsboro;
	vertical-align: middle;
}

input.query {
	border-top: 0px;
	border-right: 0px;
	border-left: 0px;
	border-bottom: 1px solid gainsboro;
	padding: 5px;
}

.warning {
	font-size:14px;
	padding: 5px;
	border:solid 1px crimson;
	font-weight:bold;
	color:crimson;
	background-color:lavenderBlush;
}

.info {
	font-size:14px;
	padding: 5px;
	border:solid 1px lightgray;
	color: gray;
}

.success {
	font-size:14px;
	padding: 5px;
	border:solid 1px forestgreen;
	font-weight:bold;
	color:forestgreen;
	background-color:cornsilk;
}

input[type=button], input[type=submit], input[type=reset] {
	background-color: #0066CC;
	color: white;
	border: none;
	text-decoration: none;
	padding: 6px;
	cursor: pointer;
}

.produit {
	height: 300px;
	width: 160px;
	display:inline-block;
	position: relative;
	text-align: center;
	border: solid 2px #0066CC;
	border-radius: 8px;
	margin: 5px;
	padding: 5px;
	cursor: pointer;
}

.product-name {
	display: block;
	height: 40px;
	font-weight: bold;
}

.add-to-cart {
	font-weight: bold;
	border-radius: 8px;
	font-size: 20px;
	height: 24px;
	width: 24px;
	position: absolute;
	background-color: #0066CC;
	color: white;
	bottom: 5px;
	right: 5px;
}

img.categorie {
	height: 40px;
	width: 40px;
	border-radius: 8px;
	display:inline-block;
	position: relative;
	text-align: center;
	border: solid 2px black;
	margin: 3px;
	padding: 3px;
	cursor: pointer;
}

.dot-ok {
  height: 12px;
  width: 12px;
  background-color: lightgreen;
  border-radius: 50%;
  display: inline-block;
}

.dot-ko {
  height: 12px;
  width: 12px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
}

.left-section {
    width: 65%;
    height: 420px;
    float: left;
    border-collapse: collapse;
	
	overflow: auto;
}

.right-section {
  width: 35%;
  height: 420px;
  float: right;
  border-collapse: collapse;
  
  overflow: auto;
}

.top-section {
  width: 100%;
  height: 80px;
  border-collapse: collapse;
}

.quantity {
	font-weight: bold;
	text-align: center;
	width: 24px;
}

.quantity-change {
	font-weight: bold;
	border-radius: 8px;
	text-align: center;
	display: inline-block;
	font-size: 20px;
	height: 24px;
	width: 24px;
	background-color: #0066CC;
	color: white;
	cursor: pointer;
}

.titre-panier {
	font-weight: bold;
	font-size: 18px;
	margin: 5px;
}

h2 {
	font-size: 18px;
	font-weight: bold;
}

.stats-label {
	display:inline-block;
	text-align:right;
	width: 600px;
	height:20px;
	vertical-align:top;
}

.stats-bar {
	display:inline-block;
	border-bottom:solid 1px silver;
	background-color:#0066CC;
	height:18px;
}

.stats-cnt {
	display:inline-block;
	color:silver;
	height:20px;
	vertical-align:top;
}

/* LANDING PAGE */

.container {
  width: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap; /* permet aux blocs de passer à la ligne si nécessaire */
  width: 100%;
}

.bloc {
  padding: 10px;
  box-sizing: border-box;
}

/* Largeur par défaut (desktop/tablette) */
.bloc-gauche {

  flex: 1; /* prend tout l’espace restant */
  
  display: flex;                 
  justify-content: center;      /* centrage horizontal */
  align-items: center; /* centrage vertical */
}

.bloc-droite {

  background-color: ghostwhite;
  border: solid 1px #0066CC;
	
  width: 300px;
  
  display: flex;                 
  justify-content: center;      /* centrage horizontal */
  align-items: center; /* centrage vertical */
}

.bloc-image {
  width: 100%;
  text-align: center;      /* centrage horizontal */
  margin-top: 10px;
}

.bloc-full {
  width: 100%;
  margin-top: 10px;
}

.landingItem {
	display: flex;
	padding-bottom: 10px;
	align-items: center; /* centrage vertical */
}

.qqoqpc {
	color: #0066CC;
	font-size: 18px;
	font-weight: bold;
}

hr.landing {
	margin-top: 20px;
	border: 0;
  	height: 1px; 
  	background-image: -webkit-linear-gradient(left, #0066CC, white, white);
  	background-image: -moz-linear-gradient(left, #0066CC, white, white);
  	background-image: -ms-linear-gradient(left, #0066CC, white, white);
  	background-image: -o-linear-gradient(left, #0066CC, white, white);
}

/* Responsive : écran ≤ 768px (mobile/tablette portrait) */
@media (max-width: 768px) {
  .bloc-60,
  .bloc-40 {
    width: 100%; /* Empile les blocs sur mobile */
  }
}