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

/* Couleurs de la charte, aussi pour les filtres placés hors de la grille, le
   panneau d'aperçu (ajouté à la fin de la page) et les blocs de l'admin
   (.og-charte : saisie de la fiche produit). */
.og-grille,
.og-filtre,
.og-tiroir,
.og-charte {
	--og-or: #9b6f00;
	--og-or-clair: #ce9400;
	--og-brun: #542804;
	--og-texte: #251201;
	--og-gris: #c8c8c8;
	--og-gris-clair: #9a9a9a;
	--og-gris-texte: #767676;
	--og-creme: #f6f1e7;
	--og-creme-clair: #fefdfb;
	--og-vert: #3d7a3a;
	--og-vert-clair: #dfeadb;
	/* Récolte dans le calendrier de culture. */
	--og-recolte: #c65a11;
	--og-erreur: #b3261e;
	--og-rouge: #f85464;
	--og-etoiles: #f7ab13;
	--og-chargement: #edf3f8;
	--og-roue: #bd9657;
	--og-blanc: #fff;
	--og-noir: #000;
	--og-blanc-casse: #f5f5f5;
	--og-gris-perle: #eee;
	--og-gris-point: #ccc;
	--og-gris-moyen: #808080;
	--og-gris-fonce: #333;
	--og-voile: rgba(37, 18, 1, 0.45);
	--og-blanc-voile: rgba(255, 255, 255, 0.9);
	--og-police: "Quicksand", sans-serif;
	--og-police-texte: "EB Garamond", serif;
	--og-police-bouton: "Poppins", sans-serif;
	/* Échelle des tailles de texte : toute taille en px passe par elle. */
	--og-taille-xs: 11px;
	--og-taille-s: 13px;
	--og-taille-m: 14px;
	--og-taille-l: 16px;
	--og-taille-xl: 18px;
	--og-taille-titre: 22px;
	--og-taille-grand: 28px;
	/* Grands titres d'affichage (bandeaux, accroches de page). */
	--og-taille-affiche: 34px;
	--og-taille-affiche-l: 44px;
	--og-taille-affiche-xl: 56px;
	/* Arrondi des cartes et des blocs (photos, encadrés). */
	--og-arrondi: 6px;
	--og-courbe: cubic-bezier(0.2, 0.75, 0.5, 1);
}

/* « hidden » l'emporte sur l'affichage des composants (bouton « Afficher la
   suite » sans rien à afficher, panneau fermé…). */
:is(.og-grille, .og-filtre, .og-tiroir)[hidden],
:is(.og-grille, .og-filtre, .og-tiroir) [hidden] {
	display: none !important;
}

.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-vide-texte {
	margin: 0 0 12px;
}

.og-vide[hidden],
.og-vide [hidden] {
	display: none;
}

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

/* Cartes affichées d'emblée, sans effet d'apparition (demande de Gaël du
   10/11/2026 : la montée en cascade faisait scintiller grilles et
   carrousels). */
.og-carte {
	position: relative;
}

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

/* Images : fond et roue pendant le chargement, puis l'image telle quelle
   (plus de fondu, même raison que les cartes). */
.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). */
.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 {
	transition: transform 0.4s cubic-bezier(0.15, 0.75, 0.5, 1);
}

/* Carte produit (vignette retenue le 02/11/2026) ------------------------
   Photos à faire glisser, œil d'aperçu rapide, grammages, prix et « Ajouter »
   toujours visibles (pensé pour le téléphone). */

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

.og-carte-produit:hover .og-carte-interieur {
	box-shadow: rgba(0, 0, 0, 0.12) 0 8px 24px 0;
}

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

/* Photos à faire glisser ; flèches au survol sur ordinateur. */
.og-photos {
	position: absolute;
	inset: 0;
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.og-photos::-webkit-scrollbar {
	display: none;
}

.og-diapo {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.og-grille .og-fleche,
.og-fleche {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: -16px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--og-blanc-voile);
	color: var(--og-brun);
	font: 700 var(--og-taille-titre)/1 var(--og-police);
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.2s;
}

/* Icône commune (og_icone), centrée au pixel près, contrairement aux
   caractères « ‹ › » que la police posait trop bas. */
.og-fleche .og-icone {
	width: 18px;
	height: 18px;
}

.og-fleche-g {
	left: 8px;
}

.og-fleche-d {
	right: 8px;
}

@media (hover: hover) {
	.og-carte-produit:hover .og-fleche {
		opacity: 1;
	}
}

.og-reperes {
	position: absolute;
	right: 0;
	bottom: 10px;
	left: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 5px;
	pointer-events: none;
}

.og-reperes span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
	transition: background-color 0.2s, width 0.2s;
}

