/* ==========================================================================
   RÉGLAGES — modifie seulement les valeurs ci-dessous
   ========================================================================== */
:root {
  --wp-taille-carte: 100%;   /* taille des cartes, en % de leur colonne (100% max) : 50% = moitié de la colonne */
  --wp-colonnes: 4;          /* cartes par rangée */
  --wp-echelle-texte: 0.7;     /* taille du texte : 0.5 = moitié */
}

/* nombre de colonnes */
.wp-grille, .wp-albums {
  grid-template-columns: repeat(var(--wp-colonnes), minmax(0, 1fr));
}

/* sur téléphone, 2 colonnes au lieu de 4 (supprime ce bloc pour garder 4 partout) */
@media (max-width: 700px) {
  .wp-grille, .wp-albums {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* taille standard des cartes : largeur réglée, hauteur fixe (format 3/4) pour toutes les cartes */
.wp-carte {
  width: var(--wp-taille-carte);
  justify-self: start;
  aspect-ratio: 3 / 4;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wp-carte .wp-image {
  /* le thème met width: fit-content sur <figure> : on force la pleine largeur */
  display: block;
  width: 100%;
  max-width: none;
  flex: 0 0 55%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}
.wp-carte .wp-image img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;          /* l'image remplit tout le cadre, rognée au besoin */
  object-position: center;    /* centrée */
}
.wp-carte .wp-sans-image { aspect-ratio: auto; height: auto; }
.wp-carte .wp-sans-image .wp-ouvrir {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font: 2rem var(--wp-police);
  color: var(--wp-rose);
  text-decoration: none;
  opacity: .5;
}
.wp-carte .wp-corps {
  flex: 1;
  min-height: 0;
  overflow-y: auto;   /* le texte coupé reste accessible en défilant dans la carte */
}

/* tuiles d'album : même largeur réglable */
.wp-album {
  width: var(--wp-taille-carte);
  justify-self: start;
  height: auto;
}
.wp-album img { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* taille du texte */
.md-typeset .wp-corps h3 { font-size: calc(.8rem * var(--wp-echelle-texte)); }
.md-typeset .wp-desc,
.md-typeset .wp-corps details { font-size: calc(.7rem * var(--wp-echelle-texte)); }
.wp-image figcaption { font-size: calc(.55rem * var(--wp-echelle-texte)); }
.wp-album span { font-size: calc(.75rem * var(--wp-echelle-texte)); }
.wp-rarete { font-size: calc(.6rem * var(--wp-echelle-texte)); }
.md-typeset .wp-corps summary { white-space: nowrap; }

/* Collection wiki-pick — thème de gauchiasses.fr (cartes opaques, angles droits, Russo One), couleurs trans */
:root {
  --wp-bleu: #5bcefa;
  --wp-rose: #f5a9b8;
  --wp-blanc: #ffffff;
  --wp-fond: #08080a;                   /* opaque, comme les cartes de gauchiasses.fr (lisibilité) */
  --wp-drapeau: linear-gradient(135deg, var(--wp-bleu) 0%, var(--wp-rose) 30%,
                var(--wp-blanc) 50%, var(--wp-rose) 70%, var(--wp-bleu) 100%);
  --wp-police: "Russo One", "Courier New", monospace;
}

.wp-grille, .wp-albums {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
}

/* --- carte --- */
.wp-carte, .wp-album {
  --wp-lueur: var(--wp-bleu);
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  background: var(--wp-fond);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
/* bordure dégradée bleu / rose / blanc */
.wp-carte::before, .wp-album::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: var(--wp-drapeau);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
/* la lueur suit l'ordre des bandes du drapeau : bleu, rose, blanc, rose, bleu */
.wp-carte:nth-child(5n+2), .wp-album:nth-child(5n+2),
.wp-carte:nth-child(5n+4), .wp-album:nth-child(5n+4) { --wp-lueur: var(--wp-rose); }
.wp-carte:nth-child(5n+3), .wp-album:nth-child(5n+3) { --wp-lueur: var(--wp-blanc); }

.wp-carte:hover, .wp-album:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 6px var(--wp-lueur), 0 0 18px var(--wp-lueur);
}

/* --- image --- */
.wp-image { margin: 0; }
.wp-image img, .wp-album img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.wp-image img { aspect-ratio: 4 / 3; }
.wp-album img { aspect-ratio: 16 / 9; }
.wp-image figcaption {
  font: .55rem/1.4 var(--wp-police);
  padding: .15rem .5rem;
  color: var(--wp-blanc);
  opacity: .55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wp-image figcaption a { color: inherit; }
.wp-sans-image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  font: 2rem var(--wp-police);
  color: var(--wp-rose);
  opacity: .5;
}

/* --- texte --- */
.wp-corps { padding: .4rem .7rem .7rem; }
.md-typeset .wp-corps h3 {
  margin: .2rem 0;
  font: 700 .8rem/1.3 var(--wp-police);
}
.md-typeset .wp-corps h3 a { color: var(--wp-bleu); }
.md-typeset .wp-carte:nth-child(even) .wp-corps h3 a { color: var(--wp-rose); }
.md-typeset .wp-corps h3 a:hover { color: var(--wp-blanc); text-shadow: 0 0 6px var(--wp-lueur); }
.md-typeset .wp-desc {
  margin: 0 0 .4rem;
  font-size: .7rem;
  color: var(--wp-blanc);
  opacity: .75;
}
.md-typeset .wp-corps details {
  margin: 0;
  font-size: .7rem;
  border: none;
  box-shadow: none;
  background: transparent;
}
.md-typeset .wp-corps details p {
  margin: .3rem 0 0;
  color: var(--wp-blanc);
  opacity: .85;
}
.md-typeset .wp-corps summary {
  font-family: var(--wp-police);
  color: var(--wp-rose);
  cursor: pointer;
}

.wp-album span {
  display: block;
  padding: .45rem .7rem;
  font: 700 .75rem var(--wp-police);
  color: var(--wp-blanc);
}

.wp-rarete {
  position: absolute;
  top: .4rem;
  right: .4rem;
  z-index: 3;
  padding: .05rem .4rem;
  border-radius: .3rem;
  font: .6rem var(--wp-police);
  background: var(--wp-rose);
  color: #000;
}
.wp-introuvable { opacity: .5; }
.wp-introuvable::before { background: var(--wp-blanc); opacity: .4; }

.md-typeset .wp-mentions { font-size: .6rem; opacity: .6; margin-top: 2rem; }

@media (prefers-reduced-motion: reduce) {
  .wp-carte, .wp-album { transition: none; }
  .wp-carte:hover, .wp-album:hover { transform: none; }
}

/* ==========================================================================
   APPLICATION DES RÉGLAGES (règles qui lisent les variables ci-dessus)
   ========================================================================== */

/* ==========================================================================
   FICHE PLEIN ÉCRAN : ouverte par le « + » ou l'image (API popover du navigateur)
   Le popover est rendu au-dessus de tout, hors des conteneurs du thème : il est
   toujours centré à l'écran, sans défilement. Navigateurs : Firefox 125+, Chrome 114+, Safari 17+.
   ========================================================================== */
.wp-fiche {
  /* ne pas définir display ici : le navigateur le gère (fermé = masqué) */
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--wp-blanc);
  max-width: 100vw;
  max-height: 100vh;
  overflow: visible;
}
.wp-fiche::backdrop { background: rgba(0, 0, 0, .88); }
.wp-panneau {
  box-sizing: border-box;
  position: relative;
  display: flex;
  gap: 1.5rem;
  width: min(96vw, 1000px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  border-radius: .6rem;
  background: #05080c;
  color: var(--wp-blanc);
  box-shadow: 0 0 0 2px var(--wp-bleu), 0 0 24px var(--wp-bleu);
}
.wp-fiche-image { flex: 0 0 45%; width: auto; max-width: none; margin: 0; }
.wp-fiche-image img { display: block; width: 100%; max-width: none; height: auto; max-height: 80vh; object-fit: contain; border-radius: .3rem; }
.wp-texte { flex: 1; min-width: 0; }
.wp-texte h3 { font: 700 1.1rem/1.3 var(--wp-police); color: var(--wp-bleu); margin: 0 0 .5rem; }
.wp-texte .wp-desc { font-size: .8rem; opacity: .8; }
.wp-licence { font-size: .7rem; opacity: .75; }
.wp-wiki { color: var(--wp-rose); font-weight: 700; }
.wp-fermer {
  position: absolute;
  top: .3rem;
  right: .8rem;
  padding: 0;
  border: none;
  background: none;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--wp-rose);
  cursor: pointer;
}
@media (max-width: 700px) {
  .wp-panneau { flex-direction: column; }
  .wp-fiche-image { flex: none; }
}

/* déclencheurs sur la carte (boutons) */
.wp-ouvrir {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.wp-plus {
  display: inline-block;
  padding: 0 .4rem;
  border: 1px solid var(--wp-rose);
  border-radius: .3rem;
  font: 700 1.1rem var(--wp-police);
  color: var(--wp-rose);
  cursor: pointer;
}
.wp-carte .wp-plus {
  /* toujours visible : posé en bas à droite de la carte, même si le texte est coupé */
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  z-index: 3;
  background: rgba(5, 8, 12, .92);
}
.wp-carte .wp-corps { padding-bottom: 2.4rem; }
/* ==========================================================================
   CATÉGORIES REPLIABLES (wikipick_site.py) : un clic sur le titre d'une
   catégorie la déplie ou la replie (<details>, sans JavaScript).
   Annule le style « admonition » que le thème met sur tous les <details>.
   ========================================================================== */
.md-typeset details.wp-categorie {
  display: block;
  margin: 1.2rem 0 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font-size: inherit;
  overflow: visible;
}
.md-typeset details.wp-categorie > summary.wp-categorie-titre {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .35rem 0;
  min-height: 0;
  border: none;
  border-bottom: 2px solid;
  border-image: var(--wp-drapeau) 1;     /* soulignement bleu / rose / blanc */
  border-radius: 0;
  background: transparent;
  font: 700 calc(.85rem * var(--wp-echelle-texte, 1)) / 1.4 var(--wp-police, monospace);
  color: var(--wp-blanc, #fff);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.md-typeset details.wp-categorie > summary.wp-categorie-titre::-webkit-details-marker { display: none; }
.md-typeset details.wp-categorie > summary.wp-categorie-titre::before {
  content: "▸";
  position: static;
  width: auto;
  height: auto;
  background: none;
  -webkit-mask-image: none;
          mask-image: none;
  color: var(--wp-rose, #f5a9b8);
  transition: transform .2s;
}
.md-typeset details.wp-categorie[open] > summary.wp-categorie-titre::before { transform: rotate(90deg); }
.md-typeset details.wp-categorie > summary.wp-categorie-titre::after { content: none; display: none; }
.md-typeset details.wp-categorie > summary.wp-categorie-titre:hover,
.md-typeset details.wp-categorie > summary.wp-categorie-titre:focus-visible {
  color: var(--wp-bleu, #5bcefa);
  text-shadow: 0 0 6px var(--wp-bleu, #5bcefa);
  outline: none;
}
.md-typeset details.wp-categorie > .wp-grille { margin: 1rem 0 0; }
@media (prefers-reduced-motion: reduce) {
  .md-typeset details.wp-categorie > summary.wp-categorie-titre::before { transition: none; }
}
/* ==========================================================================
   CORRECTIFS DES CARTES (wikipick_site.py) — à garder en toute fin de fichier
   - toutes les cartes ont la taille de leur colonne, même avec un mot très long
     (« Hyperandrogénie ») : plus de carte plus grande qui déborde sur sa voisine ;
   - un mot trop long passe à la ligne (avec un tiret si possible) ;
   - le « + » se pose dans le coin bas droit de l'image : il ne cache plus le texte ;
   - le texte qui ne tient pas s'efface en fondu au lieu d'être coupé en pleine
     ligne ; il se lit toujours en défilant dans la carte.
   - une valeur mal tapée dans les RÉGLAGES (ex. « 130s% ») est ignorée au lieu de
     casser la taille des cartes ; au-delà de 100 %, la carte reste dans sa colonne.
   ========================================================================== */
@property --wp-taille-carte { syntax: "<length-percentage>"; inherits: true; initial-value: 100%; }
@property --wp-colonnes { syntax: "<integer>"; inherits: true; initial-value: 4; }
:root {
  --wp-part-image: 55%;     /* hauteur de l'image, en % de la carte (le « + » suit) */
}
.md-typeset .wp-grille > .wp-carte {
  box-sizing: border-box;
  width: var(--wp-taille-carte, 100%);
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
}
.md-typeset .wp-carte .wp-image { flex: 0 0 var(--wp-part-image); }
.md-typeset .wp-carte .wp-corps {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 1rem;     /* la dernière ligne sort du fondu en fin de défilement */
}
.md-typeset .wp-carte .wp-corps h3,
.md-typeset .wp-carte .wp-desc {
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
          hyphens: auto;
}
.md-typeset .wp-carte .wp-plus {
  top: calc(var(--wp-part-image) - 2.1rem);
  bottom: auto;
  right: .5rem;
}
.md-typeset .wp-grille > .wp-carte::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 1.1rem;
  border-radius: 0 0 .5rem .5rem;
  background: linear-gradient(to bottom, transparent, #05080c);
  pointer-events: none;
  z-index: 1;
}
/* la taille du texte (--wp-echelle-texte) s'applique aussi aux titres et descriptions
   des cartes (des règles plus bas dans le fichier l'écrasaient) */
.md-typeset .wp-carte .wp-corps h3 { font-size: calc(.8rem * var(--wp-echelle-texte, 1)); }
.md-typeset .wp-carte .wp-desc { font-size: calc(.7rem * var(--wp-echelle-texte, 1)); }

/* --- titres des cartes et des fiches en h2 (structure de la page) ---
   Le thème donne aux h2 un filet et une couleur propre : on rétablit le rendu d'origine des h3. */
.md-typeset .wp-corps h2 {
  font: 700 .8rem/1.3 var(--wp-police);
  font-size: calc(.8rem * var(--wp-echelle-texte, 1));
  margin: .2rem 0;
  color: var(--rose);
  border-bottom: 0;
  padding-bottom: 0;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
}
.md-typeset .wp-corps h2 a { color: var(--wp-bleu); }
.md-typeset .wp-carte:nth-child(even) .wp-corps h2 a { color: var(--wp-rose); }
.md-typeset .wp-corps h2 a:hover { color: var(--wp-blanc); text-shadow: 0 0 6px var(--wp-lueur); }
.md-typeset .wp-texte h2 {
  font: 700 1.1rem/1.3 var(--wp-police);
  color: var(--wp-bleu);
  margin: 0 0 .5rem;
  border-bottom: 0;
  padding-bottom: 0;
}