/* =====================================================================
   La Pioche — trois emplacements nommés, dos de carte, pioche illimitée.
   S'appuie sur event.css (cartes, puces de genre, blocs) : ici, seulement
   ce qui est propre au jeu permanent. Chargé sur les routes pioche/*.
   ===================================================================== */

/* Nos composants s'ouvrent/se ferment avec [hidden] ; une règle de display
   posée sur une classe ou sur .btn l'emporterait sur le display:none du
   navigateur. Tout ce que pioche.js masque est listé ici. */
.piocheEmpty[hidden], .piocheExhausted[hidden], .piocheSlot[hidden],
.piocheSlotLabel[hidden], [data-pioche-redraw][hidden], [data-pioche-share][hidden],
[data-pioche-sharebox][hidden] { display: none !important; }

/* Bloc de partage maison : lien à copier + réseaux, centré sous les actions. */
.piocheShare { max-width: 560px; margin: var(--sp-6) auto 0; }
.piocheShare .shareRow { justify-content: center; margin: var(--sp-4) 0 0; }

.piocheHero { padding-bottom: clamp(20px, 4vw, 40px); }
/* La couverture joue le rôle de l'ornement, comme sur la page d'un événement. */
.pageOrnament { display: none; }

/* ---------- Header immersif (jeu ET tirage partagé) ----------
   Le header devient transparent et blanc, posé SUR la couverture ; la photo
   remonte donc sous lui. Il passe d'ailleurs de sticky à absolute : un header
   transparent qui suivrait le défilement flotterait, illisible, sur le contenu
   de la page. Le reste du site garde son header crème collant.

   ⚠️ PAS DE SCOPING PAR data-route ICI, ET C'EST VOULU : ce fichier n'est
   chargé QUE sur les routes pioche et pioche_share (cf. head.php), qui
   partagent la même couverture. Le jour où pioche.css se chargerait ailleurs,
   il faudrait re-scoper tout ce bloc. */
.siteHeader {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent; backdrop-filter: none; border-bottom: 0;
}
/* La photo se cadre sur le visage et l'éventail de cartes (pas le centre
   géométrique, qui coupait la tête de la cartomancienne), et prend un peu de
   hauteur pour respirer. */
.evTop--cover {
  padding-top: var(--hdr-h, 68px);
  background-position: center 30%;
}
.evHero--cover { min-height: clamp(220px, 28vw, 380px); }
/* Voile renforcé en HAUT : le texte blanc du header doit rester lisible sur
   les zones claires de la photo (lampes, rideaux dorés). */
.evTop--cover::after {
  background: linear-gradient(180deg, rgba(16,10,22,.62) 0%, rgba(16,10,22,.35) 25%, rgba(16,10,22,.5) 55%, rgba(16,10,22,.8) 100%);
}

@media (min-width: 761px) {
  /* `>` EXPRÈS : seulement les liens de premier niveau. Le menu déroulant
     (« Générateurs ») s'ouvre sur un fond clair et garde ses couleurs. */
  .siteHeader .brandText,
  .siteHeader .brandText em,
  .hdrNav > a,
  .navDropBtn,
  .sectionPick,
  .hdrRight a,
  .hdrRight button {
    color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
  }
  .navDropPop a { color: var(--fg-2); text-shadow: none; }
  .hdrNav > a:hover,
  .navDropBtn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
  .hdrNav > a.is-active { background: rgba(255, 255, 255, .22); color: #fff; }
  /* Les éléments du menu au MILIEU du header : les deux marges auto centrent la
     navigation entre la marque et la zone de droite. */
  .hdrNav { margin-left: auto; margin-right: auto; }
}

/* Sélecteur de langue sur la photo : pastille translucide blanche, à toutes
   les tailles d'écran. Le POPOVER, lui, garde son fond clair et ses couleurs
   d'origine (le blanc hérité de .hdrRight le rendait illisible). */
.langBtn {
  color: #fff; background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .45); text-shadow: none;
}
.langBtn:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.langBtnCaret { color: rgba(255, 255, 255, .85); }
.langPick.is-open .langBtn {
  background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .65); color: #fff;
}
.langPop a,
.langPop button { color: var(--fg-2); text-shadow: none; }
.langPopTitle { color: var(--fg-3); text-shadow: none; }
/* Mobile : le burger et la marque doivent se voir sur la photo ; le panneau
   de menu ouvert, lui, garde son fond clair et ses couleurs d'origine. */
