/* ==========================================================================
   molecule-viewer.css — habillage du visualiseur moléculaire 3D
   Compagnon de molecule-viewer.js (Mol2OBJ V18).          version 1.1.0

   Interface volontairement épurée : au chargement, seuls le modèle,
   l'icône 3D et la barre de commandes sont visibles. Aucune étiquette
   d'atome ni donnée chimique n'apparaît tant que l'utilisateur ne les
   a pas demandées.

   Personnalisation : redéfinir les variables ci-dessous, soit
   globalement, soit sur un conteneur précis.
   ========================================================================== */

.molecule-viewer {
  --mv-ratio: 1.3333;                        /* largeur / hauteur du cadre */
  --mv-min-height: 200px;                    /* hauteur plancher du cadre */
  --mv-max-width: 1000px;                    /* largeur max de la pop-up */
  --mv-radius: 12px;
  --mv-surface: #0d2c3f;                     /* fond de la scène */
  --mv-surface-soft: rgba(255, 255, 255, 0.86);
  --mv-ink: #1d2733;
  --mv-ink-soft: #5d6b7a;
  --mv-line: rgba(29, 39, 51, 0.14);
  --mv-accent: #F6EDB5;
  --mv-accent-ink: #5d6b7a;
  --mv-shadow: 0 1px 2px rgba(16, 24, 32, 0.08),
               0 6px 18px rgba(16, 24, 32, 0.10);
  --mv-gap: 8px;

  position: relative;
  display: block;
  width: auto;
  margin: 0.5rem;
  border-radius: var(--mv-radius);
  background: transparent;
  color: var(--mv-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
  contain: layout paint;
}

/* --------------------------------------------------------------------------
   Scène
   -------------------------------------------------------------------------- */

.molecule-viewer .mv-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--mv-ratio);
  min-height: var(--mv-min-height);
  border-radius: var(--mv-radius);
  background-color: var(--mv-surface);
  overflow: hidden;
}

/* Repli pour les navigateurs sans aspect-ratio. */
@supports not (aspect-ratio: 1) {
  .molecule-viewer .mv-stage { height: 340px; }
}

.molecule-viewer .mv-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  cursor: grab;
  touch-action: none;             /* un doigt = rotation */
}

.molecule-viewer .mv-canvas:active { cursor: grabbing; }

.molecule-viewer .mv-canvas:focus-visible {
  outline: 2px solid var(--mv-accent);
  outline-offset: -2px;
}

/* data-touch="two" : la page reste défilable à un doigt sur le cadre. */
.molecule-viewer.mv-touch-two .mv-canvas { touch-action: pan-y; }

/* 1.1.0 — Au doigt, tant que la manipulation n'est pas armée, le cadre
   laisse passer le défilement vertical. C'est cette seule ligne qui
   empêche la page de se bloquer sous le doigt. */
.molecule-viewer.mv-armable:not(.mv-armed) .mv-canvas {
  touch-action: pan-y;
  cursor: pointer;
}

/* Cadre trop étroit : plus rien n'est manipulable, l'image redevient une
   simple vignette et le doigt appartient à la page. */
.molecule-viewer.mv-etroit .mv-canvas {
  touch-action: pan-y;
  pointer-events: none;
  cursor: default;
}

.molecule-viewer.mv-picking .mv-canvas { cursor: crosshair; }

/* --------------------------------------------------------------------------
   Icône 3D — discrète mais visible
   -------------------------------------------------------------------------- */

.molecule-viewer .mv-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 6px;
  border-radius: 999px;
  background: var(--mv-surface-soft);
  border: 1px solid var(--mv-line);
  box-shadow: var(--mv-shadow);
  color: var(--mv-ink-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  pointer-events: none;          /* simple repère par défaut */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.25s ease, background-color 0.2s ease, color 0.2s ease;

  /* C'est un <button> depuis la 1.1.0 : on neutralise l'habillage que
     les thèmes WordPress imposent aux boutons. */
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font-family: inherit;
  line-height: 1;
  text-transform: none !important;
  letter-spacing: 0.04em !important;
  min-width: 0 !important;
  width: auto;
  height: auto;
  text-decoration: none !important;
}

/* 1.1.0 — Là où l'icône commande vraiment quelque chose, elle redevient
   cliquable et s'affiche comme telle. */
.molecule-viewer.mv-armable .mv-badge,
.molecule-viewer.mv-etroit .mv-badge {
  pointer-events: auto;
  cursor: pointer;
}

.molecule-viewer .mv-badge.is-on {
  background: var(--mv-accent);
  border-color: var(--mv-accent);
  color: var(--mv-accent-ink);
}

.molecule-viewer .mv-badge:focus-visible {
  outline: 2px solid var(--mv-accent);
  outline-offset: 2px;
}

