/* _core/_css/magnifier-reader.css — Loupe-lecteur contrainte.
   Styles scopés .wq-mgr-* : aucun sélecteur global. */

.wq-mgr {
  position: relative;
  border-radius: 10px;
  touch-action: none;
  /* Signalé : glisser sur le texte/l'image du dessous déclenchait la
     SÉLECTION native du navigateur (surlignage bleu), qui empêchait de voir
     ce que la loupe révélait. Le glisser ne doit jamais rien sélectionner
     ici — c'est un geste de pilotage, pas de lecture de texte. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Rognage du CONTENU uniquement (texte/image floutés + révélés) — PAS sur
   .wq-mgr lui-même, sinon la loupe (posée à côté, pas dedans) se tronquait
   dès qu'elle approchait un bord avec un grand rayon (signalé). */
.wq-mgr-content {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.wq-mgr-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1rem;
  box-sizing: border-box;
}
.wq-mgr-layer img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.wq-mgr-text {
  text-align: center;
  font-family: inherit;
  line-height: 1.5;
  pointer-events: none;
  /* Sans ça, un retour à la ligne tapé par l'auteur (essentiel pour un
     trajet multi-lignes, §Phase « saut ») était silencieusement ignoré —
     textContent n'affiche jamais les \n tout seul. `dir="auto"` (posé en
     JS) lit CHAQUE ligne dès qu'elle existe vraiment à l'écran : sans ce
     white-space, il n'y avait qu'une seule « ligne » aux yeux du
     navigateur, donc un seul sens de lecture pour tout le bloc — un texte
     arabe glissé au milieu d'un texte par ailleurs français aurait été
     mal aligné/lu comme du français (même défaut déjà rencontré et réglé
     sur l'étiquette du Robot Guide, §6.20). */
  white-space: pre-wrap;
}

/* La couche du haut (nette) n'est visible que dans le cercle de la loupe —
   clip-path posé/mis à jour en JS (voir quest-magnifier-reader.js). */
.wq-mgr-reveal {
  clip-path: circle(0px at 0px 0px);
  pointer-events: none;
}

/* Trajet-guide : ligne pointillée discrète, sous la loupe. */
.wq-mgr-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.wq-mgr-path-line {
  fill: none;
  stroke: rgba(99, 102, 241, .4);
  stroke-width: 2;
  stroke-dasharray: 5 5;
}
/* Segment « saut » (nouvelle ligne, pas de trajet à suivre) : plus fin et
   plus discret — présent pour la lisibilité de l'auteur dans l'éditeur,
   jamais pris pour un vrai trajet à glisser. */
.wq-mgr-path-jump {
  fill: none;
  stroke: rgba(99, 102, 241, .18);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}

/* Masque de traînée (persistReveal) : jamais affiché lui-même — seulement
   référencé via mask="url(#...)" sur .wq-mgr-reveal (voir JS). width/height
   à 0 : l'élément SVG hôte n'occupe aucune place, seul son <defs>/<mask>
   sert. */
.wq-mgr-trailsvg { position: absolute; width: 0; height: 0; }

/* La loupe elle-même — suit le trajet au glisser. Base commune (position,
   geste) ; l'apparence vient des classes de skin ci-dessous. */
.wq-mgr-loupe {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
}
.wq-mgr-loupe:active { cursor: grabbing; }

/* Pulsation d'attention — automatique tant que l'enfant n'a pas encore
   glissé (idlePulse), et/ou ponctuelle via l'action magnifier_pulse. Vitesse
   réglable par --wq-mgr-pulse-speed (posée en JS). Sur `transform`
   uniquement — compose avec le `translate(-50%,-50%)` déjà là sans conflit
   grâce à `scale()` ajouté par-dessus dans les keyframes ci-dessous. */
.wq-mgr-loupe.is-pulsing {
  animation: wq-mgr-loupe-pulse var(--wq-mgr-pulse-speed, 1.4s) ease-in-out infinite;
}
@keyframes wq-mgr-loupe-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: none; }
  50% { transform: translate(-50%, -50%) scale(1.08); filter: brightness(1.12); }
}

/* Skin « Anneau simple » (défaut, inchangé). */
.wq-mgr-loupe-ring {
  border: 3px solid #6366f1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25), inset 0 0 0 2px rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .06);
}

