/*
 * Correctifs propres à WordPress.
 *
 * vitrine.css est repris tel quel du frontal d'origine. Ce fichier ne
 * contient que ce qui n'existait pas là-bas : l'adaptation des styles
 * autrefois écrits en ligne par React, et la cohabitation avec WordPress.
 */

/* --------------------------------------------------------------------
 * L'attribut hidden doit gagner
 *
 * React montait et démontait ces éléments ; ici ils sont toujours dans le
 * document et c'est « hidden » qui les masque. Or le display:none que le
 * navigateur applique à [hidden] est écrasé par la moindre règle posant un
 * display — et vitrine.css en pose sur .search-overlay (flex) comme sur
 * .cart-count (grid). Sans cette règle, la recherche resterait ouverte sur
 * toutes les pages et le badge afficherait « 0 » en permanence.
 * ----------------------------------------------------------------- */

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------
 * Vignettes
 *
 * Le dégradé passe par une propriété personnalisée plutôt que par un
 * attribut style écrivant « background » : une valeur invalide retombe
 * alors sur le repli au lieu de casser l'attribut, et le cas d'une
 * vignette sans dégradé est couvert par la même règle.
 * ----------------------------------------------------------------- */

.thumb {
  background: var(--tint, #f2f4f6);
}

/* Remplace les styles en ligne du composant d'origine. */
.thumb img,
.gallery-main img,
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------
 * Bouton d'ajout rapide
 *
 * React échangeait l'icône ; en PHP les deux sont rendues et le CSS
 * choisit laquelle montrer. Aucune requête, aucun scintillement.
 * ----------------------------------------------------------------- */

.card-media .add-btn .add-btn__done,
.card-media .add-btn.added .add-btn__idle {
  display: none;
}

.card-media .add-btn .add-btn__idle,
.card-media .add-btn.added .add-btn__done {
  display: grid;
  place-items: center;
}

/* --------------------------------------------------------------------
 * Repli emoji des vignettes de catégorie
 * ----------------------------------------------------------------- */

.cat-rail__emoji {
  font-size: 36px;
  transform: rotate(-16deg);
  line-height: 1;
}

/* --------------------------------------------------------------------
 * Notification
 *
 * L'animation d'entrée vient de vitrine.css. Il ne manquait que la
 * sortie, React démontant simplement l'élément.
 * ----------------------------------------------------------------- */

.toast {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast:not(.visible) {
  opacity: 0;
  transform: translate(-50%, 16px);
}

/* --------------------------------------------------------------------
 * Barre d'administration
 *
 * Elle décale tout le document vers le bas et casserait les trois
 * éléments collants. Trois seuils : 32 px, 46 px sous 782 px de large,
 * et 0 sous 600 px où la barre cesse d'être fixe.
 *
 * À recetter systématiquement déconnecté : c'est l'écart de rendu le
 * plus souvent livré sans avoir été vu.
 * ----------------------------------------------------------------- */

body.admin-bar .header {
  top: 32px;
}

body.admin-bar .filters,
body.admin-bar .cart-summary {
  top: calc(var(--header-h) + 32px + 1.25rem);
}

body.admin-bar .search-overlay {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .header {
    top: 46px;
  }
  body.admin-bar .filters,
  body.admin-bar .cart-summary {
    top: calc(var(--header-h) + 46px + 1.25rem);
  }
  body.admin-bar .search-overlay {
    top: 46px;
  }
}

@media screen and (max-width: 600px) {
  /* Sous ce seuil la barre passe en position absolue et défile. */
  body.admin-bar .header,
  body.admin-bar .search-overlay {
    top: 0;
  }
  body.admin-bar .filters,
  body.admin-bar .cart-summary {
    top: calc(var(--header-h) + 1.25rem);
  }
}

/* --------------------------------------------------------------------
 * Éléments propres à WordPress absents du frontal d'origine
 * ----------------------------------------------------------------- */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed !important;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  width: auto;
  height: auto;
  clip: auto;
  padding: 0.75rem 1.25rem;
  background: var(--black);
  color: var(--white);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 600;
}

/* Pagination — absente du frontal d'origine, qui affichait tout d'un coup. */
.vdf-pagination {
  margin: 2.5rem 0 1rem;
}

.vdf-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
}

.vdf-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.75rem;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.vdf-pagination .page-numbers:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.vdf-pagination .page-numbers.current {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.vdf-pagination .page-numbers.dots {
  border-color: transparent;
}

/* Sélecteur de tri — il n'existait pas dans l'interface d'origine. */
.sort-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sort-select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

.sort-select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* La pastille de filtre est un lien ici, pas un bouton. */
a.filter-chip {
  text-decoration: none;
}

/* Gabarits génériques des pages et articles conservées du site précédent. */
.page-content {
  padding: 2.5rem 0 4rem;
}

.page-content .page-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 1.25rem;
}

.page-content .entry-content > * + * {
  margin-top: 1rem;
}

.page-content .entry-content img {
  max-width: 100%;
  height: auto;
}

.page-content .entry-thumb {
  margin: 1.5rem 0;
}

.page-content .entry-thumb img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}

/* --------------------------------------------------------------------
 * Garde-fous
 * ----------------------------------------------------------------- */

/* Le contenu doit occuper l'espace restant, body étant en colonne flex. */
main {
  flex: 1 0 auto;
}

/* Un tableau collé dans une page ne doit jamais faire défiler le document. */
.page-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}