/*
 * Glow Bar — adaptations téléphone (≤ 767 px).
 *
 * Séparé de chrome.css : celui-ci habille l'en-tête et le pied de page, celui-là
 * corrige la mise en page de tout le site sur petit écran. Les réglages qui
 * relèvent d'Elementor (nombre de colonnes des grilles, hauteurs de bannières,
 * corps des titres) vivent dans les scripts de construction, pas ici ; on ne
 * traite en CSS que ce qui n'a pas de réglage dans le constructeur.
 */

/*
 * Tablette et en dessous. Placé avant le bloc téléphone : à spécificité égale,
 * la dernière règle l'emporte, et le bloc étroit doit pouvoir corriger celui-ci.
 */
@media (max-width: 1024px) {

	/*
	 * Titre blanc sur photo claire : « Coffrets à offrir » disparaissait dans
	 * l'image. Un voile discret par le haut, là où le texte se pose.
	 */
	.glow-bar-banner .glow-bar-image::after {
		content: '';
		position: absolute;
		inset: 0 0 auto;
		height: 58%;
		background: linear-gradient(to bottom, rgba(20, 9, 15, 0.36), rgba(20, 9, 15, 0));
		pointer-events: none;
		z-index: 1;
	}

	.glow-bar-banner .content-wrap {
		position: relative;
		z-index: 2;
	}

	/*
	 * Réassurance sur deux colonnes : `width: 50%` laisse l'écart de 30 px déborder
	 * de la ligne, et la seconde promesse repassait dessous. On retranche l'écart.
	 */
	/* Elementor écrit `--width` sur trois classes : il faut passer au-dessus. */
	.elementor .e-con.gb-rea-col.gb-rea-col {
		--width: calc(50% - 15px);
	}
}

