/* ==========================================================================
   Le cercle des promesses (accueil)

   Cinq promesses disposees autour d'une photo qui change avec la selection.
   Reprend l'idee du cercle interactif de l'ancien site, en respectant la
   charte : fond clair, ombres vertes par token, vraies photos, mouvement
   coupe sous « prefers-reduced-motion » et sous « Moins d'animations ».

   Le placement se fait par angle : chaque point porte --angle, et se pose sur
   le cercle par rotate(angle) puis translate(rayon), puis rotate(-angle) pour
   que le texte reste droit. Aucun calcul en JavaScript, donc rien ne saute si
   la page est redimensionnee.
   ========================================================================== */

.cercle-section { overflow: hidden; }          /* le halo deborde, il ne doit pas pousser la page */
.cercle-intro { max-width: 46rem; }
.cercle-intro h2 { margin-top: .75rem; }
.cercle-intro .lead { margin-top: 1rem; }

.cercle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  margin-top: var(--space-6);
}
.cercle > * { min-width: 0; }

/* ----------------------------------------------------------------- l'anneau */
.cercle-scene { display: flex; justify-content: center; }

/* Le rayon est en rem, jamais en pourcentage : dans translate(), un
   pourcentage se rapporte a la taille de la pastille elle-meme et non au
   cercle, et la declaration entiere devenait invalide — les cinq pastilles se
   superposaient au centre. */
.cercle-anneau {
  --taille: 30rem;
  --rayon: 11.4rem;
  position: relative;
  width: min(var(--taille), 100%);
  aspect-ratio: 1 / 1;
}

/* Le trait du cercle, discret. */
.cercle-trace {
  position: absolute; inset: 3.4rem;
  border: 1px dashed color-mix(in srgb, var(--leaf) 35%, transparent);
  border-radius: 50%;
}

/* Sans cette declaration, --tour n'est qu'un texte et la jauge saute d'un
   cran a l'autre. Declaree comme angle, elle s'anime. Les navigateurs qui
   l'ignorent affichent simplement le saut : rien n'est casse. */
@property --tour {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

/* La jauge : un degrade conique qui tourne vers la promesse choisie. C'est
   elle qui donne le sentiment de progression. --tour est pose par le script. */
.cercle-jauge {
  position: absolute; inset: 3.4rem;
  border-radius: 50%;
  background: conic-gradient(from -90deg,
              var(--leaf-deep) 0deg,
              var(--leaf) calc(var(--tour, 0deg) * .75),
              transparent calc(var(--tour, 0deg) + 2deg));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  opacity: .9;
  transition: --tour var(--dur-lent, .45s) var(--ease);
}

/* Les onglets occupent tout le cercle : c'est par rapport a ce conteneur que
   chaque pastille se place, et sur telephone c'est lui qui defile. */
.cercle-pistes { position: absolute; inset: 0; }

.cercle-point {
  position: absolute;
  top: 50%; left: 50%;
  width: 7.2rem;
  margin: -3.6rem 0 0 -3.6rem;
  display: grid;
  justify-items: center;
  gap: .4rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  text-align: center;
  transform: rotate(var(--angle)) translate(var(--rayon)) rotate(calc(-1 * var(--angle)));
}

.cercle-pastille {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid color-mix(in srgb, var(--leaf) 45%, var(--line));
  color: var(--leaf-deep);
  box-shadow: var(--glow-xs);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.cercle-pastille svg { width: 1.6rem; height: 1.6rem; }

.cercle-nom {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
  transition: color var(--dur) var(--ease);
}

.cercle-point:hover .cercle-pastille,
.cercle-point:focus-visible .cercle-pastille {
  transform: scale(1.08);
  box-shadow: var(--glow);
}
.cercle-point:focus-visible { outline: none; }
.cercle-point:focus-visible .cercle-pastille { outline: 3px solid var(--leaf-deep); outline-offset: 3px; }

.cercle-point[aria-selected="true"] .cercle-pastille {
  background: var(--leaf-deep);
  border-color: var(--leaf-deep);
  color: #fff;
  transform: scale(1.14);
  box-shadow: var(--glow-leaf);
}
.cercle-point[aria-selected="true"] .cercle-nom { color: var(--leaf-deep); }

/* ------------------------------------------------------------------ le coeur */
/* Pas d'overflow:hidden ici : le halo vit dans ce noyau et doit deborder.
   Ce sont les photos qui sont arrondies, une par une. */
.cercle-noyau {
  position: absolute;
  inset: 8.2rem;
  border-radius: 50%;
  background: var(--surface-alt);
  box-shadow: var(--glow-lg);
  isolation: isolate;
}
.cercle-noyau picture { position: absolute; inset: 0; }
.cercle-noyau img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .5s var(--ease), transform .8s var(--ease);
}
.cercle-noyau img.est-visible { opacity: 1; transform: scale(1); }

/* Une respiration lente autour de la photo : c'est le seul mouvement continu,
   et il s'arrete des que le visiteur demande moins d'animations. */
.cercle-halo {
  position: absolute; inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--leaf) 26%, transparent) 40%, transparent 68%);
  animation: cercle-respire 7s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes cercle-respire {
  0%, 100% { transform: scale(1); opacity: .55; }
  50%      { transform: scale(1.07); opacity: .85; }
}

