/* ==========================================================================
   Grid Tool for WP — rendu public
   Aucune valeur dynamique ici : tout passe par des custom properties
   posées par le serveur à partir de valeurs validées.
   La grille réagit à la largeur de SON conteneur (container queries),
   pas à celle de l'écran : elle reste juste dans une colonne latérale.
   ========================================================================== */

.gt-grid-wrap { container-type: inline-size; }

.gt-grid {
	display: grid;
	grid-template-columns: repeat(var(--gt-cols-d, 3), minmax(0, 1fr));
	gap: var(--gt-gap, 24px);
}

@container (max-width: 900px) {
	.gt-grid { grid-template-columns: repeat(var(--gt-cols-t, 2), minmax(0, 1fr)); }
}
@container (max-width: 560px) {
	.gt-grid { grid-template-columns: repeat(var(--gt-cols-m, 1), minmax(0, 1fr)); }
}

/* --- Format carrousel : défilement horizontal natif (scroll-snap) -----------
   Fonctionne entièrement sans JavaScript (glisser au doigt/trackpad, barre
   de défilement) — les flèches ne sont ajoutées qu'en JS, en amélioration
   progressive pure (voir assets/js/frontend.js), jamais requises. Réutilise
   les mêmes --gt-cols-d/t/m que le format grille, pour exprimer cette fois
   le nombre de cartes visibles à la fois plutôt que des colonnes. */
.gt-grid--mode-carousel {
	display: flex;
	flex-wrap: nowrap;
	grid-template-columns: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}
.gt-grid--mode-carousel .gt-card {
	flex: 0 0 calc(100% / var(--gt-cols-d, 3));
	min-width: 0;
	scroll-snap-align: start;
}
/* Plafond de hauteur en unité vh (pas px) : une diapositive plein format
   (1 carte visible, image large) peut sinon dépasser la hauteur de
   l'écran selon le format d'image choisi et la largeur de la colonne du
   thème — quelle que soit la taille d'écran, elle reste toujours
   entièrement visible sans défilement excessif. object-fit: cover (déjà
   sur l'image) recadre proprement si la hauteur plafonnée ne correspond
   plus exactement au ratio choisi, sans jamais déformer l'image. */
.gt-grid--mode-carousel .gt-card__media {
	max-height: 60vh;
}
@container (max-width: 900px) {
	.gt-grid--mode-carousel .gt-card { flex-basis: calc(100% / var(--gt-cols-t, 2)); }
}
@container (max-width: 560px) {
	.gt-grid--mode-carousel .gt-card { flex-basis: calc(100% / var(--gt-cols-m, 1)); }
}

/* En carrousel, le titre en voile (effet au survol « overlay ») reste
   affiché en permanence plutôt qu'au survol seulement : une diapositive
   mise en avant bénéficie d'une légende toujours visible, pas d'un indice
   découvert au survol — comportement déjà celui des écrans tactiles
   (voir la media query hover:none plus haut), étendu ici à tous les
   appareils dès que le format carrousel est actif. */
.gt-grid--mode-carousel.gt-grid--hover-overlay .gt-card__overlay { opacity: 1; }

/* .gt-carousel : enveloppe ajoutée par le JS autour de la grille (jamais
   présente dans le HTML initial) — sans JS, .gt-grid--mode-carousel reste
   seule dans le flux, pleine largeur, utilisable par simple glisser
   tactile/trackpad, juste sans flèches ni points. */
.gt-carousel__viewport {
	position: relative;
}

/* Flèches superposées aux bords de l'image (pas à côté) : neutres et
   semi-opaques par défaut, pour rester lisibles sur n'importe quelle
   photo sans réglage ; passent à la couleur d'accent de la grille dès
   qu'une en a une (même principe que .gt-card__button, cf. plus haut). */
