/* ============================================================
   PIF GADGET - compléments propres à WordPress
   (accessibilité, pagination, contenu d'article et de page,
   filtres en liens, 404, pied de page en menus).
   ============================================================ */

/* ---------- Accessibilité ---------- */

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

.lien-evitement {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--encre);
  color: var(--blanc);
  font-family: var(--titre);
  font-weight: 600;
}
.lien-evitement:focus { top: 12px; }

/* Pastille du panier vide : masquée (le style .pastille forcerait l'affichage) */
.pif-compte-panier[hidden] { display: none !important; }

/* Barre d'administration WordPress : le menu plein écran passe dessous */
body.admin-bar .menu-mobile.est-ouvert { top: var(--wp-admin--admin-bar--height, 0px); }

/* Tête de Pif animée : même encombrement que l'image */
video.pif__portrait { aspect-ratio: 674 / 720; width: auto; object-fit: contain; }
/* mobile : la vidéo suit la largeur de la scène (sinon elle garde ses 674 px et déborde à droite) */
@media (max-width: 860px) { video.pif__portrait { width: 100%; height: auto; } }

/* ---------- Filtres et recherche en liens (au lieu de boutons) ---------- */

.filtres a {
  font-family: var(--titre);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 8px 15px;
  background: var(--blanc);
  border: 2px solid var(--encre);
  border-radius: 999px;
  color: var(--encre);
  transition: background-color .12s ease, color .12s ease;
}
.filtres a:hover,
.filtres a[aria-current] { background: var(--encre); color: var(--blanc); }

/* ---------- Pagination (articles, gadgets, boutique) ---------- */
/* WooCommerce : le <ul> porte aussi la classe page-numbers, d'où « li > » */

.pagination .nav-links,
.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}

.pagination .page-numbers,
.woocommerce-pagination li > .page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 2px solid var(--encre);
  border-radius: 999px;
  background: var(--blanc);
  font-family: var(--titre);
  font-weight: 600;
}
.pagination .page-numbers svg,
.woocommerce-pagination li > .page-numbers svg { width: 18px; height: 18px; }
.pagination .page-numbers.current,
.woocommerce-pagination li > .page-numbers.current { background: var(--encre); color: var(--blanc); }
.pagination .page-numbers.dots,
.woocommerce-pagination li > .page-numbers.dots { border: 0; background: none; }
.woocommerce-pagination ul { border: 0; }
.woocommerce-pagination li { border: 0; }

/* ---------- Contenu éditorial (articles, pages, gadgets) ---------- */

.article { max-width: 880px; }
.contenu--page { max-width: 880px; margin-inline: auto; }

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 12px;
  font-family: var(--titre);
  font-size: .9rem;
  color: var(--encre-60);
}

.article__visuel { margin: 0 0 24px; }
.article__visuel img { width: 100%; border-radius: 16px; }
.article__visuel--contient img { width: auto; max-height: 520px; margin-inline: auto; }
.article__retour { margin: 20px 0 0; }

.contenu { font-size: 1.04rem; line-height: 1.7; }
.contenu > :first-child { margin-top: 0; }
.contenu > :last-child { margin-bottom: 0; }
.contenu h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); font-weight: 600; margin: 1.6em 0 .5em; }
.contenu h3 { font-size: 1.2rem; font-weight: 600; margin: 1.4em 0 .4em; }
.contenu p, .contenu ul, .contenu ol { margin: 0 0 1em; }
.contenu a:not(.btn) { color: var(--rouge); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.contenu img { border-radius: 12px; }
.contenu figure { margin: 1.4em 0; }
.contenu figcaption { font-size: .86rem; color: var(--encre-60); margin-top: 6px; text-align: center; }
.contenu blockquote {
  margin: 1.4em 0;
  padding: 14px 20px;
  border-left: 4px solid var(--jaune);
  background: var(--cahier);
  border-radius: 0 12px 12px 0;
  font-family: var(--titre);
  font-size: 1.1rem;
}
.contenu table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; }
.contenu th, .contenu td { padding: 10px 12px; border-bottom: 1px solid var(--bord); text-align: left; }
.contenu iframe, .contenu video { max-width: 100%; border-radius: 12px; }
.contenu .alignleft { float: left; margin: .3em 1.2em 1em 0; }
.contenu .alignright { float: right; margin: .3em 0 1em 1.2em; }
.contenu .aligncenter { margin-inline: auto; }
.contenu .wp-block-button__link { border-radius: 999px; background: var(--rouge); color: var(--blanc); font-family: var(--titre); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .82rem; padding: 14px 26px; }

/* ---------- Divers ---------- */

