/* Page « Notre groupe » : presentations des societes, suites, synergie
   et solutions composites. Charge uniquement par notre-groupe.html. */
/* --- emplacements de logo, communs aux trois variantes --- */
.grp-lg{display:grid;place-items:center}
.grp-lg img{max-width:100%;max-height:100%;object-fit:contain}
.grp-lg .grp-wm{display:none}
.grp-lg.nolg .grp-wm{display:grid;place-items:center;font-family:var(--font-head);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);text-align:center;line-height:1.2}
.grp-card .grp-lg{height:48px;margin:0 auto 14px}
.grp-card .grp-lg img{height:48px}
.grp-card .grp-lg.nolg .grp-wm{font-size:.88rem;border:1px dashed var(--line);border-radius:12px;
  padding:0 16px;height:48px;background:var(--surface-alt)}
.grp-base-soc{margin:0;font-size:.76rem;color:var(--ink-mute);font-style:italic}
.grp-todo{display:inline-block;margin-top:10px;font-size:.66rem;font-weight:700;letter-spacing:.05em;
  color:var(--ink-mute);border:1px dashed var(--line);border-radius:999px;padding:2px 9px}
.grp-card{display:flex;flex-direction:column}

/* --- le selecteur de variante, uniquement dans la maquette --- */
.grp-choix{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 26px}
.grp-choix button{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  border-radius:999px;padding:9px 16px;font:600 .84rem/1 var(--font);cursor:pointer}
.grp-choix button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.grp-var{display:none}.grp-var.on{display:block}

/* --- le recit du groupe --- */
.grp-recit{display:grid;gap:34px;align-items:start}
@media(min-width:900px){.grp-recit{grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr)}}
.grp-recit-txt p{margin:0 0 16px;color:var(--ink-soft)}
.grp-chapo{font-size:1.16rem;line-height:1.6;color:var(--ink)!important;font-weight:500}
.grp-cite{margin:22px 0;padding:4px 0 4px 20px;border-left:3px solid var(--cta);
  font-family:var(--font-head);font-size:1.06rem;line-height:1.5;color:var(--ink)}
