/*
	custom.css

	Surcharge du thème Designnailart : ce fichier est prévu pour contenir uniquement des ajustements locaux
	(sans modifier `screen.css`), et doit être chargé après `screen.css` via le paramètre "css" du site.
*/

.table-ingredients {
  border-collapse: collapse;
  width: 100%;
}

.table-ingredients td,
.table-ingredients th {
  padding: 8px 10px;
  border-bottom: 1px solid #ddd;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}

/* Style des puces circulaires */
.puce {
  display: inline-block;
  width: 14px; /* légèrement plus grand */
  height: 14px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  border: 1px solid #444; /* fin contour gris foncé */
}

/* Couleurs plus vives */
.puce.ok {
  background-color: #5fc211; /* vert pétant */
}

.puce.ban {
  background-color: #ff4136; /* rouge vif */
}

.puce.hema {
  background-color: #ff851b; /* orange plus vif */
}

/* HEADER - Couleurs icônes : orange (#FF9600) -> rose (#E37494) */
.caddie-button,
.minicaddie_md,
a:hover .minicaddie_md,
.header_user {
	color: #E37494 !important;
}

.videotiktok-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.videotiktok-item {
  flex: 1 1 325px;
  max-width: 325px;
}

.videotiktok-item iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
}

@media (max-width: 768px) {
  .videotiktok-container {
    flex-direction: column;
    align-items: center;
  }
}

.custom-section-ANT {
    color: #656464; /* Couleur du texte */
    padding: 15px;
    margin: 10px 0;
    border-radius: 0; /* Retirer les coins arrondis */
    font-size: 18px;
    font-weight: normal;
    text-align: left;
    font-family: Arial, sans-serif; /* Utilisation de la police Arial */
    letter-spacing: 3px; /* Espacement entre les lettres */
    line-height: 1.2; /* Hauteur de ligne */
    border-bottom: 2px solid #656464; /* Fine bordure grise en bas */
}


.custom-top-section-ANT {
    color: #656464; /* Couleur du texte */
    padding: 15px;
    margin: 10px 0;
    border-radius: 0; /* Retirer les coins arrondis */
    font-size: 18px;
    font-weight: normal;
    text-align: left;
    font-family: Arial, sans-serif; /* Utilisation de la police Arial */
    letter-spacing: 3px; /* Espacement entre les lettres */
    line-height: 1.2; /* Hauteur de ligne */
    border-bottom: 2px solid #656464; /* Fine bordure grise en bas */
    margin-left: 300px; /* Marge à gauche */
}
/* Pour les mobiles, suppression de la marge à gauche */
@media (max-width: 768px) {
    .custom-top-section-ANT {
        margin-left: 0;
    }
}

.composition-toggle {
    cursor: pointer;
    background-color: #f8f8f8; /* Couleur de votre choix */
    padding: 15px;
    text-align: left;
    width: 100%;
    border: none;
    font-size: 18px;
    font-weight: bold;
    /* Retirer les arrondis du haut si ajoutés précédemment */
    border-radius: 0; /* Annule les arrondis pour la zone de titre */
}

.composition-desc-arrow {
    float: right;
    transition: transform 0.5s ease;
}

.composition-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    background-color: #f2e1f2;
    padding: 0 10px; /* Élimine le padding initial pour éviter tout affichage indésirable */
    font-size: 18px;
    /* Appliquer les arrondis uniquement en bas */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}


.video-toggle {
    cursor: pointer;
    background-color: #f8f8f8; /* Couleur de votre choix */
    padding: 15px;
    text-align: left;
    width: 100%;
    border: none;
    font-size: 18px;
    font-weight: bold;
    border-radius: 0; /* Annule les arrondis pour la zone de titre */
}

.video-desc-arrow {
    float: right;
    transition: transform 0.5s ease;
}

.video-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    background-color: #f2e1f2;
    padding: 0 10px; /* Élimine le padding initial pour éviter tout affichage indésirable */
    font-size: 18px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}



.product-video-toggle {
    cursor: pointer;
    background-color: #f8f8f8; /* Couleur de votre choix */
    padding: 15px;
    text-align: left;
    width: 100%;
    border: none;
    font-size: 18px;
    font-weight: bold;
    border-radius: 0; /* Annule les arrondis pour la zone de titre */
}

.product-video-desc-arrow {
    float: right;
    transition: transform 0.5s ease;
}

.product-video-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    background-color: #f2e1f2;
    padding: 0 10px; /* Élimine le padding initial pour éviter tout affichage indésirable */
    font-size: 18px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* HEADER - Bouton de recherche (version "classique") : fond orange -> rose */