.nouveau__texte p { margin: 14px 0 0; max-width: 58ch; color: var(--encre-60); }
.numero__texte p { margin: 16px 0 0; max-width: 58ch; color: var(--encre-60); }
.numero__prix { margin: 16px 0 0; font-family: var(--titre); font-weight: 600; font-size: 1.6rem; color: var(--rouge); }
.numero__feuilleter a, .numero__feuilleter ._df_button { font-family: var(--titre); }

.vide, .aide-admin {
  padding: 16px 20px;
  border: 2px dashed var(--encre-35);
  border-radius: 16px;
  background: var(--blanc);
}
.aide-admin { font-size: .9rem; color: var(--encre-60); }

.introuvable { display: grid; justify-items: center; gap: 20px; text-align: center; }
.introuvable img { width: min(60%, 280px); }
.introuvable__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Pied de page : menus WordPress */
.pied .pied__legal { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; }
.pied__legal a:hover { text-decoration: underline; }
.pied__bas a[href^="mailto"]:hover { text-decoration: underline; }

/* Dessin animé sans image choisie : fond bleu nuit au lieu du vide */
.serie { background-color: var(--encre); }

/* emojis maison de l'ancien site, dans les catégories et les titres */
.emoji-pif { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.22em; margin-right: .15em; }

/* boutons écrits dans le contenu (ancien site : gros lien rouge souligné) */
.contenu a.wp-block-button__link, .contenu a.button, .contenu a.btn-pif, .contenu a.bouton {
  display: inline-block; padding: 12px 22px; border-radius: 999px; background: var(--rouge);
  color: var(--blanc); font-family: var(--titre); font-weight: 600; font-size: .95rem;
  text-decoration: none; text-transform: none;
}
.contenu a.wp-block-button__link:hover, .contenu a.button:hover { background: var(--encre); color: var(--blanc); }
.contenu .wp-block-button { margin: 8px 0; }
/* un lien seul dans son paragraphe, en gras : lien d'action, pas un mot dans une phrase */
.contenu p > a:only-child:not(.btn) { font-size: 1rem; }

/* ---------- Menu compact imprimé en fin de page (voir pif_menu_mobile) ---------- */
/* tablette : menu déroulant sous le header, fixé à l'écran (le panneau n'est plus dans le header) */
@media (min-width: 861px) and (max-width: 1200px) {
  .menu-mobile { position: fixed; top: var(--menu-top, 90px); }
  .menu-mobile__tete { display: none; }
}
/* mobile : plein écran, au-dessus de tout, avec sa propre rangée logo + fermer */
@media (max-width: 860px) {
  .menu-mobile { z-index: 100000; padding-top: 14px; }
  .menu-mobile__tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
  .menu-mobile__tete .marque img { height: 64px; width: auto; }
  .menu-mobile__tete .marque { display: block; margin-inline: auto; padding-left: 38px; }
  .menu-mobile__fermer { flex: 0 0 auto; }
  body.admin-bar .menu-mobile.est-ouvert { top: var(--wp-admin--admin-bar--height, 46px); }
  /* la rangée logo + fermer reste en haut, les liens se centrent dans l'espace restant */
  .menu-mobile.est-ouvert { justify-content: flex-start; }
  .menu-mobile__tete { margin-bottom: auto; }
  .menu-mobile a:last-of-type { margin-bottom: auto; }
}
/* sous 600 px, WordPress ne fixe plus sa barre d'administration : le menu part du haut */
@media (max-width: 600px) {
  body.admin-bar .menu-mobile.est-ouvert { top: 0; }
}
@media (min-width: 1201px) { .menu-mobile__tete { display: none; } }
/* la pastille du panier collée au mot « Panier » */
.menu-mobile a { justify-content: flex-start; gap: 10px; }

/* ---------- Bouton « afficher le mot de passe » (WooCommerce) ----------
   Le thème ne charge pas les styles de WooCommerce : sans ces règles, le
   bouton s'affichait en petit trait vide sous chaque champ mot de passe.
   Ici : un œil posé à droite, dans le champ. */
.password-input { position: relative; display: block; width: 100%; }
.password-input input { width: 100%; padding-right: 54px !important; }
.show-password-input {
  all: unset;
  position: absolute;
  top: 50%;
  right: 12px;
  width: 36px;
  height: 36px;
  translate: 0 -50%;
  border-radius: 50%;
  cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001326' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.show-password-input::before, .show-password-input::after { content: none !important; }
.show-password-input.display-password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001326' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}
.show-password-input:hover { background-color: rgba(0, 19, 38, .07); }
.show-password-input:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }