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

/* ══ Nos interventions — même présentation dans les six sections : un dépliant (.mb, site.css) fermé par défaut ;
   ouvert, la liste sur trois colonnes, sans filet par ligne (ceux du dépliant suffisent) ══ */
.iv ul{display:grid;grid-template-columns:repeat(3,1fr);column-gap:40px;margin-bottom:34px}
.iv li{display:flex;align-items:flex-start;gap:12px;padding:16px 0 17px;font-size:18px;line-height:1.45;color:var(--ink);cursor:default}
.iv li .sym{width:36px;height:36px;flex:none;color:var(--acc);margin:-5px -6px 0 -11px}

/* ══ Cartographier — B : les courants. Deux pôles, des courants qui les entourent et
   s'entrelacent ; au col, entre les deux, les trajectoires basculent d'un côté ou de l'autre :
   celles qui passent par le col prennent l'or. ══ */
.flux{position:relative;width:100%;max-width:540px;aspect-ratio:1;justify-self:end}
.flux canvas,.flux svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.flux canvas{-webkit-mask:radial-gradient(circle at 50% 50%,#000 56%,transparent 71%);mask:radial-gradient(circle at 50% 50%,#000 56%,transparent 71%)}

/* ══ Faire valoir une légitimité : la clé de voûte, en fond discret ══ */
.legit .bg{left:-140px;width:calc(100% + 140px);object-position:50% 12%}

/* ══ Rendre une position audible : les ondes ══ */
.ondes{width:100%;height:auto;display:block;overflow:visible}

/* ══ Créer des coalitions : un nuage de points qui s'organise en chouette ══ */
.nuage{width:100%;max-width:500px;height:auto;display:block;overflow:visible}

/* ══ Faire évoluer les équilibres : le pendule ══ */
.pendule{width:100%;max-width:470px;height:auto;display:block;overflow:visible;justify-self:end}
.pendule .peg{stroke:#FFFFFF;stroke-width:1.2;opacity:.3;transition:opacity .6s,stroke-width .6s}
.pendule .peg.on{opacity:1;stroke-width:2.2}

/* ══ Transmettre : la chouette du savoir se recompose ══ */
.owl-fin{position:absolute;left:50%;top:150px;height:min(70vh,640px);width:auto;aspect-ratio:339.16/329.23;transform:translateX(-50%);color:var(--ciel);opacity:.06;z-index:1;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .pendule *{transition:none}
}

/* ══ Écrans étroits (rien ne s'applique à partir de 1024 px) ══ */
@media (max-width:960px){
  .iv ul{grid-template-columns:repeat(2,1fr)}
  .legit .bg{opacity:.25}
  .flux{max-width:440px}
  .nuage{max-width:400px}
  .pendule{max-width:380px}
}
@media (max-width:767px){
  .iv ul{grid-template-columns:1fr}
  /* les ondes : le dessin garde sa hauteur, on n'en voit que le centre (la bande rogne les côtés) */
  .ondes{flex:none;width:200%}
  .owl-fin{top:120px;height:auto;width:min(110vw,480px)}
}