/* Skin « Verre 3D glossy » — dégradé radial (effet de courbure du verre),
   double bordure biseautée (claire dehors / sombre dedans, comme un anneau
   métallique), reflet elliptique via le <span> ajouté en JS (::before ne
   suffit pas à lui seul pour un reflet positionné/orienté indépendamment
   du fond, plus simple avec un vrai élément). */
.wq-mgr-loupe-glossy {
  border: 3px solid #e5e7eb;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .35),
    inset 0 0 0 3px rgba(99, 102, 241, .55),
    inset 0 -6px 10px rgba(0, 0, 0, .18);
  background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .55), rgba(199, 210, 254, .18) 55%, rgba(99, 102, 241, .12) 100%);
  overflow: hidden;
}
.wq-mgr-loupe-glossy span {
  position: absolute;
  top: 12%; left: 18%;
  width: 38%; height: 22%;
  background: rgba(255, 255, 255, .75);
  border-radius: 50%;
  transform: rotate(-25deg);
  filter: blur(1px);
  pointer-events: none;
}

/* Skin « Détective » — un manche qui dépasse du cercle, orienté selon le
   sens du glisser (--wq-mgr-handle-angle, posée en JS pendant onMove). */
.wq-mgr-loupe-detective {
  border: 4px solid #7c5a3a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .05);
}
.wq-mgr-loupe-handle {
  position: absolute;
  width: 46%; height: 16%;
  right: -32%; bottom: -18%;
  background: linear-gradient(#8b6a45, #5c4324);
  border-radius: 6px;
  transform-origin: 8% 50%;
  /* Pas de transition ici : le lissage de l'angle se fait déjà en JS
     (interpolation à chaque pointermove) — en ajouter une 2ᵉ ici double
     l'amortissement et rend le manche mou/en retard, pas plus stable. */
  transform: rotate(var(--wq-mgr-handle-angle, 45deg));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}

/* Skin « Labo » — anneau néon, ligne qui balaie en boucle (effet
   « scanner ») plutôt qu'un cercle net et statique. Pas d'icône au centre
   (retirée — signalée comme distrayante) : le centre reste net pour la
   révélation elle-même. */
.wq-mgr-loupe-lab {
  border: 3px solid #22d3ee;
  box-shadow: 0 0 14px rgba(34, 211, 238, .65), inset 0 0 10px rgba(34, 211, 238, .35);
  background: rgba(15, 23, 42, .12);
  overflow: hidden;
}
.wq-mgr-loupe-scan {
  position: absolute;
  left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #22d3ee, transparent);
  animation: wq-mgr-scan 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wq-mgr-scan {
  0%, 100% { top: 12%; opacity: .9; }
  50% { top: 88%; opacity: .5; }
}

/* Skin « Explorateur » — cadre façon boussole (double anneau), teinte
   kaki/cuivre, petite aiguille qui tourne doucement (purement décoratif). */
.wq-mgr-loupe-explorer {
  border: 3px solid #a16207;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3), inset 0 0 0 6px rgba(161, 98, 7, .15), inset 0 0 0 8px rgba(161, 98, 7, .35);
  background: rgba(254, 243, 199, .12);
}
.wq-mgr-loupe-needle {
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 55%;
  background: linear-gradient(#dc2626 0 50%, #78350f 50% 100%);
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: wq-mgr-needle 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wq-mgr-needle {
  0%, 100% { transform: translate(-50%, -50%) rotate(-8deg); }
  50% { transform: translate(-50%, -50%) rotate(8deg); }
}

/* Skin « Playful » — anneau coloré épais, petites étoiles en orbite, léger
   rebond au clic (:active).
   Signalé (capture à l'appui) : `border-image` IGNORE `border-radius` dans
   quasiment tous les navigateurs — le cercle devenait un carré. Corrigé en
   remplaçant le dégradé-bordure par un dégradé CONIQUE en fond (qui, lui,
   respecte le rayon) + un disque « verre » blanc semi-transparent posé
   au-dessus en padding, pour garder l'effet anneau coloré. */
.wq-mgr-loupe-playful {
  border: none;
  padding: 5px;
  box-sizing: border-box;
  background: conic-gradient(from 0deg, #f43f5e, #f59e0b, #22c55e, #0ea5e9, #a855f7, #f43f5e);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
  transition: transform .15s ease;
}
.wq-mgr-loupe-playful::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
  pointer-events: none;
}
.wq-mgr-loupe-playful:active { transform: translate(-50%, -50%) scale(.92); }
/* Lucioles discrètes en orbite — pas des étoiles-emoji « grossières »
   (signalé) : un simple point lumineux doux, même famille visuelle que la
   traînée .wq-mgr-firefly ci-dessous, pour rester cohérent. */
.wq-mgr-loupe-star {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fef9c3, #fbbf24 55%, transparent 100%);
  box-shadow: 0 0 6px 2px rgba(251, 191, 36, .7);
  animation: wq-mgr-orbit 4s linear infinite, wq-mgr-twinkle 1.6s ease-in-out infinite;
  pointer-events: none;
}
.wq-mgr-loupe-star-0 { top: -6%; left: 50%; animation-delay: 0s, .2s; }
.wq-mgr-loupe-star-1 { top: 50%; left: -6%; animation-delay: -1.33s, .8s; }
.wq-mgr-loupe-star-2 { top: 50%; left: 106%; animation-delay: -2.66s, 1.3s; }
@keyframes wq-mgr-orbit {
  from { transform: rotate(0deg) translateX(58%) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(58%) rotate(-360deg); }
}
@keyframes wq-mgr-twinkle {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

/* Traînée « lucioles » (particleTrail) — voir spawnFirefly() dans
   quest-magnifier-reader.js : un point lumineux, discret, qui monte
   doucement et s'estompe. Volontairement PAS le burst-confettis de
   juice.js (signalé comme trop grossier pour un effet magique). */
.wq-mgr-firefly {
  position: fixed;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fef9c3, #fbbf24 55%, transparent 100%);
  box-shadow: 0 0 8px 3px rgba(251, 191, 36, .75);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  animation: wq-mgr-firefly-fly .95s ease-out forwards;
}
@keyframes wq-mgr-firefly-fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--wq-mgr-fx, 0px)), calc(-50% + var(--wq-mgr-fy, -20px))) scale(1); }
}

