/* ══════════════════════════════════════════════════════════════════════
   Cœur du schéma des activités (page 3)

   Il remplace l'image qui occupait le centre de la page. Tout est dessiné :
   le halo, l'orbite, le disque blanc, les cinq nœuds et leurs amorces.
   Le texte est du vrai texte, les traits restent nets à toute échelle.

   Repère : la boîte fait 240 × 240 pt, son centre est à (120, 120) et
   correspond au centre du cercle. Les cinq nœuds sont posés sur une même
   orbite de 101 pt de rayon, chacun dans l'axe de sa carte.
   ══════════════════════════════════════════════════════════════════════ */

.hub{
  --hub-or:#d89c24;
  --hub-rose:#ff0b4f;
  position:absolute;
}

/* Halo chaud : il détache le cercle du fond sans dessiner de contour dur. */
.hub::before{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(216,156,36,.13) 0%,
    rgba(216,156,36,.07) 46%,
    rgba(216,156,36,0)   72%);
}

/* Orbite : le cercle discret qui relie les cinq nœuds entre eux. */
.hub__orbite{
  position:absolute; left:19px; top:19px; width:202px; height:202px;
  border-radius:50%; border:.8px dashed rgba(216,156,36,.30);
}

/* ---------- Le disque ---------- */
.hub__disque{
  position:absolute; left:40px; top:40px; width:160px; height:160px;
  border-radius:50%; background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:
    0 0 0 .8px rgba(216,156,36,.22),
    0 0 0 9px rgba(216,156,36,.05),
    0 12px 34px rgba(216,156,36,.18),
    0 2px 10px rgba(7,26,60,.06);
}
.hub__cep{ width:104px; height:17.8px; object-fit:contain; }
.hub__sub{
  margin:7.5px 0 0;
  font-size:6.4px; line-height:8px; font-weight:600;
  letter-spacing:.155em; color:var(--navy); white-space:nowrap;
}
.hub__trait{
  width:38px; height:.8px; margin:9px 0 9.5px;
  background:linear-gradient(90deg,
    rgba(216,156,36,0) 0%, rgba(216,156,36,.55) 50%, rgba(216,156,36,0) 100%);
}
.hub__po{ width:105px; height:37px; object-fit:contain; }

/* ---------- Les nœuds ---------- */
.hub__noeud{
  position:absolute; width:23px; height:23px; margin:-11.5px 0 0 -11.5px;
  border-radius:50%; background:#fff;
  border:.8px solid rgba(255,11,79,.28);
  display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(7,26,60,.10);
}
.hub__noeud svg{
  width:11.5px; height:11.5px;
  fill:none; stroke:var(--hub-rose); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Chaque nœud est posé dans l'axe de sa carte, à 101 pt du centre. */
.hub__noeud--spect{ left:119.5px; top:19px; }
.hub__noeud--lois { left:26.3px;  top:82.2px; }
.hub__noeud--bien { left:213.7px; top:82.3px; }
.hub__noeud--sej  { left:47.5px;  top:190.3px; }
.hub__noeud--resto{ left:187.9px; top:194.8px; }

/* ---------- Les amorces pointillées ---------- */
/* Un court segment entre le disque et le nœud : il indique le lien sans
   tirer un trait jusqu'à la carte, qui alourdirait le schéma. */
.hub__amorce{
  position:absolute; left:120px; top:120px; width:12px; height:0;
  border-top:1.3px dashed rgba(255,11,79,.55);
  transform-origin:0 0;
}
.hub__amorce--spect{ transform:rotate(-90.28deg) translateX(79px); }
.hub__amorce--lois { transform:rotate(201.97deg) translateX(79px); }
.hub__amorce--bien { transform:rotate(-21.90deg) translateX(79px); }
.hub__amorce--sej  { transform:rotate(135.82deg) translateX(79px); }
.hub__amorce--resto{ transform:rotate(47.75deg)  translateX(79px); }

/* Position de l'ensemble sur la page 3 */
.s03__hub{ left:513.5px; top:124.5px; width:240px; height:240px; }

/* ══════════════════════════════════════════════════════════════════════
   Les activités, cliquables

   Chaque carte d'activité ouvre les captures de sites CSE avec leurs
   tarifs réels. La zone est posée par-dessus l'image découpée : celle-ci
   est reconstruite par l'outillage, on n'y touche pas.

   Une loupe discrète en dit assez pour qu'on ait envie de cliquer, sans
   couvrir la photo. Elle grossit au survol, et la carte se soulève — le
   même geste que les pastilles de la page 9.
   ══════════════════════════════════════════════════════════════════════ */
.s03__zone{
  position:absolute; z-index:6; display:block;
  border-radius:11px; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
/* Relevé sur la page composée : chaque carte est sa photo (≈ 127 × 79),
   deux points au-dessus et la bande du libellé en dessous. */
.s03__zone--spect{ left:562px; top: 12px; width:143px; height:124px; }
.s03__zone--lois { left:398px; top:126px; width:128px; height:125px; }
.s03__zone--bien { left:744px; top:126px; width:128px; height:125px; }
.s03__zone--sej  { left:419px; top:284px; width:127px; height:122px; }
.s03__zone--resto{ left:710px; top:285px; width:126px; height:123px; }

/* Pas de translation au survol : la carte, elle, est une image fixe — une
   zone qui se soulève toute seule décollerait son ombre de la photo. On
   ajoute de la profondeur, et la loupe fait le reste. */
.s03__zone:hover{ box-shadow:0 10px 30px rgba(7,26,60,.16); }

.s03__loupe{
  position:absolute; right:7px; top:7px; width:19px; height:19px;
  border-radius:50%; background:var(--rose); color:#fff;
  display:grid; place-items:center;
  box-shadow:0 3px 10px rgba(255,10,78,.36);
  transition:transform .18s ease;
}
.s03__loupe svg{
  width:9px; height:9px; fill:none; stroke:currentColor;
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}
.s03__zone:hover .s03__loupe{ transform:scale(1.12); }

/* Sans capture derrière, la carte redevient une image. */
.s03__zone.est-muette{ display:none; }

/* La planche des captures : pas de légende, l'aperçu occupe toute la carte. */
.expl--nu .expl__carte{ padding:0; }
.expl--nu .expl__carte img{ border-radius:9px; }