@media (max-width: 760px) {
  .navToggle span { background: #fff; }
  .brandText,
  .brandText em { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
}
/* L'intro tient sur DEUX lignes (une par phrase, le <br> de la page) : la
   limite de 68ch de .evIntro forçait un repli et donnait trois lignes. Sur
   mobile, le texte se replie naturellement. */
.piocheIntro { margin-bottom: clamp(32px, 5vw, 56px); max-width: none; }
/* Même traitement pour la consigne (« Touchez une carte… ») : une seule ligne
   sur desktop, la limite de 46ch la coupait en deux. */
.piocheGame .evScratchHint { max-width: none; }

/* ---------- Les trois emplacements ---------- */
.piocheGrid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(170px, 210px));
  justify-content: center; align-items: start;
  max-width: 780px; margin: 0 auto;
}
.piocheGrid.is-loading { opacity: .45; pointer-events: none; transition: opacity .15s var(--ease); }

/* L'étiquette dit ce que l'emplacement EST (valeur sûre, découverte,
   nouveauté) : petite capitale, comme les kickers du site. pioche.js ne les
   affiche que si le TRIO est complet — les trois étiquetées, ou aucune. */
.piocheSlotLabel {
  margin: 0 0 var(--sp-3); text-transform: uppercase; letter-spacing: .12em;
  font-size: .74rem; color: var(--fg-3); text-align: center;
}

/* Cartes POSÉES, pas imprimées : le léger travers du jeu des événements,
   décliné pour trois cartes fixes. */
.piocheSlot:nth-child(1) .evCard { --evTilt: -1.4deg; }
.piocheSlot:nth-child(2) .evCard { --evTilt: .9deg; margin-top: clamp(6px, 1.6vw, 16px); }
.piocheSlot:nth-child(3) .evCard { --evTilt: -.7deg; }

/* La note réelle du livre, sous l'auteur, sur la carte révélée. */
.piocheRating { color: rgba(255, 255, 255, .78); font-size: .72rem; }

/* Messages d'état (palier sans livres, vivier épuisé) : même ton que
   l'erreur de tirage des événements. */
.piocheEmpty, .piocheExhausted {
  max-width: 46ch; margin: 0 auto var(--sp-10);
  color: var(--fg-2); line-height: 1.6;
}

/* ---------- Actions ---------- */
.piocheActions {
  margin-top: var(--sp-8);
  display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap;
}

/* ---------- Retourner la carte ----------
   Sur La Pioche on ne gratte pas : on RETOURNE la carte, comme au tarot. Le
   dos (pioche-dos.jpg) est la face visible ; un tap/clic fait pivoter la
   carte en 3D et révèle la couverture. Le cadre .evCard perd son fond et son
   ombre au profit des DEUX FACES : pendant la rotation, c'est la face qui est
   la carte, pas le cadre.

   L'axe est HORIZONTAL (rotateX), pas vertical : la carte bascule haut-bas,
   elle ne pivote pas de côté. L'angle est NÉGATIF : le bord du BAS part en
   premier, il se décolle de la table et monte, pendant que le haut passe
   derrière. En positif, c'est l'inverse — le haut mène le geste.

   ⚠️ LA PERSPECTIVE FAIT TOUT LE TRAVAIL. À 1100px sur une carte de 210px, la
   carte ne TOURNE pas : elle s'écrase, le bord proche s'élargit à peine, et le
   geste ne se voit pas — au point qu'on ne distingue même plus quel bord mène.
   La règle utile : une perspective de l'ordre de la taille de l'objet. 620px
   sur ces cartes, et le bord qui mène s'élargit franchement. Ne la remontez pas
   sans regarder le MILIEU du geste : le début et la fin, eux, sont identiques
   quelle que soit la valeur. */