#recherche .btn-header_search {
	background-color: #E37494 !important;
	border-color: #E37494 !important;
	color: #FFFFFF !important;
}

/* HEADER - Survol/focus/actif du bouton de recherche (version "classique") */
#recherche .btn-header_search:hover,
#recherche .btn-header_search:focus,
#recherche .btn-header_search:active,
#recherche .btn-header_search.active {
	background-color: #E37494 !important;
	border-color: #E37494 !important;
	color: #FFFFFF !important;
}

/* HEADER - Ne pas couper les dropdowns */
#main_header,
#main_header .navbar,
#main_header .navbar-inner,
#main_header .container {
	overflow: visible !important;
}

/* HEADER - Bandeau "Ajout sur commande en cours" */
.dna-ajout-shipping-banner.alert {
	margin: 10px 0;
	border-color: #ffd6e3;
	border-left: 4px solid #E37494;
	background-color: #fff5f8;
	color: #333333;
}

.dna-ajout-shipping-banner.alert strong {
	color: #E37494;
}

.dna-ajout-shipping-banner.alert .close {
	color: #E37494;
	opacity: 0.7;
}

.dna-ajout-shipping-banner.alert .close:hover,
.dna-ajout-shipping-banner.alert .close:focus {
	opacity: 1;
}

/* HEADER - Layout stable : 3 zones fixes (gauche / centre / droite) */
#main_header .navbar-header.dna-header-actions {
	float: none !important;
	width: 100%;
}

#main_header .dna-header-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 20px;
	min-height: 120px;
	padding: 18px 0;
}

/* Desktop: la top bar doit s'aligner sur la largeur du site (menu en 1140px) */
@media (min-width: 768px) {
	#main_header .dna-header-row {
		max-width: 1140px;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}
}

#main_header .dna-header-left,
#main_header .dna-header-center,
#main_header .dna-header-right {
	display: flex;
	align-items: center;
	/* Desktop: espacement géré par margin sur les icônes (voir plus bas) */
	gap: 0;
	min-width: 0;
}

#main_header .dna-header-left {
	justify-content: flex-start;
	justify-self: stretch;
}

#main_header .dna-header-center {
	justify-content: center;
	justify-self: center;
	/* Si multi_logo_header : conserver un espacement entre les logos */
	gap: 20px;
}

#main_header .dna-header-right {
	justify-content: flex-end;
	justify-self: stretch;
}

#main_header .dna-header-right-core {
	display: flex;
	align-items: center;
	/* Desktop: espacement géré par margin sur les icônes (voir plus bas) */
	gap: 0;
}

/* Desktop: caddie puis compte - Mobile: compte puis caddie */
@media (max-width: 767px) {
	#main_header .dna-header-right-core {
		flex-direction: row-reverse;
	}
}

/* HEADER - Logo : dans le flux, jamais en absolute */
#main_header .dna-header-center .navbar-brand {
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* HEADER - Icônes : desktop 40x40 */
#main_header .dna-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-width: 40px;
	height: 40px;
	min-height: 40px;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	line-height: 1;
}

#main_header .dna-icon-btn:hover,
#main_header .dna-icon-btn:focus,
#main_header .dna-icon-btn:active {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

#main_header .dna-icon-btn .glyphicon,
#main_header .dna-header-account .header_user,
#main_header .caddie-button .glyphicon {
	/* Desktop: taille visuelle des icônes */
	font-size: 30px;
	color: #E37494 !important;
	line-height: 1;
}

/* HEADER - Compte : annule la marge droite historique (screen.css) sur l'icône */
#main_header .dna-icon-btn .header_user {
	margin-right: 0 !important;
}

/* HEADER - Wrappers : pas de marge/padding (les espacements sont sur .dna-icon-btn et #flags) */
#main_header .dna-header-cart,
#main_header #header_login,
#main_header .dna-header-search,
#main_header .dna-header-search-toggle {
	margin: 0 !important;
	padding: 0 !important;
}

/* HEADER - Burger : visible uniquement sur mobile */
@media (min-width: 768px) {
	#main_header .dna-header-toggle {
		display: none !important;
	}
	#main_header .dna-header-search-toggle {
		display: none !important;
	}
	#main_header .dna-header-searchbar-mobile {
		display: none !important;
	}
}