.og-reperes span.og-actif {
	width: 14px;
	border-radius: 3px;
	background: var(--og-blanc);
}

/* L'œil : aperçu rapide (description, calendrier de culture, achat). */
.og-grille .og-oeil,
.og-oeil {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--og-blanc-voile);
	color: var(--og-brun);
	box-shadow: rgba(0, 0, 0, 0.15) 0 2px 6px;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.og-grille .og-oeil:hover,
.og-grille .og-oeil:focus-visible {
	background: var(--og-or);
	color: var(--og-blanc);
}

/* Étiquettes : discrètes, et arrêtées avant l'œil. */
.og-carte-badges {
	position: absolute;
	top: 0;
	right: 52px;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	pointer-events: none;
}

.og-badge {
	display: inline-block;
	max-width: calc(100% - 10px);
	margin: 10px 0 0 10px;
	padding: 3px 8px;
	border-radius: 4px;
	color: var(--og-blanc);
	background: var(--og-or-clair);
	font: 600 var(--og-taille-xs)/1.3 var(--og-police);
	letter-spacing: 0.02em;
}

.og-badge-reappro {
	background: var(--og-brun);
}

.og-en-rupture .og-image {
	filter: grayscale(0.7);
}

.og-en-rupture .og-carte-media.og-chargee .og-image {
	opacity: 0.75;
}

.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: var(--og-blanc);
}

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

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

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

.og-carte-pied {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
	padding: 10px 1.25em 1.25em;
}

/* Vignettes d'une même rangée à la même hauteur (1.8.2) : la carte remplit la
   rangée (grille ou carrousel), le pied (grammages, prix, « Ajouter ») est
   collé en bas et le titre réserve deux lignes, coupé au-delà. */
