@charset "utf-8";
/* CSS Document */

body {
	background: url(../images/background.png);
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	border-top: 7px solid #c51111;
	padding: 10px 0;
	font-size: 1em;
}

h3 {
	font-weight:300;
	display:block;
	margin: 50px 0 20px 0;
	font-size: 1.6em;
}

.subTitle {
	text-transform: uppercase;
	font-weight: 400;
	text-align: center;
	margin: 30px 0 20px 0;
	font-size: 1.5em;
	border-bottom: 1px solid #9e9e9e;
}

.subSubTitle {
	font-weight: 300;
	margin: 30px 0 20px 0;
	font-size: 1.5em;
	border-bottom: 1px solid #9e9e9e;
}


/* colors */

#menu li a:hover {
	color: #c51111;
}
/* menu */
	
#menu ul {
	text-align: center;
/* HORIZ SCROLLBAR PROBLEM TAB/PHONE
	width: 100%;
*/
	list-style: none;
	font-size: 1.2em;
	font-weight: 300;
}
#menu ul li {
	display: inline;
	list-style: none;
}
#menu li a {
	text-decoration: none;
	color: #181818;
	padding: 0 7px 0 25px;
	border-right: 1px solid #181818;
}
#menu li a#prod {
	background: url(../images/menu-icone_produit.png) 0 3px no-repeat;
}
#menu li a#cata {
	background: url(../images/menu-icone_catalogue.png) 0 3px no-repeat;
}
#menu li a#down {
	background: url(../images/menu-icone_download.png) 0 3px no-repeat;
}
#menu li a#cont {
	background: url(../images/menu-icone_contact.png) 0 3px no-repeat;
}
#menu li a#french {
	background: url(../images/flag_french.png) 0 3px no-repeat;
}
#menu li a#dutch {
	background: url(../images/flag_dutch.png) 0 3px no-repeat;
}
#menu li a#english {
	background: url(../images/flag_english.png) 0 3px no-repeat;
	border-right: none;
}
/* banner */

#banner {
	border: 6px solid #fff;
	overflow: hidden;
	-webkit-box-shadow: 0px 2px 8px 0px rgba(00,00,00,0.4);
	box-shadow: 0px 2px 8px 0px rgba(00,00,00,0.4);
	background-color: #fff;
}
#banner #BPIM_container #BPIM_containerPadding {
	padding: 15px;
	background: url(../images/background_etiquette.png) center right no-repeat, url(../images/texture_etiquette.png);
	color: #fff;
}
#banner .BPIM_productName h1 {
	font-weight: 300;
	padding: 0;
	margin: 0;
	font-size: 2em;
}
#banner .BPIM_legalName h2 {
	font-weight: 400;
	padding: 0;
	margin: 0;
	font-size: 1.3em;
}
#banner .BPIM_gtin {
	font-style:italic;
	font-size: 1.1em;
	padding-bottom: 20px;
}
#banner .PCAEM_accreditationInformation {
	padding: 10px 0;
}
#banner #BPIM_images {
	background-color: #fff;
}
/* footer */

#footer {
	text-align: center;
	width: 100%;
	list-style: none;
	font-weight: 600;
	font-size: 0.9em;
	background-color: #c51111;
	color: #fff;
	padding: 15px 0 40px 0;
	margin-top: 50px;
}
#footer li {
	display: inline;
	list-style: none;
	padding: 0 10px 0 5px;
	background:url(../images/bullet_white.png) right center no-repeat;
}
#footer li a {
	color: #fff;
}
#footer li#madeBy {
	background-image: none;
}

.SameProductContainer33 {
	float:left;
	width: 33% !important;
	padding-bottom: 5px;
}
.SameProductContainer50 {
	float:left;
	width: 50% !important;
	padding-bottom: 5px;
}

@media only screen and (max-width: 480px) {
.OtherProductContainer {
	float:left;
	width: 50% !important;
	padding-bottom: 5px;
}
}
@media only screen and (min-width: 481px) {
.OtherProductContainer {
	float:left;
	width: 50% !important;
	padding-bottom: 5px;
}
}
@media only screen and (min-width: 769px) {
.OtherProductContainer {
	float:left;
	width: 25% !important;
	padding-bottom: 5px;
}
}


@media only screen and (min-width: 541px) and (max-width: 620px) {
.SameProductGtin {
	font-size: 0.8em;
}

}
@media only screen and (min-width: 481px) and (max-width: 540px) {
.SameProductGtin {
	font-size: 0.6em;
}

}

