.titre {
  text-align: center;
  padding: 60px 24px 20px;
  border-bottom: 1px solid var(--card-border);
}

.separator {
  width: 100%;
  height: 30px;
}

.container {
  width: 100%;
  aspect-ratio: var(--dynamic-aspect-ratio, 1.5);
  position: relative;
  overflow: hidden;
}

.text_container {
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 60px;
  padding-left: 24px;
  padding-right: 24px;
  text-align: justify;
}

.text_container h2,
.text_container h3 {
  font-size: 22px;
}

/* Scales the whole honeycomb (circles + the blank spacers between them)
   together, so the row of circles never gets wider than the screen -- a
   fixed 150px was overflowing both width and height on narrow phones. */
:root {
  --cercle-size: clamp(72px, 26vw, 150px);
}

.cercle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 50%;
  width: var(--cercle-size);
  height: var(--cercle-size);
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease;
  /* Passive idle glow -- signals "clickable" even before the user hovers. */
  animation: bubble-breathe 2.6s ease-in-out infinite;
}

.cercle span {
  text-align: center;
  line-height: 1.25;
  padding: 0 10px;
  font-size: clamp(10px, 3.4vw, 15px);
  /* Long hyphenated aspect names (e.g. "Colère-Hostilité") don't wrap at a
     hyphen by default and were spilling out past the circle -- since
     .container has overflow:hidden but no explicit width limit of its own,
     that unbreakable text dragged the whole page (and everything else on
     it) wider instead of just getting clipped.
     max-width MUST be a plain fixed px value here, not vw/clamp/calc()
     derived from --cercle-size -- confirmed by testing that Chrome doesn't
     apply a vw-derived max-width to this text-wrapping decision at all
     (the box itself sizes correctly, only the wrap calculation ignores
     it), even though the *box*'s own width above uses the same --cercle-size
     clamp() without issue. Stepped fixed tiers instead, each sized to what
     --cercle-size actually is at that breakpoint (26vw, minus ~20px
     padding, rounded down for a safety margin) -- one tier alone (sized
     for the smallest circle) made short words like "Anxiété" wrap
     needlessly at in-between viewports. */
  max-width: 52px;
  overflow-wrap: break-word;
}

@media screen and (min-width: 360px) {
  .cercle span { max-width: 68px; }
}

@media screen and (min-width: 460px) {
  .cercle span { max-width: 90px; }
}

@media screen and (min-width: 520px) {
  .cercle span { max-width: 112px; }
}

@media screen and (min-width: 577px) {
  .cercle span {
    max-width: 128px;
  }
}

a .cercle:hover,
a:hover .cercle {
  animation-play-state: paused;
  transform: translateY(-4px);
  border-color: var(--gold);
}

@keyframes bubble-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 110, 0.25); }
  50% { box-shadow: 0 0 20px 3px rgba(212, 175, 110, 0.25); }
}

/* Same issue and same fix as .cercle span's max-width above: multiplying a
   vw-derived custom property inside calc() doesn't compute correctly here
   either -- confirmed by testing that these widths silently rendered as 0,
   collapsing the spacer entirely instead of the intended fraction of
   --cercle-size. Fixed tiers instead, one per breakpoint, each the correct
   fraction of what --cercle-size actually is at that width (the 577px+
   tier works out to the exact original fixed values: 40px/70px/320px). */
.blank {
  width: 171px;
  height: var(--cercle-size);
}

.blank_medium {
  width: 37px;
  height: var(--cercle-size);
}

.blank_little {
  width: 21px;
  height: var(--cercle-size);
}

@media screen and (min-width: 360px) {
  .blank { width: 200px; }
  .blank_medium { width: 44px; }
  .blank_little { width: 25px; }
}

@media screen and (min-width: 460px) {
  .blank { width: 255px; }
  .blank_medium { width: 56px; }
  .blank_little { width: 32px; }
}

@media screen and (min-width: 520px) {
  .blank { width: 288px; }
  .blank_medium { width: 63px; }
  .blank_little { width: 36px; }
}

@media screen and (min-width: 577px) {
  .blank { width: 320px; }
  .blank_medium { width: 70px; }
  .blank_little { width: 40px; }
}

.ligne {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}