/* Cercle autour d'un titre (composant js/ring.js). Mesures lues dans le code de la réf : texte sur cercle 38.0152777778vw
   (mobile 100.6173333333vw), couleur du titre, majuscules, arcs : trait .25 sur 100 unités, 35 % d'opacité.
   Deux écarts voulus (demande de Thomas, 2026-10-28) :
   - la date est en coupe « affichage » de Bricolage Grotesque (opsz 96), celle du titre « Maud & Simon ». À 19 px le navigateur
     choisirait la coupe « texte » (opsz ~19), large et neutre, qui ressemble à du Helvetica ;
   - le trait du cercle passe par le MILIEU des capitales (et non 14 px sous les lettres) : la date est posée sur le cercle. */

.ring {
  --ring-text-w: 100.6173333333vw;   /* diamètre du cercle sur lequel est posée la ligne de base du texte */
  --ring-arc-ratio: 1.0467;          /* diamètre des arcs / diamètre du texte = (1 + 0,66 × corps / 515) / 0,98 : le trait coupe les capitales à mi-hauteur */
  --ring-font: 20px;                 /* en unités du viewBox 515 : l'SVG est mis à l'échelle, le corps l'est avec lui */
  position: absolute;
  left: var(--rx, 50%);
  top: var(--ry, 50%);
  z-index: -1;
  width: 0;
  height: 0;
  pointer-events: none;
  user-select: none;
}
.ring__svg { position: absolute; left: 0; top: 0; max-width: none; translate: -50% -50%; overflow: visible; }
.ring__svg--text { width: var(--ring-text-w); }
.ring__svg--arcs { width: calc(var(--ring-text-w) * var(--ring-arc-ratio)); }
.ring__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--ring-font);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 96, "wdth" 100;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  fill: var(--display);
}
.ring__arc { stroke: var(--display); stroke-width: .25px; opacity: .35; }

@media (min-width: 1024px) {
  /* 38.015vw comme la réf ; plafonné à la hauteur de l'écran pour que le haut du cercle ne se coince pas sous l'en-tête */
  .ring { --ring-text-w: min(38.0152777778vw, 62vh); --ring-arc-ratio: 1.0452; --ring-font: 19px; }
}