/* style.css */
.circle-years {
  /* Variables */
  --d-css: 140vw;
  --d: 140vw;
  --r: calc(var(--d)/2);
  --cyw-color: #025CAD; /* bleu demandé */
  --cyw-font-size: clamp(24px, 7vw, 140px);
  --cyw-font-family: "Milling Simplex 0mm", monospace;
  --gap-deg: 5.5; /* <--- nouvel écart angulaire (degrés) par défaut */

  /* Priorité : override CSS (media queries) > inline --d > défaut CSS */
  --d-final: var(--d-override, var(--d, var(--d-css)));
  --r: calc(var(--d-final) / 2);

  width: var(--d-final);
  height: var(--d-final);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  color: var(--cyw-color);
  font-size: var(--cyw-font-size);       /* <-- garde la variable */
  font-family: var(--cyw-font-family);
  font-weight: 500;
  user-select: none;
  transition: transform .6s ease;
  pointer-events: none;

  /* centrer verticalement, versions viewport modernes incluses */
  top: 50vh;   /* fallback */
  top: 50svh;  /* iOS */
  top: 50dvh;  /* dynamique idéal */
}

.circle-years .year-wrap {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

.circle-years .char {
  position: absolute;
  left: 50%;
  top: 0;                       /* point de départ en haut du conteneur */
  transform-origin: 0 var(--r);
  white-space: pre;
}

@media screen and (max-width: 1024px) {
  #container-years { height: 100dvh !important; }

  .circle-years{
    /* très gros sur mobile — vmin garde une taille lisible aussi en paysage */
    --cyw-font-size: clamp(64px, 14vmin, 220px);
    /* cercle un peu plus grand pour respirer quand la taille grimpe */
  /* Ici ça *prend le pas* sur un éventuel --d inline */
    --d-override: max(170vw, 120dvh);
    --d: max(170vw, 120dvh);
    /* écarte un peu les chiffres quand c'est gros */
    --gap-deg: 7.5;

    /* ta position personnalisée conservée */
    top: calc(100dvh - 200px) !important;

    /* forcer la variable comme taille effective si besoin */
    font-size: var(--cyw-font-size) !important;
  }
}