/* =====================================================================
   RELIE v4.1.0 — BUNDLE CSS de tous les modes en un seul fichier
   ---------------------------------------------------------------------
   Ordre : TEXTE, IMAGE, MIXTE, LÉGENDE. Le mode RAYON n'a PAS de section :
   ses widgets portent .relie-image-stage, donc le mode IMAGE les style
   entièrement (le CSS rayon était un duplicata exact -> retiré du bundle).
   Les règles de points sont scopées par mode : aucune règle en double.
   Un seul <link rel="stylesheet">.
   ===================================================================== */


/* ============================================================
   MODE TEXTE
   ============================================================ */

/* =====================================================================
   RELIE TEXT v4 — feuille de style complète (VERSION DE TEST)
   ---------------------------------------------------------------------
   Autonome. À charger SEULE, sans relie-core-widget-v3.css.
   Ne couvre que le mode texte : rien sur image / mixed / rayon / légende
   / fullscreen, donc aucun conflit possible.

   Reprend la charte v3 à l'identique :
     bleu       #2b7bbb    encre      #0f4c5c
     vert ok    #1aa34a / #1f9d55
     rouge ko   #d64545
     jaune sol. #ffb913
     orange inc.#ff9800
   Écarts assumés vs v3, listés en fin de fichier.
   ===================================================================== */

/* =====================================================
   VARIABLES
===================================================== */

.relie-widget {
  --relie-blue: #2b7bbb;
  --relie-blue-light: #8ecaff;
  --relie-ink: #0f4c5c;

  /* Opacité commune des fonds d'état : un seul réglage pour ok/ko/sol/inc.
     Les fonds sont mélangés à `transparent` -> ils tintent sans masquer
     (utile par-dessus une image dans les autres modes). */
  --relie-bg-alpha: 14%;

  --relie-ok-border: #1aa34a;
  --relie-ok-bg: color-mix(in srgb, var(--relie-ok-border) var(--relie-bg-alpha), transparent);
  --relie-ok-line: #1f9d55;

  --relie-ko: #d64545;
  --relie-ko-bg: color-mix(in srgb, var(--relie-ko) var(--relie-bg-alpha), transparent);

  --relie-sol: #ffb913;
  --relie-sol-bg: color-mix(in srgb, var(--relie-sol) var(--relie-bg-alpha), transparent);
  --relie-sol-ink: #6a4d08;

  --relie-inc: #ff9800;
  --relie-inc-bg: color-mix(in srgb, var(--relie-inc) var(--relie-bg-alpha), transparent);

  --relie-stroke: 3;
  --relie-gap: 12px;
  --relie-col-width: 42%;

  font-family: Arial, system-ui, sans-serif;
  color: var(--relie-ink);
  margin: 14px 0;
}

/* =====================================================
   PLATEAU
===================================================== */

.relie-stage {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 0;
  padding: 18px;
  border: 1px solid #d8e1ec;
  border-radius: 12px;
  background: #f8fbff;
  overflow: hidden;
}

.relie-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.relie-col {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--relie-gap);
}

.relie-left,
.relie-right {
  width: var(--relie-col-width);
}

/* Sécurité : si .relie-col est oublié sur une colonne, elle se comporte
   quand même correctement. */
.relie-left,
.relie-right {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--relie-gap);
}

/* =====================================================
   ÉTIQUETTES
===================================================== */

.relie-item {
  /* reset <button> pour que div et button rendent pareil */
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: auto;
  font-family: inherit;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.35;
  text-transform: none;

  padding: 10px 12px;
  border: 2px solid #cfd9e6;
  border-radius: 8px;
  background: #fff;
  color: var(--relie-ink);

  text-align: left;
  cursor: pointer;
  user-select: none;

  transition: border-color .15s ease-out, background-color .15s ease-out;
}

/* Le hover ne doit RIEN partager avec la sélection.
   v3 : filter brightness(.95) + bordure 2px -> 3px.
   - le filtre assombrissait toute la case : sous le curseur, une étiquette
     qu'on vient de relier gardait un fond gris identique à une sélection ;
   - la bordure 2px -> 3px décalait la mise en page, donc les traits.
   Il ne reste qu'un changement de couleur de bordure. */
.relie-item:hover {
  border-color: #aebccd;
  background-color: transparent !important;
}

.relie-item:focus-visible {
  outline: 2px solid var(--relie-blue);
  outline-offset: 2px;
}

/* ---------- sélection / liaison ---------- */
/*  SÉLECTION  = contour bleu foncé + fond gris. Un seul élément à la fois,
                 et uniquement tant que la liaison n'est pas faite.
    LIAISON    = aucun contour, aucun fond. Le trait SVG porte déjà
                 l'information ; la bordure vire au bleu clair, c'est tout.
    Les deux ne partagent plus aucune propriété, on ne peut plus les
    confondre. .is-selected est déclaré après .is-linked : il gagne sans
    le !important qu'avait la v3. */