/* HEADER - Responsive : mobile 24x24 */
@media (max-width: 767px) {
	/* Sécurité: si un autre sélecteur Bootstrap gagne, on force quand même le container de la top bar */
	/* Mobile: le bloc gauche ne doit pas être collé au bord */
	#main_header .dna-header-row {
		width: 100vw;
		max-width: 100%;
		min-height: 96px;
		/* Mobile: supprimer le padding bas (le bloc suivant a déjà sa marge) */
		padding: 12px 0 0;
		gap: 12px;
	}
	#main_header .dna-icon-btn {
		/* Mobile: icônes en 24x24 */
		width: 24px;
		min-width: 24px;
		height: 24px;
		min-height: 24px;
	}
	#main_header .dna-icon-btn .glyphicon,
	#main_header .dna-header-account .header_user,
	#main_header .caddie-button .glyphicon {
		font-size: 24px;
	}
	/* Mobile: annule le min-width historique (62px) du thème de base sur le bouton caddie */
	#main_header .caddie-button {
		min-width: 24px !important;
	}
	/* Mobile: annule le min-width historique (46px) sur le wrapper compte */
	#main_header #header_login {
		min-width: 24px !important;
	}
	#main_header .dna-header-toggle {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		padding: 0 !important;
		/* Mobile: marge visible au bord gauche */
		margin: 10px !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}
	#main_header .dna-header-toggle .icon-bar {
		display: block;
		width: 18px;
		height: 2px;
		margin: 2px 0;
		border-radius: 2px;
	}
	#main_header .dna-header-left,
	#main_header .dna-header-right,
	#main_header .dna-header-right-core {
		/* Mobile: espacement géré par margins sur les icônes */
		gap: 0;
	}
	/* Mobile: marge uniforme autour des icônes (espacement ~20px entre icônes) */
	#main_header .dna-header-row .dna-icon-btn,
	#main_header .dna-header-row #flags {
		margin: 10px !important;
	}
	/* Mobile: annule les marges historiques du thème de base sur les wrappers */
	#main_header #header_signin,
	#main_header #header_login {
		margin: 0 !important;
	}
}

/* HEADER - Bouton "burger" (3 barres) : orange -> rose */
#main_header .navbar-default .navbar-toggle .icon-bar {
	background-color: #E37494;
}

/* HEADER - Recherche : desktop à droite / mobile à gauche (deux blocs HTML) */
@media (max-width: 767px) {
	#main_header .dna-header-search--desktop {
		display: none !important;
	}
}
@media (max-width: 767px) {
	/* Mobile: petite animation lors de l'ouverture de la recherche */
	#main_header .dna-header-search-toggle {
		transition: opacity 200ms ease, transform 200ms ease;
		will-change: opacity, transform;
	}
	#main_header.dna-mobile-search-open .dna-header-search-toggle {
		opacity: 0;
		transform: translateY(6px);
		pointer-events: none;
	}
}

/* HEADER - Recherche : champ underline + animation */
#main_header .dna-header-search {
	display: inline-flex;
	align-items: center;
}

#main_header .dna-header-search .dna-search-form {
	margin: 0;
}

/* Desktop: champ + loupe sur une seule ligne (pas de retour à la ligne) */
#main_header .dna-header-search .dna-search-form fieldset {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	border: 0;
}

#main_header .dna-header-search .dna-search-panel {
	flex: 0 0 auto;
	min-width: 0;
	overflow: hidden;
	width: 0;
	opacity: 0;
	pointer-events: none;
	transition: width 260ms ease, opacity 260ms ease;
}

#main_header .dna-header-search.is-open .dna-search-panel {
	opacity: 1;
	pointer-events: auto;
}

#main_header .dna-header-search--desktop.is-open .dna-search-panel {
	width: 240px;
}

#main_header .dna-header-search input.dna-search-input {
	border: 0 !important;
	border-bottom: 1px solid #DDDDDD !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	height: 34px;
	padding: 0 6px;
}

#main_header .dna-header-search .dna-search-btn {
	background: transparent !important;
	border: 0 !important;
}

