/*
 * Glow Bar — en-tête & pied de page
 *
 * Les deux sont construits en widgets Elementor (modèles #22074 et #22075, condition
 * « general »). Elementor Pro étant absent, le menu vient du widget de menu WordPress
 * et la mise en page horizontale, les sous-menus et l'habillage sont posés ici.
 *
 * Cette feuille est chargée après style.css du thème.
 */

:root {
	--gb-pink: #e5177b;
	--gb-pink-deep: #c0135a;
	--gb-pink-soft: #ff7eb6;
	--gb-pink-pale: #ffb3d2;
	--gb-blush: #fff2f8;
	--gb-blush-line: #f8d3e5;
	--gb-ink: #150911;
	--gb-ink-line: rgba(255, 255, 255, 0.1);
	--gb-on-ink: rgba(255, 255, 255, 0.66);
	--gb-plum: #6b3d55;

	/*
	 * Ce qui masque le bas de la page sur téléphone. Deux obstacles distincts :
	 *
	 *   - la barre d'accueil d'iOS, connue du CSS par `env(safe-area-inset-bottom)`
	 *     (à condition que la balise porte « viewport-fit=cover », voir
	 *     glow-bar-chrome.php) ;
	 *   - la barre d'adresse du navigateur — Safari comme Chrome Android. Les deux
	 *     placent les éléments `position: fixed` par rapport à la fenêtre de mise
	 *     en page, qui garde la hauteur qu'elle aurait barre repliée : tant que la
	 *     barre est affichée, le bas d'un élément collé à `bottom: 0` se trouve
	 *     sous l'écran. C'est le cas au chargement d'une fiche produit, avant tout
	 *     défilement — le bouton « Ajouter au panier » s'y faisait couper.
	 *
	 * `--gb-chrome-basse` mesure ce second obstacle, et `lvh`/`dvh` le donnent
	 * exactement, sans JavaScript :
	 *
	 *     lvh = fenêtre barre repliée (celle qui sert au positionnement fixe)
	 *     dvh = fenêtre telle qu'elle est en ce moment
	 *     lvh − dvh = ce que la barre recouvre, 0 dès qu'elle se replie
	 *
	 * Le navigateur tient la valeur à jour de lui-même, y compris au tout premier
	 * rendu : c'est ce qui manquait à la mesure JavaScript, qui arrivait trop tard
	 * pour le premier affichage. Le JavaScript reste en secours (`--gb-chrome-js`)
	 * pour les navigateurs sans `dvh` ; là où `dvh` existe, la règle `@supports`
	 * vient après et l'emporte.
	 *
	 * On retient le plus grand des deux obstacles, jamais leur somme : barre
	 * d'adresse déployée, elle recouvre déjà la barre d'accueil.
	 *
	 * Tout vaut 0 sur ordinateur, et rien ne bouge.
	 */
	--gb-chrome-basse: var(--gb-chrome-js, 0px);
	--gb-marge-basse: max(env(safe-area-inset-bottom, 0px), var(--gb-chrome-basse, 0px));
}

@supports (height: 100dvh) {

	:root {
		--gb-chrome-basse: calc(100lvh - 100dvh);
	}
}

/* ==========================================================================
   1. En-tête
   ========================================================================== */

/*
 * Fixe plutôt que collant : `.site` est en `overflow: clip` et `body` en
 * `overflow: hidden`, ce qui neutralise `position: sticky`. chrome.js mesure la
 * hauteur et la publie dans --gb-header-height.
 */
.gb-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 300;
}

.content-wrapper {
	padding-top: var(--gb-header-height, 107px);
}

/*
 * La barre d'administration passe devant l'en-tête fixe (z-index 99999 contre 300).
 * Valeurs de repli, avant que chrome.js ne prenne la mesure exacte : WordPress la
 * pose à 32 px en bureau, 46 px sous 783 px — où elle devient `absolute` et suit
 * le défilement, ce que seul le script sait suivre.
 */
body.admin-bar .gb-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .gb-header {
		top: 46px;
	}
}

