/* ATHENORA — page Cercles. Le socle est dans site.css. */

#top .owl-hero{opacity:.04}   /* la coupole dessine déjà des cercles concentriques : la chouette du bandeau se fait plus discrète */

/* ══ Bandeau : l'oculus — un cercle de lumière vu de l'intérieur du bâtiment ══ */

/* ══ Ce qu'offre un cercle : l'axe de la cadence ══
   Repris de l'axe du « Temps long » (Vision v7), sans bande figée. Les graduations disent la cadence
   du texte : 48 fines (les semaines, quatre par mois, pour tomber avec les mois), 12 hautes (les mois) ; l'axe se prolonge en fondu au-delà de la
   grille (« dans la durée »). Il se trace au défilement ; chaque jalon s'allume quand le tracé l'atteint.
   --ay (hauteur de l'axe) est mesurée en JS sur le centre des jalons. */
.offre .construit{display:flex;flex-direction:column;align-items:center;width:100%}
.offre .amorce{font-size:20px;line-height:1.75;color:var(--body)}
.offre .trace{--lt:clamp(0, (var(--p,1) - .04) / .62, 1);--lt2:clamp(0, (var(--p,1) - .66) / .14, 1);
  position:relative;width:100%;margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(32px,4vw,56px)}
.offre .trace::before,.offre .trace::after{content:"";position:absolute;left:0;right:-12vw;top:var(--ay,96px);height:1px}
.offre .trace::before{background:linear-gradient(90deg,rgba(222,236,247,.22),rgba(222,236,247,.22) calc(100% - 12vw),transparent)}
.offre .trace::after{background:linear-gradient(90deg,var(--or),var(--or) calc(100% - 12vw),transparent);
  clip-path:inset(0 calc(12vw * (1 - var(--lt2)) + (100% - 12vw) * (1 - var(--lt))) 0 0);transition:clip-path .3s linear}