.relie-item.is-linked {
  border-color: var(--relie-blue-light);
  outline: none;
}

.relie-item.is-selected {
  border-color: var(--relie-blue);
  outline: 2px solid var(--relie-blue);
  background: #e9edf1;
}

/* ---------- correction ---------- */
/* Ces états écrasent sélection et liaison. Déclarés après, à spécificité
   égale : l'ordre suffit, aucun !important nécessaire. */

.relie-item.is-ok {
  border-color: var(--relie-ok-border);
  background: var(--relie-ok-bg);
  outline: none;
}

.relie-item.is-ko {
  border-color: var(--relie-ko);
  background: var(--relie-ko-bg);
  outline: none;
}

.relie-item.is-incomplete {
  border: 2px dashed var(--relie-inc);
  background: var(--relie-inc-bg);
  outline: none;
}

.relie-item.is-solution {
  border: 2px dashed var(--relie-sol);
  background: var(--relie-sol-bg);
  color: var(--relie-sol-ink);
  outline: none;
}

.relie-item.is-distractor {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: #8a94a3;
  border-color: #d7dee6;
  background: transparent;
  outline: none;
}

.relie-item.is-missed {
  border: 2px dashed var(--relie-ko);
  background: transparent;
  outline: none;
}

/* =====================================================
   TRAITS
===================================================== */

.relie-line {
  stroke: var(--relie-blue);
  stroke-width: var(--relie-stroke);
  stroke-linecap: round;
  cursor: pointer;
  pointer-events: stroke;
}

.relie-line:hover {
  stroke-width: calc(var(--relie-stroke) + 2);
}

.relie-line.is-ok {
  stroke: var(--relie-ok-line);
}

.relie-line.is-ko {
  stroke: var(--relie-ko);
}

.relie-line.is-incomplete {
  stroke: var(--relie-inc);
  stroke-dasharray: 6 4;
}

.relie-line.is-solution {
  stroke: var(--relie-sol);
}

/* =====================================================
   VERROUILLAGE (après "Voir la solution")
===================================================== */

.relie-widget.is-locked .relie-item {
  pointer-events: none;
}

.relie-widget.is-locked .relie-line {
  pointer-events: none;
  cursor: default;
}

/* =====================================================
   ACTIONS & SCORE
===================================================== */

.relie-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e7eef6;
}

.relie-widget .relie-actions button {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 14px;
  border: 1px solid #0f6d86;
  border-radius: 8px;
  background: #147e99;
  color: #fff;
  font-family: inherit;
  font-size: 12pt;
  font-weight: normal;
  line-height: 1.1;
  text-transform: uppercase;
  cursor: pointer;
}

.relie-widget .relie-actions button:hover {
  filter: brightness(.95);
}

.relie-widget .relie-actions button:focus-visible {
  outline: 2px solid var(--relie-blue);
  outline-offset: 2px;
}

.relie-widget .relie-actions button[disabled] {
  opacity: .5;
  cursor: not-allowed;
  filter: none;
}

.relie-widget .relie-actions .relie-retry {
  background: #f0f3f6;
  border-color: #cfd9e6;
  color: var(--relie-ink);
}

.relie-widget .relie-actions .relie-solution:hover,
.relie-widget .relie-actions .relie-solution.is-active {
  background: rgba(255, 245, 191, .54);
  border-color: var(--relie-sol);
  color: var(--relie-sol-ink);
}

.relie-widget .relie-score {
  margin-left: auto;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-weight: 800;
  color: var(--relie-ink);
}

/* =====================================================
   PETITS ÉCRANS
===================================================== */

@media (max-width: 600px) {
  .relie-widget {
    --relie-gap: 10px;
    --relie-col-width: 45%;
  }

  .relie-stage {
    padding: 12px;
  }

  .relie-item {
    padding: 8px 10px;
    font-size: 14px;
  }

  .relie-widget .relie-actions button,
  .relie-widget .relie-score {
    font-size: 11pt;
  }

  .relie-widget .relie-score {
    margin-left: 0;
  }
}

/* =====================================================
   IMPRESSION
===================================================== */