/* HEADER - Recherche mobile : zone sous le logo, qui pousse le contenu vers le bas */
@media (max-width: 767px) {
	#main_header .dna-header-searchbar-mobile {
		overflow: hidden;
		max-height: 0;
		padding: 0 12px;
		transition: max-height 260ms ease, padding 260ms ease;
	}
	#main_header .dna-header-searchbar-mobile.is-open {
		max-height: 90px;
		padding: 10px 12px 14px;
	}
	#main_header .dna-mobile-search-submit {
		transition: opacity 260ms ease, transform 260ms ease;
		opacity: 0;
		transform: translateX(8px);
	}
	#main_header .dna-header-searchbar-mobile.is-open .dna-mobile-search-submit {
		opacity: 1;
		transform: translateX(0);
	}
	#main_header .dna-searchbar-form .dna-searchbar-fieldset {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0;
		padding: 0;
		border: 0;
	}
	#main_header .dna-searchbar-form .dna-search-input {
		flex: 1 1 auto;
		min-width: 0;
		border: 0 !important;
		border-bottom: 1px solid #DDDDDD !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
		height: 34px;
		padding: 0 6px;
	}
}

/* Mobile: agrandir le logo (~ +50%) */
@media (max-width: 767px) {
	#main_header .dna-header-center .dna-header-logo img {
		/* Mobile: augmenter légèrement la taille du logo */
		max-height: 70px;
		width: auto;
	}
}

/* HEADER - Langues : drapeau sélectionné + dropdown (aucun impact sur le layout) */
#main_header #flags {
	position: relative;
	/* Reset du padding/margin du thème de base (screen.css) : évite les décalages */
	display: flex;
	align-items: center;
	line-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Desktop: marge uniforme autour des icônes + largeur mini des zones clicables */
@media (min-width: 768px) {
	#main_header .dna-icon-btn {
		margin: 10px !important;
	}
	#main_header #flags {
		margin: 10px !important;
	}
	#main_header .caddie-button {
		min-width: 40px;
	}
	#main_header #header_login {
		min-width: 40px;
	}
}

#main_header #flags .dna-flags-selected {
	display: inline-flex;
	align-items: center;
}

#main_header #flags .dna-flags-list {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background: #FFFFFF;
	padding: 8px;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	gap: 8px;
	z-index: 50;
	max-width: calc(100vw - 20px);
}

#main_header #flags.is-open .dna-flags-list {
	display: inline-flex;
	align-items: center;
}

#main_header #flags span.flag_selected {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	cursor: pointer;
}

#main_header #flags .dna-flags-list span.flag_not_selected {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
}

#main_header #flags img {
	/* Desktop: drapeaux à la même taille visuelle que les icônes */
	width: 30px;
	height: 30px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

@media (max-width: 767px) {
	#main_header #flags span.flag_selected,
	#main_header #flags .dna-flags-list span.flag_not_selected {
		width: 24px !important;
		height: 24px !important;
	}
	#main_header #flags img {
		/* Mobile: drapeaux à la même taille que les icônes */
		width: 24px !important;
		height: 24px !important;
	}
	/* Mobile: fixe la hauteur du bloc flags pour l'alignement */
	#main_header #flags {
		height: 24px !important;
		line-height: 0 !important;
		padding: 0 !important;
	}
	#main_header #flags .dna-flags-selected {
		height: 24px !important;
		line-height: 0 !important;
	}
}

/* HEADER - Badge panier : rond gris clair + texte blanc */
#main_header .dna-header-cart .caddie-button {
	position: relative;
}

#main_header .dna-header-cart .minicaddie_badge_xs {
	position: absolute;
	top: 6px;
	right: 4px;
	background-color: #CFCFCF !important;
	color: #FFFFFF !important;
	font-weight: bold;
	border-radius: 999px;
	min-width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	line-height: 1;
	font-size: 11px;
}

@media (max-width: 767px) {
	#main_header .dna-header-cart .minicaddie_badge_xs {
		top: -2px;
		right: -2px;
		min-width: 14px;
		height: 14px;
		padding: 0 3px;
		font-size: 10px;
	}
}

/* HEADER - Dropdown panier : ne sort jamais de l'écran sur mobile */
@media (max-width: 767px) {
	#main_header .dna-header-cart .dropdown-menu,
	#main_header .dna-header-account .dropdown-menu {
		position: absolute !important;
		top: 100% !important;
		right: 12px !important;
		left: auto !important;
		transform: none !important;
		box-sizing: border-box;
		max-width: calc(100vw - 24px) !important;
		max-height: calc(100vh - 140px);
		overflow-y: auto;
		/* Ouvre sous le header (position stable, non ancrée à l'icône) */
		z-index: 2000;
	}

	/* Mobile: la table minicaddie doit s'adapter à la largeur disponible (évite tout overflow horizontal) */
	#main_header .dna-header-cart .dropdown-menu .minicaddie {
		width: 100% !important;
	}
}

