/* assets/site/agences.css — section « Agences TikTok LIVE » de l'accueil (site/sections/agences.php, 14/10/2026).
   DA du site v2 (tokens --v-*, avec repli pour l'ancien site) ; accent OR pour la distinguer de TikLive Games (cyan).
   Tout est sous .ag-* : aucune règle sans portée (cf. CLAUDE.md, piège .btn-p qui élargissait toute la page). */
.ag-sec { --ag-or: var(--v-or, #ffd24a); --ag-carte: var(--v-carte, linear-gradient(160deg, #17122a, #0e0c18)); }
.ag-bloc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 34px; align-items: center; padding: 36px; border-radius: 30px;
  background: radial-gradient(circle at 0% 0%, rgba(255,210,74,.17), transparent 50%), radial-gradient(circle at 100% 100%, rgba(255,45,107,.2), transparent 55%), var(--ag-carte);
  box-shadow: var(--v-ombre, 0 20px 44px rgba(0,0,0,.45)), 0 0 0 2px rgba(255,210,74,.32); }
.ag-txt { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ag-sec .ag-chip { align-self: flex-start; color: #1d1500; background: var(--ag-or); }
.ag-sec h2 { margin: 0; font: 900 clamp(28px, 3.4vw, 44px)/1.1 var(--v-titre, system-ui, sans-serif); letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; }
.ag-sec h2 em { font-style: normal; white-space: nowrap; color: var(--ag-or); text-shadow: 0 0 34px rgba(255,210,74,.45); }
.ag-lead { margin: 0; font-size: 17px; line-height: 1.65; color: var(--v-txt2, rgba(255,255,255,.72)); }
.ag-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ag-sec .ag-btn { text-decoration: none; }
.ag-sec .ag-btn svg { flex: none; }
.ag-fine { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--v-txt3, rgba(255,255,255,.5)); }
.ag-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ag-carte { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px; border-radius: 22px; background: rgba(255,255,255,.045);
  box-shadow: 0 14px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); transition: transform .25s, box-shadow .25s; }
.ag-carte:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px var(--ag-ton); }
.ag-carte i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: var(--ag-ton); background: var(--ag-fond); }
.ag-carte b { font: 800 18px/1.25 var(--v-titre, system-ui, sans-serif); color: var(--ag-ton); overflow-wrap: anywhere; }
.ag-carte span { font-size: 14px; line-height: 1.55; color: var(--v-txt2, rgba(255,255,255,.72)); }
.ag-or   { --ag-ton: var(--v-or, #ffd24a);    --ag-fond: rgba(255,210,74,.13); }
.ag-rose { --ag-ton: var(--v-rose, #ff2d6b);  --ag-fond: rgba(255,45,107,.14); }
.ag-cyan { --ag-ton: var(--v-cyan, #25f4ee);  --ag-fond: rgba(37,244,238,.12); }
.ag-vert { --ag-ton: var(--v-vert, #3dff9a);  --ag-fond: rgba(61,255,154,.12); }
@media (max-width: 1080px) { .ag-bloc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .ag-bloc { padding: 22px 18px; gap: 22px; border-radius: 24px; }
  .ag-lead { font-size: 16px; }
  .ag-cartes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ag-carte { padding: 16px; }
  .ag-sec .ag-actions > a { width: 100%; justify-content: center; white-space: normal; text-align: center; }
}
/* barre du haut : 9e lien « Agences ». Entre 861 et 1100 px (barre en ligne resserrée, avant le menu burger), le russe, le vietnamien et
   le japonais débordaient de 17 à 40 px (mesuré dans les 16 langues) : le lien s'y efface, la section et le pied restent. */
@media (min-width: 861px) and (max-width: 1100px) { .v-nav .v-links a.ag-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .ag-carte, .ag-carte:hover { transition: none; transform: none; } }