/* ------------------------------------------------------------------
   fig-venn.css — la planche du Concept Report, redessinee.

   Trois sources tenues dans la meme main : les clients porteurs de
   carte, le quartier, le secteur. Croisees, elles ouvrent sept zones ;
   chaque zone est une opportunite differente. Le centre est le point le
   plus dense de la figure parce que c'est la que se joue la fidelisation.

   Les cercles sont trois morceaux distincts : ils entrent l'un apres
   l'autre, et leurs opacites s'additionnent la ou ils se recouvrent.
-------------------------------------------------------------------*/

.fgv-c{ display:block; width:100%; height:auto; overflow:visible; }
.fgv-c circle{
  fill:var(--fg-accent); fill-opacity:.155;
  stroke:var(--fg-accent); stroke-opacity:.42; stroke-width:.5;
  vector-effect:non-scaling-stroke;
}
html:not(.theme-light) .fgv-c circle{ fill-opacity:.26; stroke-opacity:.6; }

/* Le coeur : une couche de plus, pour que le point le plus dense le
   soit vraiment. */
.fgv-traits{ display:block; width:100%; height:auto; overflow:visible; }
.fgv-coeur{ fill:var(--fg-accent); fill-opacity:.13; }
html:not(.theme-light) .fgv-coeur{ fill-opacity:.20; }

/* Les traits de rappel. Fins, discrets : ils relient, ils ne dessinent pas. */
.fgv-t{ stroke:var(--fg-mate); stroke-opacity:.55; stroke-width:1;
  vector-effect:non-scaling-stroke; }
.fgv-t--coeur{ stroke:var(--fg-accent); stroke-opacity:.85; stroke-width:1.4; }
.fgv-p{ fill:var(--fg-accent); fill-opacity:.85; }
.fgv-p--coeur{ fill:var(--fg-accent); fill-opacity:1; }

/* Le nom d'un ensemble, pose dans sa zone exclusive. */
.fgv-ens{
  text-align:center; color:var(--fg-encre);
  font-size:1.42cqw; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; line-height:1.4;
}

/* Une etiquette d'opportunite : une ligne, posee hors des cercles. */
.fgv-lab{ height:3.4cqw; display:flex; align-items:center; }
.fgv-lab span{
  display:block; width:100%;
  font-size:1.66cqw; letter-spacing:.005em; font-weight:500; line-height:1.3;
  color:var(--fg-encre);
}
.fgv-lab--g{ justify-content:flex-end; }
.fgv-lab--g span{ text-align:right; }
.fgv-lab--d span{ text-align:left; }
.fgv-lab--c span{ text-align:center; }

/* Le coeur, ecrit. C'est le seul mot de la figure qui a le droit d'etre gros. */
.fgv-coeur-lab{ text-align:center; }
.fgv-coeur-lbl{ display:block; }
.fgv-coeur-lab b{
  display:block; margin-top:1.2cqw;
  font-family:var(--display); font-weight:800;
  font-size:3.8cqw; line-height:1.05; letter-spacing:-.02em;
  color:var(--fg-accent);
}