.molecule-viewer .mv-badge svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Une fois le modèle manipulé, l'icône s'efface légèrement. */
.molecule-viewer.mv-zoom-armed .mv-badge { opacity: 0.45; }

/* --------------------------------------------------------------------------
   1.1.0 — Bouton « Agrandir » et calque plein cadre

   Deux règles gouvernent tout ce bloc :
     .mv-etroit  le cadre est plus étroit que data-min-size
     .mv-full    le module est déployé par-dessus la page
   -------------------------------------------------------------------------- */

.molecule-viewer .mv-grow {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--mv-line);
  border-radius: 999px;
  background: var(--mv-surface-soft);
  box-shadow: var(--mv-shadow);
  color: var(--mv-ink);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-transform: none !important;
  letter-spacing: normal !important;
  min-width: 0 !important;
  width: auto;
  height: auto;
  text-decoration: none !important;
}

.molecule-viewer .mv-grow[hidden] { display: none; }

.molecule-viewer .mv-grow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Une seule des deux icônes est montrée, selon l'état. */
.molecule-viewer .mv-grow .mv-ico-moins { display: none; }
.molecule-viewer.mv-full .mv-grow .mv-ico-plus { display: none; }
.molecule-viewer.mv-full .mv-grow .mv-ico-moins { display: inline; }

.molecule-viewer .mv-grow:focus-visible {
  outline: 2px solid var(--mv-accent);
  outline-offset: 2px;
}

/* Dans un cadre étroit, le bouton EST l'interface : il occupe le centre
   et la barre de commandes s'efface. C'est le point demandé — pas de
   commandes tassées et illisibles, une seule action évidente. */
.molecule-viewer.mv-etroit .mv-bar { display: none; }

.molecule-viewer.mv-etroit .mv-grow {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  padding: 11px 18px;
  font-size: 14px;
  /* Volontairement pas var(--mv-surface) : votre scène est sombre, et le
     texte du bouton est encré foncé. Le blanc translucide reste lisible
     quelle que soit la couleur de fond choisie. */
  background: var(--mv-surface-soft);
}

/* Une fois déployé, le bouton retourne se ranger en haut à gauche pour
   laisser la barre de commandes reprendre sa place en bas. */
.molecule-viewer.mv-full .mv-grow {
  left: 12px;
  top: 12px;
  bottom: auto;
  transform: none;
}

/* ---- La pop-up ----

   Le cadre GARDE son ratio. C'est le point important : une molécule est
   à peu près sphérique, et la caméra la cadre sur la plus PETITE
   dimension. Une fenêtre plein écran, haute et étroite, perdait donc
   toute sa hauteur et n'affichait qu'une petite molécule au centre.

   La largeur est le plus petit de trois nombres :
     96vw                         ne jamais toucher les bords
     calc(85vh * ratio)           la hauteur qui en découle tient à l'écran,
                                  y compris sur un téléphone à l'horizontale
     var(--mv-max-width)          confort de lecture sur grand écran      */

.molecule-viewer.mv-full {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99991;
  width: min(96vw, calc(85vh * var(--mv-ratio)), var(--mv-max-width));
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: var(--mv-radius);
  background: var(--mv-surface);
  box-shadow: 0 24px 70px rgba(8, 16, 24, 0.45);
  contain: none;                 /* sinon le cadre fixe resterait confiné */
}

/* Repli pour les navigateurs sans min() à trois termes. */
@supports not (width: min(1px, 2px, 3px)) {
  .molecule-viewer.mv-full { width: 92vw; }
}

/* Le fond assombri, posé dans <body> à côté du module. */
.mv-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(8, 16, 24, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Le fond ne défile plus derrière la pop-up. */
html.mv-scroll-lock,
html.mv-scroll-lock body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* --------------------------------------------------------------------------
   Barre de commandes
   -------------------------------------------------------------------------- */

.molecule-viewer .mv-bar {
  position: absolute;
  left: 10px;
  bottom: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mv-gap);
}

.molecule-viewer .mv-btn,
.molecule-viewer .mv-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--mv-line);
  border-radius: 999px;
  background: var(--mv-surface-soft);
  box-shadow: var(--mv-shadow);
  color: var(--mv-ink);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, opacity 0.15s ease;

  /* Les thèmes WordPress passent volontiers les boutons en capitales et
     espacent les lettres, ce qui allonge beaucoup les libellés et fait
     déborder la barre de commandes. */
  text-transform: none !important;
  letter-spacing: normal !important;
  min-width: 0 !important;
  width: auto;
  height: auto;
  text-decoration: none !important;
}

.molecule-viewer .mv-select {
  padding-right: 28px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235d6b7a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 12px 12px;
}

.molecule-viewer .mv-btn:hover,
.molecule-viewer .mv-select:hover { border-color: rgba(29, 39, 51, 0.3); }

