/* Accueil + articles techniques — animation « connexions » (boss 17/10, prototype C2 : propositions/C2_connexions_electrons.html).
   Feuille statique versionnée : modifier = bumper ?v= (templates/home.html, templates/blog/article_detail.html) ET réécrire
   static/css/accueil_connexions.css.version (pré-porte). Balisage : templates/partials/_accueil_connexions.html.
   .cx (section ; .cx-c = variante compacte) > .cx-scene (décor, aria-hidden) ; .cx-el = électron (position posée par
   static/js/accueil_connexions.js) > .cx-md = carte (--bc = couleur de marque) ; .cx-lb = intitulé de groupe ; .cx-bub =
   bulle fixe (mode jetons) ; .cx-rg = anneau ; .cx-sp = rayon ; .cx-pt = particule ; .cx-tr.cx-in / .cx-rt = trait aller / retour.
   États posés par le script : .cx-js (scène animée ; sans script, grille fixe), .cx-tok (cartes en jetons + bulles),
   .cx-tall (groupes empilés), .cx-on (carte en cours), .cx-up (pastille de retour, texte = data-up), .cx-go (mini-scène
   rejouée), .cx-hit (centre touché), .cx-idle (hors écran : tout en pause), .cx-still (sans mouvement : image fixe).
   Toutes les classes sont préfixées cx- (.badge, .card existent ailleurs) et les règles de texte passent par .cx (la feuille
   des articles pose « .article-body p ») ; aucune couleur sur un élément nu (garde contraste 16/10) ; textes ≥ 4,5:1. */