@media (max-width: 767px) {

	.elementor .e-con.gb-rea-col.gb-rea-col {
		--width: calc(50% - 9px);
	}


	:root {
		--gb-gutter: 18px;
	}

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

	/*
	 * Elementor impose `--width: 100%` à tout conteneur souple sous 768 px, via
	 * `.e-con.e-flex` — deux classes. Les règles de chrome.css n'en portaient
	 * qu'une et perdaient la cascade : logo et outils se retrouvaient chacun sur
	 * sa ligne, et l'en-tête faisait 108 px de haut.
	 */
	.gb-header .gb-mainbar__left.e-con,
	.gb-header .gb-tools.e-con {
		--width: auto;
	}

	.gb-header .gb-mainbar__inner.e-con {
		--flex-wrap: nowrap;
	}

	.gb-header .gb-mainbar__inner > .e-con-inner {
		flex-wrap: nowrap;
		gap: 12px;
		padding-inline: var(--gb-gutter);
	}

	.gb-header .gb-tools.e-con {
		flex: 1 1 auto;
	}

	.gb-header .gb-mainbar.e-con {
		padding-top: 11px;
		padding-bottom: 11px;
	}

	.gb-header .gb-mainbar__inner.e-con {
		padding-inline: 0;
	}

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

	/* Le lettrage est haut : on rend à la barre la place qu'il prend. */
	.gb-header .gb-mainbar.e-con {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.gb-burger .elementor-icon,
	.gb-burger svg {
		font-size: 21px;
		width: 21px;
		height: 21px;
	}

	/* Compte et liste d'envies vivent dans la barre d'onglets du bas. */
	.gb-tools .gb-tool--account,
	.gb-tools .gb-tool--wishlist {
		display: none;
	}

	.gb-tools {
		gap: 18px;
	}

	.gb-tools .gb-tool .elementor-icon,
	.gb-tools .gb-tool svg {
		font-size: 19px;
		width: 19px;
		height: 19px;
	}

	/* La pastille du panier débordait de l'écran, calée sur le bord de l'icône. */
	.gb-header .gb-cart .icon-badge {
		--icon-badge-size: 16px;
		--icon-badge-font-size: 10px;

		top: -7px;
		right: -7px;
	}

	.gb-header .gb-tools .gb-cart {
		margin-right: 4px;
	}

	/* ==================================================================
	   2. Gouttière commune
	   ================================================================== */

	/*
	 * Les gabarits du thème — boutique, fiche produit, catégorie, journal —
	 * collent leur contenu aux deux bords. Une gouttière unique, la même que
	 * celle des bandes Elementor de l'accueil.
	 */
	.site .container,
	.site .container-fluid,
	.woocommerce-notices-wrapper,
	.page-title-bar .container {
		padding-inline: var(--gb-gutter);
	}

	/* ==================================================================
	   3. Grilles de produits
	   ================================================================== */

	.glow-bar-grid.modern-grid .woocommerce-loop-product__title,
	.glow-bar-grid .post-title {
		/* « Organic Hand Sanitizer Pump » débordait de sa colonne de 170 px. */
		overflow-wrap: anywhere;
		font-size: 13px;
		line-height: 1.4;
	}

	.glow-bar-grid.modern-grid .price {
		font-size: 14px;
	}

	.glow-bar-grid.modern-grid .product-cat,
	.glow-bar-grid.modern-grid .category {
		font-size: 10px;
	}

	/* ==================================================================
	   4. Carrousels
	   ================================================================== */

	/* Les flèches se posaient sur les visuels : les puces suffisent au doigt. */
	.tm-swiper .swiper-nav-buttons-wrap,
	.tm-slider-widget .swiper-nav-buttons-wrap {
		display: none;
	}

	/*
	 * Le déclencheur du panneau de filtres est un onglet fixe de 32 px collé au
	 * bord gauche, à mi-hauteur : il se posait en travers de la première photo
	 * produit. On le descend en bas de l'écran et on lui donne la forme d'une
	 * pastille. Il n'a plus la barre d'onglets à franchir, celle-ci ayant été
	 * retirée ; il reste au-dessus de la zone sûre.
	 *
	 * 40 px et non 20 : l'onglet est pivoté d'un quart de tour, et sa forme à
	 * l'écran déborde de 25 px sous la boîte que `bottom` positionne. À 20 px il
	 * dépassait donc de 5 px sous l'écran. On le pose ainsi à 15 px du bord, comme
	 * le bouton WhatsApp en face.
	 */
	.btn-open-off-sidebar-mobile.position-left {
		top: auto;
		bottom: calc(40px + var(--gb-marge-basse, 0px));
		border-radius: 0 999px 999px 0;
		background-color: var(--gb-ink, #150911);
		color: #fff;
		box-shadow: 0 6px 20px rgba(21, 9, 17, 0.25);
	}

	/* ==================================================================
	   5. Bannières
	   ================================================================== */

	/* Le lettrage de démonstration montait à 40 px et sortait du cadre. */
	.glow-bar-banner .title {
		font-size: clamp(20px, 6.2vw, 26px);
		line-height: 1.24;
	}

	/* ==================================================================
	   6. Bandeaux « split »
	   ================================================================== */

	/*
	 * Sorti de l'image, le bloc de texte recevait les puces du carrousel en plein
	 * milieu de son paragraphe : le conteneur des puces est en absolu et couvre toute
	 * la hauteur du bloc. Remis dans le flux, il vient naturellement en dernier —
	 * c'est le dernier enfant de `.tm-swiper`.
	 */
	.tm-modern-slider--layout-split .swiper-pagination-container,
	.tm-modern-slider--layout-split .swiper-pagination {
		position: static;
		transform: none;
	}

	.tm-modern-slider--layout-split .swiper-pagination {
		margin-top: 6px;
		padding-bottom: 4px;
	}


	/* ==================================================================
	   7. Pied de page
	   ================================================================== */

	/*
	 * Empilées, les quatre colonnes faisaient défiler vingt-cinq liens : deux
	 * colonnes ramènent le pied de page à une hauteur raisonnable.
	 */
	.gb-cols > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 20px;
		row-gap: 34px;
	}

	.gb-cols > .e-con-inner > .gb-brand {
		grid-column: 1 / -1;
	}

	/* Le reste du pied de page est aligné à gauche ; les réseaux l'étaient au centre. */
	/*
	 * Les mentions légales sont séparées par une barre verticale posée en
	 * pseudo-élément : au retour à la ligne, la barre ouvrait la ligne suivante.
	 * Un simple écart fait le même travail sans cet effet de bord.
	 */
	.gb-legal .elementor-inline-items {
		gap: 6px 18px;
	}

	.gb-legal .elementor-icon-list-item + .elementor-icon-list-item::before {
		display: none;
	}

	/* Adresse et horaires : une seule colonne, les lignes sont longues. */
	.gb-cols > .e-con-inner > .gb-contact {
		grid-column: 1 / -1;
	}
}

/* ==================================================================
   La zone sûre du bas, sur iPhone
   ==================================================================
   La barre d'onglets du thème est collée à `bottom: 0`. Sur un iPhone, la barre
   d'accueil d'iOS et la barre d'adresse de Safari se posent par-dessus ce bord :
   les onglets passaient dessous, et la barre d'achat de la fiche produit — rangée
   juste au-dessus d'eux — se faisait couper par le bas.

   On donne aux onglets la hauteur de la zone sûre en plus, en marge intérieure :
   la rangée d'icônes garde ses 55 px (`box-sizing: border-box`) et c'est le
   rembourrage qui occupe la zone d'iOS. Tout ce qui se range au-dessus est
   décalé d'autant — voir `--gb-marge-basse` dans chrome.css.

   Hors iPhone, `env(safe-area-inset-bottom)` vaut 0 et rien ne change. */
@media (max-width: 767px) {

	#page-mobile-tabs {
		height: calc(55px + var(--gb-marge-basse, 0px));
		padding-bottom: var(--gb-marge-basse, 0px);
	}

	/*
	 * En paysage, l'encoche mord sur un côté : « viewport-fit=cover » laisse la
	 * page passer dessous. On écarte le contenu et les barres fixes d'autant.
	 * En portrait ces deux valeurs sont nulles et rien ne bouge.
	 */
	:root {
		--gb-gutter: calc(18px + max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
	}

	#page-mobile-tabs,
	#sticky-product-bar {
		padding-left: env(safe-area-inset-left, 0px);
		padding-right: env(safe-area-inset-right, 0px);
	}
}