.molecule-viewer .mv-btn:focus-visible,
.molecule-viewer .mv-select:focus-visible {
  outline: 2px solid var(--mv-accent);
  outline-offset: 2px;
}

/* État activé des boutons Atomes et Informations. */
.molecule-viewer .mv-btn.is-on {
  background: var(--mv-accent);
  border-color: var(--mv-accent);
  color: var(--mv-accent-ink);
}

.molecule-viewer .mv-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.molecule-viewer .mv-btn-icon {
  width: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Seule la réinitialisation est poussée à droite de la barre. */
.molecule-viewer .mv-btn-reset { margin-left: auto; }

.molecule-viewer .mv-btn-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Infobulle d'atome
   -------------------------------------------------------------------------- */

.molecule-viewer .mv-tooltip {
  position: absolute;
  z-index: 4;
  display: none;
  align-items: baseline;
  gap: 7px;
  max-width: 70%;
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--mv-ink);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(12px, -50%);
  box-shadow: 0 4px 16px rgba(16, 24, 32, 0.28);
}

.molecule-viewer .mv-tooltip.is-open { display: inline-flex; }

/* L'atome sélectionné est passé derrière la molécule. */
.molecule-viewer .mv-tooltip.mv-behind { opacity: 0.45; }

.molecule-viewer .mv-tooltip.mv-flip-x { transform: translate(calc(-100% - 12px), -50%); }
.molecule-viewer .mv-tooltip.mv-flip-y { transform: translate(12px, 12px); }
.molecule-viewer .mv-tooltip.mv-flip-x.mv-flip-y {
  transform: translate(calc(-100% - 12px), 12px);
}

.molecule-viewer .mv-symbol {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.molecule-viewer .mv-atom-name { color: rgba(255, 255, 255, 0.82); }

/* --------------------------------------------------------------------------
   Panneau d'informations chimiques
   -------------------------------------------------------------------------- */

.molecule-viewer .mv-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: none;
  min-width: 168px;
  max-width: calc(100% - 92px);
  padding: 11px 14px;
  border: 1px solid var(--mv-line);
  border-radius: 10px;
  background: var(--mv-surface-soft);
  box-shadow: var(--mv-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.molecule-viewer .mv-panel.is-open { display: block; }

.molecule-viewer .mv-panel h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--mv-ink);
}

.molecule-viewer .mv-panel dl {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 12px;
  margin: 0;
  font-size: 12.5px;
}

.molecule-viewer .mv-panel dt {
  margin: 0;
  color: var(--mv-ink-soft);
  font-weight: 400;
}

.molecule-viewer .mv-panel dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.molecule-viewer .mv-panel .mv-formula { font-weight: 600; }

.molecule-viewer .mv-panel sub {
  font-size: 0.72em;
  vertical-align: baseline;
  position: relative;
  bottom: -0.22em;
}

/* --------------------------------------------------------------------------
   Chargement
   -------------------------------------------------------------------------- */

.molecule-viewer .mv-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mv-radius);
  pointer-events: none;
}

.molecule-viewer .mv-spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--mv-line);
  border-top-color: var(--mv-ink-soft);
  border-radius: 50%;
  animation: mv-spin 0.85s linear infinite;
}

@keyframes mv-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Erreur — discrète, ne bloque jamais la page
   -------------------------------------------------------------------------- */

.molecule-viewer .mv-error {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  border: 1px dashed var(--mv-line);
  border-radius: var(--mv-radius);
  background: rgba(246, 247, 249, 0.9);
  color: var(--mv-ink-soft);
  font-size: 13.5px;
  text-align: center;
}

.molecule-viewer .mv-error.is-open { display: flex; }

/* --------------------------------------------------------------------------
   Petits écrans
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .molecule-viewer {
    --mv-ratio: 1;
    --mv-gap: 6px;
    font-size: 14px;
  }

  .molecule-viewer .mv-bar {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }

  .molecule-viewer .mv-btn,
  .molecule-viewer .mv-select {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12.5px;
  }

  .molecule-viewer .mv-btn-icon { width: 32px; padding: 0; }

  .molecule-viewer .mv-panel {
    max-width: calc(100% - 84px);
    padding: 9px 11px;
  }

  .molecule-viewer .mv-tooltip { max-width: 60%; font-size: 12.5px; }
}

/* --------------------------------------------------------------------------
   Préférences système

   Le mode sombre a été retiré : le visualiseur suit désormais le fond
   clair de la page, quel que soit le réglage du système.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .molecule-viewer .mv-spinner { animation-duration: 2s; }
  .molecule-viewer .mv-btn,
  .molecule-viewer .mv-select { transition: none; }
}

/* Impression : le canvas WebGL ne s'imprime pas de façon fiable. */
@media print {
  .molecule-viewer .mv-bar,
  .molecule-viewer .mv-badge,
  .molecule-viewer .mv-tooltip { display: none !important; }
}