@media only screen and (min-width: 481px) and (max-width: 650px) {
.subTitle {
	font-size: 1.0em;
}

}

@media only screen and (max-width: 320px) {
.SameProductGtin {
	font-size: 0.8em;
}
}
@media only screen and (max-width: 320px) {
.OtherProductGtin {
	font-size: 0.8em;
}
}
@media only screen and (max-width: 280px) {
.SameProductGtin {
	font-size: 0.6em;
}
}
@media only screen and (max-width: 280px) {
.OtherProductGtin {
	font-size: 0.6em;
}
}
/* Styles pour le bandeau "N'est plus produite" SUR LE SLIDER de la page produit */
.image-container-with-overlay {
    position: relative; /* Nécessaire pour positionner le bandeau en absolu à l'intérieur */
    display: inline-block; /* Ou block, selon ton layout du slider */
    line-height: 0; /* Pour éviter un espace sous l'image si la div prend de la hauteur */
}

.discontinued-banner-slider {
position: absolute;
    top: 30px;
    left: -25px;
    background-color: rgba(200, 0, 0, 0.85);
    color: white;
    padding: 20px 20px;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
    z-index: 10;
    transform: rotate(-30deg);
    transform-origin: center center;
    white-space: nowrap;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* Si tu veux que le bandeau ne dépasse pas trop, tu peux ajouter overflow: hidden au parent du slider si besoin,
   mais le positionnement absolu devrait suffire pour le superposer. */

.OtherProductContainerCatalog {
	float:left;
	width: 50% !important;
	padding-bottom: 5px;
	height: 300px;
}

.OtherProduct, .SameProduct {
	margin: 0 10px;
	border: 6px solid #fff;
	-webkit-box-shadow: 0px 2px 8px 0px rgba(00,00,00,0.4);
	box-shadow: 0px 2px 8px 0px rgba(00,00,00,0.4);
	background-color: #fff;
}


.SameProductEtiquette, .OtherProductEtiquette {
	background: url(../images/texture_etiquette.png);
	color: #fff;
	padding: 8px;
	font-size: 0.8em;
	font-weight:600;
	height: 50px;
    text-align: center;
}
.SameProductEtiquette a, .OtherProductEtiquette a {
	color: #fff;
	text-decoration:none;
}
.OtherProductPlusEnVente{
	color: red;
	padding: 8px;
	font-size: 1.2em;
	font-weight:600;
	height: 50px;
    text-align: center;
    position: relative;
	margin: -66px 0 0 0px;
	transform: rotate(26deg);
	-ms-transform: rotate(26deg); /* IE 9 */
    -webkit-transform: rotate(26deg); /* Safari */
     text-shadow: 2px 2px 2px #000000;
}
.OtherProductPlusEnVente a {
	color: red;
	text-decoration:none;
}


.externalLink{
	text-decoration:none;
}
#NPM_nutrientDetail_container{
	padding-top:7px;
	text-align:center;
	
}
.NPM_nutrientDetail {
	height:100px;
	float:left;
	width: 13% !important;
	margin-right:10px;
	-webkit-box-shadow: 0px 2px 8px 0px rgba(00,00,00,0.4);
	box-shadow: 0px 2px 8px 0px rgba(00,00,00,0.4);
	background-color: #fff;
	position:relative;
}
.NPM_nutrientDetail .NPM_nutrientDetail_GDA{
	position:absolute;
  bottom:0;
  width:100%;
  font-weight: bold;
  font-style:oblique;
}

.NPM_nutrientDetail .NPM_nutrientDetail_quantityContained
{
	position:absolute;
  bottom:30px;
  width:100%;
  font-weight: bold;
}
.NPM_nutrientDetail h4{
	margin-top:2px;
}