.gt-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: none;
	border-radius: var(--gt-radius, 8px);
	background: rgb(255 255 255 / .85);
	color: #1a1a1a;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease, filter .2s ease;
}
.gt-carousel__arrow--prev { left: .5rem; }
.gt-carousel__arrow--next { right: .5rem; }
.gt-carousel__arrow:hover:not(:disabled) { background: #fff; }
.gt-carousel__arrow:disabled { opacity: .35; cursor: default; }
.gt-carousel__viewport:has(.gt-grid--accent) .gt-carousel__arrow {
	background: var(--gt-accent);
	color: var(--gt-accent-contrast, #fff);
}
.gt-carousel__viewport:has(.gt-grid--accent) .gt-carousel__arrow:hover:not(:disabled) {
	filter: brightness(.92);
}

/* Points de pagination : sous le carrousel (pas superposés à l'image),
   un par carte, cliquables pour y défiler directement.
   Couleur fixe (pas currentColor) : un renforcement de contraste à 40 %
   (au lieu de 25) s'était avéré insuffisant en production — le point actif
   reste toujours visible car il utilise var(--gt-accent, …), mais les
   points inactifs, qui ne dépendaient QUE de currentColor, disparaissaient
   complètement dès que le texte ambiant hérité à cet endroit précis du
   thème était clair (confirmé par reproduction : currentColor peut valoir
   quasi blanc à cet endroit sans que rien dans la grille ne le laisse
   deviner). Mêmes couleurs neutres fixes que les flèches ci-dessus
   (rgb(255 255 255 / .85)) : lisibles sur n'importe quel thème, sans
   dépendre d'une couleur de texte héritée imprévisible. */
.gt-carousel__dots {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-top: .75rem;
	padding: 0;
}
.gt-carousel__dot {
	width: .55rem;
	height: .55rem;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgb(0 0 0 / .3);
	box-shadow: 0 0 0 1px rgb(255 255 255 / .8);
	cursor: pointer;
	transition: background-color .2s ease, width .2s ease, height .2s ease;
}
.gt-carousel__dot:hover { background: rgb(0 0 0 / .5); }
.gt-carousel__dot[aria-current="true"] {
	width: .65rem;
	height: .65rem;
	background: var(--gt-accent, #1a1a1a);
	box-shadow: 0 0 0 1px rgb(255 255 255 / .9);
}

/* --- Carte ----------------------------------------------------------------- */
.gt-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	position: relative;
	background: var(--gt-bg, transparent);
	border-radius: var(--gt-radius, 8px);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.gt-grid--style-bordered .gt-card { border: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.gt-grid--style-shadow .gt-card { box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 6px 18px rgb(0 0 0 / .07); }

.gt-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--gt-ratio, auto);
	border-radius: var(--gt-radius, 8px);
}
.gt-grid--style-bordered .gt-card__media,
.gt-grid--style-shadow .gt-card__media { border-radius: 0; }
.gt-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}
.gt-grid--ratio-auto .gt-card__media img { height: auto; }

/* --- Éléments positionnés sur l'image (9 zones) ------------------------------
   Texte blanc + ombre portée par défaut : lisible sur une photo quelle que
   soit sa couleur dominante. Une couleur explicitement choisie dans la
   grille (--gt-title-color, etc.) reste prioritaire : ces règles ne
   s'appliquent que via l'héritage (color: inherit) de chaque élément.
   Calque en plus : un dégradé sombre (haut ET bas, centre laissé clair)
   derrière le texte, quelle que soit la zone choisie parmi les 9 — texte
   blanc + ombre seuls ne suffisent pas sur une photo claire. ::before (pas
   ::after) pour peindre ce calque entre l'image (non positionnée, donc
   toujours peinte en dessous) et les zones de texte (position: absolute,
   donc toujours peintes au-dessus) ; :has() limite le calque aux cartes
   qui ont effectivement du texte sur l'image, pour ne pas assombrir une
   simple vignette sans texte. Pas de z-index ici : un z-index explicite
   créerait son propre contexte d'empilement et peindrait ce calque
   AU-DESSUS des zones de texte (z-index: auto), quel que soit l'ordre
   dans le code — seul l'ordre dans le DOM (::before avant .gt-card__zone)
   doit décider, ce qui le place correctement derrière. */
.gt-card__media:has(.gt-card__zone)::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgb(0 0 0 / .45) 0%,
		rgb(0 0 0 / 0) 28%,
		rgb(0 0 0 / 0) 68%,
		rgb(0 0 0 / .6) 100%
	);
	pointer-events: none;
}
.gt-card__zone {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	max-width: calc(100% - 1.5rem);
	margin: .75rem;
	color: #fff;
	text-shadow: 0 1px 3px rgb(0 0 0 / .55);
	pointer-events: none;
}
.gt-card__zone a,
.gt-card__zone .gt-card__button { pointer-events: auto; }
/* Catégorie, étiquettes, date, auteur : le texte blanc + ombre ci-dessus ne
   suffit pas sur une zone claire de la photo — un fond semi-transparent
   reste lisible quelle que soit l'image, sans configuration nécessaire. */