/* ---------------------------------------------------------------- les textes */
.cercle-textes { position: relative; }
.cercle-panneau[hidden] { display: none; }
.cercle-panneau {
  animation: cercle-entre .45s var(--ease) both;
}
.cercle-panneau h3 { font-size: var(--text-2xl); margin: 0 0 var(--space-3); }
.cercle-panneau p { margin: 0 0 var(--space-4); max-width: 46ch; }
.cercle-panneau:focus-visible { outline: 3px solid var(--leaf-deep); outline-offset: 6px; border-radius: var(--r-sm); }

@keyframes cercle-entre {
  from { opacity: 0; transform: translateY(.6rem); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ tablette */
@media (max-width: 62em) {
  .cercle { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .cercle-anneau { --taille: 26rem; --rayon: 9.7rem; }
  .cercle-textes { text-align: center; }
  .cercle-panneau p { margin-inline: auto; }
}

/* -------------------------------------------------------------------- mobile
   Sous 48 em, le cercle ne tient plus : cinq libelles autour d'un disque de
   300 px se chevauchent. Les promesses deviennent une rangee de pastilles qui
   defile, et la photo passe au-dessus du texte. Meme contenu, meme ordre,
   meme script. */
@media (max-width: 48em) {
  .cercle-anneau {
    --taille: auto;
    aspect-ratio: auto;
    width: 100%;
    display: block;
  }
  .cercle-pistes {
    position: static;
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .cercle-trace, .cercle-jauge { display: none; }
  .cercle-point {
    position: static;
    margin: 0;
    transform: none;
    width: auto;
    flex: 0 0 auto;
    grid-template-columns: auto auto;
    align-items: center;
    gap: var(--space-2);
    padding: .35rem .75rem .35rem .35rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    scroll-snap-align: start;
    min-height: var(--tap-sm);
  }
  .cercle-point[aria-selected="true"] { border-color: var(--leaf-deep); background: var(--leaf-tint); }
  .cercle-pastille { width: 2.2rem; height: 2.2rem; border-width: 1px; box-shadow: none; }
  .cercle-pastille svg { width: 1.1rem; height: 1.1rem; }
  .cercle-point[aria-selected="true"] .cercle-pastille { transform: none; box-shadow: none; }
  .cercle-nom { font-size: var(--text-sm); white-space: nowrap; }
  .cercle-noyau {
    position: relative;
    inset: auto;
    width: min(18rem, 78%);
    aspect-ratio: 1 / 1;
    margin: var(--space-5) auto 0;
  }
  .cercle-scene { order: -1; flex-direction: column; }
}

/* ------------------------------------------------- moins d'animations */
@media (prefers-reduced-motion: reduce) {
  .cercle-halo { animation: none; }
  .cercle-panneau { animation: none; }
  .cercle-noyau img { transition: opacity .01s linear; transform: none; }
  .cercle-pastille { transition: none; }
}
html[data-motion="reduced"] .cercle-halo,
html[data-motion="reduced"] .cercle-panneau { animation: none; }
html[data-motion="reduced"] .cercle-noyau img { transition: opacity .01s linear; transform: none; }