.offre .ticks{position:absolute;left:0;right:0;top:calc(var(--ay,96px) - 7px);height:15px;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,var(--or) 0 1px,transparent 1px calc(100% / 12)) 0 0 / 100% 15px no-repeat,
    repeating-linear-gradient(90deg,var(--or) 0 1px,transparent 1px calc(100% / 48)) 0 4px / 100% 7px no-repeat;
  -webkit-mask:linear-gradient(90deg,#000,#000) no-repeat 0 0 / calc(100% * var(--lt) + 1px) 100%;
  mask:linear-gradient(90deg,#000,#000) no-repeat 0 0 / calc(100% * var(--lt) + 1px) 100%;opacity:.5;border-right:1px solid var(--or)}
.offre .jal{--on:clamp(0, (var(--lt) - var(--x) + .02) * 14, 1);position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.offre .jal .w{display:flex;align-items:flex-end;justify-content:center;min-height:2.6em;font-family:var(--serif);font-weight:800;
  font-size:clamp(20px,1.9vw,27px);line-height:1.3;color:var(--blanc);text-wrap:balance;opacity:calc(.3 + .7 * var(--on));transition:opacity .3s linear}
.offre .jal .c{font-size:18px;line-height:1.6;color:var(--body);max-width:17em;text-wrap:balance;opacity:calc(.45 + .55 * var(--on));transition:opacity .3s linear}
.offre .jal .ptc{--k:0;width:56px;height:56px;margin:-14px 0;flex:none;background:radial-gradient(circle,#05082E 0 9.5px,transparent 10px);color:var(--or);opacity:calc(.4 + .6 * var(--on));transition:opacity .3s linear}
.offre .chute{max-width:24em}

/* ══ Les trois cercles : le tour de table ══
   Même dispositif, même échelle dans les trois sections, et le même nombre de points (32) : le nombre de
   membres viendra de la base de données, il ne doit pas changer le dessin. Trois anneaux : graduations
   fines à l'extérieur (64, toutes égales : pas de repères d'heures, pour ne pas lire un cadran), les 32 places, un cercle intérieur. Un repère fait
   le tour de la table, une place après l'autre, suivi d'une traîne qui s'efface ; à chaque place, le nom
   d'un membre s'affiche sous la chouette du logo, dans un ordre tiré au hasard à chaque chargement. Aucun survol.
   Le dessin se trace au défilement ; le tour commence quand l'anneau est à l'écran et s'arrête hors écran. */
.anneau{position:relative;width:100%;max-width:470px;aspect-ratio:1;justify-self:center}
.anneau>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.anneau .orbe,.anneau .inte{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.anneau .orbe{stroke-opacity:.14;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - clamp(0, var(--p,1) * 1.15, 1));transition:stroke-dashoffset .3s linear}
.anneau .inte{stroke-opacity:.08;opacity:clamp(0, (var(--p,1) - .5) * 3, 1);transition:opacity .3s linear}
.anneau .tk{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;opacity:calc(.22 * clamp(0, (var(--p,1) * 1.15 - var(--d)) * 9, 1));transition:opacity .3s linear}
.anneau .m{fill:var(--acc);opacity:calc(.5 * clamp(0, (var(--p,1) * 1.15 - var(--d)) * 9, 1));transition:opacity .3s linear}
.anneau .tour{transform-box:view-box;transform-origin:250px 250px;transform:rotate(var(--rot,0deg));transition:transform .6s var(--ease);
  opacity:clamp(0, (var(--p,1) - .82) * 6, 1)}
.anneau .tour .tr{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.anneau .tour .pl{fill:var(--acc)}
.anneau .tour .hl{fill:none;stroke:var(--acc);stroke-width:1;vector-effect:non-scaling-stroke}
.anneau .ctr{position:absolute;inset:0;pointer-events:none;opacity:clamp(0, (var(--p,1) - .7) * 4, 1);transition:opacity .3s linear}
/* la chouette du logo, fixe (tracés #ch-a…#ch-e tels quels, sans transformation ni animation) */
.anneau .ctr .chouette{position:absolute;left:50%;top:calc(50% - 22px);width:58px;height:auto;aspect-ratio:339.16/329.23;transform:translate(-50%,-50%);color:var(--acc);fill:currentColor;overflow:visible}
.anneau .nom{position:absolute;left:50%;top:calc(50% + 16px);width:44%;transform:translateX(-50%);font-size:12px;font-weight:500;letter-spacing:.14em;line-height:1.6;text-transform:uppercase;text-align:center;color:var(--ink);
  opacity:0;transition:opacity .35s;text-wrap:balance}
.anneau .nom.on{opacity:1}
/* logo du cercle : en tête de colonne, au-dessus du titre (à la place du filet .mark) */
.logo-c{display:block;width:80px;height:80px}
.cercle .logo-c + .h2{margin-top:22px}
.logo-c[src*=europe]{margin-left:-1px}.logo-c[src*=tech]{margin-left:-7px}.logo-c[src*=sociale]{margin-left:-3px}
.cercle .split{align-items:center;grid-template-columns:1.2fr .8fr}
.cercle .split.g{grid-template-columns:.8fr 1.2fr}
.split .txt{text-wrap:wrap}
.cercle .h2{max-width:none}

/* ══ « Voir les membres » : la liste dans le dépliant commun (.mb, site.css) — noms en colonnes de texte,
   sans filet par ligne (39 noms en grille à filets feraient un mur). ══ */
.mb ul{columns:3;column-gap:56px;padding:2px 0 34px}
.mb li{break-inside:avoid;padding:6px 0;font-size:17px;line-height:1.5;color:var(--body)}

/* ══ Rejoindre un Cercle ══ */
.rejoindre .say{max-width:20em}

@media (prefers-reduced-motion:reduce){
  .anneau *,.offre *{transition:none!important}
}
@media print{.logo-c{filter:brightness(0)}.anneau .nom,.anneau .tour{display:none}.offre .jal .w{color:var(--ink)}}
@media (forced-colors:active){.offre .ticks{display:none}.offre .trace::after{background:CanvasText}}

/* ══ Écrans étroits (rien ne s'applique à partir de 1024 px) ══ */
@media (max-width:960px){
  /* l'axe de la cadence : les trois offres l'une sous l'autre, toutes allumées, sans le tracé */
  .offre .jal{--on:1}
  .offre .jal .w{min-height:0}
  .offre .trace{grid-template-columns:1fr;row-gap:34px}.offre .trace::before,.offre .trace::after,.offre .ticks{display:none}
  /* le tour de table passe sous le texte dans les trois cercles */
  .cercle .split .anneau{max-width:360px}
  .mb ul{columns:2}
}
@media (max-width:767px){
  .offre .jal .c{font-size:17px;max-width:20em}
  .logo-c{width:68px;height:68px}
  .cercle .split .anneau{max-width:300px}
  .mb ul{columns:1;padding-bottom:28px}
  .mb li{font-size:16px}
}