.gt-card__zone .gt-card__meta,
.gt-card__zone .gt-card__tag {
	background: rgb(0 0 0 / .55);
	padding: .2em .7em;
	border-radius: 999px;
	border-color: transparent;
	text-shadow: none;
}
.gt-card__zone--top-left      { top: 0; left: 0; align-items: flex-start; text-align: left; }
.gt-card__zone--top-center    { top: 0; left: 50%; transform: translateX(-50%); align-items: center; text-align: center; }
.gt-card__zone--top-right     { top: 0; right: 0; align-items: flex-end; text-align: right; }
.gt-card__zone--middle-left   { top: 50%; left: 0; transform: translateY(-50%); align-items: flex-start; text-align: left; }
.gt-card__zone--middle-center { top: 50%; left: 50%; transform: translate(-50%, -50%); align-items: center; text-align: center; }
.gt-card__zone--middle-right  { top: 50%; right: 0; transform: translateY(-50%); align-items: flex-end; text-align: right; }
.gt-card__zone--bottom-left   { bottom: 0; left: 0; align-items: flex-start; text-align: left; }
.gt-card__zone--bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; text-align: center; }
.gt-card__zone--bottom-right  { bottom: 0; right: 0; align-items: flex-end; text-align: right; }

.gt-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	flex: 1;
	padding: .875rem 0 0;
}
.gt-grid--style-bordered .gt-card__body,
.gt-grid--style-shadow .gt-card__body { padding: 1rem 1.125rem 1.25rem; }
.gt-card__media + .gt-card__body:empty { display: none; }
.gt-grid--align-center .gt-card__body { align-items: center; text-align: center; }

/* --- Disposition horizontale : image à côté du contenu, pas au-dessus -------
   La hauteur de la ligne est pilotée par le contenu (titre/extrait), donc le
   format d'image choisi (--gt-ratio) est ignoré ici au profit d'un remplissage
   en hauteur ; l'image garde son cadrage (object-fit: cover) quelle que soit
   la hauteur réelle. --gt-h-img-width (réglage "Largeur de l'image") fixe sa
   part de largeur ; en dessous de 220px de conteneur, même une image réduite
   au minimum ne laisse plus assez de place au texte : repasse en vertical
   (container query) — au-dessus, la disposition horizontale est conservée
   quelle que soit l'étroitesse de la colonne. */
.gt-grid--layout-horizontal .gt-card { flex-direction: row; align-items: stretch; }
.gt-grid--layout-horizontal .gt-card__media { flex: 0 0 clamp(64px, var(--gt-h-img-width, 32%), 260px); aspect-ratio: auto; }
.gt-grid--layout-horizontal .gt-card__body { padding: 0 0 0 1rem; }
.gt-grid--layout-horizontal.gt-grid--style-bordered .gt-card__body,
.gt-grid--layout-horizontal.gt-grid--style-shadow .gt-card__body { padding: .75rem 1.125rem .75rem 0; }
@container (max-width: 220px) {
	.gt-grid--layout-horizontal .gt-card { flex-direction: column; }
	.gt-grid--layout-horizontal .gt-card__media { flex: none; aspect-ratio: var(--gt-ratio, auto); }
	.gt-grid--layout-horizontal .gt-card__body { padding: .875rem 0 0; }
	.gt-grid--layout-horizontal.gt-grid--style-bordered .gt-card__body,
	.gt-grid--layout-horizontal.gt-grid--style-shadow .gt-card__body { padding: 1rem 1.125rem 1.25rem; }
}

/* --- Typographie ------------------------------------------------------------ */
.gt-card__title {
	margin: 0;
	font-size: var(--gt-title-size, 1.25rem);
	font-weight: var(--gt-title-weight, 700);
	line-height: 1.25;
	color: var(--gt-title-color, inherit);
}
/* Placée ici, APRÈS la règle de base ci-dessus : même sélecteur, même
   spécificité, donc seul l'ordre dans la feuille de style décide laquelle
   l'emporte quand le conteneur est étroit (pas la présence d'un
   @container) — une version précédente de cette règle, placée plus haut
   dans le fichier, était donc toujours écrasée par la règle de base,
   rendant le réglage « Taille du titre sur mobile » sans effet. */