@media print {
  .relie-actions { display: none; }
  .relie-stage { background: #fff; }
}

/* =====================================================================
   ÉCARTS ASSUMÉS VS relie-core-widget-v3.css
   ---------------------------------------------------------------------
   1. Hover des étiquettes. La v3 cumulait filter: brightness(.95) et une
      bordure qui passait de 2px à 3px. Deux problèmes : le filtre donnait
      à la case survolée le même fond grisé qu'une case sélectionnée (très
      gênant juste après un clic, le curseur restant posé sur l'étiquette
      qu'on vient de relier), et la croissance de bordure décalait la mise
      en page, donc les traits. Ici, seule la couleur de bordure change.

   1 bis. Sélection et liaison ne partagent plus aucune propriété :
      sélection = contour bleu foncé + fond gris, liaison = simple bordure
      bleu clair, sans contour. La v3 mettait un outline sur les deux, à
      deux nuances de bleu proches, donc indistinguables à l'usage.

   2. Plus aucun !important. La v3 en avait besoin parce que .is-selected
      et .is-linked posaient un outline que les 5 états de correction
      devaient forcer un par un. Ici les états de correction sont déclarés
      APRÈS et remettent outline: none — à spécificité égale, l'ordre
      suffit. Le rendu visuel est identique à la v3.

   3. touch-action: none supprimé. Il servait au drag ; sans drag, il
      empêchait le scroll de la page au doigt sur la zone de jeu.

   4. .relie-line.is-preview supprimé : plus de ligne de prévisualisation.

   5. .relie-line.is-solution : trait plein jaune. La v3 le mettait plein
      aussi ; c'est .is-incomplete qui porte les pointillés. Inchangé,
      juste rappelé ici parce que c'est contre-intuitif.

   6. Ajouts : :focus-visible, button[disabled], @media (max-width:600px),
      @media print, reset appearance sur .relie-item pour que <div> et
      <button> rendent identiquement.
   ===================================================================== */


/* ============================================================
   MODE IMAGE (couvre aussi le mode RAYON)
   ============================================================ */

/* =====================================================================
   RELIE IMAGE v4 — feuille de style autonome (mode image)
   ---------------------------------------------------------------------
   Reprend la charte et les styles image de relie-core-widget-v3.css.
   À charger seule. Points positionnés en pourcentage (left/top inline).
   ===================================================================== */

/* =====================================================================
   PALETTE 7MdS — partagée par tous les modes (texte, image, mixte…).
   Sortie dans :root pour être définie une seule fois et réutilisable
   partout. Surchargeable au niveau d'un .relie-widget si besoin ponctuel.
   ===================================================================== */
:root {
  --relie-blue: #2b7bbb;   /* bleu de marque */
  --relie-ok:   #1aa34a;   /* correct */
  --relie-ko:   #d64545;   /* faux */
  --relie-sol:  #ffb913;   /* solution révélée */
  --relie-inc:  #ff9800;   /* partiellement correct */
  /* Opacité commune des fonds d'état (ok/ko/sol/inc) : un seul réglage.
     Mélange à `transparent` -> les fonds tintent sans masquer l'image. */
  --relie-bg-alpha: 14%;
  --relie-ok-bg:  color-mix(in srgb, var(--relie-ok)  var(--relie-bg-alpha), transparent);
  --relie-ko-bg:  color-mix(in srgb, var(--relie-ko)  var(--relie-bg-alpha), transparent);
  --relie-sol-bg: color-mix(in srgb, var(--relie-sol) var(--relie-bg-alpha), transparent);
  --relie-inc-bg: color-mix(in srgb, var(--relie-inc) var(--relie-bg-alpha), transparent);
}

.relie-widget {
  /* Palette (--relie-blue / -ok / -ko / -sol / -inc) : voir :root en tête. */

  /* ---- POINTS : tout est réglable ici ----------------------------------
     Changer --relie-point-size agrandit/réduit la zone de clic SANS
     déplacer le centre du point (voir .relie-point ci-dessous). ---------- */
  --relie-point-size: 30px;            /* diamètre du cercle = zone de clic */
  --relie-point-fill: #ffffff;         /* couleur de FOND du cercle */
  --relie-point-border-color: #2b7bbb; /* couleur du CONTOUR du cercle */
  --relie-point-border-width: 3px;     /* épaisseur du contour */
  --relie-point-dot-color: #2b7bbb;    /* couleur du POINT central */
  --relie-point-dot-size: 6px;         /* diamètre du point central */

  /* Le point sélectionné (clic-clic, ou survolé pendant un drag) reçoit
     EXACTEMENT le même rendu que le survol — voir --relie-point-hover-*
     ci-dessous. Un seul réglage pour les deux, aucune confusion possible. */
  --relie-point-hover-ring: rgba(43, 123, 187, .28); /* halo survol = sélection */
  --relie-point-hover-ring-width: 3px;

  font-family: Arial, system-ui, sans-serif;
  color: #0f4c5c;
  margin: 14px 0;
}

/* ---------- scène image ---------- */

.relie-image-stage {
  position: relative;
  display: block;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  touch-action: none;   /* nécessaire au drag tactile */
}

.relie-image-stage .relie-bg {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.relie-image-stage .relie-svg {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- points ---------- */

.relie-image-stage .relie-point {
  position: absolute;
  z-index: 3;

  /* Taille = zone de clic. Le couple (left/top en % INLINE) + translate
     (-50%, -50%) fixe le CENTRE du point à la position voulue : changer
     --relie-point-size fait grandir le cercle autour de ce centre, qui
     ne bouge donc pas. */
  width: var(--relie-point-size);
  height: var(--relie-point-size);
  transform: translate(-50%, -50%);

  padding: 0;
  border-radius: 50%;
  border: var(--relie-point-border-width) solid var(--relie-point-border-color);
  background: var(--relie-point-fill);
  cursor: pointer;
  transition: box-shadow .12s ease-out, background-color .12s ease-out,
              border-color .12s ease-out;
  /* left / top fournis inline en % sur chaque .relie-point */
}

/* Point central : centré en permanence, quelle que soit la taille du cercle.
   Scopé à .relie-image-stage pour ne pas déborder sur mixte/légende (qui ont
   leur propre ::after) — évite la règle appliquée deux fois. */
.relie-image-stage .relie-point::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--relie-point-dot-size);
  height: var(--relie-point-dot-size);
  background: var(--relie-point-dot-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Survol ET sélection : même halo clair (validé). Les deux règles ci-dessous
   partagent volontairement la même déclaration : un point survolé et un
   point sélectionné sont identiques, ce qui évite toute confusion pendant
   le drag. */
.relie-image-stage .relie-point:hover,
.relie-image-stage .relie-point.is-selected {
  box-shadow: 0 0 0 var(--relie-point-hover-ring-width) var(--relie-point-hover-ring);
}

/* ---------- états de correction (points) ---------- */

.relie-image-stage .relie-point.is-ok {
  border-color: var(--relie-ok);
  background: var(--relie-ok-bg);
}

.relie-image-stage .relie-point.is-ko {
  border-color: var(--relie-ko);
  background: var(--relie-ko-bg);
}

.relie-image-stage .relie-point.is-missed {
  border: 3px dashed var(--relie-ko);
  background: transparent;
}

.relie-image-stage .relie-point.is-solution {
  border: 3px dashed var(--relie-sol);
  /* teinte dérivée de --relie-sol : suit automatiquement la palette.
     Ajuster le pourcentage pour un fond plus ou moins marqué. */
  background: var(--relie-sol-bg);
}

.relie-image-stage .relie-point.is-incomplete {
  border: 2px dashed var(--relie-inc);
  background: var(--relie-inc-bg);
}

/* ---------- étiquettes optionnelles à côté d'un point ---------- */

.relie-node {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
}

.relie-label {
  position: absolute;
  left: 35px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #0f4c5c;
  white-space: nowrap;
}

/* ---------- traits ---------- */

.relie-line {
  stroke: var(--relie-blue);
  stroke-width: 3;
  stroke-linecap: round;
  cursor: pointer;
  pointer-events: stroke;
}

.relie-line.is-preview {
  stroke: var(--relie-blue);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 6 4;
  opacity: .75;
  pointer-events: none;
}

.relie-line.is-ok         { stroke: #1f9d55; }
.relie-line.is-ko         { stroke: var(--relie-ko); }
.relie-line.is-solution   { stroke: var(--relie-sol); }
.relie-line.is-incomplete { stroke: var(--relie-inc); stroke-dasharray: 6 4; }


/* Distracteur (point leurre) à la correction : estompé/fantôme, visible mais
   nettement « pas dans la réponse ». Équivalent du texte barré. */
.relie-image-stage .relie-point.is-distractor {
  opacity: .35;
  border-color: #b8c0cc;
  background: transparent;
  box-shadow: none;
}
.relie-image-stage .relie-point.is-distractor::after { background: #b8c0cc; }

.relie-widget.is-locked .relie-point,
.relie-widget.is-locked .relie-line {
  pointer-events: none;
}

/* ---------- actions & score ---------- */

.relie-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e7eef6;
}

.relie-widget .relie-actions button {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 14px;
  border: 1px solid #0f6d86;
  border-radius: 8px;
  background: #147e99;
  color: #fff;
  font: inherit;
  font-size: 12pt;
  line-height: 1.1;
  text-transform: uppercase;
  cursor: pointer;
}

.relie-widget .relie-actions button:hover { filter: brightness(.95); }

.relie-widget .relie-actions button[disabled] {
  opacity: .5;
  cursor: not-allowed;
  filter: none;
}

.relie-widget .relie-actions .relie-retry {
  background: #f0f3f6;
  border-color: #cfd9e6;
  color: #0f4c5c;
}

.relie-widget .relie-actions .relie-solution:hover,
.relie-widget .relie-actions .relie-solution.is-active {
  background: rgba(255, 245, 191, .54);
  border-color: var(--relie-sol);
  color: #6a4d08;
}

.relie-widget .relie-score {
  margin-left: auto;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  color: #0f4c5c;
}


/* ============================================================
   MODE MIXTE
   ============================================================ */

/* =====================================================================
   RELIE MIXTE v4 — feuille de style autonome (mode mixte)
   ---------------------------------------------------------------------
   Étiquettes texte (gauche) reliées à des points sur image (droite).
   ===================================================================== */

:root {
  --relie-blue: #2b7bbb;
  --relie-ok:   #1aa34a;
  --relie-ko:   #d64545;
  --relie-sol:  #ffb913;
  --relie-inc:  #ff9800;
  /* Opacité commune des fonds d'état (ok/ko/sol/inc) : un seul réglage.
     Mélange à `transparent` -> les fonds tintent sans masquer l'image. */
  --relie-bg-alpha: 14%;
  --relie-ok-bg:  color-mix(in srgb, var(--relie-ok)  var(--relie-bg-alpha), transparent);
  --relie-ko-bg:  color-mix(in srgb, var(--relie-ko)  var(--relie-bg-alpha), transparent);
  --relie-sol-bg: color-mix(in srgb, var(--relie-sol) var(--relie-bg-alpha), transparent);
  --relie-inc-bg: color-mix(in srgb, var(--relie-inc) var(--relie-bg-alpha), transparent);
}

.relie-widget[data-relie-mode="mixed"] {
  /* ---- POINTS : mêmes variables que le mode image ---------------------
     Le centre ne bouge pas si on change --relie-point-size. */
  --relie-point-size: 34px;              /* diamètre du cercle = zone de clic */
  --relie-point-fill: #ffffff;           /* couleur de FOND du cercle */
  --relie-point-border-color: #2b7bbb;   /* couleur du CONTOUR du cercle */
  --relie-point-border-width: 3px;       /* épaisseur du contour */
  --relie-point-dot-color: #2b7bbb;      /* couleur du POINT central */
  --relie-point-dot-size: 6px;           /* diamètre du point central */

  /* halo survol = sélection d'un point pendant le drag */
  --relie-point-hover-ring: rgba(43, 123, 187, .28);
  --relie-point-hover-ring-width: 3px;

  font-family: Arial, system-ui, sans-serif;
  color: #0f4c5c;
  margin: 16px 0;

  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(320px, 520px);
  gap: 10px;
  align-items: flex-start;
}

/* ---------- colonne d'étiquettes ---------- */

.relie-widget[data-relie-mode="mixed"] > .relie-left {
  position: relative;
  z-index: 3;
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.relie-widget[data-relie-mode="mixed"] .relie-item {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 10px 12px;
  border: 2px solid #cfd9e6;
  border-radius: 8px;
  background: #fff;
  color: #0f4c5c;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}

.relie-widget[data-relie-mode="mixed"] .relie-item:hover {
  border-color: #aebccd;
}

/* étiquette armée */
.relie-widget[data-relie-mode="mixed"] .relie-item.is-selected {
  outline: 3px solid rgba(43, 123, 187, .35);
  border-color: var(--relie-blue);
  background: #eef7ff;
}

/* états de correction sur les étiquettes */
.relie-widget[data-relie-mode="mixed"] .relie-item.is-ok         { border-color: var(--relie-ok);  background: var(--relie-ok-bg); outline: none; }
.relie-widget[data-relie-mode="mixed"] .relie-item.is-ko         { border-color: var(--relie-ko);  background: var(--relie-ko-bg); outline: none; }
.relie-widget[data-relie-mode="mixed"] .relie-item.is-incomplete { border: 2px dashed var(--relie-inc); background: var(--relie-inc-bg); outline: none; }
.relie-widget[data-relie-mode="mixed"] .relie-item.is-solution   { border: 2px dashed var(--relie-sol); background: var(--relie-sol-bg); outline: none; }

/* ---------- zone image ---------- */

.relie-widget[data-relie-mode="mixed"] > .relie-image-zone {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 520px;
  touch-action: none;   /* nécessaire au drag tactile */
}

.relie-widget[data-relie-mode="mixed"] .relie-image-zone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  user-select: none;
  pointer-events: none;
}

.relie-widget[data-relie-mode="mixed"] .relie-mixed-svg {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- points ---------- */

.relie-widget[data-relie-mode="mixed"] .relie-image-zone .relie-point {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -50%);   /* centre fixe quelle que soit la taille */
  width: var(--relie-point-size);
  height: var(--relie-point-size);
  min-width: var(--relie-point-size);
  min-height: var(--relie-point-size);
  padding: 0;
  border-radius: 50%;
  border: var(--relie-point-border-width) solid var(--relie-point-border-color);
  background: var(--relie-point-fill);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: box-shadow .12s ease-out, background-color .12s ease-out,
              border-color .12s ease-out;
  /* left / top fournis inline en % sur chaque .relie-point */
}

/* Point central : centré en permanence, quelle que soit la taille du cercle
   (mêmes variables que le mode image). */
.relie-widget[data-relie-mode="mixed"] .relie-point::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--relie-point-dot-size);
  height: var(--relie-point-dot-size);
  background: var(--relie-point-dot-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* survol ET sélection : même halo (aucune confusion pendant le drag) */
.relie-widget[data-relie-mode="mixed"] .relie-point:hover,
.relie-widget[data-relie-mode="mixed"] .relie-point.is-selected {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18),
              0 0 0 var(--relie-point-hover-ring-width) var(--relie-point-hover-ring);
}

/* états de correction sur les points */
.relie-widget[data-relie-mode="mixed"] .relie-point.is-ok         { border-color: var(--relie-ok); background: var(--relie-ok-bg); }
.relie-widget[data-relie-mode="mixed"] .relie-point.is-ko         { border-color: var(--relie-ko); background: var(--relie-ko-bg); }
.relie-widget[data-relie-mode="mixed"] .relie-point.is-solution   { border: 3px dashed var(--relie-sol); background: var(--relie-sol-bg); }
.relie-widget[data-relie-mode="mixed"] .relie-point.is-missed     { border: 3px dashed var(--relie-ko); background: transparent; }
.relie-widget[data-relie-mode="mixed"] .relie-point.is-incomplete { border: 2px dashed var(--relie-inc); background: var(--relie-inc-bg); }

.relie-widget[data-relie-mode="mixed"] .relie-item.is-distractor {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: #8a94a3;
  border-color: #d7dee6;
  background: transparent;
  outline: none;
}

/* ---------- traits ---------- */

.relie-line {
  stroke: var(--relie-blue);
  stroke-width: 3;
  stroke-linecap: round;
  cursor: pointer;
  pointer-events: stroke;
}

.relie-line.is-preview {
  stroke: var(--relie-blue);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 6 4;
  opacity: .75;
  pointer-events: none;
}

.relie-line.is-ok         { stroke: #1f9d55; }
.relie-line.is-ko         { stroke: var(--relie-ko); }
.relie-line.is-solution   { stroke: var(--relie-sol); }
.relie-line.is-incomplete { stroke: var(--relie-inc); stroke-dasharray: 6 4; }

.relie-widget.is-locked .relie-item,
.relie-widget.is-locked .relie-point,
.relie-widget.is-locked .relie-line {
  pointer-events: none;
}

/* ---------- actions & score ---------- */

.relie-widget[data-relie-mode="mixed"] > .relie-actions {
  position: relative;
  z-index: 7;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid #e7eef6;
}

.relie-widget .relie-actions button {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 14px;
  border: 1px solid #0f6d86;
  border-radius: 8px;
  background: #147e99;
  color: #fff;
  font: inherit;
  font-size: 12pt;
  line-height: 1.1;
  text-transform: uppercase;
  cursor: pointer;
}

.relie-widget .relie-actions button:hover { filter: brightness(.95); }
.relie-widget .relie-actions button[disabled] { opacity: .5; cursor: not-allowed; filter: none; }

.relie-widget .relie-actions .relie-retry {
  background: #f0f3f6;
  border-color: #cfd9e6;
  color: #0f4c5c;
}

.relie-widget .relie-actions .relie-solution:hover,
.relie-widget .relie-actions .relie-solution.is-active {
  background: rgba(255, 245, 191, .54);
  border-color: var(--relie-sol);
  color: #6a4d08;
}

.relie-widget .relie-score {
  margin-left: auto;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  color: #0f4c5c;
}


/* ============================================================
   MODE LÉGENDE
   ============================================================ */

/* =====================================================================
   RELIE LÉGENDE v4 — feuille de style autonome (mode légende)
   ---------------------------------------------------------------------
   Étiquettes texte (gauche) reliées à des points sur image (droite).
   Identique au mode mixte, mais le trait porte une FLÈCHE en bout, dirigée
   de l'étiquette vers le point (la flèche est un marqueur SVG géré côté JS,
   sa couleur suit celle du trait via fill: context-stroke — rien à styler ici).
   ===================================================================== */

:root {
  --relie-blue: #2b7bbb;
  --relie-ok:   #1aa34a;
  --relie-ko:   #d64545;
  --relie-sol:  #ffb913;
  --relie-inc:  #ff9800;
  /* Opacité commune des fonds d'état (ok/ko/sol/inc) : un seul réglage.
     Mélange à `transparent` -> les fonds tintent sans masquer l'image. */
  --relie-bg-alpha: 14%;
  --relie-ok-bg:  color-mix(in srgb, var(--relie-ok)  var(--relie-bg-alpha), transparent);
  --relie-ko-bg:  color-mix(in srgb, var(--relie-ko)  var(--relie-bg-alpha), transparent);
  --relie-sol-bg: color-mix(in srgb, var(--relie-sol) var(--relie-bg-alpha), transparent);
  --relie-inc-bg: color-mix(in srgb, var(--relie-inc) var(--relie-bg-alpha), transparent);
}

.relie-widget[data-relie-mode="legende"] {
  /* ---- POINTS : mêmes variables que le mode image ---------------------
     Le centre ne bouge pas si on change --relie-point-size. */
  --relie-point-size: 34px;              /* diamètre du cercle = zone de clic */
  --relie-point-fill: #ffffff;           /* couleur de FOND du cercle */
  --relie-point-border-color: #2b7bbb;   /* couleur du CONTOUR du cercle */
  --relie-point-border-width: 3px;       /* épaisseur du contour */
  --relie-point-dot-color: #2b7bbb;      /* couleur du POINT central */
  --relie-point-dot-size: 6px;           /* diamètre du point central */

  /* halo survol = sélection d'un point pendant le drag */
  --relie-point-hover-ring: rgba(43, 123, 187, .28);
  --relie-point-hover-ring-width: 3px;

  font-family: Arial, system-ui, sans-serif;
  color: #0f4c5c;
  margin: 16px 0;

  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(320px, 520px);
  gap: 10px;
  align-items: flex-start;
}

/* ---------- colonne d'étiquettes ---------- */

.relie-widget[data-relie-mode="legende"] > .relie-left {
  position: relative;
  z-index: 3;
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.relie-widget[data-relie-mode="legende"] .relie-item {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 10px 12px;
  border: 2px solid #cfd9e6;
  border-radius: 8px;
  background: #fff;
  color: #0f4c5c;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}

.relie-widget[data-relie-mode="legende"] .relie-item:hover {
  border-color: #aebccd;
}

/* étiquette armée */
.relie-widget[data-relie-mode="legende"] .relie-item.is-selected {
  outline: 3px solid rgba(43, 123, 187, .35);
  border-color: var(--relie-blue);
  background: #eef7ff;
}

/* états de correction sur les étiquettes */
.relie-widget[data-relie-mode="legende"] .relie-item.is-ok         { border-color: var(--relie-ok);  background: var(--relie-ok-bg); outline: none; }
.relie-widget[data-relie-mode="legende"] .relie-item.is-ko         { border-color: var(--relie-ko);  background: var(--relie-ko-bg); outline: none; }
.relie-widget[data-relie-mode="legende"] .relie-item.is-incomplete { border: 2px dashed var(--relie-inc); background: var(--relie-inc-bg); outline: none; }
.relie-widget[data-relie-mode="legende"] .relie-item.is-solution   { border: 2px dashed var(--relie-sol); background: var(--relie-sol-bg); outline: none; }

/* ---------- zone image ---------- */

.relie-widget[data-relie-mode="legende"] > .relie-image-zone {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 520px;
  touch-action: none;   /* nécessaire au drag tactile */
}

.relie-widget[data-relie-mode="legende"] .relie-image-zone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  user-select: none;
  pointer-events: none;
}

.relie-widget[data-relie-mode="legende"] .relie-legende-svg {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- points ---------- */

.relie-widget[data-relie-mode="legende"] .relie-image-zone .relie-point {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -50%);   /* centre fixe quelle que soit la taille */
  width: var(--relie-point-size);
  height: var(--relie-point-size);
  min-width: var(--relie-point-size);
  min-height: var(--relie-point-size);
  padding: 0;
  border-radius: 50%;
  border: var(--relie-point-border-width) solid var(--relie-point-border-color);
  background: var(--relie-point-fill);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: box-shadow .12s ease-out, background-color .12s ease-out,
              border-color .12s ease-out;
  /* left / top fournis inline en % sur chaque .relie-point */
}

/* Point central : centré en permanence, quelle que soit la taille du cercle
   (mêmes variables que le mode image). */
.relie-widget[data-relie-mode="legende"] .relie-point::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--relie-point-dot-size);
  height: var(--relie-point-dot-size);
  background: var(--relie-point-dot-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* survol ET sélection : même halo (aucune confusion pendant le drag) */
.relie-widget[data-relie-mode="legende"] .relie-point:hover,
.relie-widget[data-relie-mode="legende"] .relie-point.is-selected {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18),
              0 0 0 var(--relie-point-hover-ring-width) var(--relie-point-hover-ring);
}

/* états de correction sur les points */
.relie-widget[data-relie-mode="legende"] .relie-point.is-ok         { border-color: var(--relie-ok); background: var(--relie-ok-bg); }
.relie-widget[data-relie-mode="legende"] .relie-point.is-ko         { border-color: var(--relie-ko); background: var(--relie-ko-bg); }
.relie-widget[data-relie-mode="legende"] .relie-point.is-solution   { border: 3px dashed var(--relie-sol); background: var(--relie-sol-bg); }
.relie-widget[data-relie-mode="legende"] .relie-point.is-missed     { border: 3px dashed var(--relie-ko); background: transparent; }
.relie-widget[data-relie-mode="legende"] .relie-point.is-incomplete { border: 2px dashed var(--relie-inc); background: var(--relie-inc-bg); }

.relie-widget[data-relie-mode="legende"] .relie-item.is-distractor {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: #8a94a3;
  border-color: #d7dee6;
  background: transparent;
  outline: none;
}

/* ---------- traits ---------- */

.relie-line {
  stroke: var(--relie-blue);
  stroke-width: 3;
  stroke-linecap: round;
  cursor: pointer;
  pointer-events: stroke;
}

.relie-line.is-preview {
  stroke: var(--relie-blue);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 6 4;
  opacity: .75;
  pointer-events: none;
}

.relie-line.is-ok         { stroke: #1f9d55; }
.relie-line.is-ko         { stroke: var(--relie-ko); }
.relie-line.is-solution   { stroke: var(--relie-sol); }
.relie-line.is-incomplete { stroke: var(--relie-inc); stroke-dasharray: 6 4; }

.relie-widget.is-locked .relie-item,
.relie-widget.is-locked .relie-point,
.relie-widget.is-locked .relie-line {
  pointer-events: none;
}

/* ---------- actions & score ---------- */

.relie-widget[data-relie-mode="legende"] > .relie-actions {
  position: relative;
  z-index: 7;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid #e7eef6;
}

.relie-widget .relie-actions button {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 14px;
  border: 1px solid #0f6d86;
  border-radius: 8px;
  background: #147e99;
  color: #fff;
  font: inherit;
  font-size: 12pt;
  line-height: 1.1;
  text-transform: uppercase;
  cursor: pointer;
}

.relie-widget .relie-actions button:hover { filter: brightness(.95); }
.relie-widget .relie-actions button[disabled] { opacity: .5; cursor: not-allowed; filter: none; }

.relie-widget .relie-actions .relie-retry {
  background: #f0f3f6;
  border-color: #cfd9e6;
  color: #0f4c5c;
}

.relie-widget .relie-actions .relie-solution:hover,
.relie-widget .relie-actions .relie-solution.is-active {
  background: rgba(255, 245, 191, .54);
  border-color: var(--relie-sol);
  color: #6a4d08;
}

.relie-widget .relie-score {
  margin-left: auto;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  color: #0f4c5c;
}

/* =====================================================================
   RAYON v4.1.0 — trait continu + zones de clic élargies
   ---------------------------------------------------------------------
   Le trait visible est désormais une <polyline> : on force fill:none pour
   éviter tout remplissage parasite du polygone.
   Deux éléments INVISIBLES servent uniquement à agrandir la cible de clic
   qui supprime un rayon :
     .relie-rayon-hit      = ligne transparente épaisse sur tout le trait
     .relie-rayon-arrow-hit = cercle « aura » autour de la flèche (milieu)
   Rayon de l'aura réglable par widget : attribut data-rayon-aura (défaut 20).
   ===================================================================== */

.relie-line { fill: none; }

.relie-rayon-hit {
  stroke: transparent;
  stroke-width: 16;
  fill: none;
  pointer-events: stroke;   /* clic capté sur toute l'épaisseur du trait */
  cursor: pointer;
}

.relie-rayon-arrow-hit {
  fill: transparent;
  pointer-events: all;      /* clic capté dans tout le disque de l'aura */
  cursor: pointer;
}

/* Après correction (widget verrouillé) : plus de suppression possible. */
.relie-widget.is-locked .relie-rayon-hit,
.relie-widget.is-locked .relie-rayon-arrow-hit {
  pointer-events: none;
  cursor: default;
}