#NPM_nutrientDetail_ENER h4{
	color:#9974b6;
}
#NPM_nutrientDetail_ENER_GDA{
	background-color:#8558a7;
	background-image:url(../images/bg_NPM_nutrientDetail_ENER_GDA.jpg);
	background-repeat:no-repeat;
	color:white;
}
#NPM_nutrientDetail_FAT h4{
	color:#b34c81;
}
#NPM_nutrientDetail_FAT_GDA{
	background-color:#b34c81;
	background-image:url(../images/bg_NPM_nutrientDetail_FAT_GDA.jpg);
	background-repeat:no-repeat;

	color:white;
}
#NPM_nutrientDetail_FASAT h4{
	color:#f1665f;
}
#NPM_nutrientDetail_FASAT_GDA{
	background-color:#f1665f;
	background-image:url(../images/bg_NPM_nutrientDetail_FASAT_GDA.jpg);
	background-repeat:no-repeat;
	color:white;
}
#NPM_nutrientDetail_CHOAVL h4{
	color:#fdc066;
}
#NPM_nutrientDetail_CHOAVL_GDA{
	background-color:#fdc066;
	background-image:url(../images/bg_NPM_nutrientDetail_CHOAVL_GDA.jpg);
	background-repeat:no-repeat;
	color:white;
}
#NPM_nutrientDetail_SUGAR h4{
	color:#a5d165;
}
#NPM_nutrientDetail_SUGAR_GDA{
	background-color:#a5d165;
	background-image:url(../images/bg_NPM_nutrientDetail_SUGAR_GDA.jpg);
	background-repeat:no-repeat;
	
	color:white;
}
#NPM_nutrientDetail_PRO h4{
	color:#3eac6c;
}
#NPM_nutrientDetail_PRO_GDA{
	background-color:#3eac6c;
	background-image:url(../images/bg_NPM_nutrientDetail_PRO_GDA.jpg);
	background-repeat:no-repeat;
	color:white;
}
#NPM_nutrientDetail_SALTEQ h4{
	color:#33c3f5;
}
#NPM_nutrientDetail_SALTEQ_GDA{
	background-color:#33c3f5;
	background-image:url(../images/bg_NPM_nutrientDetail_SALTEQ_GDA.jpg);
	background-repeat:no-repeat;
	color:white;
}
#GDA_DEF{
	font-size:0.7em;

  font-weight: bold;
  font-style:oblique;
}
.PCAEM_accreditationInformationIMG{
padding-left:5px;

}
/* static_assets/css/dupont.css ou style.css */

/* ... (tes styles existants) ... */

/* Pour le Profil de Dégustation */
.tasting-notes-list {
    list-style-type: none; /* Supprime les bullet points */
    padding-left: 0;       /* Supprime le padding par défaut des listes si besoin */
    margin-left: 0;        /* Supprime la marge par défaut des listes si besoin */
}

.tasting-notes-list li {
    display: flex;            /* Active Flexbox pour l'alignement des enfants */
    justify-content: space-between; /* Met le label à gauche et la valeur + barre à droite */
    align-items: center;      /* Centre verticalement les éléments sur la ligne */
    margin-bottom: 8px;       /* Espace entre les items de la liste */
    padding-bottom: 8px;      /* Espace sous chaque item */
    border-bottom: 1px solid #eee; /* Ligne de séparation optionnelle */
}

.tasting-notes-list li:last-child {
    border-bottom: none; /* Pas de bordure pour le dernier élément */
    margin-bottom: 0;
    padding-bottom: 0;
}

.tasting-note-label {
    flex-grow: 1;             /* Permet au label de prendre l'espace disponible à gauche */
    /* Optionnel: si tu veux un padding à droite du label */
    /* padding-right: 10px; */ 
}

.tasting-note-value {
    /* Flexbox s'occupe déjà de le pousser à droite grâce à justify-content: space-between sur le li */
    /* Si tu n'utilises pas flexbox sur le li, tu pourrais utiliser : */
    /* float: right; */
    /* text-align: right; */ /* Si le span prend toute la largeur restante */
    margin-left: 10px; /* Espace entre le label (ou la barre) et la valeur */
    white-space: nowrap; /* Empêche la valeur de passer à la ligne */
}

.tasting-note-bar-container {
    width: 100px; /* ou une autre largeur fixe pour la barre */
    height: 10px;
    background-color: #e0e0e0; /* Couleur de fond de la barre vide */
    border-radius: 5px;
    margin-left: 10px; /* Espace entre le label et la barre */
    flex-shrink: 0; /* Empêche la barre de rétrécir si l'espace manque */
}

.tasting-note-bar {
    height: 100%;
    background-color: #c51111; /* Couleur de ta marque (rouge Dupont) ou autre */
    border-radius: 5px;
    transition: width 0.5s ease-in-out; /* Animation optionnelle */
}

/* Assurer que le conteneur de la colonne Profil de Dégustation se comporte bien */
.tasting-column {
    /* Pas besoin de styles spécifiques ici si le parent tasting-instructions-and-profile-wrapper utilise grid */
}

/* Styles pour le wrapper des deux colonnes (Dégustation et Profil) */
/* Ces styles sont déjà en ligne dans ton template, mais voici comment les mettre en CSS */
/*
.tasting-instructions-and-profile-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    clear: both;
    margin-top: 20px;
    margin-bottom: 20px;
}
*/
/* Ajout pour le conteneur de la grille de produits du catalogue */
.product-grid {
    overflow: hidden; /* Contient les flottants internes (clearfix) */
    /* Vous pouvez aussi utiliser display: grid ou flexbox pour une approche plus moderne */
}