@container (max-width: 560px) {
	.gt-card__title { font-size: var(--gt-title-size-m, var(--gt-title-size, 1.125rem)); }
}
/* Pas de font-family ici par défaut : le titre peut être un <h2>/<h3>/<h4>,
   et on laisse volontairement le thème appliquer son propre style de titre
   (ex: theme.json "elements.heading") plutôt que de le neutraliser. Ne
   s'applique que si une police est explicitement choisie pour le titre. */
.gt-grid--has-title-font .gt-card__title { font-family: var(--gt-title-font); }
.gt-card__title a { color: inherit; text-decoration: none; }
.gt-card__title a:hover,
.gt-card__title a:focus-visible { text-decoration: underline; text-underline-offset: .15em; }

/* Couleur de titre explicitement choisie (Apparence > Couleurs) : reste
   prioritaire même sur un thème qui stylise ses liens avec !important —
   constaté sur un titre positionné sur l'image (.gt-card__zone), qui est
   un <a> : la simple règle color:inherit ci-dessus ne suffisait pas face
   à !important. N'active !important que si une couleur est explicitement
   choisie (classe conditionnelle, voir GT_Render::render_results()) :
   sans choix explicite, le thème doit garder la main (CHANGELOG.md 1.4.3). */
.gt-grid--has-title-color .gt-card__title,
.gt-grid--has-title-color .gt-card__title a {
	color: var(--gt-title-color) !important;
}

.gt-card__excerpt {
	margin: 0;
	font-size: var(--gt-text-size, 1rem);
	line-height: 1.55;
	color: var(--gt-text-color, inherit);
}

.gt-card__meta {
	font-size: var(--gt-meta-size, .8125rem);
	line-height: 1.3;
	color: var(--gt-meta-color, color-mix(in srgb, currentColor 65%, transparent));
}
.gt-card__term { font-weight: 600; color: var(--gt-accent, var(--gt-meta-color, inherit)); }

