/**
 * Cité 2 Roues : feuille de style du site
 *
 * Chargée par le mu-plugin oueb-c2r-css.php, à la place de l'ancien
 * CSS additionnel du personnalisateur (repris le 1er octobre 2026).
 *
 * L'ordre des règles est celui d'origine : les media queries restent à
 * leur place au lieu d'être regroupées en bas, pour ne rien changer à la
 * cascade.
 *
 * Sommaire
 * 1.0 Fiche produit
 * 2.0 Galeries, articles, pagination
 * 3.0 WooCommerce : compte et mini-panier
 * 4.0 Menu mobile
 * 5.0 Accueil mobile
 * 6.0 Recherche en surimpression
 * 7.0 En-tête : téléphone, compte, panier
 * 8.0 En-tête des catégories en mobile
 * 9.0 Liste des produits
 * 10.0 Pied de page
 * 11.0 Réservation Amelia
 * 12.0 Articles
 * 13.0 Gravity Forms
 * 14.0 Panoramique du magasin en mobile
 * 15.0 Filtres WP Grid Builder
 * 16.0 Loupe de recherche de l'en-tête mobile
 */


/**
 * 1.0 Fiche produit
 */

.single-product .product_type_variable,
.single-product .product_type_simple,
.single-product .product_type_variable * {
	opacity: 0;
	width: 0;
	height: 0;
}


/**
 * 2.0 Galeries, articles, pagination
 */

figure.wp-block-gallery {
	display: flex;
	flex-wrap: wrap;
}

.single.single-post .site.grid-container {
	max-width: 645px;
}

a.gb-button-text.page-numbers,
span.gb-button-text.page-numbers.gb-block-is-current,
span.gb-button-text.page-numbers.dots {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	min-width: 50px;
	height: 50px;
	min-height: 50px;
	margin: 0 5px;
	padding: 0;
	border: 2px solid var(--clr-black);
	border-radius: 50% !important; /* Écrase le rayon du bouton GenerateBlocks. */
	text-align: center;
}


/**
 * 3.0 WooCommerce : compte et mini-panier
 */

.wc-block-mini-cart__amount {
	display: none;
}

.wp-block-woocommerce-customer-account span.label {
	display: none !important; /* Écrase l'affichage du libellé par le bloc WooCommerce. */
}

.gb-grid-wrapper.gb-grid-wrapper-5dc6fb72 {
	justify-content: space-evenly;
	align-items: center;
	min-width: 120px;
}

.wc-block-mini-cart__footer-actions {
	margin-bottom: 30px;
}

.wc-block-mini-cart__footer-actions .components-button {
	background-color: var(--clr-middle-green);
	color: #fff;
	text-decoration: none;
}


/**
 * 4.0 Menu mobile
 */

#mobile-header {
	background-color: var(--clr-black);
}

@media screen and (max-width: 767px) {

	.slideout-navigation.main-navigation .main-nav > ul.slideout-menu > li.menu_small_caps > a {
		font-family: Barlow, sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		letter-spacing: 0.42px;
		text-transform: none;
	}

	li.menu_small_caps::after {
		content: none !important; /* Retire le séparateur du menu GP Premium. */
	}

	li.hidden::after {
		content: none !important; /* Retire le séparateur du menu GP Premium. */
	}

	li.menu_small_caps.last {
		padding-top: 20px !important; /* Écrase l'espacement du menu GP Premium. */
	}

	li.menu_small_caps.last:last-child {
		padding-top: 5px !important; /* Doit battre la règle précédente, elle-même en !important. */
	}

	.slideout-navigation.do-overlay.is-open .inside-navigation > button {
		width: 100%;
		margin-bottom: 72px;
		background-color: transparent;
		background-image:
			url(/wp-content/themes/cite2rouesV2/images/bkg-btn-offcanvas.png),
			url(/wp-content/uploads/2023/10/menu-mobile.png);
		background-position: center right, left 65px top 12px;
		background-size: cover, 177px;
		background-repeat: no-repeat;
		text-align: right;
	}
}