.grp-recit-kpi{background:linear-gradient(150deg,#0e2a45,#17405f);border-radius:20px;padding:28px;
  color:#fff;box-shadow:0 26px 60px -34px rgba(9,24,45,.9)}
.grp-recit-kpi h3{font-size:1rem;margin:0 0 18px;color:#fff}
.grp-kpi-l{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.12)}
.grp-kpi-l b{font-family:var(--font-head);font-size:1.75rem;color:#7fd0ea;line-height:1;min-width:98px;text-align:right}
.grp-kpi-l span{font-size:.88rem;color:#c3d5e4}
.grp-kpi-n{margin:18px 0 0;font-size:.82rem;color:#b9cadc;line-height:1.5}
.grp-kpi-n span{color:#8aa3bb;font-size:.76rem}
.grp-ic{font-size:1.7rem;display:block;margin-bottom:10px}

/* --- variante 1 : la constellation --- */
.grp-const{position:relative;width:100%;max-width:860px;margin:0 auto;aspect-ratio:1/.86;
  background:radial-gradient(circle at 50% 50%,var(--grp-f2) 0%,var(--grp-f1) 42%,var(--grp-f0) 100%);
  border-radius:26px;overflow:hidden}
.grp-const-svg{position:absolute;inset:0;width:100%;height:100%}
.grp-const-svg line{stroke:rgba(140,190,225,.34);stroke-width:.18}
.grp-const-svg .rays line{stroke-dasharray:1.6 2.4;animation:grpray 2.6s linear infinite}
@keyframes grpray{to{stroke-dashoffset:-4}}
@media(prefers-reduced-motion:reduce){.grp-const-svg .rays line{animation:none;stroke-dasharray:none}}
.grp-const-svg .o1,.grp-const-svg .o2{fill:none;stroke:rgba(140,190,225,.18);stroke-width:.14;
  stroke-dasharray:1.1 1.4}
.grp-noeud{position:absolute;transform:translate(-50%,-50%);width:20.5%;aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.055);border:1px solid rgba(160,205,235,.34);backdrop-filter:blur(2px);
  display:grid;place-items:center;padding:7%;text-align:center;transition:.3s}
.grp-noeud:hover{background:rgba(255,255,255,.12);border-color:#7fc7e8;transform:translate(-50%,-50%) scale(1.05)}
.grp-noeud.moi{border-color:var(--cta);box-shadow:0 0 0 4px rgba(255,122,69,.16)}
.grp-noeud.centre{left:50%;top:50%;width:28%;background:rgba(255,255,255,.1);
  border-color:rgba(190,225,245,.5);box-shadow:0 0 60px 10px rgba(57,182,216,.22)}
.grp-noeud .grp-lg{width:100%;height:100%}
.grp-noeud .grp-lg.nolg .grp-wm{color:#eaf3fa;font-size:.76rem;letter-spacing:.04em}
.grp-noeud.centre .grp-lg.nolg .grp-wm{font-size:1.25rem;letter-spacing:.02em}
.grp-centre-base{position:absolute;bottom:14%;font-size:.6rem;color:#9fc3dc;line-height:1.3;
  letter-spacing:.02em}
@media(max-width:700px){.grp-noeud .grp-lg.nolg .grp-wm{font-size:.56rem}
  .grp-noeud.centre .grp-lg.nolg .grp-wm{font-size:.9rem}.grp-centre-base{display:none}}

/* --- variantes rondes : anneau, nebuleuse, deux orbites --- */
.grp-anneau,.grp-neb{position:relative;width:100%;max-width:880px;margin:0 auto;aspect-ratio:1/.84;
  border-radius:26px;overflow:hidden}
.grp-anneau{background:radial-gradient(circle at 50% 50%,var(--grp-f2) 0%,var(--grp-f1) 46%,var(--grp-f0) 100%)}
.grp-halo{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:conic-gradient(from 0deg,rgba(57,182,216,0),rgba(57,182,216,.42),
  rgba(255,122,69,.3),rgba(57,182,216,0));filter:blur(26px);animation:grprot 18s linear infinite}
@keyframes grprot{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.grp-halo{animation:none}}
.grp-anneau-svg{position:absolute;inset:0;width:100%;height:100%}
.grp-anneau-svg ellipse{fill:none;stroke:rgba(165,210,240,.3);stroke-width:.16;stroke-dasharray:1 1.6}
.grp-pt{position:absolute;transform:translate(-50%,-50%);width:19%;aspect-ratio:1;border-radius:50%;
  background:rgba(10,30,50,.72);border:1px solid rgba(170,215,245,.4);display:grid;place-items:center;
  padding:6%;text-align:center;transition:.3s;backdrop-filter:blur(3px)}
.grp-pt:hover{border-color:#7fd0ea;background:rgba(23,64,95,.9);transform:translate(-50%,-50%) scale(1.06)}
.grp-pt.moi{border-color:var(--cta);box-shadow:0 0 0 4px rgba(255,122,69,.18)}
.grp-pt.centre{left:50%;top:50%;width:27%;background:rgba(12,38,62,.92);border-color:rgba(190,230,250,.55);
  box-shadow:0 0 70px 12px rgba(57,182,216,.26)}
.grp-pt .grp-lg{width:100%;height:100%}
.grp-pt .grp-lg.nolg .grp-wm{color:#eaf3fa;font-size:.72rem;letter-spacing:.05em}
.grp-pt.centre .grp-lg.nolg .grp-wm{font-size:1.2rem}
.grp-sys .grp-o1{width:14.5%}
.grp-sys .grp-o2{width:15.5%}
.grp-sys .grp-pt.centre{width:19%}
.grp-sys .grp-pt .grp-lg.nolg .grp-wm{font-size:.58rem}
.grp-sys .grp-pt.centre .grp-lg.nolg .grp-wm{font-size:1.05rem}

.grp-neb{background:#0a1d31}
.grp-neb-fond{position:absolute;inset:0;
  background:radial-gradient(42% 46% at 26% 28%,rgba(47,111,176,.5),transparent 70%),
             radial-gradient(38% 44% at 76% 34%,rgba(57,182,216,.34),transparent 72%),
             radial-gradient(46% 48% at 54% 82%,rgba(255,122,69,.22),transparent 74%)}
.grp-neb-svg{position:absolute;inset:0;width:100%;height:100%}
.grp-neb-svg path{fill:none;stroke:rgba(190,225,250,.3);stroke-width:.17;stroke-dasharray:1.4 2}
.grp-bulle{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(220,240,255,.28);
  border-radius:16px;padding:12px 14px;min-width:116px;backdrop-filter:blur(6px);transition:.3s}
.grp-bulle:hover{background:rgba(255,255,255,.18);transform:translate(-50%,-50%) translateY(-3px)}
.grp-bulle.moi{border-color:var(--cta)}
.grp-bulle b{font-size:.76rem;color:#fff;letter-spacing:.02em;text-align:center;line-height:1.2}
.grp-bulle .grp-lg{height:26px}
.grp-bulle .grp-lg img{height:26px}
.grp-bulle .grp-lg.nolg .grp-wm{display:none}
.grp-bulle.centre{left:50%;top:50%;min-width:168px;padding:20px 24px;background:rgba(8,24,40,.82);
  border-color:rgba(235,248,255,.5);box-shadow:0 0 80px 14px rgba(57,182,216,.3)}
.grp-bulle.centre b{font-size:1.25rem;font-family:var(--font-head)}
.grp-bulle.centre span{font-size:.72rem;color:#9fc3dc}
.grp-bulle.centre .grp-lg{height:40px}
.grp-bulle.centre .grp-lg img{height:40px}
@media(max-width:700px){.grp-pt .grp-lg.nolg .grp-wm{font-size:.54rem}
  .grp-bulle{min-width:84px;padding:8px}.grp-bulle b{font-size:.6rem}}

/* --- l'orbite animee --- */
.grp-tourne{position:relative;width:100%;max-width:760px;margin:0 auto;aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,var(--grp-f2) 0%,var(--grp-f1) 46%,var(--grp-f0) 100%);
  border-radius:26px;overflow:hidden}
.grp-tourne .grp-anneau-svg circle{fill:none;stroke:rgba(165,210,240,.26);stroke-width:.16;
  stroke-dasharray:1 1.6}
.grp-bras{position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);
  margin-left:calc(var(--d) / -2);margin-top:calc(var(--d) / -2);
  transform:rotate(var(--a));animation:grptourne var(--t) linear infinite}
.grp-bras>.grp-pt{position:absolute;left:50%;top:0;width:var(--w);
  transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));
  animation:grpdroit var(--t) linear infinite}
@keyframes grptourne{from{transform:rotate(var(--a))}
  to{transform:rotate(calc(var(--a) + 360deg))}}
@keyframes grpdroit{from{transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)))}
  to{transform:translate(-50%,-50%) rotate(calc(-1 * var(--a) - 360deg))}}
.grp-tourne:hover .grp-bras,.grp-tourne:hover .grp-bras>.grp-pt,
.grp-tourne:focus-within .grp-bras,.grp-tourne:focus-within .grp-bras>.grp-pt{animation-play-state:paused}
.grp-tourne .grp-pt.centre{width:25%;z-index:2}
/* un trait leger relie chaque societe au centre : il suit le bras, donc il
   tourne avec la pastille, et disparait sous le logo central. */
.grp-bras:before{content:'';position:absolute;left:50%;top:0;width:1px;height:50%;
  transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(180deg,rgba(47,111,176,.34),rgba(47,111,176,.04))}
.grp-fond-nuit .grp-bras:before{
  background:linear-gradient(180deg,rgba(165,210,240,.4),rgba(165,210,240,.05))}
html[data-theme="dark"] .grp-bras:before{
  background:linear-gradient(180deg,rgba(165,210,240,.36),rgba(165,210,240,.04))}
.grp-tourne .grp-pt .grp-lg.nolg .grp-wm{font-size:.62rem}
.grp-tourne .grp-pt.centre .grp-lg.nolg .grp-wm{font-size:1.22rem}
@media(prefers-reduced-motion:reduce){.grp-bras,.grp-bras>.grp-pt{animation:none}}
@media(max-width:620px){.grp-tourne .grp-pt .grp-lg.nolg .grp-wm{font-size:.5rem}
  .grp-tourne .grp-centre-base{display:none}}

/* --- variante 2 : le hub et ses branches --- */
.grp-hub-tete{max-width:330px;margin:0 auto;background:var(--bg);border-radius:18px;padding:22px;
  text-align:center;color:#fff}
.grp-hub-tete .grp-lg{height:52px;margin-bottom:8px}
.grp-hub-tete .grp-lg img{height:52px}
.grp-hub-tete .grp-lg.nolg .grp-wm{color:#fff;font-size:1.3rem;letter-spacing:.02em}
.grp-hub-tete span{font-size:.82rem;color:#9db4cc}
.grp-hub-tige{width:2px;height:34px;background:var(--line);margin:0 auto}
.grp-tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
  border-top:2px solid var(--line);padding-top:26px;position:relative}
.grp-tuile{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:16px;
  text-align:center;position:relative;transition:.25s}
.grp-tuile:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.grp-tuile.moi{border-color:var(--cta)}
.grp-tuile .grp-lg{height:40px;margin-bottom:10px}
.grp-tuile .grp-lg img{height:40px}
.grp-lg-t.nolg .grp-wm,.grp-lg-m.nolg .grp-wm{font-size:0;border:1px dashed var(--line);
  border-radius:8px;width:86px;height:34px;background:var(--surface-alt)}
.grp-lg-t.nolg .grp-wm:after,.grp-lg-m.nolg .grp-wm:after{content:"LOGO";font-size:10px;
  letter-spacing:.14em;color:var(--ink-mute)}
.grp-tuile b{display:block;font-size:.95rem}
.grp-tuile small{display:block;font-size:.74rem;color:var(--ink-mute);font-style:italic;margin-top:2px}

/* --- variante 4 : le socle et les briques --- */
.grp-socle{max-width:960px;margin:0 auto}
.grp-briques{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  margin-bottom:16px}
.grp-brique{border:1px solid var(--line);border-radius:14px 14px 10px 10px;background:var(--surface);
  padding:16px 12px;text-align:center;position:relative;transition:.25s}
.grp-brique:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-sm)}
.grp-brique.moi{border-color:var(--cta)}
.grp-brique .grp-lg{height:34px;margin-bottom:8px}
.grp-brique .grp-lg img{height:34px}
.grp-brique b{display:block;font-size:.86rem}
.grp-socle-bar{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;
  text-align:left;background:linear-gradient(120deg,#0e2a45,#17405f);border-radius:18px;
  padding:24px 28px;color:#fff;box-shadow:0 24px 50px -30px rgba(9,24,45,.9)}
.grp-socle-bar .grp-lg{height:46px;min-width:140px}
.grp-socle-bar .grp-lg img{height:46px}
.grp-socle-bar .grp-lg.nolg .grp-wm{color:#fff;font-size:1.25rem;letter-spacing:.02em}
.grp-socle-bar span{max-width:560px;font-size:.9rem;color:#b9cadc}
.grp-socle-bar span b{display:block;color:#fff;font-size:1.02rem;font-family:var(--font-head);
  margin-bottom:2px}

/* --- variante 5 : le mur de logos --- */
.grp-mur-tete{text-align:center;margin-bottom:26px}
.grp-mur-tete .grp-lg{height:58px;margin-bottom:8px}
.grp-mur-tete .grp-lg img{height:58px}
.grp-mur-tete .grp-lg.nolg .grp-wm{font-size:1.6rem;color:var(--ink);letter-spacing:.02em;font-style:normal}
.grp-mur-tete span{font-size:.86rem;color:var(--ink-mute);font-style:italic}
.grp-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.grp-case{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:24px 14px;display:grid;place-items:center;gap:10px;transition:.25s}
.grp-case:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.grp-case.moi{background:var(--surface-tint);border-color:var(--cta)}
.grp-case .grp-lg{height:40px}
.grp-case .grp-lg img{height:40px;filter:grayscale(1);opacity:.7;transition:.25s}
.grp-case:hover .grp-lg img{filter:none;opacity:1}
.grp-case small{font-size:.76rem;color:var(--ink-mute)}

/* --- la synergie : la chaine de valeur --- */
.grp-vsyn{display:none}.grp-vsyn.on{display:block}
.grp-flux{border:1px solid var(--line);border-radius:22px;background:var(--surface);padding:26px;
  box-shadow:var(--shadow-sm)}
.grp-flux-tete{text-align:center;margin-bottom:22px}
.grp-flux-tete span{display:block;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:700}
.grp-flux-tete b{font-family:var(--font-head);font-size:1.12rem}
.grp-etapes{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:10px;align-items:stretch}
@media(max-width:900px){.grp-etapes{grid-template-columns:1fr}.grp-fleche{transform:rotate(90deg)}}
.grp-etape{position:relative;border:1px solid var(--line);border-top:3px solid var(--c);
  border-radius:14px;background:var(--surface-alt);padding:18px 16px 16px;transition:.25s}
.grp-etape:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.grp-etape-n{position:absolute;top:-13px;left:16px;width:26px;height:26px;border-radius:50%;
  background:var(--c);color:#fff;display:grid;place-items:center;font:800 .78rem/1 var(--font)}
.grp-etape-s{display:inline-block;margin:8px 0 6px;font:700 .68rem/1 var(--font);letter-spacing:.04em;
  color:#fff;background:var(--c);border-radius:6px;padding:5px 8px}
.grp-etape b{display:block;font-size:1rem;margin-bottom:4px}
.grp-etape p{margin:0 0 10px;font-size:.86rem;color:var(--ink-soft)}
.grp-etape-soc{display:block;font-size:.74rem;color:var(--c);font-weight:700}
.grp-fleche{align-self:center;color:var(--ink-mute);font-size:1.3rem}
.grp-rail{margin-top:22px;text-align:center}
.grp-rail-l{display:block;height:6px;border-radius:999px;
  background:linear-gradient(90deg,#6b7fc7,#3ba3d4,#f58220,#8cc4a8);
  background-size:200% 100%;animation:grpflux 7s linear infinite}
@keyframes grpflux{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.grp-rail-l{animation:none}}
.grp-rail-t{display:inline-block;margin-top:10px;font-size:.84rem;color:var(--ink-mute)}

/* --- la synergie : la matrice --- */
.grp-matrice{border:1px solid var(--line);border-radius:20px;background:var(--surface);
  padding:8px 8px 0;box-shadow:var(--shadow-sm);overflow-x:auto}
.grp-matrice table{width:100%;border-collapse:collapse;min-width:640px}
.grp-matrice th,.grp-matrice td{padding:14px 12px;text-align:center;border-bottom:1px solid var(--line-2)}
.grp-matrice thead th{font-size:.8rem;color:var(--ink-mute);font-weight:600}
.grp-matrice thead th:first-child{text-align:left;font-size:.72rem;letter-spacing:.07em;
  text-transform:uppercase}
.grp-matrice tbody th{text-align:left;font-weight:400}
.grp-matrice tbody th b{display:block;font-size:.95rem;color:var(--ink)}
.grp-matrice tbody th small{font-size:.8rem;color:var(--ink-soft)}
.grp-matrice tbody tr:last-child th,.grp-matrice tbody tr:last-child td{border-bottom:0}
.grp-matrice tbody tr:hover{background:var(--surface-alt)}
.grp-matrice td.oui span{display:inline-block;width:17px;height:17px;border-radius:50%;
  box-shadow:0 0 0 4px color-mix(in srgb,currentColor 0%,transparent)}
.grp-matrice td:not(.oui):after{content:"·";color:var(--ink-mute);opacity:.45}
.grp-matrice-n{margin:0;padding:16px 12px 18px;font-size:.84rem;color:var(--ink-mute)}

/* --- les quatre suites --- */
.grp-suites{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px}
.grp-suite{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.grp-suite:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}
.grp-suite-top{background:var(--c);padding:22px;display:grid;place-items:center}
.grp-suite-top .grp-lg{height:78px;min-width:155px;background:#fff;border-radius:12px;padding:10px 20px}
.grp-suite-top .grp-lg img{height:56px}
.grp-suite-top .grp-lg.nolg .grp-wm{font-size:2rem;letter-spacing:-.02em;text-transform:none;
  color:var(--c);line-height:1}
.grp-suite-top .grp-lg.nolg .grp-wm small{display:block;font-size:.66rem;letter-spacing:.24em;
  color:#5b7690;font-weight:600;margin-top:2px}
.grp-suite-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:7px}
.grp-suite-body h3{margin:0;font-size:1.02rem}
.grp-base{font-size:.8rem;color:var(--c);font-weight:700}
.grp-suite-body p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.grp-nous{align-self:flex-start;margin-top:4px;font-size:.72rem;font-weight:700;color:var(--accent);
  background:var(--surface-tint);border-radius:999px;padding:4px 11px}
.grp-ia{margin-top:18px;text-align:center;background:var(--surface-tint);border-radius:14px;
  padding:14px 18px;font-size:.9rem;color:var(--ink)}

/* --- les solutions composites --- */
/* Un bandeau de pastilles au-dessus d'une seule carte : pas d'onglets colles,
   donc pas de raccord a truquer entre deux fonds, et ca tient en mode sombre. */
.grp-seg{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;background:var(--surface-alt);
  border:1px solid var(--line);border-radius:999px;padding:5px;margin:0 auto 22px;width:fit-content;
  max-width:100%}
.grp-seg-b{border:0;background:none;color:var(--ink-soft);border-radius:999px;padding:11px 18px;
  font:600 .88rem/1 var(--font);cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background .2s,color .2s;white-space:nowrap}
.grp-seg-b i{font-style:normal;font-weight:800;color:var(--ink-mute);font-size:.8rem}
.grp-seg-b:hover{color:var(--ink);background:var(--surface)}
.grp-seg-b[aria-selected="true"]{background:var(--accent);color:#fff;box-shadow:0 6px 16px -8px rgba(47,111,176,.9)}
.grp-seg-b[aria-selected="true"] i{color:rgba(255,255,255,.72)}
.grp-seg-b:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}
@media(max-width:640px){.grp-seg{border-radius:18px}.grp-seg-b{flex:1 1 44%;justify-content:center}}

.grp-comp-panneau{display:none;position:relative;border:1px solid var(--line);border-radius:20px;
  background:var(--surface);overflow:hidden;box-shadow:var(--shadow-sm)}
.grp-comp-panneau.on{display:grid}
@media(min-width:880px){.grp-comp-panneau.on{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.grp-comp-bande{position:absolute;inset:0 0 auto;height:5px}
.grp-comp-g{padding:30px 32px 32px}
.grp-comp-num{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);background:var(--surface-tint);border-radius:999px;
  padding:5px 12px;margin-bottom:12px}
.grp-comp-g h3{font-size:1.5rem;margin:0 0 4px;letter-spacing:-.02em}
.grp-comp-acc{display:block;font-size:1rem;color:var(--ink-soft);font-weight:600;margin-bottom:16px}
.grp-comp-g>p{margin:0;color:var(--ink-soft);max-width:60ch}
.grp-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.grp-chip{font:700 .72rem/1 var(--font);letter-spacing:.03em;color:#fff;background:var(--c);
  border-radius:8px;padding:7px 11px}
.grp-plus{color:var(--ink-mute);font-weight:700}
.grp-comp-d{background:var(--surface-alt);border-left:1px solid var(--line);padding:30px 32px 32px;
  display:flex;flex-direction:column;gap:18px;align-items:flex-start}
@media(max-width:879px){.grp-comp-d{border-left:0;border-top:1px solid var(--line)}}
.grp-bloc{position:relative;padding-left:14px}
.grp-bloc:before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;
  background:var(--accent)}
.grp-bloc:last-of-type:before{background:var(--cta)}
.grp-comp-t{display:block;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:700;margin-bottom:3px}
.grp-bloc p{margin:0;color:var(--ink);font-size:.92rem}
.grp-comp-d .btn{margin-top:auto}

/* ===========================================================================
   VERSION CLAIRE DES VISUELS RONDS  (ajout du 20/10/2026)
   Le schema etait pense sur fond sombre ; sur une page claire il faisait une
   tache noire. Les quatre presentations rondes passent donc en clair, avec
   les couleurs de la charte, et retrouvent leur version sombre quand le
   visiteur met le site en mode nuit.
   =========================================================================== */
.grp-tourne,.grp-const,.grp-anneau,.grp-neb{
  background:radial-gradient(circle at 50% 42%,#f8fbff 0%,#e9f1f9 58%,#dde9f5 100%);
  border:1px solid var(--line)}
.grp-neb{background:radial-gradient(42% 46% at 26% 28%,rgba(47,111,176,.10),transparent 70%),
  radial-gradient(38% 44% at 76% 34%,rgba(57,182,216,.10),transparent 72%),
  radial-gradient(46% 48% at 54% 82%,rgba(255,122,69,.08),transparent 74%),var(--surface-alt)}
.grp-neb-fond{display:none}

/* la lueur qui tourne, en bleu de la charte */
.grp-halo{background:conic-gradient(from 0deg,rgba(47,111,176,0),rgba(57,182,216,.3),
  rgba(255,122,69,.2),rgba(47,111,176,0));filter:blur(34px)}

/* les anneaux pointilles */
.grp-anneau-svg circle,.grp-anneau-svg ellipse{stroke:rgba(47,111,176,.42)}
.grp-const-svg line{stroke:rgba(47,111,176,.34)}
.grp-const-svg .o1,.grp-const-svg .o2{stroke:rgba(47,111,176,.3)}
.grp-neb-svg path{stroke:rgba(47,111,176,.3)}

/* les pastilles des societes */
.grp-pt,.grp-noeud{background:#fff;border:1px solid rgba(47,111,176,.18);
  box-shadow:0 12px 28px -18px rgba(18,34,56,.5);backdrop-filter:none}
.grp-pt:hover,.grp-noeud:hover{background:#fff;border-color:var(--accent);
  box-shadow:0 16px 34px -16px rgba(47,111,176,.45)}
.grp-pt .grp-lg.nolg .grp-wm,.grp-noeud .grp-lg.nolg .grp-wm{color:var(--ink)}
.grp-pt.centre,.grp-noeud.centre{background:#fff;border-color:rgba(47,111,176,.4);
  box-shadow:0 0 60px 8px rgba(47,111,176,.14),0 22px 50px -24px rgba(18,34,56,.5)}
.grp-pt.moi,.grp-noeud.moi{border-color:var(--cta);box-shadow:0 0 0 4px rgba(255,122,69,.14)}
.grp-centre-base{color:var(--ink-soft)}
.grp-bulle{background:#fff;border:1px solid var(--line);
  box-shadow:0 12px 28px -18px rgba(18,34,56,.45);backdrop-filter:none}
.grp-bulle:hover{background:#fff;border-color:var(--accent)}
.grp-bulle b{color:var(--ink)}
.grp-bulle.centre{background:#fff;border-color:rgba(47,111,176,.4);
  box-shadow:0 0 60px 8px rgba(47,111,176,.14),0 22px 50px -24px rgba(18,34,56,.5)}
.grp-bulle.centre span{color:var(--ink-soft)}

/* --- et la nuit, on retrouve le fond sombre d'origine --- */
html[data-theme="dark"] .grp-tourne,html[data-theme="dark"] .grp-const,
html[data-theme="dark"] .grp-anneau{
  background:radial-gradient(circle at 50% 50%,var(--grp-f2) 0%,var(--grp-f1) 46%,var(--grp-f0) 100%);
  border-color:rgba(165,210,240,.14)}
html[data-theme="dark"] .grp-neb{background:#0a1d31;border-color:rgba(165,210,240,.14)}
html[data-theme="dark"] .grp-neb-fond{display:block}
html[data-theme="dark"] .grp-halo{background:conic-gradient(from 0deg,rgba(57,182,216,0),
  rgba(57,182,216,.42),rgba(255,122,69,.3),rgba(57,182,216,0));filter:blur(26px)}
html[data-theme="dark"] .grp-anneau-svg circle,html[data-theme="dark"] .grp-anneau-svg ellipse{
  stroke:rgba(165,210,240,.26)}
html[data-theme="dark"] .grp-const-svg line{stroke:rgba(140,190,225,.34)}
html[data-theme="dark"] .grp-const-svg .o1,html[data-theme="dark"] .grp-const-svg .o2{
  stroke:rgba(140,190,225,.18)}
html[data-theme="dark"] .grp-neb-svg path{stroke:rgba(190,225,250,.3)}
html[data-theme="dark"] .grp-pt,html[data-theme="dark"] .grp-noeud{
  background:rgba(10,30,50,.72);border-color:rgba(170,215,245,.4);box-shadow:none}
html[data-theme="dark"] .grp-pt:hover,html[data-theme="dark"] .grp-noeud:hover{
  background:rgba(23,64,95,.9);border-color:#7fc7e8;box-shadow:none}
html[data-theme="dark"] .grp-pt .grp-lg.nolg .grp-wm,
html[data-theme="dark"] .grp-noeud .grp-lg.nolg .grp-wm{color:#eaf3fa}
html[data-theme="dark"] .grp-pt.centre,html[data-theme="dark"] .grp-noeud.centre{
  background:rgba(12,38,62,.92);border-color:rgba(190,230,250,.55);
  box-shadow:0 0 70px 12px rgba(57,182,216,.26)}
html[data-theme="dark"] .grp-centre-base{color:#9fc3dc}
html[data-theme="dark"] .grp-bulle{background:rgba(255,255,255,.1);
  border-color:rgba(220,240,255,.28);box-shadow:none}
html[data-theme="dark"] .grp-bulle b{color:#fff}
html[data-theme="dark"] .grp-bulle.centre{background:rgba(8,24,40,.82);
  border-color:rgba(235,248,255,.5);box-shadow:0 0 80px 14px rgba(57,182,216,.3)}
html[data-theme="dark"] .grp-bulle.centre span{color:#9fc3dc}
/* en mode nuit, les logos fournis sont dessines pour un fond clair : on leur
   rend une pastille blanche, sinon ils disparaissent dans le cercle */
html[data-theme="dark"] .grp-pt .grp-lg img,html[data-theme="dark"] .grp-noeud .grp-lg img,
html[data-theme="dark"] .grp-bulle .grp-lg img{background:#fff;border-radius:9px;padding:5px 7px}

/* ===========================================================================
   SANS ENCADRE : LE SCHEMA RESPIRE DANS LA PAGE  (20/10/2026, 2e passe)
   Le cadre arrondi enfermait le dessin dans une vignette. On le retire :
   il ne reste que la lueur, qui s'etale largement derriere les pastilles et
   deborde du bloc pour occuper toute la largeur de la bande.
   =========================================================================== */
#societes{overflow:hidden}          /* la lueur deborde, mais jamais l'ecran */
.grp-tourne,.grp-const,.grp-anneau,.grp-neb{
  background:none;border:0;border-radius:0;overflow:visible;max-width:920px}
.grp-neb-fond{display:none}

/* la lueur : trois foyers de couleur, bien plus larges que le bloc */
.grp-halo{position:absolute;left:50%;top:50%;width:168%;height:152%;
  transform:translate(-50%,-50%);border-radius:50%;filter:blur(72px);
  background:radial-gradient(42% 52% at 50% 50%,rgba(57,182,216,.26),transparent 70%),
             radial-gradient(34% 42% at 24% 30%,rgba(47,111,176,.22),transparent 72%),
             radial-gradient(32% 40% at 76% 72%,rgba(255,122,69,.18),transparent 74%);
  animation:grprot 26s linear infinite}

/* les anneaux et les pastilles passent devant la lueur */
.grp-anneau-svg,.grp-const-svg,.grp-neb-svg{z-index:1}
.grp-bras,.grp-pt,.grp-noeud,.grp-bulle{z-index:2}

html[data-theme="dark"] .grp-tourne,html[data-theme="dark"] .grp-const,
html[data-theme="dark"] .grp-anneau,html[data-theme="dark"] .grp-neb{
  background:none;border:0}
html[data-theme="dark"] .grp-halo{
  background:radial-gradient(42% 52% at 50% 50%,rgba(57,182,216,.42),transparent 70%),
             radial-gradient(34% 42% at 24% 30%,rgba(47,111,176,.38),transparent 72%),
             radial-gradient(32% 40% at 76% 72%,rgba(255,122,69,.26),transparent 74%);
  filter:blur(80px)}

/* ===========================================================================
   HALO PLUS DIFFUS, ANIMATION PLUS LARGE  (20/10/2026, 3e passe)
   =========================================================================== */
/* 1. Le schema occupe nettement plus de place. Le rapport 1/.92 evite que la
      bande ne devienne trop haute, sans que les pastilles ne debordent. */
.grp-tourne{max-width:1120px;aspect-ratio:1/.92}
.grp-const,.grp-anneau,.grp-neb{max-width:1080px}

/* 2. Deux couches de lueur au lieu d'une : une large et tres douce qui tient
      toute la bande, une plus serree qui tourne lentement. */
.grp-tourne:before,.grp-const:before,.grp-anneau:before,.grp-neb:before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:230%;height:150%;border-radius:50%;pointer-events:none;filter:blur(110px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(57,182,216,.16),transparent 72%),
             radial-gradient(40% 46% at 16% 40%,rgba(47,111,176,.13),transparent 74%),
             radial-gradient(40% 46% at 84% 62%,rgba(255,122,69,.10),transparent 74%)}
.grp-halo{width:190%;height:165%;filter:blur(105px);
  background:radial-gradient(44% 52% at 50% 50%,rgba(57,182,216,.17),transparent 72%),
             radial-gradient(36% 44% at 26% 30%,rgba(47,111,176,.15),transparent 74%),
             radial-gradient(34% 42% at 74% 70%,rgba(255,122,69,.12),transparent 76%);
  animation:grprot 34s linear infinite}

/* 3. Le coeur du schema en bleu de marque : le logo SKU One est dessine en
      blanc, il disparaissait sur une pastille blanche. */
.grp-pt.centre,.grp-noeud.centre,.grp-bulle.centre{
  background:linear-gradient(150deg,var(--grp-f1),var(--grp-f2));border-color:rgba(47,111,176,.45);
  box-shadow:0 0 70px 10px rgba(47,111,176,.18),0 26px 56px -26px rgba(9,24,45,.55)}
.grp-pt.centre .grp-lg.nolg .grp-wm,.grp-noeud.centre .grp-lg.nolg .grp-wm,
.grp-bulle.centre b{color:#fff}
.grp-centre-base,.grp-bulle.centre span{color:#9fc3dc}
html[data-theme="dark"] .grp-pt.centre .grp-lg img,
html[data-theme="dark"] .grp-noeud.centre .grp-lg img,
html[data-theme="dark"] .grp-bulle.centre .grp-lg img{background:none;padding:0}

html[data-theme="dark"] .grp-tourne:before,html[data-theme="dark"] .grp-const:before,
html[data-theme="dark"] .grp-anneau:before,html[data-theme="dark"] .grp-neb:before{
  background:radial-gradient(50% 50% at 50% 50%,rgba(57,182,216,.26),transparent 72%),
             radial-gradient(40% 46% at 16% 40%,rgba(47,111,176,.22),transparent 74%),
             radial-gradient(40% 46% at 84% 62%,rgba(255,122,69,.16),transparent 74%)}
html[data-theme="dark"] .grp-halo{
  background:radial-gradient(44% 52% at 50% 50%,rgba(57,182,216,.3),transparent 72%),
             radial-gradient(36% 44% at 26% 30%,rgba(47,111,176,.26),transparent 74%),
             radial-gradient(34% 42% at 74% 70%,rgba(255,122,69,.2),transparent 76%);
  filter:blur(110px)}

/* ===========================================================================
   LOGOS LARGES DANS LES PASTILLES RONDES  (20/10/2026, 4e passe)
   Les logos fournis sont des rectangles allonges. Dans un cercle, il faut les
   inscrire dans le carre interieur, sinon ils touchent le bord ou debordent.
   On leur reserve 72 % de la largeur et une hauteur courte : un logo large
   rentre a l'aise, un logo carre reste centre.
   =========================================================================== */
.grp-pt .grp-lg,.grp-noeud .grp-lg{width:72%;height:72%;padding:0}
.grp-pt .grp-lg img,.grp-noeud .grp-lg img{max-width:100%;max-height:56%;
  width:auto;height:auto;object-fit:contain}
.grp-pt.centre .grp-lg,.grp-noeud.centre .grp-lg{width:74%;height:46%;
  align-self:center;margin-bottom:10%}
.grp-pt.centre .grp-lg img,.grp-noeud.centre .grp-lg img{max-height:100%}
.grp-bulle .grp-lg{width:100%;height:28px}
.grp-bulle .grp-lg img{max-width:100%;max-height:28px;object-fit:contain}
.grp-bulle.centre .grp-lg{height:42px}
.grp-bulle.centre .grp-lg img{max-height:42px}
/* le mur, les briques et les tuiles recoivent aussi des logos larges */
.grp-case .grp-lg img,.grp-brique .grp-lg img,.grp-tuile .grp-lg img{
  max-width:100%;width:auto;object-fit:contain}
/* la carte d'une suite : le logo large occupe la pastille blanche sans la remplir */
.grp-suite-top .grp-lg{min-width:170px;padding:12px 18px}
.grp-suite-top .grp-lg img{max-width:100%;max-height:54px;width:auto;object-fit:contain}

/* ===========================================================================
   LOGOS PLUS GRANDS, FONDU DE SECTION, PASTILLES FONCEES  (20/10, 5e passe)
   =========================================================================== */
/* 1. Les logos occupent enfin la pastille. Un logo large est limite par la
      largeur, un logo haut par la hauteur : dans les deux cas il reste
      inscrit dans le cercle. */
.grp-pt .grp-lg,.grp-noeud .grp-lg{width:88%;height:88%}
.grp-pt .grp-lg img,.grp-noeud .grp-lg img{max-width:100%;max-height:38%;
  width:auto;height:auto;object-fit:contain}
.grp-pt.centre .grp-lg,.grp-noeud.centre .grp-lg{width:78%;height:56%;margin:0}
.grp-pt.centre .grp-lg img,.grp-noeud.centre .grp-lg img{max-height:100%}
.grp-bulle .grp-lg{height:34px}
.grp-bulle .grp-lg img{max-height:34px}
.grp-case .grp-lg{height:52px}
.grp-case .grp-lg img{max-height:52px}
.grp-brique .grp-lg,.grp-tuile .grp-lg{height:44px}
.grp-brique .grp-lg img,.grp-tuile .grp-lg img{max-height:44px}

/* 2. La baseline sous le logo central faisait doublon avec le logo lui-meme. */
.grp-centre-base{display:none}

/* 3. Le fondu de la bande : au lieu d'un aplat gris qui s'arrete net entre
      deux sections, un degre vertical qui part du blanc et y revient. */
#societes{background:linear-gradient(180deg,var(--surface) 0%,var(--surface-alt) 18%,
  var(--surface-alt) 82%,var(--surface) 100%)}
html[data-theme="dark"] #societes{background:linear-gradient(180deg,var(--surface) 0%,
  var(--surface-alt) 18%,var(--surface-alt) 82%,var(--surface) 100%)}

/* 4. Certains logos du groupe sont dessines en blanc, pour fond sombre : la
      case « logo sur fond sombre » donne a cette pastille un disque bleu
      nuit, et le logo redevient lisible. */
.grp-pt.fonce,.grp-noeud.fonce,.grp-bulle.fonce,.grp-case.fonce,
.grp-brique.fonce,.grp-tuile.fonce{
  background:linear-gradient(150deg,var(--grp-f1),var(--grp-f2));border-color:rgba(47,111,176,.4)}
.grp-pt.fonce:hover,.grp-noeud.fonce:hover{background:linear-gradient(150deg,var(--grp-fh1),var(--grp-fh2))}
.grp-pt.fonce .grp-lg.nolg .grp-wm,.grp-noeud.fonce .grp-lg.nolg .grp-wm,
.grp-bulle.fonce b,.grp-case.fonce small,.grp-brique.fonce b,.grp-tuile.fonce b{color:#fff}
html[data-theme="dark"] .grp-pt.fonce .grp-lg img,
html[data-theme="dark"] .grp-noeud.fonce .grp-lg img,
html[data-theme="dark"] .grp-case.fonce .grp-lg img,
html[data-theme="dark"] .grp-brique.fonce .grp-lg img,
html[data-theme="dark"] .grp-tuile.fonce .grp-lg img{background:none;padding:0}

/* La marge interieure des pastilles etait exprimee en pourcentage : en CSS,
   un padding en % se calcule sur la LARGEUR DU PARENT, ici le bras de
   rotation, trois fois plus large que la pastille. Resultat, 6 % devenaient
   21 % et le logo etait ecrase au centre. On retire ce padding : c'est
   l'emplacement du logo (88 % de la pastille) qui donne la marge. */
.grp-pt,.grp-noeud{padding:0}

/* ===========================================================================
   FONDU, DERNIERE PASSE  (20/10/2026)
   Deux causes au liseré qu'on voyait encore en haut de la bande :
   la lueur, coupee net par le bord de la section, et le degrade de fond qui
   n'avait que deux paliers. On masque donc la lueur en cercle (elle se
   dissout au lieu d'etre coupee) et on ajoute des paliers intermediaires.
   =========================================================================== */
.grp-tourne:before,.grp-const:before,.grp-anneau:before,.grp-neb:before,.grp-halo{
  -webkit-mask-image:radial-gradient(closest-side,#000 38%,rgba(0,0,0,.5) 68%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 38%,rgba(0,0,0,.5) 68%,transparent 100%)}
#societes{background:linear-gradient(180deg,
  var(--surface) 0%,
  color-mix(in srgb,var(--surface-alt) 30%,var(--surface)) 8%,
  color-mix(in srgb,var(--surface-alt) 70%,var(--surface)) 16%,
  var(--surface-alt) 28%,
  var(--surface-alt) 72%,
  color-mix(in srgb,var(--surface-alt) 70%,var(--surface)) 84%,
  color-mix(in srgb,var(--surface-alt) 30%,var(--surface)) 92%,
  var(--surface) 100%)}
html[data-theme="dark"] #societes{background:linear-gradient(180deg,
  var(--surface) 0%,
  color-mix(in srgb,var(--surface-alt) 30%,var(--surface)) 8%,
  color-mix(in srgb,var(--surface-alt) 70%,var(--surface)) 16%,
  var(--surface-alt) 28%,
  var(--surface-alt) 72%,
  color-mix(in srgb,var(--surface-alt) 70%,var(--surface)) 84%,
  color-mix(in srgb,var(--surface-alt) 30%,var(--surface)) 92%,
  var(--surface) 100%)}

/* ===========================================================================
   FOND DES PASTILLES : QUATRE OPTIONS  (20/10/2026)
   La plupart des logos du groupe sont detoures en blanc, pour fond sombre.
   Quatre reglages, au choix dans l'admin :
     (defaut)        pastilles blanches
     .grp-fond-fonce pastilles bleu nuit sur la bande claire
     .grp-fond-mixte chaque societe decide, via sa case « logo blanc »
     .grp-fond-nuit  toute la scene sur fond sombre
   Dans les deux modes fonces, un logo qui n'est PAS declare blanc recoit une
   pastille blanche derriere lui : il reste lisible sans retoucher le fichier.
   =========================================================================== */
/* La couleur des pastilles foncees se regle dans l'admin : groupe.js pose
   --grp-f1 et ses nuances sur #grpVue. Ces valeurs sont le bleu nuit par
   defaut, utilise tant que rien n'est choisi. */
:root,#grpVue,.grp-fond-fonce,.grp-fond-nuit,.grp-fond-clair,.grp-fond-mixte{
  --grp-f1:#0e2a45;--grp-f2:#17405f;--grp-f0:#081a2c;--grp-fh1:#123252;--grp-fh2:#1d4e71}
.grp-fond-fonce .grp-pt,.grp-fond-fonce .grp-noeud,.grp-fond-fonce .grp-bulle,
.grp-fond-nuit .grp-pt,.grp-fond-nuit .grp-noeud,.grp-fond-nuit .grp-bulle{
  background:linear-gradient(150deg,var(--grp-f1),var(--grp-f2));border-color:rgba(120,175,215,.38);
  box-shadow:0 16px 34px -22px rgba(9,24,45,.8)}
.grp-fond-fonce .grp-pt:hover,.grp-fond-nuit .grp-pt:hover,
.grp-fond-fonce .grp-noeud:hover,.grp-fond-nuit .grp-noeud:hover{
  background:linear-gradient(150deg,var(--grp-fh1),var(--grp-fh2));border-color:#7fc7e8}
.grp-fond-fonce .grp-lg.nolg .grp-wm,.grp-fond-nuit .grp-lg.nolg .grp-wm{color:#eaf3fa}
.grp-fond-fonce .grp-pt.moi,.grp-fond-nuit .grp-pt.moi{border-color:var(--cta)}
/* un logo sombre sur une pastille foncee : on lui rend un fond blanc */
.grp-fond-fonce .grp-pt:not(.fonce) .grp-lg img,
.grp-fond-fonce .grp-noeud:not(.fonce) .grp-lg img,
.grp-fond-nuit .grp-pt:not(.fonce) .grp-lg img,
.grp-fond-nuit .grp-noeud:not(.fonce) .grp-lg img{
  background:#fff;border-radius:10px;padding:7px 10px;box-sizing:content-box}
/* mode mixte : c'est la case de chaque societe qui decide, rien de global */

/* toute la scene sur fond sombre */
.grp-fond-nuit .grp-tourne,.grp-fond-nuit .grp-const,
.grp-fond-nuit .grp-anneau,.grp-fond-nuit .grp-neb{
  background:radial-gradient(circle at 50% 46%,var(--grp-f2) 0%,var(--grp-f1) 48%,var(--grp-f0) 100%);
  border-radius:26px}
.grp-fond-nuit .grp-anneau-svg circle,.grp-fond-nuit .grp-anneau-svg ellipse,
.grp-fond-nuit .grp-const-svg .o1,.grp-fond-nuit .grp-const-svg .o2{stroke:rgba(165,210,240,.3)}
.grp-fond-nuit .grp-const-svg line,.grp-fond-nuit .grp-neb-svg path{stroke:rgba(165,210,240,.34)}
.grp-fond-nuit .grp-halo{background:conic-gradient(from 0deg,rgba(57,182,216,0),
  rgba(57,182,216,.34),rgba(255,122,69,.24),rgba(57,182,216,0));filter:blur(60px)}

/* « Pastilles blanches » veut dire blanches pour tout le monde : dans ce mode,
   les cases « logo blanc » des societes sont ignorees. */
.grp-fond-clair .grp-pt,.grp-fond-clair .grp-noeud,.grp-fond-clair .grp-bulle{
  background:#fff;border-color:rgba(47,111,176,.18)}
.grp-fond-clair .grp-pt.centre,.grp-fond-clair .grp-noeud.centre{
  background:linear-gradient(150deg,var(--grp-f1),var(--grp-f2));border-color:rgba(47,111,176,.45)}
.grp-fond-clair .grp-pt:not(.centre) .grp-lg.nolg .grp-wm,
.grp-fond-clair .grp-noeud:not(.centre) .grp-lg.nolg .grp-wm{color:var(--ink)}


/* ===========================================================================
   LOGOS CLIQUABLES  (20/10/2026)
   Quand une societe a une adresse, sa pastille devient un lien vers son site.
   =========================================================================== */
a.grp-pt,a.grp-noeud,a.grp-bulle,a.grp-brique,a.grp-case{
  text-decoration:none;color:inherit;cursor:pointer}
a.grp-pt:focus-visible,a.grp-noeud:focus-visible,a.grp-bulle:focus-visible,
a.grp-brique:focus-visible,a.grp-case:focus-visible{outline:2px solid var(--cta);outline-offset:3px}

/* le bouton des solutions composites : texte en blanc sur le fond colore */
.grp-comp-d .btn,.grp-comp-d .btn:hover,.grp-comp-d .btn:focus{color:#fff}


/* ===========================================================================
   SOCIETES « A VENIR »  (20/10/2026)
   Une societe annoncee mais pas encore integree : pastille en retrait, logo
   en gris, et une petite mention (« Bientot » par defaut, modifiable).
   =========================================================================== */
.grp-pt.avenir,.grp-noeud.avenir,.grp-bulle.avenir,.grp-brique.avenir,.grp-case.avenir{
  opacity:.58;border-style:dashed;box-shadow:none;position:relative}
.grp-pt.avenir:hover,.grp-noeud.avenir:hover,.grp-bulle.avenir:hover,
.grp-brique.avenir:hover,.grp-case.avenir:hover{opacity:1}
.avenir .grp-lg img{filter:grayscale(1);opacity:.85}
.avenir:hover .grp-lg img{filter:none;opacity:1}
.grp-bientot{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);
  font-size:.52rem;line-height:1;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;white-space:nowrap;pointer-events:none;
  background:rgba(47,111,176,.16);color:var(--ink);font-weight:700}
.grp-fond-fonce .grp-bientot,.grp-fond-nuit .grp-bientot,
.avenir.fonce .grp-bientot{background:rgba(190,230,250,.2);color:#eaf3fa}
.grp-brique.avenir,.grp-case.avenir{position:relative}
.grp-brique .grp-bientot,.grp-case .grp-bientot{bottom:auto;top:8px;left:auto;right:8px;transform:none}
@media(max-width:620px){.grp-bientot{font-size:.46rem;padding:3px 7px}}


/* ===========================================================================
   FONDU DU BAS  (20/10/2026, 4e passe)
   La lueur descendait plus bas que la bande : #societes la coupait net et
   laissait un trait horizontal. On la retaille en hauteur et on la fait
   disparaitre avant le bord, haut et bas.
   =========================================================================== */
.grp-tourne:before,.grp-const:before,.grp-anneau:before,.grp-neb:before{
  height:112%}
.grp-halo{height:116%}
.grp-tourne:before,.grp-const:before,.grp-anneau:before,.grp-neb:before,.grp-halo{
  -webkit-mask-image:radial-gradient(closest-side,#000 24%,rgba(0,0,0,.4) 56%,transparent 86%);
  mask-image:radial-gradient(closest-side,#000 24%,rgba(0,0,0,.4) 56%,transparent 86%)}
/* un peu d'air sous le schema, pour que la lueur ait ou s'eteindre */
#societes{padding-bottom:clamp(40px,6vw,90px)}


/* ===========================================================================
   DEUX NOUVELLES PRESENTATIONS  (20/10/2026, 5e passe)
   « Constellation libre » et « Orbites inclinees ». Elles reprennent les
   pastilles des autres vues (.grp-noeud et .grp-pt), donc les reglages de
   couleur, les logos blancs, les liens et les mentions « a venir »
   fonctionnent exactement pareil.
   =========================================================================== */

/* --- A. la constellation libre --- */
.grp-libre{position:relative;width:100%;max-width:1120px;margin:0 auto;aspect-ratio:1/.72}
.grp-libre-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.grp-libre-svg path{fill:none;stroke:rgba(47,111,176,.3);stroke-width:.16}
.grp-libre-svg path.grp-fin{stroke:rgba(47,111,176,.16);stroke-dasharray:1.1 1.6}
.grp-libre .grp-noeud{z-index:2;animation:grpflotte var(--f,18s) ease-in-out infinite alternate}
.grp-libre .grp-noeud.centre{width:21%;z-index:3;animation:none}
.grp-libre .grp-noeud .grp-lg.nolg .grp-wm{font-size:.62rem}
.grp-libre .grp-noeud.centre .grp-lg.nolg .grp-wm{font-size:1.22rem}
@keyframes grpflotte{
  from{transform:translate(-50%,-50%)}
  to{transform:translate(calc(-50% + var(--dx,6px)),calc(-50% + var(--dy,-8px)))}}
.grp-libre:hover .grp-noeud{animation-play-state:paused}
html[data-theme="dark"] .grp-libre-svg path{stroke:rgba(140,190,225,.34)}
html[data-theme="dark"] .grp-libre-svg path.grp-fin{stroke:rgba(140,190,225,.18)}
.grp-fond-nuit .grp-libre-svg path{stroke:rgba(165,210,240,.34)}

/* --- C. les orbites inclinees --- */
.grp-ellipses{position:relative;width:100%;max-width:1120px;margin:0 auto;aspect-ratio:1/.8}
.grp-ell-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.grp-ell-svg ellipse{fill:none;stroke:rgba(47,111,176,.15);stroke-width:.1;stroke-dasharray:2.4 3.4}
html[data-theme="dark"] .grp-ell-svg ellipse,.grp-fond-nuit .grp-ell-svg ellipse{
  stroke:rgba(165,210,240,.18)}
.grp-oplan{position:absolute;inset:0;z-index:2;transform:rotate(var(--tilt)) scaleY(var(--k));
  pointer-events:none}
.grp-obras{position:absolute;left:50%;top:50%;width:var(--d);aspect-ratio:1;
  margin-left:calc(var(--d) / -2);margin-top:calc(var(--d) / -2);
  transform:rotate(var(--a));animation:grportur var(--t) linear infinite}
.grp-obras>.grp-pt{position:absolute;left:50%;top:0;width:var(--w);aspect-ratio:1;
  margin-left:calc(var(--w) / -2);margin-top:calc(var(--w) / -2);pointer-events:auto;
  transform:rotate(calc(-1 * var(--a))) scaleY(var(--ik)) rotate(calc(-1 * var(--tilt)));
  animation:grpordroit var(--t) linear infinite}
@keyframes grportur{from{transform:rotate(var(--a))}
  to{transform:rotate(calc(var(--a) + 360deg))}}
@keyframes grpordroit{
  from{transform:rotate(calc(-1 * var(--a))) scaleY(var(--ik)) rotate(calc(-1 * var(--tilt)))}
  to{transform:rotate(calc(-1 * var(--a) - 360deg)) scaleY(var(--ik)) rotate(calc(-1 * var(--tilt)))}}
.grp-ellipses:hover .grp-obras,.grp-ellipses:hover .grp-obras>.grp-pt,
.grp-ellipses:focus-within .grp-obras,.grp-ellipses:focus-within .grp-obras>.grp-pt{
  animation-play-state:paused}
.grp-ellipses .grp-pt.centre{left:50%;top:50%;width:21%;z-index:3;transform:translate(-50%,-50%)}
.grp-ellipses .grp-pt .grp-lg.nolg .grp-wm{font-size:.6rem}
.grp-ellipses .grp-pt.centre .grp-lg.nolg .grp-wm{font-size:1.22rem}

@media(prefers-reduced-motion:reduce){
  .grp-libre .grp-noeud,.grp-obras,.grp-obras>.grp-pt{animation:none}}
@media(max-width:620px){
  .grp-libre .grp-noeud .grp-lg.nolg .grp-wm,.grp-ellipses .grp-pt .grp-lg.nolg .grp-wm{font-size:.48rem}
  .grp-libre{aspect-ratio:1/.86}.grp-ellipses{aspect-ratio:1/.92}}