/* Assurer que les conteneurs de catégorie (Bio, Traditionnel) sont bien séparés */
#OtherProductsBio, 
#OtherProductsTrad, 
#OtherProductsUncategorized {
    clear: both; /* S'assure que chaque section commence sur une nouvelle "ligne" */
    margin-bottom: 30px; /* Ajoute un peu d'espace entre les sections de catégorie */
}

/* Optionnel: Si les images à l'intérieur des .OtherProduct ont des tailles variables, 
   cela peut aider à uniformiser la hauteur du conteneur d'image. */
.OtherProduct div:first-child { /* Cible le div qui contient l'image */
    /* min-height: 200px; */ /* Ajustez cette valeur selon la hauteur désirée pour l'image */
    /* display: flex; */
    /* align-items: center; */ /* Centre l'image verticalement si elle est plus petite */
    /* justify-content: center; */ /* Centre l'image horizontalement */
}

/* Optionnel: Pour les .OtherProductContainerCatalog, si vous voulez une grille plus robuste
   et que vous ciblez des navigateurs modernes, Flexbox ou CSS Grid sont de meilleures options.
   Voici un exemple très basique avec Flexbox pour .product-grid : */

/*
.product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; // Espace entre les éléments
    justify-content: flex-start; // ou space-around, space-between
    overflow: visible; // Enlever overflow: hidden si vous utilisez flex/grid
}

.OtherProductContainerCatalog {
    width: 48%; // Exemple, ajustez selon le nombre de colonnes souhaité et le gap
    // float: none; // Plus besoin de float avec flexbox
    // margin-left: 0; // Géré par gap ou justify-content
    // padding-bottom: 5px; // Conserver si besoin
}

// Media queries pour ajuster le width en fonction de la taille de l'écran
@media only screen and (min-width: 769px) {
    .OtherProductContainerCatalog {
        width: 23%; // Pour environ 4 colonnes
    }
}
@media only screen and (max-width: 480px) {
    .OtherProductContainerCatalog {
        width: 100%; // Une colonne sur les très petits écrans
    }
}
*/
.category-sections-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colonnes responsives */
    /* Ou pour deux colonnes fixes sur des écrans plus larges:
       grid-template-columns: 1fr 1fr; (si la largeur est suffisante)
    */
    gap: 20px; /* Espace entre les sections */
    align-items: start; /* Aligne le haut des titres de section */
    margin-bottom: 30px;
}

.category-section {
    /* Pas besoin de float ou de width spécifique ici, la grille s'en charge */
}

/* La section non catégorisée prendra toute la largeur par défaut */
.category-section-fullwidth {
    clear: both; /* S'assurer qu'elle est en dessous des colonnes flottantes si Grid/Flex n'est pas utilisé partout */
    width: 100%;
}

/* Vérifiez les styles de .subTitle pour qu'ils soient cohérents */
.subTitle {
    text-transform: uppercase;
    font-weight: 400;
    text-align: center;
    margin: 30px 0 20px 0; /* Les marges verticales identiques sont importantes */
    font-size: 1.5em;
    border-bottom: 1px solid #9e9e9e;
    padding-top: 0; /* Assurez-vous qu'il n'y a pas de padding qui varie */
    box-sizing: border-box; /* Bon à avoir pour éviter les surprises de largeur/hauteur */
}

.category-sections-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
    gap: 20px; /* Espace entre les colonnes */
    align-items: start; /* Important pour aligner le haut des titres */
    margin-bottom: 30px;
}

@media (max-width: 768px) { /* Sur écrans plus petits, passer à une seule colonne */
    .category-sections-wrapper {
        grid-template-columns: 1fr;
    }
}

.category-section {
    /* Pas besoin de width ou float ici, la grille s'en occupe */
}

.category-section-fullwidth {
    clear: both; /* S'assurer qu'elle est en dessous si d'autres flottants sont encore présents */
    width: 100%;
    margin-top: 30px; /* Espace par rapport aux colonnes du dessus */
}

.subTitle {
    /* ... vos styles existants ... */
    margin-top: 0; /* S'assurer que la marge du haut est gérée par le conteneur ou est la même partout */
    padding-top: 20px; /* Ou un padding si besoin pour l'espace au-dessus du texte du titre */
    /* Veillez à ce que les hauteurs des subTitle ou l'espace au-dessus soient cohérents */
}