/**
 * 5.0 Accueil mobile
 */

.hp-mobile .blockslider-navigation-wrapper {
	display: none;
}

.hp-mobile .blockslider-pagination-wrapper {
	display: flex;
	align-items: center;
}

.hp-mobile .blockslider-pagination-main {
	transform: translateY(-50px);
}

.hp-mobile .blockslider-wrapper {
	height: 0;
}

.wp-block-woocommerce-customer-account svg {
	min-width: 20px;
	min-height: 20px;
}


/**
 * 6.0 Recherche en surimpression
 */

.popup-search,
.popup-search:hover {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	min-width: 100%;
	background: transparent linear-gradient(180deg, #000 0%, transparent 100%) 0% 0% no-repeat padding-box;
	opacity: 1;
}

.popup-search > div {
	background-color: #fff;
}

.popup-search form input,
.popup-search .wp-block-search__inside-wrapper {
	border: none;
}

.popup-search .popup-search-form {
	min-width: min(100%, 780px);
	padding-left: 0;
	border-bottom: 1px solid #999;
}

.popup-search .wp-block-search__input {
	padding-bottom: 0;
	padding-left: 0;
}

.popup-search .wp-block-search__input,
.popup-search .wp-block-search__input::placeholder {
	color: #000;
	font-family: Barlow, sans-serif;
	font-size: 1.875rem;
	font-weight: 400;
	line-height: 20px !important; /* Écrase la hauteur de ligne du champ de recherche WordPress. */
}

.popup-search .wp-block-search__inside-wrapper button {
	display: none;
	position: relative;
	padding-right: 0;
	padding-bottom: 0;
	background-color: transparent;
	color: transparent;
	font-size: 16px;
	text-transform: uppercase;
}

.popup-search #search-close {
	font-size: 30px;
	font-weight: 400;
	font-style: normal;
	transform: translate(-20px, 5px);
}

.popup-search i {
	font-style: normal;
	cursor: pointer;
}

.popup-search.hidden {
	display: none;
}

img#search-icon {
	width: 32px;
	min-width: 32px;
	height: 32px;
	min-height: 32px;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	display: none;
}


/**
 * 7.0 En-tête : téléphone, compte, panier
 */

.gb-headline a[data-type="tel"] {
	color: #fff;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 40px;
	line-height: 45px;
}

.customer_tools {
	justify-content: center;
	align-items: center;
	width: 100%;
}

.customer_tools > div {
	flex: 1;
	padding: 0 8px;
}

.wc-block-mini-cart__icon {
	display: none !important; /* Écrase l'affichage de l'icône par le bloc WooCommerce. */
}

.wc-block-mini-cart__button {
	min-width: 30px;
	min-height: 30px;
	background-color: #000;
	background-image: url(/wp-content/themes/cite2rouesV2/images/panier-cite2roues.png);
	background-size: 20px;
	background-repeat: no-repeat;
	opacity: 1;
}

.wc-block-mini-cart__button:hover:not([disabled]) {
	background-color: #000;
	opacity: 1;
}


/**
 * 8.0 En-tête des catégories en mobile
 */

@media screen and (max-width: 767px) {

	.archive .product-banner h1 {
		font-size: 30px;
		line-height: 35px;
	}

	#product-cat-banner .gb-button-text {
		padding: 0;
	}

	#product-cat-banner .gb-icon svg {
		width: 0.8em;
		height: 0.8em;
	}

	.essai_container .alignwide {
		width: 100%;
		max-width: unset;
		margin-left: 0;
	}

	.gb-container-1afb8b3b,
	.gb-container-ff641b99 {
		margin-right: 0 !important; /* Écrase les marges du conteneur GenerateBlocks. */
		margin-left: 0 !important; /* Écrase les marges du conteneur GenerateBlocks. */
	}
}