.piocheFlip { perspective: 620px; overflow: visible; background: transparent; border: 0; box-shadow: none; }
.piocheFlipInner { position: absolute; inset: 0; transform-style: preserve-3d; }
/* Le geste est joué par une ANIMATION, pas par une transition : il faut un
   milieu (la carte se soulève de la table, tourne, se repose) et une
   transition ne connaît que deux bouts. Le translateZ est écrit AVANT la
   rotation, donc il soulève vers le lecteur ; après, il pousserait la carte
   dans la direction où elle regarde. La carte ne revient jamais face cachée
   (pioche.js n'enlève pas .is-revealed) : la position finale de l'animation
   est celle de la règle statique ci-dessous, rien à rattraper. */
@keyframes piocheTourne {
  0%   { transform: translateZ(0) rotateX(0); }
  30%  { transform: translateZ(44px) rotateX(-50deg); }
  70%  { transform: translateZ(44px) rotateX(-142deg); }
  100% { transform: translateZ(0) rotateX(-180deg); }
}
.piocheFlip.is-revealed .piocheFlipInner {
  transform: rotateX(-180deg);
  animation: piocheTourne .8s cubic-bezier(.34, .08, .2, 1);
}
.piocheFlipBack, .piocheFlip .evCardInner {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--r-5); overflow: hidden;
  border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm);
}
.piocheFlipBack { cursor: pointer; }
/* Dos à 180° : les cartes ont été DONNÉES par la cartomancienne assise en
   face — elles arrivent tête-bêche, comme glissées à travers la table. Et
   c'est exactement ce que fait une vraie carte qu'on bascule haut-bas : le
   retournement inverse le haut et le bas, donc un dos tête-bêche découvre une
   face à l'endroit. */
.piocheFlipBack img { width: 100%; height: 100%; object-fit: cover; display: block; transform: rotate(180deg); }
.piocheFlipBack--fallback { transform: rotate(180deg); }
/* Repli sans image : le fleuron sur le violet de la marque. */
.piocheFlipBack--fallback {
  display: grid; place-items: center; background: var(--brand);
  color: rgba(255, 255, 255, .75); font-size: 2.6rem;
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
}
/* La face est pré-tournée sur LE MÊME AXE que le retournement : une fois le
   conteneur à -180°, les deux rotations s'annulent et la couverture se lit à
   l'endroit. Un rotateY(180deg) ici (l'ancien axe) laisserait la face tête en
   bas à la fin du geste. */
.piocheFlip .evCardInner { transform: rotateX(180deg); background: var(--surface); }
/* La règle des événements masque la face avant tant que la carte est couverte
   (visibility) : ici le dos-face-cachée suffit, et la face doit être PEINTE
   pour que la rotation la découvre au bon moment. */
.piocheFlip.is-covered .evCardInner { visibility: visible; }
.piocheFlip.is-revealed { box-shadow: none; }
.piocheFlip.is-revealed .piocheFlipBack { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .piocheFlip.is-revealed .piocheFlipInner { animation: none; }
}
/* Carte RESTAURÉE (déjà retournée dans cette main) : reposée face visible,
   sans éclat d'apparition — l'animation accompagne un geste, pas un retour. */
/* Deux classes exprès : la règle qui pose l'animation en porte déjà deux
   (.piocheFlip.is-revealed), un simple .piocheFlip--restored perdrait. */
.piocheFlip.piocheFlip--restored .piocheFlipInner { animation: none; }
.piocheFlip--restored::after { content: none; animation: none; }

/* « Piocher encore » attend que la main soit jouée. */
.piocheActions .btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }

/* ---------- Tirage partagé ---------- */
/* Cartes déjà révélées, sans geste : pas d'éclat d'apparition (l'animation
   accompagne un geste, il n'y en a pas ici) et un curseur normal. */
.piocheCard--static::after { content: none; animation: none; }
.piocheCard--static { cursor: default; }