.og-carte-produit .og-carte-titre {
	display: -webkit-box;
	overflow: hidden;
	min-height: calc(2 * 1.375em);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* Prix, grammages et boutons : partagés par la vignette et l'aperçu. */
.og-ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.og-grille .og-prix-choix,
.og-tiroir .og-prix-choix {
	margin: 0;
	color: var(--og-or);
	font: 600 var(--og-taille-xl)/25px var(--og-police);
}

.og-prix-choix del {
	opacity: 0.6;
	color: var(--og-gris-texte);
	font-weight: 500;
}

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

.og-pour {
	color: var(--og-gris-texte);
	font-size: var(--og-taille-m);
	font-weight: 500;
}

.og-grille .og-info {
	margin: 0;
	color: var(--og-gris-texte);
	font: 500 var(--og-taille-m)/1.4 var(--og-police);
}

.og-grille .og-reappro,
.og-tiroir .og-reappro {
	margin: 0;
	color: var(--og-brun);
	font: 700 var(--og-taille-m)/1.4 var(--og-police);
}

/* Bouton d'action : plein (or, survol brun) ou contour (og-secondaire).
   Seul bouton d'action des grilles, du panneau et des pages maison ; il
   habille aussi le bouton du formulaire « M'avertir » de WooCommerce sur la
   fiche de test (wc_bis_form__button, markup de WooCommerce) et les boutons
   des pages WooCommerce (panier, commande, compte : .og-page-woo, 1.9.1). */
:is(.og-grille, .og-filtre, .og-tiroir) .og-bouton-action,
.og-fiche .wc_bis_form button.wc_bis_form__button,
body .og-page-woo :is(a.button, button.button, input.button, a.button.alt, button.button.alt) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin: 0;
	padding: 8px 14px;
	border: 2px solid var(--og-or);
	border-radius: 4px;
	background: var(--og-or);
	color: var(--og-blanc);
	font: 600 var(--og-taille-m)/1.2 var(--og-police);
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

:is(.og-grille, .og-filtre, .og-tiroir) .og-bouton-action:hover,
:is(.og-grille, .og-filtre, .og-tiroir) .og-bouton-action:focus-visible,
.og-fiche .wc_bis_form button.wc_bis_form__button:hover,
.og-fiche .wc_bis_form button.wc_bis_form__button:focus-visible,
body .og-page-woo :is(a.button, button.button, input.button, a.button.alt, button.button.alt):is(:hover, :focus-visible) {
	border-color: var(--og-brun);
	background: var(--og-brun);
	color: var(--og-blanc);
}

:is(.og-grille, .og-filtre, .og-tiroir) .og-bouton-action.og-secondaire {
	background: transparent;
	color: var(--og-or);
}

:is(.og-grille, .og-filtre, .og-tiroir) .og-bouton-action.og-secondaire:hover,
:is(.og-grille, .og-filtre, .og-tiroir) .og-bouton-action.og-secondaire:focus-visible {
	background: transparent;
	border-color: var(--og-brun);
	color: var(--og-brun);
}

:is(.og-grille, .og-filtre, .og-tiroir) .og-bouton-action[data-etat="ok"] {
	border-color: var(--og-vert);
	background: var(--og-vert);
}

:is(.og-grille, .og-filtre, .og-tiroir) .og-bouton-action[data-etat="erreur"] {
	border-color: var(--og-rouge);
	background: var(--og-rouge);
}

:is(.og-grille, .og-filtre, .og-tiroir) .og-bouton-action[disabled] {
	opacity: 0.6;
	cursor: wait;
}

.og-erreur {
	margin: 0;
	color: var(--og-erreur);
	font: 600 var(--og-taille-s)/1.4 var(--og-police);
}

.og-grammages {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

/* Grammages en cartes (fiche produit, og_vignette_selecteur « cartes ») :
   grammage, graines et prix, état choisi très net ; épuisé : barré, en pointillés,
   mais choisissable (« M'avertir »). */
.og-grammages.og-grammages-cartes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
}

.og-grammages-cartes .og-choix {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin: 0;
	padding: 14px 16px;
	border: 2px solid var(--og-gris);
	border-radius: var(--og-arrondi);
	background: var(--og-blanc);
	box-shadow: none;
	color: var(--og-texte);
	font: 700 var(--og-taille-xl)/1.2 var(--og-police);
	text-align: left;
	text-transform: none;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.og-grammages-cartes .og-choix:hover,
.og-grammages-cartes .og-choix:focus-visible {
	border-color: var(--og-or);
	background: var(--og-blanc);
	color: var(--og-texte);
}

.og-grammages-cartes .og-choix[aria-checked="true"] {
	border-color: var(--og-or);
	background: var(--og-creme);
	box-shadow: inset 0 0 0 1px var(--og-or);
	color: var(--og-texte);
}

.og-grammages-cartes .og-choix[aria-checked="true"]::after {
	content: "✓";
	position: absolute;
	top: 8px;
	right: 8px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--og-or);
	color: var(--og-blanc);
	font: 700 var(--og-taille-s)/1 var(--og-police);
}

.og-choix-prix {
	color: var(--og-or);
	font: 600 var(--og-taille-m)/1.3 var(--og-police);
}

/* Jauge (proportion du plus gros sachet). */
.og-choix-jauge {
	align-self: stretch;
	height: 4px;
	margin-top: 4px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--og-creme);
}

.og-choix[aria-checked="true"] .og-choix-jauge {
	background: var(--og-blanc);
}

.og-choix-jauge i {
	display: block;
	height: 100%;
	background: var(--og-or-clair);
}

.og-grammages-cartes .og-choix[data-epuise] {
	border-style: dashed;
}

.og-choix[data-epuise] :is(.og-choix-nom, .og-choix-prix) {
	color: var(--og-gris-clair);
	text-decoration: line-through;
}

