/* Ombelle Grilles : grilles de produits et d'articles. */

/* Couleurs de la charte, aussi pour les filtres placés hors de la grille. */
.og-grille,
.og-filtre {
	--og-or: #9b6f00;
	--og-or-clair: #ce9400;
	--og-brun: #542804;
	--og-texte: #251201;
	--og-gris: #c8c8c8;
	--og-rouge: #f85464;
	--og-etoiles: #f7ab13;
	--og-chargement: #edf3f8;
	--og-roue: #bd9657;
	--og-courbe: cubic-bezier(0.2, 0.75, 0.5, 1);
}

.og-grille {
	/* Colonnes et écarts : la valeur de la plus petite largeur définie l'emporte. */
	--c: var(--og-col);
	--g: var(--og-ecart);
	--rx: var(--og-rx, 4);
	--ry: var(--og-ry, 3);
	margin-bottom: 1em;
}

@media (max-width: 1340px) {
	.og-grille { --c: var(--og-col-1340, var(--og-col)); }
}
@media (max-width: 1200px) {
	.og-grille {
		--c: var(--og-col-1200, var(--og-col-1340, var(--og-col)));
		--rx: var(--og-rx-1200, var(--og-rx, 4));
		--ry: var(--og-ry-1200, var(--og-ry, 3));
	}
}
@media (max-width: 1140px) {
	.og-grille { --c: var(--og-col-1140, var(--og-col-1200, var(--og-col-1340, var(--og-col)))); }
}
@media (max-width: 992px) {
	.og-grille { --c: var(--og-col-992, var(--og-col-1140, var(--og-col-1200, var(--og-col-1340, var(--og-col))))); }
}
@media (max-width: 768px) {
	.og-grille {
		--c: var(--og-col-768, var(--og-col-992, var(--og-col-1140, var(--og-col-1200, var(--og-col-1340, var(--og-col))))));
		--g: var(--og-ecart-768, var(--og-ecart));
	}
}
@media (max-width: 576px) {
	.og-grille {
		--c: var(--og-col-576, var(--og-col-768, var(--og-col-992, var(--og-col-1140, var(--og-col-1200, var(--og-col-1340, var(--og-col)))))));
		--g: var(--og-ecart-576, var(--og-ecart-768, var(--og-ecart)));
	}
}
@media (max-width: 320px) {
	.og-grille { --g: var(--og-ecart-320, var(--og-ecart-576, var(--og-ecart-768, var(--og-ecart)))); }
}

/* Grille ---------------------------------------------------------------- */

.og-cartes {
	display: grid;
	grid-template-columns: repeat(var(--c), minmax(0, 1fr));
	gap: var(--g);
	align-items: stretch;
}

.og-cartes[aria-busy="true"] {
	opacity: 0.5;
	transition: opacity 0.2s;
}

.og-vide {
	margin: 1em 0;
	text-align: center;
}

.og-masque {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Apparition des cartes, en cascade. */
.og-carte {
	position: relative;
	opacity: 0;
	transform: translate3d(0, 40px, 0);
	transition: opacity 1.993s cubic-bezier(0.1, 0.3, 0.2, 1), transform 1.993s cubic-bezier(0.1, 0.3, 0.2, 1);
	transition-delay: calc(var(--og-rang, 0) * 60ms);
}

.og-carte.og-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.og-carte,
	.og-carte * {
		transition: none !important;
		animation: none !important;
	}
}

/* Images : fond et roue pendant le chargement, fondu à l'arrivée. */
.og-carte-media {
	position: relative;
	overflow: hidden;
	background: var(--og-chargement);
}

.og-carte-media::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 3px solid var(--og-roue);
	border-right-color: transparent;
	border-radius: 50%;
	animation: og-roue 0.8s linear infinite;
	pointer-events: none;
}

.og-carte-media.og-chargee::after {
	content: none;
}

@keyframes og-roue {
	to { transform: rotate(360deg); }
}