/* HEADER - Hover desktop : "hop" léger */
@keyframes dnaIconHop {
	0% { transform: translateY(0); }
	45% { transform: translateY(-10px); }
	100% { transform: translateY(0); }
}

@media (min-width: 768px) {
	#main_header .dna-icon-btn:hover {
		animation: dnaIconHop 360ms ease;
	}
	#main_header #flags a:hover img,
	#main_header #flags .flag_selected:hover img {
		animation: dnaIconHop 360ms ease;
	}
}

/* ============================================================
   MENU PRINCIPAL (.main_menu_wide)
   ============================================================ */

/* MENU - Fond : bleu (#0b3142) -> blanc */
.main_menu_wide,
#menu1 li {
	background-color: #FFFFFF !important;
}

/* MENU - Bordure fine en haut et en bas (gris clair) */
.main_menu_wide {
	border-top: 1px solid #DDDDDD !important;
	border-bottom: 1px solid #DDDDDD !important;
}

/* MENU - Couleur des liens : gris #555 (desktop + mobile) */
.main_menu_wide .navbar-nav > li > a,
.main_menu_wide .navbar-nav > li > a:visited,
.main_menu_wide .navbar-nav > li > a:hover,
.main_menu_wide .navbar-nav > li > a:focus,
.main_menu_wide .navbar-nav > li.active > a,
.main_menu_wide .navbar-nav > li.open > a {
	color: #555555 !important;
}

/* MENU - Sous-menus mobile : texte visible sur fond blanc */
@media (max-width: 767px) {
	.navbar-default .navbar-nav .open .dropdown-menu > li > a {
		color: #777777 !important;
	}
}

/* MENU - Icône "home" (glyphicon) : gris #555 */
#menu1 .glyphicon.glyphicon-home {
	color: #555555 !important;
}

/* MENU - Caret (flèche dropdown) : visible sur fond blanc */
.main_menu_wide .navbar-nav > .dropdown > a .caret,
.main_menu_wide .navbar-nav > .dropdown.active > a .caret,
.main_menu_wide .navbar-nav > .dropdown.open > a .caret,
.main_menu_wide .navbar-nav > .dropdown > a:hover .caret,
.main_menu_wide .navbar-nav > .dropdown > a:focus .caret {
	border-top-color: #555555 !important;
	border-bottom-color: #555555 !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

/* FOOTER - Fond : bleu (#0b3142) -> gris #555 */
.footer {
	background-color: #555555 !important;
}

/* ============================================================
   BOUTONS (.btn-primary)
   ============================================================ */

/* BOUTONS - Couleur principale : bleu -> rose (#E37494) */
.btn-primary,
.btn.btn-primary {
	color: #FFFFFF !important;
	background-color: #E37494 !important;
	border-color: #E37494 !important;
}

/* BOUTONS - Etats (hover/focus/active) : rester rose */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
	color: #FFFFFF !important;
	background-color: #E37494 !important;
	border-color: #E37494 !important;
}

/* ============================================================
   DIVERS
   ============================================================ */

/* DIVERS - Bouton "remonter" (glyphicon-circle-arrow-up) : bleu (#337ab7) -> rose (#E37494) */
.scroll_to_top a,
.scroll_to_top a:hover,
.scroll_to_top a:focus,
.scroll_to_top .glyphicon.glyphicon-circle-arrow-up {
	color: #E37494 !important;
}

/* DIVERS - Titre "Nouveautés" : bordure verte (#44af69) -> gris clair */
.home_title.nouveaute {
	border-color: #DDDDDD !important;
}

/* ============================================================
   CATEGORIES / LISTE PRODUITS
   ============================================================ */

/* CATEGORIE - Bloc description : fond gris (#e5e5e5) -> blanc */
.products_list_brief_block {
	background-color: #FFFFFF !important;
}

/* CATEGORIE - Titre : bordure orange (#ff6600) -> rose (#E37494) */
h1.products_list_brief {
	border-bottom: 1px solid #E37494 !important;
}

/* ============================================================
   PAYPAL
   ============================================================ */

.dna-paypal-button {
	color: #FFFFFF !important;
	background-color: #0070ba !important;
	border-color: #0070ba !important;
	border-radius: 9999px !important;
	padding: 12px 26px !important;
	font-weight: 700 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	box-shadow: 0 10px 18px rgba(0, 112, 186, 0.18) !important;
}

.dna-paypal-button:hover,
.dna-paypal-button:focus,
.dna-paypal-button:active {
	color: #FFFFFF !important;
	background-color: #003087 !important;
	border-color: #003087 !important;
}