.cx{position:relative;padding:48px 16px 40px;background:#fff;border-top:1px solid #e2e8f0;text-align:center}
.cx *,.cx *::before,.cx *::after{box-sizing:border-box}
.cx .cx-tt{max-width:760px;margin:0 auto 14px}
.cx .cx-ey{font-size:.72rem;font-weight:700;color:#0369a1;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.cx .cx-h2{font-size:2rem;font-weight:800;color:#0f172a;margin:0;line-height:1.2}
.cx .cx-cap{max-width:720px;margin:14px auto 0;font-size:14px;line-height:1.5;color:#475569;unicode-bidi:plaintext}
.cx .cx-tm{max-width:720px;margin:6px auto 0;font-size:11px;line-height:1.4;color:#64748b;unicode-bidi:plaintext}
.cx-scene{position:relative;max-width:1040px;margin:0 auto;text-align:start}
/* sans script : les cartes en grille fixe, rien ne se superpose */
.cx-scene:not(.cx-js){display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cx-scene:not(.cx-js)>:not(.cx-el){display:none}
.cx-scene:not(.cx-js) .cx-el{position:static;width:auto;height:auto}
.cx-scene:not(.cx-js) .cx-md{position:relative;transform:none}
.cx-js{aspect-ratio:1000/600;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#eaf2ff 0,rgba(255,255,255,0) 52%)}
.cx-svg,.cx-trs{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
/* anneaux qui dérivent sans fin, rayons discrets, particules qui entrent (ciel) et sortent (bleu) */
.cx-rg{fill:none;stroke:#c9d1e0;stroke-width:1.3;stroke-dasharray:4 8;animation:cx-drift 30s linear infinite}
.cx-rg.cx-r2{animation-direction:reverse;animation-duration:36s}
@keyframes cx-drift{to{stroke-dashoffset:-360}}
.cx-sp{stroke:#dbe1ec;stroke-width:1;stroke-dasharray:2 5}
.cx-pt{fill:#09bffe}
.cx-pt.cx-po{fill:#024dec}
.cx-tr{fill:none;stroke-linecap:round;stroke-dasharray:.6 1;stroke-dashoffset:.6;opacity:0}
.cx-tr.cx-live{opacity:1}
.cx-tr line{stroke-width:3}
.cx-tr line:first-child{stroke-width:11;opacity:.35}
.cx-in line{stroke:#09bffe}
.cx-rt line{stroke:#024dec}
/* centre : disque + halo qui respire — toujours au-dessus des cartes */
.cx-core{position:absolute;left:50%;top:50%;width:128px;height:128px;transform:translate(-50%,-50%);z-index:20}
.cx-core::before,.cx-core::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(9,191,254,.6);animation:cx-breathe 3.6s ease-out infinite}
.cx-core::after{animation-delay:1.8s}
@keyframes cx-breathe{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.cx-disc{position:relative;width:100%;height:100%;border-radius:50%;background:#fff;border:1px solid #dde1eb;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 36px -14px rgba(2,77,236,.4),0 0 0 0 rgba(9,191,254,0);transition:box-shadow .4s}
.cx-core.cx-hit .cx-disc{box-shadow:0 16px 36px -14px rgba(2,77,236,.4),0 0 0 12px rgba(9,191,254,.22);transition-duration:.1s}
.cx-disc svg{width:53%;height:53%}
/* intitulés des deux groupes */
.cx-lb{position:absolute;left:0;top:0;transform:translate(-50%,-50%);z-index:2;text-align:center;white-space:nowrap;unicode-bidi:plaintext}
.cx .cx-lb b{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#334155}
.cx-lb b svg{width:15px;height:15px;fill:none;stroke:#024dec;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cx .cx-lb small{display:block;margin-top:2px;font-size:10.5px;line-height:1.2;color:#475569}
/* électrons : enveloppe positionnée par le script (translate + échelle de profondeur), carte centrée dedans */
.cx-el{position:absolute;left:0;top:0;width:0;height:0;z-index:1;will-change:transform,opacity}
.cx-md{position:absolute;left:0;top:0;width:176px;transform:translate(-50%,-50%);background:#fff;border:1px solid #dde1eb;border-radius:12px;padding:8px 10px 9px;box-shadow:0 8px 20px -12px rgba(15,23,42,.25);transition:border-color .3s,box-shadow .3s,transform .3s;text-align:start}
.cx-r .cx-md{width:170px}
.cx-md.cx-on{border-color:var(--bc,#024dec);box-shadow:0 0 0 3px rgba(2,77,236,.16),0 16px 32px -12px rgba(15,23,42,.35);transform:translate(-50%,-50%) scale(1.03)}
/* pastille « retour d'Almawarid » ; sans data-up (bulle vide) : rien */
.cx-md::after{content:attr(data-up);position:absolute;top:-9px;inset-inline-end:8px;background:#024dec;color:#fff;font-size:10px;font-weight:600;line-height:18px;padding:0 7px;border-radius:9px;box-shadow:0 4px 10px -4px rgba(2,77,236,.6);opacity:0;transform:translateY(4px);white-space:nowrap;unicode-bidi:plaintext}
.cx-md:not([data-up])::after{display:none}
.cx-md.cx-up::after{animation:cx-chip 1.6s ease-out forwards}
@keyframes cx-chip{0%{opacity:0;transform:translateY(4px) scale(.8)}12%{opacity:1;transform:none}80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
/* en-tête : logo de la marque sur fond blanc + nom */
.cx .cx-hd{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;line-height:1.15;color:#1e293b;unicode-bidi:plaintext}
.cx-hd i{flex:none;height:32px;min-width:32px;padding:0 5px;border-radius:9px;background:#fff;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;transition:border-color .3s}
.cx-hd svg{display:block;height:20px;width:auto}
.cx-hd .cx-w svg{height:14px}
.cx-md.cx-on .cx-hd i,.cx-still .cx-hd i{border-color:var(--bc,#024dec)}
/* mini-scènes : l'état de repos est l'état « fait » ; .cx-go rejoue la scène */
.cx .cx-ev{position:relative;margin-top:6px;font-size:11px;line-height:14px;color:#475569}
.cx .cx-ev p{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:0;min-height:14px;line-height:14px}
.cx .cx-ev b{font-weight:600;color:#1e293b}
.cx .cx-ev em{font-style:normal;font-variant-numeric:tabular-nums;font-weight:600;color:#1e293b;white-space:nowrap}
.cx-ev span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-ev b,.cx-ev span,.cx-ev em,.cx-badge span{unicode-bidi:plaintext}
.cx .cx-ev .cx-q{align-items:flex-start;justify-content:flex-start}
.cx-ev .cx-q b{white-space:normal;flex:1;min-width:0}
.cx .cx-ev .cx-an{justify-content:flex-start;margin-top:3px;font-weight:600}
.cx .cx-ev .cx-an span{flex:1;min-width:0;color:#024dec;white-space:normal}
.cx-ev .cx-ic,.cx-ev .cx-am{flex:none;width:14px;height:14px;display:flex;align-items:center;justify-content:center}
.cx-ev .cx-ic svg{width:13px;height:13px;fill:none;stroke:#475569;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cx-ev .cx-am svg{width:13px;height:13px}
.cx-go .cx-an{animation:cx-new 1.25s ease-out forwards}
/* lignes qui repassent par un squelette gris puis se remplissent. Le texte est plein ou absent (steps), jamais à demi
   transparent : la sonde de contraste lit la page pendant que la scène tourne. */
.cx-rx b,.cx-rx span,.cx-rx em{--c:#1e293b;border-radius:3px}
.cx-rx span{--c:#475569}
.cx-go .cx-rx b,.cx-go .cx-rx span,.cx-go .cx-rx em{animation:cx-reskel .7s ease-out forwards,cx-rehide .7s steps(1,end) forwards;animation-delay:calc(var(--d,0)*1ms)}
@keyframes cx-reskel{0%{background:transparent}25%{background:#eceff5}60%{background:#eceff5}100%{background:transparent}}
@keyframes cx-rehide{0%{color:var(--c)}25%{color:transparent}60%{color:var(--c)}100%{color:var(--c)}}
/* valeur qui change : l'ancienne revient un instant, la nouvelle se repose */
.cx .cx-ev .cx-sw{display:grid;justify-items:end}
.cx-sw span{grid-area:1/1;overflow:visible}
.cx-sw .cx-o{opacity:0}
.cx-go .cx-sw .cx-o{animation:cx-old .8s ease-out forwards;animation-delay:calc(var(--d,0)*1ms)}
.cx-go .cx-sw .cx-n{animation:cx-new .8s ease-out forwards;animation-delay:calc(var(--d,0)*1ms)}
@keyframes cx-old{0%{opacity:0}10%{opacity:1}60%{opacity:1}75%{opacity:0}100%{opacity:0}}
@keyframes cx-new{0%{opacity:1;transform:none}10%{opacity:0;transform:translateY(4px)}65%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
/* badge de fin de tour + étincelles */
.cx-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;z-index:21}
.cx-badge span{position:relative;display:inline-block;background:#15803d;color:#fff;font-size:13px;font-weight:700;padding:6px 14px;border-radius:999px;box-shadow:0 10px 24px -10px rgba(21,128,61,.7);opacity:0;transform:scale(.5);transition:opacity .35s,transform .35s}
.cx-badge.cx-on span{animation:cx-pop .5s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes cx-pop{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
.cx-badge i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#024dec;opacity:0}
.cx-badge i:nth-child(2n){background:#09bffe}
.cx-badge i:nth-child(3n){background:#15803d}
.cx-badge.cx-on i{animation:cx-spark .7s ease-out forwards;animation-delay:calc(var(--k,0)*50ms)}
@keyframes cx-spark{0%{opacity:1;transform:rotate(var(--a)) translateX(16px) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateX(70px) scale(.2)}}
/* bulles fixes : seulement en mode jetons */
.cx-bub{display:none;width:300px;max-width:calc(100% - 24px);z-index:15}
/* hors écran : tout en pause ; sans mouvement : image fixe, tout allumé */
.cx-idle .cx-rg,.cx-idle .cx-core::before,.cx-idle .cx-core::after{animation-play-state:paused}
.cx-still *,.cx-still *::before,.cx-still *::after{animation:none!important;transition:none!important}
.cx-still .cx-pt{display:none}
.cx-still .cx-md{border-color:var(--bc,#024dec)}
.cx-still .cx-badge span,.cx-still .cx-md::after{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.cx-scene *,.cx-scene *::before,.cx-scene *::after{animation:none!important;transition:none!important}
.cx-pt{display:none}
}
/* écrans moyens : disque plus petit (les cartes rétrécissent avec la scène, dans le script) */
@media (max-width:999px){.cx-core{width:108px;height:108px}}
/* mode jetons (téléphone, et toute la variante compacte) : cartes = logos en orbite, texte de la carte en cours dans une bulle */
.cx-tok .cx-el .cx-md{width:auto;padding:3px;border-radius:50%}
.cx-tok .cx-el .cx-md.cx-on{transform:translate(-50%,-50%) scale(1.12)}
.cx-tok .cx-el .cx-hd{gap:0;font-size:0}
.cx-tok .cx-el .cx-hd i{height:36px;min-width:36px;border-radius:50%}
.cx-tok .cx-el .cx-ev,.cx-tok .cx-el .cx-md::after{display:none}
.cx-tok .cx-bub{display:block}
.cx-tok .cx-lb{background:#fff;padding:3px 10px;border-radius:10px}
.cx-js.cx-tall{aspect-ratio:auto;height:736px;background:none}
.cx-tall .cx-core{width:96px;height:96px}
/* variante compacte (articles du blog) : ~60 % de la hauteur, sans titre ni bordure */
.cx.cx-c{padding:6px 0 4px;margin:28px 0;background:none;border-top:0}
.cx-c .cx-js{aspect-ratio:auto;height:310px}
.cx-c .cx-js.cx-tall{height:456px}
.cx-c .cx-core{width:80px;height:80px}
.cx-c .cx-tall .cx-core{width:72px;height:72px}
.cx-c .cx-tall .cx-bub[data-g="1"],.cx-c .cx-tall .cx-badge{display:none}
.cx-c .cx-badge span{font-size:12px;padding:5px 12px}
@media (max-width:575px){.cx{padding:36px 16px 32px}.cx .cx-h2{font-size:1.5rem}}