/*!
 * THÈME 7 « AGENTS » (12/10/2026) — code propriétaire. S'ajoute au socle du Thème 1 et à l'habillage sombre commun.
 * Inspiré de « Aether — AI Agent Platform » (Dribbble).
 */
body.ns-theme7 { font-family: 'Inter', 'main-font-family', system-ui, sans-serif; }
body.ns-theme7 h1, body.ns-theme7 h2, body.ns-theme7 .t1-titre-section { font-weight: 500; letter-spacing: -.035em; }
.tx-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .tx-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 13px 24px; font-weight: 600; background: #fff; color: #050b24 !important; }
.tx-btn svg { width: 16px; height: 16px; } .tx-btn.sec { background: rgba(255,255,255,.06); color: #fff !important; border: 1px solid rgba(255,255,255,.2); }
.g7-heros, .ps-tete { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--t5-nuit, #050b24), color-mix(in srgb, var(--t1-marque) 30%, var(--t5-nuit, #050b24)) 100%); color: #fff; }
.g7-heros { padding: 150px 0 0; }
.g7-halo { position: absolute; left: 50%; top: 32%; width: 90vw; height: 50vw; transform: translateX(-50%); z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--t2, var(--t4-jaune)) 0%, transparent), transparent), radial-gradient(closest-side, color-mix(in srgb, var(--t1-second) 55%, transparent), transparent 70%); filter: blur(30px); animation: g7-pulse 8s ease-in-out infinite; }
@keyframes g7-pulse { 50% { opacity: .6; transform: translateX(-50%) scale(1.08); } }
.g7-centre { text-align: center; position: relative; z-index: 2; }
.g7-puce { display: inline-flex; gap: 8px; align-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 6px 14px; font-size: 13px; background: rgba(255,255,255,.05); }
.g7-titre { font-size: clamp(40px, 5.6vw, 84px); line-height: 1.02; margin: 22px auto 18px; max-width: 1000px; color: #fff !important; }
.g7-titre span { background: linear-gradient(90deg, #fff, var(--t4-jaune)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g7-lead { color: rgba(255,255,255,.72); max-width: 580px; margin: 0 auto 28px; }
.g7-plan { height: 460px; margin-top: 30px; perspective: 1400px; overflow: hidden; mask-image: linear-gradient(transparent, #000 25%, #000 70%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 70%, transparent); }
.g7-grille { display: grid; grid-template-columns: repeat(3, 280px); gap: 26px; justify-content: center; transform: rotateX(52deg) rotateZ(-22deg) translateY(-60px); transform-style: preserve-3d; animation: g7-glisse 26s linear infinite alternate; }
@keyframes g7-glisse { to { transform: rotateX(52deg) rotateZ(-22deg) translateY(-260px); } }
.g7-ecran { background: rgba(255,255,255,.9); border-radius: 16px; padding: 10px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.4); color: #050b24; display: grid; gap: 4px; animation: g7-flotte 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
.g7-ecran img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; } .g7-ecran b { font-size: 13px; } .g7-ecran small { font-size: 11.5px; color: #64748b; }
.g7-ecran.vide { background: rgba(255,255,255,.12); color: #fff; min-height: 150px; align-content: end; } .g7-ecran.vide small { color: rgba(255,255,255,.6); }
@keyframes g7-flotte { 50% { transform: translateZ(26px); } }
.g7-chaine { padding: 100px 0; background: var(--t5-nuit, #050b24); }
.g7-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.g7-etapes::before { content: ''; position: absolute; left: 6%; right: 6%; top: 27px; height: 2px; background: linear-gradient(90deg, transparent, var(--t4-jaune), var(--t1-second), transparent); background-size: 200% 100%; animation: g7-flux 3s linear infinite; }
@keyframes g7-flux { to { background-position: -200% 0; } }
.g7-etapes li { position: relative; text-align: center; display: grid; gap: 6px; justify-items: center; }
.g7-etapes .ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: #0b1636; border: 1px solid color-mix(in srgb, var(--t4-jaune) 45%, transparent); box-shadow: 0 0 24px -6px var(--t4-jaune); color: var(--t4-jaune); position: relative; }
.g7-etapes .ic svg { width: 24px; height: 24px; } .g7-etapes b { color: #fff; } .g7-etapes small { color: rgba(255,255,255,.6); font-size: 13px; }
.ps-tete { padding: 150px 0 80px; } .ps-centre { position: relative; z-index: 2; text-align: center; } .ps-tete .t1-fil, .ps-tete .t1-fil a { color: rgba(255,255,255,.55); }
.ps-titre { font-size: clamp(36px, 5vw, 72px); color: #fff !important; margin: 14px 0; } .ps-mot { background: linear-gradient(90deg, #fff, var(--t4-jaune)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ps-sous { color: rgba(255,255,255,.7); max-width: 600px; margin: 0 auto; } .ps-puces { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.ps-puces span { display: inline-flex; gap: 8px; align-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 7px 13px; font-size: 13.5px; color: #fff; } .ps-puces svg { width: 15px; height: 15px; color: var(--t4-jaune); }
@media (max-width: 900px) { .g7-grille { grid-template-columns: repeat(2, 220px); } .g7-etapes { grid-template-columns: 1fr; text-align: left; } .g7-etapes::before { display: none; } .g7-etapes li { grid-template-columns: 56px 1fr; justify-items: start; text-align: left; } .g7-etapes li small { grid-column: 2; } }
@media (prefers-reduced-motion: reduce) { .g7-grille, .g7-ecran, .g7-halo, .g7-etapes::before { animation: none; } }