/* Bloc « Le Réseau » (02/10/2026, maquette A du canevas SkNxa6Fx) : remplace la colonnade des 9 fonctions dans #produit.
   Greffé par greffer.py, préfixe rs-. Les couleurs reprennent les jetons --ba-* de coupole.css. */
.rs {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: center;
  margin-bottom: clamp(72px, 9vw, 128px);}
.rs-texte {display: flex; flex-direction: column; gap: 26px;}
.rs-sur {align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: var(--ba-ciel); border: 1px solid var(--ba-ligne);
  font-size: 13px; font-weight: 700; color: var(--ba-bleu); letter-spacing: .02em;}
.rs-titre {font-size: clamp(36px, 4.4vw, 58px); line-height: 1.05; font-weight: 800; letter-spacing: -.035em; color: var(--ba-marine);}
.rs-titre em {font-style: normal; color: var(--ba-bleu);}
.rs-sous {font-size: 18px; line-height: 1.55; color: var(--ba-gris); max-width: 520px;}
.rs-points {display: flex; flex-direction: column; gap: 22px; margin: 4px 0 0; padding: 0; list-style: none;}
.rs-points li {display: flex; gap: 16px; align-items: flex-start;}
.rs-ic {flex: none; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(180deg, var(--ba-bleu2), var(--ba-bleu));
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -8px rgba(31, 111, 235, .7);}
.rs-ic svg {width: 22px; height: 22px;}
.rs-points h3 {font-size: 18px; font-weight: 700; color: var(--ba-marine); letter-spacing: -.01em;}
.rs-points p {margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--ba-gris);}
.rs-cta {display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 6px;}
.rs-cta small {font-size: 14px; line-height: 1.4; color: var(--ba-gris);}
.rs-cta small b {color: var(--ba-marine);}

.rs-scene {position: relative; display: flex; flex-direction: column; align-items: center; padding: 40px 0;}
.rs-scene::before {content: ""; position: absolute; left: 50%; top: 50%; width: min(560px, 120%); height: 112%; transform: translate(-50%, -50%);
  border-radius: 280px 280px 40px 40px; background: radial-gradient(120% 70% at 50% 0%, #DCEBFF 0%, var(--ba-ciel) 45%, rgba(238, 245, 255, 0) 80%);}
.rs-fil {position: relative; width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--ba-ligne); border-radius: 28px; overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(11, 30, 79, .35), 0 2px 6px rgba(11, 30, 79, .06);}
.rs-fil-tete {display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 18px 14px;}
.rs-fil-tete b {font-size: 16px; font-weight: 800; color: var(--ba-marine);}
.rs-onglets {display: flex; gap: 6px; font-size: 12.5px; font-weight: 700;}
.rs-onglets span {padding: 6px 11px; border-radius: 999px; background: var(--ba-ciel); color: var(--ba-bleu);}
.rs-onglets span.rs-actif {background: var(--ba-marine); color: #fff;}
.rs-ev {display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-top: 1px solid #E7EEF9;}
.rs-av {flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: #fff; background: var(--ba-bleu);}
.rs-ev p {font-size: 14.5px; line-height: 1.45; color: var(--ba-encre);}
.rs-ev small {display: block; margin-top: 4px; font-size: 12.5px; color: var(--ba-gris);}
.rs-capture {margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--ba-ciel2); border: 1px solid #E7EEF9;
  font-size: 13px; line-height: 1.5; color: var(--ba-gris);}
.rs-masque {display: inline-block; width: 46px; height: 10px; border-radius: 4px; background: #C9D7EE; vertical-align: middle;}
.rs-note {position: relative; margin-top: 14px; font-size: 12.5px; color: var(--ba-gris);}

.rs-pastille {position: absolute; right: -16px; top: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px;
  background: #fff; border: 1px solid var(--ba-ligne); border-radius: 18px; box-shadow: 0 18px 40px -18px rgba(11, 30, 79, .4);
  font-size: 13.5px; font-weight: 700; color: var(--ba-marine);}
.rs-pastille .rs-av {width: 28px; height: 28px; font-size: 11px; border: 2px solid #fff;}
.rs-pastille .rs-av + .rs-av {margin-left: -18px;}
.rs-rang {position: absolute; left: -12px; bottom: 4px; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 18px;
  background: var(--ba-marine); color: #fff; box-shadow: 0 18px 40px -18px rgba(11, 30, 79, .6);}
.rs-rang span {font-size: 12px; font-weight: 600; color: var(--ba-bleu3); letter-spacing: .04em; text-transform: uppercase;}
.rs-rang b {font-size: 15px; font-weight: 800;}

@media (max-width: 900px) {
  .rs {grid-template-columns: minmax(0, 1fr);}
  .rs-scene {padding: 8px 0 0;}
  .rs-pastille, .rs-rang {position: relative; left: auto; right: auto; top: auto; bottom: auto; margin-top: 12px; align-self: center; max-width: 440px; width: 100%; box-sizing: border-box;}
}
@media (max-width: 480px) {
  .rs-fil-tete {flex-direction: column; align-items: flex-start;}
}