/* Fond du widget : dégradé (couleur inline, voir JS) ou texture « carnet »
   (papier ligné discret, cohérent avec le thème carnet déjà ailleurs dans
   le projet). */
.wq-mgr-bg-carnet {
  background:
    repeating-linear-gradient(to bottom, transparent 0 27px, rgba(99, 102, 241, .12) 27px 28px),
    #fdfbf3;
}

/* Cadre décoratif — indépendant du fond, combinable avec n'importe lequel. */
.wq-mgr-frame-treasure {
  outline: 3px dashed #b45309;
  outline-offset: -8px;
}
.wq-mgr-frame-wood {
  border: 10px solid #8b6a45;
  border-image: linear-gradient(135deg, #a9805a, #6b4a28, #a9805a) 1;
}

/* Toast (action magnifier_toast) : un petit message flottant qui apparaît
   près de la loupe et s'efface tout seul — même idée que l'émoticône du
   Robot Guide, ancré au point courant du trajet plutôt qu'à un endroit fixe. */
.wq-mgr-toast {
  position: absolute;
  transform: translate(-50%, -140%) scale(.9);
  background: #1e293b;
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  padding: .4rem .8rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 5;
}
.wq-mgr-toast.show { opacity: 1; transform: translate(-50%, -160%) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .wq-mgr-reveal { transition: none; }
  .wq-mgr-toast { transition: opacity .2s ease; }
  .wq-mgr-toast.show { transform: translate(-50%, -160%) scale(1); }
  .wq-mgr-loupe-scan { animation: none; top: 50%; }
  .wq-mgr-loupe-needle { animation: none; transform: translate(-50%, -50%) rotate(0deg); }
  .wq-mgr-loupe-star { animation: none; opacity: 0; }
  .wq-mgr-loupe-handle { transition: none; }
  .wq-mgr-loupe.is-pulsing { animation: none; transform: translate(-50%, -50%) scale(1); }
  .wq-mgr-firefly { animation: none; opacity: 0; }
}