/* Dimensions avec un sélecteur renforcé : « .elementor img { height: auto } »
   du thème ne doit pas raccourcir l'image (sinon une bande de fond apparaît
   dessous). L'opacité reste à part, en sélecteur simple, pour que
   « .og-chargee .og-image » puisse l'emporter et afficher l'image. */
.og-carte .og-carte-media img.og-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.og-image {
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.4s cubic-bezier(0.15, 0.75, 0.5, 1);
}

.og-chargee .og-image {
	opacity: 1;
}

/* Carte produit --------------------------------------------------------- */

.og-carte-produit .og-carte-interieur {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 6px;
	background: #fff;
	box-shadow: rgba(0, 0, 0, 0.075) 0 2px 6px 0;
	transition: transform 0.5s var(--og-courbe), box-shadow 0.5s var(--og-courbe);
}

.og-carte-produit:hover .og-carte-interieur {
	box-shadow: rgba(0, 0, 0, 0.15) 0 50px 95px -15px;
	transform: scale(1.05);
}

.og-carte-produit .og-carte-media {
	flex: 0 0 auto;
	height: 300px;
}

.og-carte-badges {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	pointer-events: none;
}

.og-badge {
	display: inline-block;
	border-radius: 0.5em;
	color: #fff;
	background: var(--og-or-clair);
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
}

.og-badge-nouveau {
	margin: 15px 0 0 18px;
	padding: 0.35em 0.8em;
	font-size: 1em;
	line-height: 1.4;
	text-transform: capitalize;
}

.og-badge-promo {
	margin: 2em;
	padding: 0.5em 1em;
	font-size: 0.75em;
	line-height: 1.25em;
}

.og-badge-rupture {
	margin: 15px 0 0 18px;
	padding: 0.35em 1em;
	font-size: 1em;
	line-height: 1.4;
	background: var(--og-rouge);
}

.og-carte-note {
	position: absolute;
	right: 0.5em;
	bottom: 0.5em;
	z-index: 2;
	font-size: 2em;
	line-height: 1;
	color: rgba(255, 255, 255, 0.6);
	opacity: 0;
	transform: translate3d(0, 0.3em, 0);
	transition: opacity 0.5s var(--og-courbe), transform 0.5s var(--og-courbe);
	pointer-events: none;
}

.og-carte-note::before,
.og-carte-note span::before {
	content: "★★★★★";
	letter-spacing: 0.05em;
}

.og-carte-note span {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--og-etoiles);
}

.og-carte-produit:hover .og-carte-note {
	opacity: 1;
	transform: none;
}

.og-carte-contenu {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	background: #fff;
}

.og-carte-corps {
	flex: 1 0 auto;
	padding: 1.5625em 1.5625em 0;
}

.og-carte-titre {
	position: relative;
	z-index: 3;
	margin: 0 0 0.3em;
	padding: 0;
	color: var(--og-brun);
	font: 700 1.125em/1.375em "Quicksand", sans-serif;
}

.og-carte-titre a,
.og-carte-titre a:hover {
	color: inherit;
	text-decoration: none;
}

.og-carte-pied {
	position: relative;
	padding: 0 1.5625em 1.5625em;
}

.og-carte-prix {
	display: inline-block;
	vertical-align: top;
	padding: 0 0.15em;
	color: var(--og-or);
	font: 600 18px/25px "Quicksand", sans-serif;
	transition: opacity 0.275s var(--og-courbe), transform 0.275s var(--og-courbe);
}

.og-carte-prix del {
	opacity: 0.6;
	color: #767676;
	font-weight: 500;
}

.og-carte-prix ins {
	text-decoration: none;
}

.og-carte-produit:hover .og-carte-prix {
	opacity: 0;
	transform: translate3d(0, -0.5em, 0);
}

.og-grille .og-carte-panier,
.og-grille .og-carte-panier.button {
	position: absolute;
	bottom: 2em;
	left: 1.5625em;
	z-index: 3;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--og-or-clair);
	font: 600 0.85em/1.4 "Poppins", sans-serif;
	text-decoration: none;
	opacity: 0;
	transform: translate3d(0, 0.5em, 0);
	transition: opacity 0.5s var(--og-courbe), transform 0.5s var(--og-courbe), color 0.2s;
}