.gt-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gt-card__tag {
	font-size: var(--gt-meta-size, .8125rem);
	line-height: 1.3;
	color: var(--gt-meta-color, color-mix(in srgb, currentColor 65%, transparent));
	padding: .15em .65em;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.gt-card__price { font-weight: 600; color: var(--gt-title-color, inherit); }

.gt-card__button {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	padding: .55em 1.1em;
	border-radius: calc(var(--gt-radius, 8px) * .75);
	border: 1px solid var(--gt-accent, currentColor);
	background: transparent;
	color: var(--gt-accent, inherit);
	font-size: var(--gt-meta-size, .875rem);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
/* Comme pour le titre : pas de font-family par défaut sur ces éléments
   (catégorie, date, extrait, bouton) — on laisse le thème appliquer son
   propre style de texte courant. Ne s'applique que si une police est
   explicitement choisie pour ce groupe. */
.gt-grid--has-body-font .gt-card__excerpt,
.gt-grid--has-body-font .gt-card__meta,
.gt-grid--has-body-font .gt-card__tag,
.gt-grid--has-body-font .gt-card__button { font-family: var(--gt-body-font); }
.gt-grid--accent .gt-card__button { background: var(--gt-accent); color: var(--gt-accent-contrast, #fff); }
.gt-card__button:hover,
.gt-card__button:focus-visible { filter: brightness(.92); }

.gt-grid-empty { margin: 0; padding: 1.5rem 0; opacity: .75; }

/* --- Effets au survol -------------------------------------------------------- */
.gt-grid--hover-zoom .gt-card:hover .gt-card__media img,
.gt-grid--hover-zoom .gt-card:focus-within .gt-card__media img { transform: scale(1.06); }

.gt-grid--hover-lift .gt-card:hover,
.gt-grid--hover-lift .gt-card:focus-within { transform: translateY(-4px); box-shadow: 0 14px 30px rgb(0 0 0 / .12); }

/* Ce voile est toujours à l'intérieur d'un <a>, et certains thèmes
   stylisent leurs liens avec !important (constaté chez un utilisateur :
   même un sélecteur à 2 classes ne suffisait pas à l'emporter — contexte
   différent de la police de la barre d'outils, CHANGELOG.md 1.4.10, où
   on voulait justement laisser le thème gagner ; ici la couleur vient
   d'un choix explicite de l'admin dans Apparence > Couleurs, elle doit
   rester prioritaire). !important uniquement sur color : le seul cas où
   ce plugin l'utilise, volontairement, pour cette raison précise. */
.gt-card__media .gt-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 1rem;
	background: linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / 0) 65%);
	color: var(--gt-title-color, #fff) !important;
	font-size: var(--gt-title-size, 1.125rem);
	font-weight: var(--gt-title-weight, 700);
	line-height: 1.25;
	opacity: 0;
	transition: opacity .3s ease;
}
.gt-card:hover .gt-card__overlay,
.gt-card:focus-within .gt-card__overlay { opacity: 1; }
@media (hover: none) {
	.gt-card__overlay { opacity: 1; }
}

/* --- Barre d'outils : recherche, facettes, tri --------------------------------
   Un vrai <form method="get">, fonctionnel sans JS (assets/js/frontend.js
   n'intercepte que l'amélioration progressive, jamais requis). Pas de
   font-family ici : un thème qui stylise déjà ses <select>/<input> (cas
   courant) doit rester prioritaire, voir CHANGELOG.md 1.4.10. */

/* Recherche + facettes à gauche (peuvent s'étendre sur plusieurs lignes si
   beaucoup d'étiquettes, sans jamais déplacer le groupe de droite), Trier
   par + Appliquer toujours groupés et rivés à droite. align-items sur le
   HAUT ici : sinon un groupe de gauche plus haut (facettes sur 2 lignes)
   entraînerait le groupe de droite vers le bas avec lui. */
.gt-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1rem 1.5rem;
	margin-bottom: 1.5rem;
}

/* margin-left: auto (plutôt que justify-content sur .gt-toolbar) : reste
   rivé à droite même quand .gt-toolbar__left est absent (grille sans
   recherche ni facette, seulement un tri) — un seul enfant dans le flex
   avec justify-content:space-between se retrouverait collé à gauche. */
.gt-toolbar__right {
	margin-left: auto;
}

/* À l'intérieur de chaque groupe, alignées sur le BAS : un champ de
   recherche/un groupe de facettes a un intitulé au-dessus de son contenu
   (2 lignes) tandis que « Trier par » a son libellé sur la même ligne que
   son menu (1 ligne) — aligner sur le haut décalerait visiblement les
   cases, le menu et le bouton les uns par rapport aux autres. */
.gt-toolbar__left,
.gt-toolbar__right {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem 1.5rem;
}

/* .gt-toolbar__search et .gt-toolbar__sort sont des <p> : sans cette
   remise à zéro, leur marge par défaut du navigateur (~1em) décale leur
   contenu par rapport aux autres blocs de la barre (.gt-facet, un
   <fieldset>, a déjà sa marge à 0 ci-dessous) — même symptôme que le
   correctif d'alignement de la 1.4.16, resté incomplet sur ces deux blocs. */
.gt-toolbar__search,
.gt-toolbar__sort {
	margin: 0;
}

.gt-toolbar__search input[type="search"] {
	min-width: 220px;
}

.gt-toolbar__facets {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.gt-facet {
	border: none;
	margin: 0;
	padding: 0;
}

.gt-facet legend {
	font-weight: 600;
	margin-bottom: 0.25em;
	font-size: 0.8125rem;
}

.gt-facet__option {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin-right: 0.75em;
	font-size: 0.9rem;
}

/* Mode "tags" : facettes présentées comme des puces cliquables plutôt que
   des cases à cocher classiques. */
.gt-facet--tags .gt-facet__option {
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 999px;
	padding: 0.3em 0.85em;
	cursor: pointer;
}
.gt-facet--tags .gt-facet__option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.gt-facet--tags .gt-facet__option:has(input:checked) {
	background: var(--gt-accent, #1a1a1a);
	color: var(--gt-accent-contrast, #fff);
	border-color: transparent;
}

.gt-toolbar__sort select {
	min-width: 180px;
}

/* --- Pagination : vrais liens <a href>, suivables par un crawler sans JS. --- */

.gt-pagination {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.gt-pagination a,
.gt-pagination__current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2em;
	padding: 0.25em 0.5em;
	text-decoration: none;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 4px;
}

.gt-pagination__current {
	font-weight: 600;
	background: var(--gt-accent, #1a1a1a);
	color: var(--gt-accent-contrast, #fff);
	border-color: transparent;
}

.gt-grid-results[aria-busy="true"] {
	opacity: 0.6;
}

/* --- Accessibilité ------------------------------------------------------------ */
.gt-sr-only {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
	.gt-card, .gt-card__media img, .gt-card__overlay, .gt-card__button { transition: none; }
	.gt-grid--hover-zoom .gt-card:hover .gt-card__media img,
	.gt-grid--hover-lift .gt-card:hover { transform: none; }
}