/* Une fois défilé, le bandeau promo s'efface et l'ombre se marque. */
.gb-header--pinned .gb-topbar {
	display: none;
}

.gb-header--pinned .gb-mainbar {
	box-shadow: 0 10px 32px rgba(21, 9, 17, 0.1);
}

/* Élimine l'ombre que le thème pose sur son propre en-tête, absent ici. */
.gb-header .gb-mainbar {
	box-shadow: 0 1px 0 rgba(21, 9, 17, 0.06);
}

/* -------------------------------------------------------- bandeau promo */

.gb-topbar {
	font-size: 13px;
	line-height: 1.4;
	color: var(--gb-plum);
}

.gb-topbar__list .elementor-icon-list-items {
	gap: 6px 26px;
}

.gb-topbar__list .elementor-icon-list-item {
	font-size: 13px;
	color: var(--gb-plum);
}

.gb-topbar__list .elementor-icon-list-icon svg {
	width: 14px;
	height: 14px;
	fill: var(--gb-pink);
}

.gb-topbar__list a:hover .elementor-icon-list-text {
	color: var(--gb-pink);
}

.gb-topbar__promo p {
	margin: 0;
	font-size: 13px;
	white-space: nowrap;
}

.gb-topbar__promo a {
	margin-left: 14px;
	padding-left: 14px;
	border-left: 1px solid var(--gb-blush-line);
	color: var(--gb-pink-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(229, 23, 123, 0.35);
}

.gb-topbar__promo a:hover {
	color: var(--gb-pink);
	text-decoration-color: currentColor;
}

/* ------------------------------------------------------- barre principale */

/*
 * Répartition : logo et outils à leur largeur naturelle, la navigation prend le
 * reste. Sans cela le menu se replie sur deux lignes dès huit entrées.
 */
.gb-mainbar__inner > .e-con-inner {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* Elementor pilote la largeur des conteneurs par une variable : `flex` seul ne suffit
   pas, chaque conteneur reste à `--width: 100%` et se partage la rangée. */
.gb-mainbar__left,
.gb-tools {
	--width: auto;
	--flex-grow: 0;
	--flex-shrink: 0;

	flex: 0 0 auto;
}

/*
 * Le champ de recherche occupe la travée centrale.
 *
 * `--flex-grow`, pas seulement `flex` : Elementor pilote la croissance de ses
 * conteneurs par cette variable (`.e-con { flex-grow: var(--flex-grow) }`), dont la
 * valeur par défaut est 0. Le champ restait donc à la largeur de son contenu — 207 px —
 * et laissait deux vides de plus de 600 px de part et d'autre sur un grand écran.
 *
 * Trois classes dans le sélecteur : la valeur par défaut est posée par
 * `.e-con.e-flex` (0-2-0), qu'une classe seule ne peut pas doubler.
 */
.gb-header .gb-search.e-con {
	--width: auto;
	--flex-grow: 1;
	--flex-shrink: 1;

	flex: 1 1 auto;
	min-width: 0;
	max-width: 640px;
	margin-inline: auto;
}

/* -------------------------------------------------- recherche produit */

.gb-search .woocommerce-product-search {
	position: relative;
	display: block;
}

.gb-search .search-field {
	width: 100%;
	height: 46px;
	padding: 0 54px 0 22px;
	border: 1px solid #efe4e9;
	border-radius: 999px;
	background-color: #fdf9fb;
	color: #14090f;
	font-size: 14px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.gb-search .search-field::placeholder {
	color: #a4939c;
}

.gb-search .search-field:focus {
	border-color: var(--gb-pink);
	background-color: #fff;
	outline: 2px solid rgba(229, 23, 123, 0.14);
	outline-offset: 1px;
}

/*
 * Le bouton devient une pastille dans le champ ; son libellé reste pour l'assistance.
 *
 * `left: auto` explicitement : le thème pose `left: 0` sur ce bouton, et poser `right`
 * ne l'annule pas — sur un élément absolu de largeur connue, `left` l'emporte en
 * écriture latine. La pastille se retrouvait à gauche, par-dessus la première lettre
 * du texte d'invite.
 */
.gb-search .search-submit {
	position: absolute;
	top: 5px;
	left: auto;
	right: 5px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--gb-pink);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.gb-search .search-submit:hover {
	background-color: var(--gb-pink-deep);
}

.gb-search .search-btn-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* La loupe des outils ferait doublon avec le champ. */
.gb-tool--search {
	display: none;
}

/* --------------------------------------------------------- bande de navigation */

.gb-navbar {
	position: relative;
}

/*
 * Le lettrage de la marque est un bloc scripté sur deux lignes (457 × 339), pas un
 * mot-symbole allongé : à largeur égale il est près de quatre fois plus haut que
 * l'ancien. La barre principale s'ouvre donc un peu, et sa marge intérieure se resserre
 * pour compenser.
 */
.gb-logo img.logo {
	width: 92px;
	height: auto;
}

/* ------------------------------------------------------------- outils */

.gb-tools .gb-tool .elementor-icon {
	display: grid;
	place-items: center;
	font-size: 20px;
	color: #111;
	transition: color 0.18s ease;
}

.gb-tools .gb-tool:hover .elementor-icon {
	color: var(--gb-pink);
}

.gb-tools .gb-tool svg {
	width: 20px;
	height: 20px;
}

.gb-tools .page-open-popup-search,
.gb-burger {
	cursor: pointer;
}

/* Pastille du mini-panier : le rose vient de primary_color. */
.gb-cart .icon-badge {
	box-shadow: 0 2px 8px rgba(229, 23, 123, 0.35);
}

/* Le bouton du tiroir mobile ne sert qu'en petit écran. */
.gb-burger {
	display: none;
}

.gb-burger .elementor-icon {
	display: grid;
	place-items: center;
	font-size: 22px;
	color: #111;
}

.gb-burger svg {
	width: 22px;
	height: 22px;
}

/* ------------------------------------------------------------ hero */

/*
 * Le bouton du hero est un calque en flux : sans cela son libellé se coupe en deux
 * dès que la colonne de texte se resserre, et la pastille ne suit pas. Slider
 * Revolution écrit `white-space: normal` en style en ligne sur chaque calque — d'où
 * le `!important`, seul moyen de repasser devant.
 */
.sr7-btn {
	white-space: nowrap !important;
}

/* ------------------------------------------------------- fiche produit */

/*
 * Le thème met une majuscule à chaque mot du titre produit et des onglets
 * (`text-transform: capitalize`), convention anglaise : « Fond De Teint Poudre Mat ».
 * En français seule l'initiale prend la majuscule. Les titres des listes de produits
 * sont déjà en `none` ; on aligne la fiche dessus.
 */
.product_title.entry-title,
.glow-bar-tabs__header .tab-title__text {
	text-transform: none;
}

/* ------------------------------------------------------------- marques */

/*
 * Préfixe `gb-marque`, pas `gb-brand` : la colonne de marque du pied de page porte
 * déjà `gb-brand`, et le fond rose pâle de ces plaques s'y appliquait — texte blanc
 * sur rose pâle, illisible.
 */

/*
 * Plaques typographiques : le gabarit de WooCommerce n'affiche que la vignette de la
 * marque, et fabriquer un logo à la place de celui d'une marque réelle n'est pas une
 * option. Voir woocommerce/brands/widgets/brand-thumbnails.php.
 */
/*
 * WooCommerce dispose ces vignettes en flottants — `ul.brand-thumbnails li { float:
 * left; width: 22.05%; margin-right: 3.8% }` — et dégage les lignes avec deux
 * pseudo-éléments `::before`/`::after` en `display: table`. Passés en grille, ces deux
 * pseudo-éléments deviennent des **cases de la grille** : d'où la première cellule vide
 * et l'alignement en escalier. Il faut les neutraliser, et écrire sur
 * `ul.brand-thumbnails.gb-marques` — le sélecteur du thème vaut 0-2-1, une classe seule
 * ne passe pas devant.
 */
ul.brand-thumbnails.gb-marques {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.brand-thumbnails.gb-marques::before,
ul.brand-thumbnails.gb-marques::after {
	content: none;
	display: none;
}

ul.brand-thumbnails.gb-marques li,
ul.brand-thumbnails.gb-marques li.first,
ul.brand-thumbnails.gb-marques li.last {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gb-marque {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 132px;
	padding: 22px 18px;
	border: 1px solid var(--gb-blush-line);
	border-radius: 14px;
	background-color: var(--gb-blush);
	text-align: center;
	transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.gb-marque:hover {
	border-color: var(--gb-pink);
	background-color: #fff;
	transform: translateY(-2px);
}

.gb-marque__nom {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--gb-ink);
}

.gb-marque:hover .gb-marque__nom {
	color: var(--gb-pink-deep);
}

.gb-marque__compte {
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--gb-plum);
}

.gb-marque img {
	max-height: 60px;
	width: auto;
}

@media (max-width: 1024px) {
	ul.brand-thumbnails.gb-marques {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	ul.brand-thumbnails.gb-marques {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.gb-marque {
		min-height: 108px;
		padding: 18px 12px;
	}

	.gb-marque__nom {
		font-size: 15px;
	}
}

/* ==========================================================================
   2. Pied de page
   ========================================================================== */

.gb-footer {
	font-size: 15px;
	line-height: 1.75;
}

.gb-footer a {
	transition: color 0.18s ease;
}

/* ------------------------------------------------------- corps du pied */

.gb-main,
.gb-bottom {
	color: var(--gb-on-ink);
}

.gb-main a,
.gb-bottom a {
	color: inherit;
}

.gb-main a:hover,
.gb-bottom a:hover {
	color: var(--gb-pink-pale);
}

.gb-cols > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr);
	align-items: start;
	gap: clamp(28px, 4vw, 64px);
}

.gb-brand__pitch p {
	margin: 20px 0 26px;
	max-width: 34ch;
}

.gb-social .elementor-social-icon {
	width: 42px;
	height: 42px;
	border: 1px solid var(--gb-ink-line);
	background-color: transparent;
	color: rgba(255, 255, 255, 0.78);
	font-size: 15px;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.gb-social .elementor-social-icon:hover {
	background: linear-gradient(120deg, var(--gb-pink-deep), var(--gb-pink));
	border-color: transparent;
	color: #fff;
	transform: translateY(-2px);
}

/*
 * Trois classes : la feuille du widget Elementor pose `justify-content` sur
 * `.elementor-widget-social-icons .elementor-grid` et se charge après celle-ci.
 */
.gb-footer .gb-social .elementor-social-icons-wrapper {
	justify-content: flex-start;
	gap: 10px;
}

.gb-col__title .elementor-heading-title {
	margin: 0 0 20px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.gb-col__menu ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gb-col__menu ul.menu li {
	margin: 0 0 11px;
	list-style: none;
}

.gb-col__menu ul.menu a {
	position: relative;
	display: inline-block;
}

/* Soulignement rose qui se déplie au survol. */
.gb-col__menu ul.menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background-color: var(--gb-pink-soft);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.24s ease;
}

.gb-col__menu ul.menu a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.gb-contact__list .elementor-icon-list-items {
	gap: 11px 0;
}

.gb-contact__list .elementor-icon-list-item {
	align-items: flex-start;
	color: var(--gb-on-ink);
}

.gb-contact__list .elementor-icon-list-icon {
	padding-top: 6px;
}

.gb-contact__list .elementor-icon-list-icon svg {
	width: 14px;
	height: 14px;
	fill: var(--gb-pink-soft);
}

/* --------------------------------------------------------- bas de page */

.gb-bottom {
	font-size: 13.5px;
}

.gb-bottom__copy p {
	margin: 0;
	color: rgba(255, 255, 255, 0.5);
}

.gb-pay .elementor-icon-list-items {
	gap: 8px 10px;
}

.gb-footer .gb-pay .elementor-icon-list-items .elementor-icon-list-item {
	padding: 6px 14px;
	border: 1px solid var(--gb-ink-line);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 12px;
	white-space: nowrap;
}

.gb-legal .elementor-icon-list-items {
	gap: 8px 20px;
}

.gb-legal .elementor-icon-list-item + .elementor-icon-list-item {
	position: relative;
}

.gb-legal .elementor-icon-list-item + .elementor-icon-list-item::before {
	content: "";
	position: absolute;
	left: -10px;
	top: 50%;
	width: 1px;
	height: 12px;
	transform: translateY(-50%);
	background-color: var(--gb-ink-line);
}

/* ==========================================================================
   3. Adaptations
   ========================================================================== */

@media (max-width: 1199px) {
	/* Sous cette largeur, les rayons passent dans le tiroir. */
	.gb-navbar {
		display: none;
	}

	.gb-search {
		display: none;
	}

	/* Le champ disparaissant, la loupe reprend son rôle. */
	.gb-tool--search {
		display: block;
	}

	.gb-burger {
		display: block;
	}

	.gb-topbar__list--end {
		display: none;
	}

	/* Logo et outils restent sur une seule ligne. */
	.gb-mainbar__inner > .e-con-inner {
		flex-wrap: nowrap;
	}

	.gb-cols > .e-con-inner {
		grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
		row-gap: 44px;
	}
}

@media (max-width: 991px) {
	.gb-topbar__promo {
		display: none;
	}
}

@media (max-width: 767px) {
	.gb-topbar {
		display: none;
	}

	.gb-logo img.logo {
		width: 132px;
	}

	.gb-cols > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 38px;
	}

	.gb-bottom__inner > .e-con-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

/* ==========================================================================
   3. Accueil — bande de réassurance
   ========================================================================== */

/*
 * Le contrôle « couleur d'icône » de tm-icon-box ne s'applique qu'aux vues
 * encadrées (`view` ≠ default), pas à l'icône nue. On la teinte ici, et on
 * resserre la typographie pour que les quatre promesses tiennent sur une ligne.
 */
.gb-reassurance .glow-bar-icon,
.gb-reassurance .glow-bar-icon svg,
.gb-reassurance .glow-bar-icon svg path {
	/* Le thème pose une couleur grise sur l'enveloppe et le tracé hérite d'elle :
	   teinter le seul <svg> ne suffit pas. */
	color: var(--gb-pink);
	fill: var(--gb-pink);
}

.gb-reassurance .glow-bar-icon svg {
	width: 30px;
	height: 30px;
}

.gb-reassurance .glow-bar-icon-wrap {
	margin-right: 16px;
}

.gb-reassurance .heading {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.gb-reassurance .icon-box-content p,
.gb-reassurance .description {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #7b7b7b;
}

@media (max-width: 1199px) {
	.gb-reassurance .heading {
		font-size: 14px;
	}
}

/* ================================================================
   « TTC » derrière le total
   ================================================================
   Remplace le détail de la taxe contenue — « (dont 33,16 DH TVA) » — posé par
   WooCommerce sur la ligne de total. Voir le filtre dans glow-bar-maroc.php.

   Le mot doit se lire comme une mention, pas comme une seconde valeur : plus petit
   que le montant, en capitales espacées, dans le gris du reste du récapitulatif. Le
   `small` de WooCommerce hérite sinon de la graisse et de la taille de la ligne, et
   « TTC » pèse alors autant que « 199,00 DH ». */
.gb-ttc {
	margin-left: 6px;
	font-size: 0.62em;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9a8592;
	white-space: nowrap;
	vertical-align: 0.12em;
}

/* Le tiroir du panier compose sur fond clair et serré : on gagne un peu de place. */
.popup-fly-cart .gb-ttc,
.mini-cart .gb-ttc {
	margin-left: 4px;
	font-size: 0.6em;
}