.og-grille .og-carte-panier:hover {
	background: none;
	color: var(--og-brun);
}

.og-carte-produit:hover .og-carte-panier,
.og-carte-panier:focus-visible {
	opacity: 1;
	transform: none;
}

.og-grille .og-carte-panier.added::after,
.og-grille .og-carte-panier.loading::after {
	margin-left: 0.4em;
}

.og-grille .added_to_cart {
	position: absolute;
	right: 1.5625em;
	bottom: 2em;
	z-index: 3;
	font: 600 0.85em/1.4 "Poppins", sans-serif;
	color: var(--og-brun);
}

/* Lien qui rend toute la carte cliquable. */
.og-carte-lien {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Carte d'article (blog) ------------------------------------------------ */

.og-carte-article {
	container-type: inline-size;
}

.og-carte-article .og-carte-interieur {
	position: relative;
	overflow: hidden;
	border-radius: 0.5em;
	/* Texte proportionnel à la largeur de la carte (16 px pour 500 px). */
	font-size: 3.2cqw;
	transition: box-shadow 0.35s cubic-bezier(0.15, 0.75, 0.5, 1);
}

/* Hauteur : (largeur + écart) × ry / rx − écart. */
.og-carte-article .og-carte-interieur::before {
	content: "";
	display: block;
	padding-top: calc((100% + var(--g)) * var(--ry) / var(--rx) - var(--g));
}

.og-carte-article .og-carte-media {
	position: absolute;
	inset: 0;
}

.og-carte-article:hover .og-image {
	transform: scale(1.1);
}

.og-carte-voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(0, 0, 0, 0) 0%, #000 100%);
	opacity: 0.25;
	transition: opacity 1.05s cubic-bezier(0.15, 0.75, 0.5, 1);
	pointer-events: none;
}

.og-carte-article:hover .og-carte-voile {
	opacity: 0.5;
}

.og-carte-legende {
	position: absolute;
	right: 2em;
	bottom: 2em;
	left: 2em;
	z-index: 2;
}

.og-carte-article .og-carte-titre {
	display: inline-block;
	width: 70%;
	margin: 0 0 1em;
	color: #fff;
	font: 700 2.4em/22px "Quicksand", sans-serif;
}

.og-carte-termes {
	position: relative;
	z-index: 2;
	width: 70%;
	color: #f5f5f5;
	font-size: 1.6em;
	line-height: 1em;
}

.og-carte-termes a {
	position: relative;
	color: #f5f5f5;
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	text-decoration: none;
}

.og-carte-termes a::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	opacity: 0.8;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.45s cubic-bezier(0.15, 0.75, 0.5, 1);
	pointer-events: none;
}

.og-carte-termes a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Filtres ---------------------------------------------------------------- */

.og-zone {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 -16px 1em;
}

.og-zone > .og-filtre {
	padding: 0 16px;
}

.og-zone-bas {
	margin: 4em -16px 0;
}

.og-zone-bas > .og-filtre:empty {
	display: none;
}

.og-filtre-titre {
	margin: 0 0 24px;
	padding: 0;
	color: var(--og-brun);
	font: 600 20px/24px "Quicksand", sans-serif;
}

.og-boutons {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 -8px;
}

