/* ATHENORA — page Les associés. Le socle est dans site.css. */

#top .bg.plx{top:-4%;height:122%;will-change:transform}   /* les chapiteaux restent visibles en haut ; la parallaxe descend l'image, le jour qu'elle ouvre en haut reste hors écran */
#top .bg{object-position:50% 50%}
[data-bg=nuit]{--souligne:rgba(222,236,247,.5);--cadre:rgba(205,182,102,.45);
  --fond-portrait:radial-gradient(ellipse 110% 75% at 50% 18%,rgba(48,101,175,.95) 0%,rgba(48,101,175,.45) 45%,#05082E 100%)}
[data-bg=ciel]{--souligne:rgba(5,8,46,.5);--cadre:rgba(48,101,175,.45);
  --fond-portrait:radial-gradient(ellipse 120% 70% at 50% 105%,rgba(48,101,175,.34) 0%,rgba(48,101,175,0) 70%),#DEECF7}


/* ══ Le réseau PRGN — nuit ══
   Continents en aplat très léger (relevés sur l'image fournie), 51 agences en points ciel, Bruxelles en or.
   Au défilement, les points s'allument depuis Bruxelles, selon leur distance (--d). */
.reseau .inner{padding:120px 0 96px}
/* la mention du réseau, posée sur la carte (bas gauche, dans le Pacifique sud) */
.prgn .legende{position:absolute;left:1%;bottom:14%;max-width:20%;z-index:1;display:flex;flex-direction:column;gap:8px;text-align:left;pointer-events:none}
.prgn .sigle{font-family:var(--serif);font-weight:800;font-size:clamp(30px,3vw,44px);line-height:1;letter-spacing:.06em;color:var(--blanc)}
.prgn .nom{font-size:12px;font-weight:500;letter-spacing:.3em;line-height:1.7;text-transform:uppercase;color:var(--or)}
.prgn{position:relative;width:min(1120px,84vw);aspect-ratio:1000/441.4;margin:0}
.prgn img{position:absolute;inset:0;width:100%;height:100%;opacity:.075;display:block}
.prgn svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.prgn .ag{fill:var(--ciel);opacity:calc(.72 * clamp(0, (var(--p,1) - var(--d)) * 9, 1));transition:opacity .3s linear,fill .4s}
.prgn .bx{fill:var(--or)}
/* échanges : un point s'allume, un faisceau courbe or part vers un autre point, qui s'allume à l'arrivée.
   Au hasard, plusieurs à la fois, seulement quand la carte est à l'écran et l'onde terminée (JS). */
.prgn .ag.on{fill:var(--blanc);opacity:1}
/* pas de vector-effect sur le faisceau : avec non-scaling-stroke, Chrome applique les tirets en pixels écran, et le
   faisceau (tiret = longueur du tracé en unités SVG) s'arrêtait avant d'arriver dès que la carte est agrandie (bug v2). */
.prgn .arc{fill:none;stroke:var(--or);stroke-width:.9;stroke-linecap:round}
.prgn .rond{fill:none;stroke:var(--blanc);stroke-width:1;vector-effect:non-scaling-stroke}

/* ══ Les associés : une page d'auteur ══
   En tête, le nom et la fonction ; puis la première phrase de la bio en épigraphe, sur toute la largeur (le « moment »
   de la section) ; enfin le portrait d'un côté — il reste à l'écran pendant la lecture — et le texte de l'autre.
   Les deux sections en miroir, à la même échelle. overflow:clip (et non hidden) : hidden casserait le sticky. */
.associe{overflow:clip}
.fiche{display:grid;grid-template-columns:4fr 7fr;column-gap:clamp(48px,7vw,112px);width:100%;text-align:left;
  grid-template-areas:"tete tete" "photo texte"}
.fiche.miroir{grid-template-columns:7fr 4fr;grid-template-areas:"tete tete" "texte photo"}
.fiche .tete{grid-area:tete;display:flex;justify-content:space-between;align-items:flex-end;gap:32px 48px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--line)}
.fiche .tete>div{display:flex;flex-direction:column;align-items:flex-start}
.fiche .tete .role{margin:0 0 10px}
.fiche .texte{grid-area:texte;margin-top:64px}
.portrait{grid-area:photo;align-self:start;position:sticky;top:150px;margin:74px 0 0;width:min(100%,380px,calc((100vh - 200px) * .672))}
.fiche.miroir .portrait{justify-self:end}
.portrait .cadre{aspect-ratio:440/655;overflow:hidden;border:1px solid var(--cadre);background:var(--fond-portrait)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.role{display:flex;align-items:center;flex-wrap:wrap;gap:0 22px;margin-top:22px;font-size:13px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--acc)}
.role .sep{width:1px;height:16px;background:var(--line)}
.role a,.role .attente{font-weight:400;letter-spacing:.08em;text-transform:none;font-size:14px;color:var(--body)}
.role a{border-bottom:1px solid var(--souligne);padding-bottom:2px;transition:color .35s,border-color .35s}
.role .attente{opacity:.55;cursor:default}
.role a:hover,.texte a:hover{color:var(--ink);border-color:var(--acc)}
.texte .txt{max-width:34em}
.texte a{border-bottom:1px solid var(--souligne);transition:border-color .35s,color .35s}
.texte cite{font-style:italic;color:var(--ink)}
.cloture{display:flex;flex-direction:column;align-items:center}

@media (prefers-reduced-motion:reduce){
  .prgn *{transition:none!important}
}
@media print{.portrait{position:static}.prgn .ag{fill:#3065AF}.prgn img{filter:brightness(0)}}
@media (forced-colors:active){.prgn img{opacity:.3}.prgn .ag,.prgn .bx{fill:CanvasText}}

/* ══ Écrans étroits (rien ne s'applique à partir de 1024 px) ══ */
@media (max-width:960px){
  /* la fiche en une colonne : nom, épigraphe, portrait (qui ne suit plus la lecture), texte */
  .fiche,.fiche.miroir{grid-template-columns:1fr;grid-template-areas:"tete" "photo" "texte"}
  .fiche.miroir .portrait{justify-self:start}
  .portrait{position:relative;top:0;width:min(100%,320px);margin-top:48px}
  .fiche .texte{margin-top:48px}
}
@media (max-width:767px){
  .reseau .inner{padding:80px 0 64px}
  /* la carte prend toute la largeur de l'écran, ses points sont grossis, la mention PRGN passe dessous */
  .prgn{width:100vw;margin-bottom:104px}
  .prgn .ag,.prgn .bx{stroke-width:3.5;paint-order:stroke}
  .prgn .ag{stroke:var(--ciel)}
  .prgn .ag.on{stroke:var(--blanc)}
  .prgn .bx{stroke:var(--or)}
  .prgn .legende{left:6vw;right:6vw;top:100%;bottom:auto;max-width:none;margin-top:22px}
  .fiche .tete{padding-bottom:22px}
  .fiche .texte{margin-top:40px}
  .portrait{margin-top:40px;width:min(100%,280px)}
  .role{margin-top:0;font-size:12px;letter-spacing:.26em;gap:6px 18px}
  .role .sep{display:none}
}