.og-choix-etat {
	color: var(--og-brun);
	font: 700 var(--og-taille-xs)/1.3 var(--og-police);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Les 4 grammages tiennent sur une ligne dès 210 px environ : puces serrées,
   qui se partagent la largeur de la carte. */
.og-grammages .og-puce {
	flex: 1 1 auto;
	white-space: nowrap;
}

:is(.og-grille, .og-tiroir) .og-grammages .og-puce {
	padding-inline: 4px;
}

/* Puce à choix : grammages (arrondie, compacte) et filtres (og-puce-filtre).
   État choisi par aria-checked ou aria-pressed. */
:is(.og-grille, .og-filtre, .og-tiroir) .og-puce {
	margin: 0;
	padding: 5px 10px;
	border: 2px solid var(--og-gris);
	border-radius: 999px;
	background: var(--og-blanc);
	box-shadow: none;
	color: var(--og-texte);
	font: 600 var(--og-taille-s)/1.2 var(--og-police);
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

:is(.og-grille, .og-filtre, .og-tiroir) .og-puce:hover,
:is(.og-grille, .og-filtre, .og-tiroir) .og-puce:focus-visible {
	border-color: var(--og-or);
	background: var(--og-blanc);
	color: var(--og-texte);
}

:is(.og-grille, .og-filtre, .og-tiroir) .og-puce:is([aria-checked="true"], [aria-pressed="true"]) {
	border-color: var(--og-or);
	background: var(--og-or);
	color: var(--og-blanc);
}

:is(.og-grille, .og-filtre, .og-tiroir) .og-puce[disabled] {
	border-style: dashed;
	color: var(--og-gris-clair);
	text-decoration: line-through;
	cursor: not-allowed;
}

:is(.og-grille, .og-filtre, .og-tiroir) .og-puce-filtre {
	margin: 0 8px 8px 0;
	padding: 5px 16px;
	border-radius: 4px;
	background: transparent;
	font: 400 var(--og-taille-l)/26px var(--og-police-texte);
}

:is(.og-grille, .og-filtre, .og-tiroir) .og-puce-filtre:hover,
:is(.og-grille, .og-filtre, .og-tiroir) .og-puce-filtre:focus-visible {
	background: transparent;
}

/* Case à cocher du site (og_case, composant commun) : case dorée, libellé
   à droite. */
.og-charte .og-case {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--og-texte);
	font: 600 var(--og-taille-m)/1.3 var(--og-police);
	cursor: pointer;
}

.og-charte .og-case input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--og-or);
	cursor: pointer;
}

/* Puces de filtre en pilules (sous-catégories) : bloc parent .og-pilules. */
.og-pilules .og-boutons {
	gap: 8px;
	margin: 0;
}

.og-pilules .og-filtre .og-puce-filtre {
	margin: 0;
	padding: 6px 16px;
	border: 1px solid var(--og-gris-perle);
	border-radius: 999px;
	background: var(--og-blanc);
	color: var(--og-texte);
	font: 600 var(--og-taille-m)/1.3 var(--og-police);
}

.og-pilules .og-filtre .og-puce-filtre:is(:hover, :focus-visible) {
	border-color: var(--og-or-clair);
	background: var(--og-creme-clair);
	color: var(--og-brun);
}

.og-pilules .og-filtre .og-puce-filtre[aria-pressed="true"] {
	border-color: var(--og-brun);
	background: var(--og-brun);
	color: var(--og-blanc);
}

/* Nombre de résultats d'une grille (og_nombre_resultats). */
.og-grille .og-nombre-resultats {
	margin: 0;
	color: var(--og-texte);
	font: 600 var(--og-taille-m)/1.3 var(--og-police);
	white-space: nowrap;
}

/* Sous-navigation en texte entre pages sœurs (og_sous_nav, 1.8.9) : sous le
   bandeau, alignée sur le conteneur de page, page affichée soulignée d'or ;
   bande défilante quand la place manque. */
.og-sous-nav {
	padding: 0 var(--og-accueil-gouttiere);
	border-bottom: 1px solid var(--og-gris-perle);
}

.og-sous-nav ul {
	display: flex;
	gap: 0 32px;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.og-sous-nav ul::-webkit-scrollbar {
	display: none;
}

.og-sous-nav a {
	display: block;
	padding: 14px 0 11px;
	border-bottom: 3px solid transparent;
	color: var(--og-texte);
	font: 600 var(--og-taille-m)/1.3 var(--og-police);
	text-decoration: none;
	white-space: nowrap;
}

.og-sous-nav a:is(:hover, :focus-visible) {
	border-bottom-color: var(--og-or-clair);
	color: var(--og-brun);
}

.og-sous-nav a[aria-current="page"] {
	border-bottom-color: var(--og-or);
	color: var(--og-brun);
}

/* Liens entre catégories voisines (og_nav_categories) : photo ronde, nom et
   nombre d'éléments à côté (dessous sur téléphone) ; page affichée en or. */
.og-nav-categories ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.og-nav-categories .og-nav-categorie {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	align-content: center;
	column-gap: 12px;
	row-gap: 2px;
	color: var(--og-texte);
	font: 600 var(--og-taille-l)/1.2 var(--og-police);
	text-decoration: none;
}

.og-nav-categories .og-nav-categorie-photo {
	grid-row: span 2;
	align-self: center;
	display: block;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border: 3px solid var(--og-blanc);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--og-gris-perle);
	transition: box-shadow 0.2s;
}

.og-nav-categories .og-nav-categorie-photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.4s var(--og-courbe);
}

.og-nav-categories .og-nav-categorie:hover .og-nav-categorie-photo img {
	transform: scale(1.06);
}