.og-grille .og-bouton,
.og-filtre .og-bouton {
	margin: 0 8px 8px 0;
	padding: 5px 16px;
	border: 2px solid var(--og-gris);
	border-radius: 4px;
	background: transparent;
	box-shadow: none;
	color: var(--og-texte);
	font: 400 16px/26px "EB Garamond", serif;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.og-filtre .og-bouton:hover,
.og-filtre .og-bouton:focus {
	border-color: var(--og-or);
	background: transparent;
	color: var(--og-texte);
}

.og-filtre .og-bouton[aria-pressed="true"] {
	border-color: var(--og-or);
	background-color: var(--og-or);
	color: #fff;
}

/* Blog : boutons sans bordure, libellés clairs sur le bandeau doré. */
.og-filtre[data-grille="4"] .og-bouton {
	padding: 5px 16px;
	border: 0;
	color: #eee;
	font: 900 17px/26px "Quicksand", sans-serif;
}

.og-filtre[data-grille="4"] .og-bouton:hover {
	color: var(--og-brun);
	font-weight: 600;
}

.og-filtre[data-grille="4"] .og-bouton[aria-pressed="true"] {
	background-color: var(--og-or);
	color: #eee;
}

.og-recherche {
	position: relative;
	display: block;
}

.og-filtre .og-champ {
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 5px 24px 5px 32px;
	border: 2px solid var(--og-gris);
	border-radius: 4px;
	background: transparent;
	box-shadow: none;
	color: #000;
	font: 400 16px/26px "EB Garamond", serif;
}

.og-filtre .og-champ:focus {
	border-color: var(--og-or);
	outline: none;
}

.og-recherche .og-icone {
	position: absolute;
	top: 50%;
	left: 10px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	color: var(--og-gris);
	pointer-events: none;
}

.og-par-page {
	position: relative;
	display: block;
}

.og-par-page .og-champ {
	width: auto;
	min-width: 90px;
	padding: 5px 36px 5px 12px;
	color: #808080;
	appearance: none;
	cursor: pointer;
}

.og-par-page .og-icone {
	position: absolute;
	top: 50%;
	right: 10px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	color: #808080;
	pointer-events: none;
}

.og-grille .og-suite {
	margin: 0;
	padding: 15px 36px;
	border: 0;
	border-radius: 4px;
	background-color: var(--og-or);
	color: #fff;
	font: 500 18px/20px "EB Garamond", serif;
}

.og-grille .og-suite:hover,
.og-grille .og-suite:focus {
	background-color: var(--og-brun);
	color: #fff;
}

.og-pagination ul {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.og-pagination li {
	display: inline-block;
	margin: 4px;
}

.og-pagination a,
.og-pagination .og-points {
	display: block;
	min-width: 32px;
	height: 32px;
	padding: 0 11px;
	color: var(--og-or);
	font: 600 16px/32px "EB Garamond", serif;
	text-align: center;
	text-decoration: none;
}

.og-pagination a[aria-current] {
	text-decoration: underline;
}

/* Carrousel (fiche produit) --------------------------------------------- */

.og-carrousel {
	position: relative;
}

/* Piste : marge haute et basse pour laisser la place au zoom des cartes au survol. */
.og-grille-carrousel .og-cartes {
	display: flex;
	align-items: flex-start;
	gap: var(--g);
	padding: 18px 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	cursor: grab;
}

.og-grille-carrousel .og-cartes::-webkit-scrollbar {
	display: none;
}

.og-grille-carrousel .og-cartes.og-glisse {
	cursor: grabbing;
	user-select: none;
}

.og-grille-carrousel .og-carte {
	flex: 0 0 calc((100% - (var(--c) - 1) * var(--g)) / var(--c));
}

.og-grille-carrousel .og-carte-interieur {
	height: auto;
}

/* Flèches posées sur les cartes, à gauche et à droite. */
.og-carrousel-bouton {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 77px;
	height: 77px;
	margin: -38px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.og-carrousel-precedent {
	left: 20px;
}

.og-carrousel-suivant {
	right: 0;
}

.og-carrousel-bouton:hover,
.og-carrousel-bouton:focus {
	background: transparent;
	color: var(--og-or-clair);
}

.og-carrousel-bouton .og-icone {
	width: 48px;
	height: 48px;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.og-carrousel-bouton[disabled] {
	opacity: 0.3;
	cursor: default;
}

.og-carrousel-points {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.og-carrousel-points button {
	width: 10px;
	height: 10px;
	margin: 8px 4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ccc;
	cursor: pointer;
}

.og-carrousel-points button[aria-current="true"] {
	background: #333;
}

@media (max-width: 992px) {
	.og-carrousel-bouton {
		width: 48px;
		height: 48px;
	}
}