/* Habillage du réseau du client, utilisé par toutes les démos (classe .reseau).
   Trois thèmes choisis par le client (:root[data-theme]) ; sa couleur arrive par --client, --client-texte, --client-doux.
   Une démo n'utilise que les jetons --r-* et --client* : jamais de couleur ni de rayon en dur. */

:root, :root[data-theme="campus"] {
  --r-fond: #F3F4F6;
  --r-surface: #FFFFFF;
  --r-surface-2: #F7F7F8;
  --r-texte: #15171C;
  --r-texte-2: #5F636D;
  --r-ligne: #E4E5E9;
  --r-rayon: 18px;
  --r-rayon-petit: 12px;
  --r-ombre: 0 1px 2px rgba(16, 18, 24, .05), 0 8px 24px -12px rgba(16, 18, 24, .18);
  --r-titre: "Onest", system-ui, sans-serif;
  --r-titre-graisse: 700;
  --r-titre-espace: -.02em;
  --r-corps: "Onest", system-ui, sans-serif;
  --r-pastille: 99px;
  --r-accent-fond: var(--client);
  --r-accent-texte: var(--client-texte);
}

:root[data-theme="institution"] {
  --r-fond: #FAF9F7;
  --r-surface: #FFFFFF;
  --r-surface-2: #F4F2EE;
  --r-texte: #1A1A1A;
  --r-texte-2: #5B5953;
  --r-ligne: #DEDAD2;
  --r-rayon: 4px;
  --r-rayon-petit: 3px;
  --r-ombre: none;
  --r-titre: "Newsreader", Georgia, serif;
  --r-titre-graisse: 600;
  --r-titre-espace: -.01em;
  --r-corps: "Onest", system-ui, sans-serif;
  --r-pastille: 3px;
  --r-accent-fond: var(--client);
  --r-accent-texte: var(--client-texte);
}

:root[data-theme="studio"] {
  --r-fond: #0D0E12;
  --r-surface: #16181E;
  --r-surface-2: #1E2129;
  --r-texte: #F2F3F5;
  --r-texte-2: #9BA0AC;
  --r-ligne: #2A2D36;
  --r-rayon: 14px;
  --r-rayon-petit: 10px;
  --r-ombre: 0 0 0 1px rgba(255, 255, 255, .04);
  --r-titre: "Unbounded", "Arial Black", sans-serif;
  --r-titre-graisse: 600;
  --r-titre-espace: -.03em;
  --r-corps: "Onest", system-ui, sans-serif;
  --r-pastille: 8px;
  --r-accent-fond: var(--client);
  --r-accent-texte: var(--client-texte);
}

.reseau {
  background: var(--r-fond);
  color: var(--r-texte);
  font-family: var(--r-corps);
  font-size: 15px;
  line-height: 1.5;
  transition: background-color .4s ease, color .4s ease;
}
.reseau h1, .reseau h2, .reseau h3, .reseau h4 {
  font-family: var(--r-titre);
  font-weight: var(--r-titre-graisse);
  letter-spacing: var(--r-titre-espace);
  margin: 0;
  line-height: 1.2;
}
.reseau p { margin: 0 }

/* Briques communes, à réutiliser dans les démos */
.r-carte { background: var(--r-surface); border: 1px solid var(--r-ligne); border-radius: var(--r-rayon); box-shadow: var(--r-ombre) }
.r-doux { background: var(--r-surface-2); border-radius: var(--r-rayon-petit) }
.r-secondaire { color: var(--r-texte-2) }
.r-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/1 var(--r-corps); padding: 11px 16px; border: 0; cursor: pointer;
  border-radius: var(--r-pastille); background: var(--r-accent-fond); color: var(--r-accent-texte);
  transition: transform .12s ease, filter .15s ease;
}
.r-bouton:hover { filter: brightness(1.08) }
.r-bouton:active { transform: scale(.97) }
.r-bouton.trait { background: transparent; color: var(--r-texte); box-shadow: inset 0 0 0 1.5px var(--r-ligne) }
.r-pastille { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--r-pastille); font-size: 12px; font-weight: 600; background: var(--client-doux); color: color-mix(in srgb, var(--client) 62%, #15171C) }
.reseau *, .reseau *::before, .reseau *::after { box-sizing: border-box }
:root[data-theme="studio"] .r-pastille { background: color-mix(in srgb, var(--client) 22%, transparent); color: color-mix(in srgb, var(--client) 40%, white) }
.r-champ {
  font: 15px/1.3 var(--r-corps); color: var(--r-texte); background: var(--r-surface);
  border: 1.5px solid var(--r-ligne); border-radius: var(--r-rayon-petit); padding: 11px 13px; width: 100%;
}
.r-champ:focus { outline: none; border-color: var(--client) }
.r-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--r-surface-2) }
:root[data-theme="institution"] .r-avatar { border-radius: 2px }
.reseau :focus-visible { outline: 2px solid var(--client); outline-offset: 2px }

@media (prefers-reduced-motion: reduce) { .reseau, .reseau * { transition: none !important; animation: none !important } }