/**
 * 9.0 Liste des produits
 */

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
	margin: 0;
	padding: 0 !important; /* Écrase les marges internes du titre WooCommerce. */
	font-size: 1.3em;
	font-weight: 500;
	line-height: 1.1em;
	letter-spacing: 1.1px;
}

.woocommerce ul.products li.product .price {
	font-size: 1.1em;
	font-weight: 300;
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link > :not(:first-child) {
	margin-top: 5px;
}


/**
 * 10.0 Pied de page
 */

.footer-widgets .widget {
	font-family: Barlow;
	font-size: 14px;
	line-height: 22px;
}


/**
 * 11.0 Réservation Amelia
 */

.el-checkbox.el-checkbox--default.is-checked.am-checkbox__default.am-checkbox .is-checked .el-checkbox__inner {
	background-color: rgba(0, 92, 11, 0.6) !important; /* Écrase la couleur de la case cochée d'Amelia. */
}


/**
 * 12.0 Articles
 */

.article-caseproduit h2 {
	font-size: 1.8em !important; /* Écrase la taille des titres GenerateBlocks. */
	line-height: 1.1em !important; /* Écrase la hauteur de ligne des titres GenerateBlocks. */
	letter-spacing: 1.1px !important; /* Écrase l'espacement des titres GenerateBlocks. */
}

h3 {
	line-height: 1em;
}


/**
 * 13.0 Gravity Forms
 */

css.gform_wrapper.gravity-theme input[type="color"],
.gform_wrapper.gravity-theme input[type="date"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme input[type="number"],
.gform_wrapper.gravity-theme input[type="password"],
.gform_wrapper.gravity-theme input[type="search"],
.gform_wrapper.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="url"],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
	border: 1px solid #ccc;
}


/**
 * 14.0 Panoramique du magasin en mobile
 */

@media (max-width: 781px) {

	.pano-scroll-wrap {
		position: relative;
	}

	.pano-scroll-wrap::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		width: 40px;
		height: 280px;
		background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.55));
		pointer-events: none;
	}

	.pano-scroll-track {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.pano-scroll-track figure {
		display: inline-block !important; /* Écrase l'affichage du bloc image WordPress. */
		width: auto !important; /* Écrase la largeur du bloc image WordPress. */
		white-space: nowrap;
	}

	.pano-scroll-track img {
		width: auto !important; /* Écrase la largeur de l'image du bloc WordPress. */
		max-width: none !important; /* Lève la limite à 100 % de l'image du bloc WordPress. */
		height: 280px !important; /* Écrase la hauteur de l'image du bloc WordPress. */
	}
}


/**
 * 15.0 Filtres WP Grid Builder
 *
 * Facettes en pastilles (maquette du 30 septembre 2026). Complète
 * css/styles.css du thème enfant cite2rouesV2. « Par catégories » est en
 * boutons (.wpgb-button-facet) depuis le 1er octobre 2026. Les règles des
 * cases à cocher (.wpgb-checkbox-facet) servent encore si « Par marque » est
 * réactivée : ce widget et « Effacer les filtres » sont désactivés depuis le
 * 1er octobre 2026 (Apparence > Widgets > Widgets désactivés). Les styles du
 * lien « Effacer les filtres » ont été retirés en même temps.
 */

/* Couleurs par rubrique : fond de la pastille et croix. */
.archive {
	--c2r-filtre-fond: var(--clr-light-green);
	--c2r-filtre-croix: var(--clr-dark-green);
}

.archive.parent-urbain,
.archive.term-urbain {
	--c2r-filtre-fond: var(--clr-light-yellow);
	--c2r-filtre-croix: var(--clr-black);
}

.archive.parent-route,
.archive.term-route {
	--c2r-filtre-fond: var(--clr-light-pink);
	--c2r-filtre-croix: var(--clr-red);
}

/* Titre du bloc : trait fin gris. */
.archive h4.wpgb-facet-title::after {
	margin-top: 10px;
	border-bottom-color: #d6d6d6;
}

/* Nombres de produits et boutons de repli masqués. */
.archive .wpgb-facet .wpgb-checkbox span.wpgb-checkbox-label > span,
.archive .wpgb-facet .wpgb-checkbox-facet li[aria-expanded]::after {
	display: none !important; /* Écrase le thème enfant, qui stylise les nombres en pastilles. */
}

.archive .wpgb-facet .wpgb-checkbox-facet li[aria-expanded] > .wpgb-checkbox .wpgb-checkbox-label {
	padding-right: 0;
}

/* Sans bouton de repli, les sous-catégories restent toujours dépliées. */
.archive .wpgb-facet .wpgb-checkbox-facet li[aria-expanded="false"] ul {
	display: block;
}

/* Liste : une ligne par filtre, sous-catégories en retrait. */
.archive .wpgb-facet .wpgb-button-facet .wpgb-inline-list {
	display: block;
	margin: 0;
}

.archive .wpgb-facet .wpgb-hierarchical-list li,
.archive .wpgb-facet .wpgb-button-facet .wpgb-inline-list li {
	margin: 0;
}

.archive .wpgb-facet .wpgb-hierarchical-list ul {
	margin: 4px 0 0 20px;
}

/* Chaque filtre : une ligne cliquable, en pastille une fois coché. */
.archive .wpgb-facet .wpgb-checkbox-facet .wpgb-checkbox,
.archive .wpgb-facet .wpgb-button-facet .wpgb-button {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin-left: -24px;
	padding: 0 20px 0 24px;
	border: 0;
	border-radius: 999px;
	background-color: transparent;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

/* Sous 1300 px, le conteneur (1245 px, sans marge) colle au bord : pas de débord. */
@media (max-width: 1299px) {

	.archive .wpgb-facet .wpgb-checkbox-facet .wpgb-checkbox,
	.archive .wpgb-facet .wpgb-button-facet .wpgb-button {
		margin-left: 0;
		padding-left: 16px;
	}
}

.archive .wpgb-facet .wpgb-checkbox span.wpgb-checkbox-label,
.archive .wpgb-facet .wpgb-button-facet .wpgb-button-label {
	display: block;
	padding: 0;
	line-height: 1.3;
}

.archive .wpgb-facet .wpgb-checkbox:not([aria-disabled="true"]):hover,
.archive .wpgb-facet .wpgb-checkbox[aria-pressed="true"],
.archive .wpgb-facet .wpgb-button-facet .wpgb-button:not([aria-disabled="true"]):hover,
.archive .wpgb-facet .wpgb-button-facet .wpgb-button[aria-pressed="true"] {
	background-color: var(--c2r-filtre-fond);
	color: inherit;
}

.archive .wpgb-facet .wpgb-checkbox:focus-visible,
.archive .wpgb-facet .wpgb-button-facet .wpgb-button:focus-visible {
	outline: 2px solid var(--c2r-filtre-croix);
	outline-offset: 2px;
}

/* Croix à droite du filtre coché, sauf sur « Tous les vélos » (valeur vide). */
.archive .wpgb-facet .wpgb-checkbox[aria-pressed="true"]::after,
.archive .wpgb-facet .wpgb-button-facet .wpgb-button[aria-pressed="true"]:not(:has(> input[value=""]))::after {
	content: "";
	flex: 0 0 12px;
	width: 12px;
	height: 12px;
	background-color: var(--c2r-filtre-croix);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l10 10M11 1L1 11' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l10 10M11 1L1 11' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Mobile : filtres au-dessus des produits, en pastilles sur plusieurs lignes. */
@media (max-width: 768px) {

	.archive .site-content {
		display: flex;
		flex-direction: column;
	}

	.archive .is-left-sidebar {
		order: -1;
	}

	.archive .inside-left-sidebar {
		margin-top: 0;
		margin-bottom: 0;
	}

	.archive .inside-left-sidebar > aside {
		margin-bottom: 0 !important; /* Écrase le thème enfant, lui-même en !important. */
		padding-top: 8px !important; /* Écrase le thème enfant, lui-même en !important. */
		padding-bottom: 8px !important; /* Écrase le thème enfant, lui-même en !important. */
	}

	.archive .wpgb-facet fieldset:last-child {
		margin-bottom: 16px;
	}

	.archive h4.wpgb-facet-title::after {
		margin-top: 6px;
	}

	.archive .wpgb-facet .wpgb-hierarchical-list,
	.archive .wpgb-facet .wpgb-hierarchical-list ul,
	.archive .wpgb-facet .wpgb-button-facet .wpgb-inline-list {
		display: flex !important; /* Écrase le display: none de WP Grid Builder sur les branches repliées. */
		flex-wrap: wrap;
		gap: 8px;
	}

	.archive .wpgb-facet .wpgb-hierarchical-list ul {
		flex-basis: 100%;
		margin: 8px 0 0 16px;
	}

	.archive .wpgb-facet .wpgb-hierarchical-list li {
		margin: 0;
	}

	/* Une catégorie parente occupe sa ligne, ses enfants dessous. */
	.archive .wpgb-facet .wpgb-hierarchical-list li:has(> ul) {
		display: flex;
		flex-wrap: wrap;
		flex-basis: 100%;
	}

	.archive .wpgb-facet .wpgb-checkbox-facet .wpgb-checkbox,
	.archive .wpgb-facet .wpgb-button-facet .wpgb-button {
		margin-left: 0;
		min-height: 40px;
		padding: 0 16px;
		border: 1px solid #d6d6d6;
	}

	.archive .wpgb-facet .wpgb-checkbox[aria-pressed="true"],
	.archive .wpgb-facet .wpgb-button-facet .wpgb-button[aria-pressed="true"] {
		border-color: transparent;
	}
}


/**
 * 16.0 Loupe de recherche de l'en-tête mobile
 *
 * Bouton ajouté par oueb-c2r-correctifs.php dans la barre de GeneratePress,
 * à côté du panier. Le même crochet sert la navigation du bureau, où la
 * loupe du widget d'en-tête suffit : le bouton n'y est pas affiché.
 * Sélecteurs en #mobile-header pour battre le style des boutons de
 * GeneratePress (fond, couleurs au survol et au focus).
 */

.oueb-c2r-recherche {
	display: none;
}

#mobile-header .oueb-c2r-recherche {
	display: flex;
	align-self: stretch;
}

#mobile-header .oueb-c2r-recherche__bouton,
#mobile-header .oueb-c2r-recherche__bouton:hover,
#mobile-header .oueb-c2r-recherche__bouton:focus {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 10px;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

#mobile-header .oueb-c2r-recherche__bouton:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.oueb-c2r-recherche__bouton svg {
	width: 1em;
	height: 1em;
}

/* Loupe, panier et menu resserrés : 10 px de chaque côté au lieu de 20. */
#mobile-header .menu-bar-item > a,
#mobile-header .menu-toggle {
	padding-right: 10px;
	padding-left: 10px;
}

/*
 * Surimpression de recherche en mobile. En position fixe sans bord droit,
 * elle prenait la largeur de son contenu (415 px sur un écran de 375) :
 * le champ sortait à gauche, collé au bord. Le décalage de la croix,
 * prévu pour ce débordement, est retiré.
 */
@media (max-width: 768px) {

	.popup-search {
		right: 0;
	}

	.popup-search > div {
		gap: 16px;
		padding-right: 16px;
		padding-left: 16px;
	}

	.popup-search .popup-search-form {
		flex: 1;
		min-width: 0;
	}

	.popup-search #search-close {
		transform: translateY(5px);
	}
}