.og-nav-categories .og-nav-categorie:is(:hover, :focus-visible) .og-nav-categorie-photo {
	box-shadow: 0 0 0 2px var(--og-or-clair);
}

.og-nav-categories .og-nav-categorie[aria-current="page"] .og-nav-categorie-photo {
	box-shadow: 0 0 0 3px var(--og-or);
}

.og-nav-categories .og-nav-categorie[aria-current="page"] .og-nav-categorie-nom {
	color: var(--og-or);
}

.og-nav-categories .og-nav-categorie-nom {
	align-self: end;
}

.og-nav-categories .og-nav-categorie-nombre {
	align-self: start;
	color: var(--og-gris-texte);
	font: 500 var(--og-taille-s)/1 var(--og-police);
}

@media (max-width: 768px) {
	.og-nav-categories .og-nav-categorie {
		grid-template-columns: auto;
		justify-items: center;
		row-gap: 4px;
	}

	.og-nav-categories .og-nav-categorie-photo {
		grid-row: auto;
		width: 56px;
		height: 56px;
	}
}

/* Fil d'Ariane (og_fil_ariane) : couleur du bloc qui le contient. */
.og-ariane ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	font: 500 var(--og-taille-s)/1.4 var(--og-police);
}

.og-ariane li + li::before {
	content: "›";
	margin: 0 8px;
	opacity: 0.7;
}

.og-ariane a {
	color: inherit;
	text-decoration: none;
}

.og-ariane a:hover {
	text-decoration: underline;
}

/* Blog sur Elementor (nouveau site coupé) : puces sans bordure, libellés
   clairs sur le bandeau doré. Dans la barre commune (.og-pilules, 1.8.9) :
   les pilules communes. */
:not(.og-pilules) > .og-filtre[data-grille="4"] .og-puce-filtre {
	border: 0;
	color: var(--og-gris-perle);
	font: 900 var(--og-taille-l)/26px var(--og-police);
}

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

:not(.og-pilules) > .og-filtre[data-grille="4"] .og-puce-filtre[aria-pressed="true"] {
	color: var(--og-gris-perle);
}

.og-grammages-liste select {
	width: 100%;
	height: 40px;
	padding: 0 10px;
	border: 2px solid var(--og-gris);
	border-radius: 4px;
	background: var(--og-blanc);
	color: var(--og-texte);
	font: 600 var(--og-taille-m)/1.2 var(--og-police);
}

.og-quantite {
	display: inline-flex;
	align-items: stretch;
	height: 40px;
	border: 2px solid var(--og-gris);
	border-radius: 4px;
	overflow: hidden;
}

:is(.og-tiroir, .og-fiche) .og-quantite button {
	width: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--og-creme);
	color: var(--og-brun);
	font: 700 var(--og-taille-xl)/1 var(--og-police);
	cursor: pointer;
}

:is(.og-tiroir, .og-fiche) .og-quantite input {
	width: 36px;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--og-blanc);
	color: var(--og-texte);
	font: 700 var(--og-taille-l)/1 var(--og-police);
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.og-quantite input::-webkit-inner-spin-button,
.og-quantite input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* Panneau d'aperçu (l'œil) ---------------------------------------------- */

.og-tiroir {
	position: fixed;
	inset: 0;
	z-index: 99999;
	color: var(--og-texte);
	font-family: var(--og-police);
}

.og-tiroir-fond {
	position: absolute;
	inset: 0;
	background: var(--og-voile);
}

.og-tiroir-panneau {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(560px, 100%);
	overflow-y: auto;
	background: var(--og-blanc);
	box-shadow: rgba(0, 0, 0, 0.25) -12px 0 40px;
	animation: og-tiroir 0.3s var(--og-courbe);
}

@keyframes og-tiroir {
	from { transform: translateX(100%); }
}

.og-tiroir .og-tiroir-fermer {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--og-blanc-voile);
	color: var(--og-brun);
	font-size: var(--og-taille-grand);
	line-height: 1;
	cursor: pointer;
}

.og-tiroir-contenu > img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
}

.og-tiroir-corps {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 24px 0;
}

.og-tiroir-corps h3 {
	margin: 0;
	color: var(--og-brun);
	font: 700 var(--og-taille-titre)/1.3 var(--og-police);
}

.og-tiroir-corps p {
	margin: 0;
	line-height: 1.5;
}

/* Pied du panneau : « Voir la fiche complète » (contour) puis l'action principale. */
.og-tiroir-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	margin-left: auto;
}

.og-apercu {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.og-description p + p {
	margin-top: 0.6em;
}

.og-culture h4 {
	margin: 0 0 8px;
	color: var(--og-brun);
	font: 700 var(--og-taille-l)/1.3 var(--og-police);
}

.og-note {
	margin: 0;
	color: var(--og-gris-texte);
	font-size: var(--og-taille-s);
}

/* L'achat reste visible en bas du panneau pendant la lecture. */
.og-achat {
	position: sticky;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 -24px;
	padding: 14px 24px 20px;
	border-top: 1px solid var(--og-gris);
	background: var(--og-blanc);
}

@media (max-width: 576px) {
	.og-carte-produit .og-carte-media {
		height: 180px;
	}

	.og-carte-corps {
		padding: 14px 12px 0;
	}

	.og-carte-pied {
		padding: 10px 12px 14px;
	}

	.og-carte-titre {
		font-size: var(--og-taille-l);
		line-height: 1.3;
	}

	.og-carte-produit .og-carte-titre {
		min-height: calc(2 * 1.3em);
	}

	.og-carte-pied .og-bouton-action {
		width: 100%;
	}

	/* Panneau : les deux boutons côte à côte, sur toute la largeur. */
	.og-tiroir-actions {
		flex-wrap: nowrap;
		width: 100%;
	}

	.og-tiroir-actions .og-bouton-action {
		flex: 1 1 0;
		text-align: center;
	}
}

/* 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;
	/* Bas de la carte foncé : titre et rubriques lisibles sur les photos claires. */
	background: linear-gradient(transparent 15%, var(--og-noir) 100%);
	opacity: 0.75;
	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.85;
}

.og-carte-legende {
	position: absolute;
	right: 2em;
	bottom: 2em;
	left: 2em;
	z-index: 2;
	text-shadow: 0 1px 6px var(--og-voile);
}

.og-carte-article .og-carte-titre {
	display: inline-block;
	width: 70%;
	margin: 0 0 1em;
	color: var(--og-blanc);
	font: 700 2.4em/1.15 var(--og-police);
}

.og-carte-termes {
	position: relative;
	z-index: 2;
	width: 70%;
	color: var(--og-blanc-casse);
	font-size: 1.6em;
	line-height: 1.3;
}

.og-carte-termes a {
	position: relative;
	color: var(--og-blanc-casse);
	font-family: var(--og-police);
	font-weight: 600;
	text-decoration: none;
}

.og-carte-termes a::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--og-blanc);
	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;
}

/* Nouveau site : le titre et les catégories prennent toute la largeur de la
   carte ; le dégradé d'origine (.og-carte-voile) est gardé (demande de Gaël
   du 10/11 : la bande foncée de la 1.8.9 retirée). */
.og-carte-lisible :is(.og-carte-titre, .og-carte-termes) {
	width: auto;
}

/* 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 var(--og-taille-xl)/24px var(--og-police);
}

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

.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: var(--og-noir);
	font: 400 var(--og-taille-l)/26px var(--og-police-texte);
}

.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: var(--og-gris-moyen);
	appearance: none;
	cursor: pointer;
}

.og-par-page .og-icone {
	position: absolute;
	top: 50%;
	right: 10px;
	/* Une feuille d'Elementor (modèle de recherche) pose un left. */
	left: auto;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	color: var(--og-gris-moyen);
	pointer-events: none;
}

/* « Afficher la suite » : bouton d'action, en plus grand. */
.og-grille .og-bouton-action.og-suite {
	padding: 15px 36px;
	border: 0;
	font: 500 var(--og-taille-xl)/20px var(--og-police-texte);
}

.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 var(--og-taille-l)/32px var(--og-police-texte);
	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 à l'ombre des cartes au survol. */
.og-grille-carrousel .og-cartes {
	display: flex;
	align-items: stretch;
	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));
}

/* 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: var(--og-blanc);
	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: var(--og-gris-point);
	cursor: pointer;
}

.og-carrousel-points button[aria-current="true"] {
	background: var(--og-gris-fonce);
}

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

/* Avis en haut de l'aperçu de l'éditeur Elementor, sur les pages servies par
   le nouveau site (nouveau-site.php, 1.8.4). */
.og-avis-elementor {
	position: relative;
	z-index: 10;
	padding: 12px 16px;
	border-bottom: 2px solid var(--og-or);
	background: var(--og-creme);
	color: var(--og-texte);
	font: 600 var(--og-taille-m)/1.4 var(--og-police);
	text-align: center;
}

.og-avis-elementor p {
	margin: 0;
}