/*!
 * THÈME 5 « COSMOS » (12/10/2026) — code propriétaire. S'ajoute au socle du Thème 1 et à l'habillage sombre commun.
 * Inspiré de « Educational Website on Space Pollution » (Dribbble).
 */
body.ns-theme5 { font-family: 'Space Grotesk', 'main-font-family', system-ui, sans-serif; }
body.ns-theme5 h1, body.ns-theme5 h2, body.ns-theme5 .t1-titre-section { font-family: 'Space Grotesk', sans-serif; font-weight: 300; text-transform: uppercase; letter-spacing: -.01em; }
body.ns-theme5 .t1-sur-titre, body.ns-theme5 .t1-etiquette, body.ns-theme5 .pz-index { font-family: 'Space Mono', monospace; }
.tx-actions { display: flex; gap: 12px; flex-wrap: wrap; } .tx-btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 4px; padding: 13px 20px; font-weight: 700; background: var(--t4-jaune); color: #020409 !important; font-family: 'Space Mono', monospace; text-transform: uppercase; font-size: 13.5px; letter-spacing: .06em; }
.tx-btn svg { width: 16px; height: 16px; } .tx-btn.sec { background: transparent; color: #e2e8f0 !important; border: 1px solid rgba(226,232,240,.35); }
.c5-heros, .ps-tete { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(70% 60% at 70% 40%, color-mix(in srgb, var(--t1-marque) 22%, transparent), transparent 70%), var(--t5-nuit, #020409); color: #e2e8f0; }
.c5-heros { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 130px 0 50px; }
.c5-etoiles { position: absolute; inset: 0; z-index: -1; }
.c5-etoiles i { position: absolute; inset: -50%; background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #cbd5e1, transparent), radial-gradient(1.5px 1.5px at 60px 150px, #fff, transparent), radial-gradient(1px 1px at 180px 190px, #94a3b8, transparent); background-size: 220px 220px; animation: c5-derive 120s linear infinite; opacity: .7; }
.c5-etoiles i:nth-child(2) { background-size: 340px 340px; animation-duration: 200s; opacity: .45; } .c5-etoiles i:nth-child(3) { background-size: 520px 520px; animation-duration: 320s; opacity: .3; }
@keyframes c5-derive { to { transform: translate(-220px, 110px); } }
.c5-planete { position: absolute; right: 8%; top: 12%; width: min(46vw, 560px); aspect-ratio: 1; z-index: -1; }
.c5-planete .sphere { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--t1-marque) 40%, #fff) 0%, var(--t1-marque) 30%, color-mix(in srgb, var(--t1-marque) 35%, #000) 62%, #000 78%);
    box-shadow: inset -40px -30px 80px rgba(0,0,0,.85), 0 0 80px color-mix(in srgb, var(--t1-marque) 45%, transparent), 0 0 160px color-mix(in srgb, var(--t1-marque) 20%, transparent); animation: c5-tourne 40s linear infinite; }
.c5-planete .sphere::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(170deg, transparent 0 18px, rgba(255,255,255,.06) 18px 22px); mix-blend-mode: overlay; }
@keyframes c5-tourne { to { background-position: 200px 0; filter: hue-rotate(8deg); } }
.c5-planete .orbite { position: absolute; inset: -14%; border: 1px dashed rgba(226,232,240,.25); border-radius: 50%; transform: rotateX(72deg) rotateZ(-18deg); animation: c5-orbite 18s linear infinite; }
.c5-planete .orbite.o2 { inset: -28%; animation-duration: 34s; animation-direction: reverse; }
.c5-planete .orbite b { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 2px; background: var(--t4-corail); box-shadow: 0 0 14px var(--t4-corail); }
@keyframes c5-orbite { to { transform: rotateX(72deg) rotateZ(342deg); } }
.c5-planete.petite { width: 300px; right: 6%; top: 20%; opacity: .8; }
.c5-hud { position: absolute; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .1em; color: rgba(226,232,240,.6); }
.c5-hud.h1 { top: 120px; right: 6%; } .c5-hud.h2 { top: 46%; left: 5%; } .c5-hud.h3 { top: 64%; right: 4%; }
.c5-badge { font-family: 'Space Mono', monospace; font-size: 12.5px; letter-spacing: .14em; color: var(--t4-jaune); text-transform: uppercase; }
.c5-titre { font-size: clamp(44px, 7.4vw, 120px); line-height: .92; margin: 16px 0 26px; color: #f1f5f9 !important; max-width: 1100px; }
.c5-titre span { color: transparent; -webkit-text-stroke: 1px #e2e8f0; }
.c5-pied { display: flex; justify-content: space-between; gap: 30px; align-items: flex-end; flex-wrap: wrap; border-top: 1px solid rgba(226,232,240,.18); padding-top: 22px; }
.c5-pied p { max-width: 520px; margin: 0; color: rgba(226,232,240,.75); }
.c5-mission { padding: 110px 0; background: var(--t5-nuit, #020409); border-top: 1px solid rgba(226,232,240,.1); }
.c5-mission .t1-conteneur { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.c5-mission h2 { color: #f1f5f9; font-size: clamp(30px, 3.6vw, 52px); margin: 14px 0; } .c5-mission p { color: rgba(226,232,240,.7); max-width: 560px; }
.c5-radar { position: relative; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(226,232,240,.2); background: radial-gradient(circle, transparent 32%, rgba(226,232,240,.12) 33%, transparent 34%, transparent 65%, rgba(226,232,240,.12) 66%, transparent 67%); overflow: hidden; }
.c5-radar span { position: absolute; inset: 0; background: conic-gradient(from 0deg, color-mix(in srgb, var(--t4-jaune) 45%, transparent), transparent 22%); animation: c5-balaye 4s linear infinite; }
@keyframes c5-balaye { to { transform: rotate(360deg); } }
.c5-radar i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--t4-corail); box-shadow: 0 0 12px var(--t4-corail); animation: c5-bip 4s ease-in-out infinite; }
.c5-radar i:nth-child(2) { left: 30%; top: 28%; } .c5-radar i:nth-child(3) { left: 66%; top: 56%; animation-delay: 1.4s; } .c5-radar i:nth-child(4) { left: 42%; top: 72%; animation-delay: 2.6s; }
@keyframes c5-bip { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.c5-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 26px; border: 1px solid rgba(226,232,240,.18); }
.c5-chiffres > div { padding: 18px; border-left: 1px solid rgba(226,232,240,.18); } .c5-chiffres > div:first-child { border-left: 0; }
.c5-chiffres b { display: block; font-family: 'Space Mono', monospace; font-size: 34px; color: #f1f5f9; } .c5-chiffres span { font-family: 'Space Mono', monospace; font-size: 11.5px; color: rgba(226,232,240,.6); text-transform: uppercase; }
.ps-tete { padding: 150px 0 80px; } .ps-centre { position: relative; z-index: 2; } .ps-tete .t1-fil, .ps-tete .t1-fil a { color: rgba(226,232,240,.55); font-family: 'Space Mono', monospace; }
.ps-titre { font-size: clamp(40px, 6vw, 92px); line-height: .95; margin: 14px 0; color: #f1f5f9 !important; } .ps-mot { color: transparent; -webkit-text-stroke: 1px #e2e8f0; }
.ps-sous { color: rgba(226,232,240,.7); max-width: 620px; margin: 0; } .ps-puces { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.ps-puces span { display: inline-flex; gap: 8px; align-items: center; border: 1px solid rgba(226,232,240,.22); padding: 6px 12px; font-family: 'Space Mono', monospace; font-size: 12px; color: #e2e8f0; } .ps-puces svg { width: 15px; height: 15px; color: var(--t4-jaune); }
@media (max-width: 900px) { .c5-mission .t1-conteneur { grid-template-columns: 1fr; } .c5-radar { max-width: 320px; } .c5-hud { display: none; } .c5-planete { width: 80vw; right: -20%; top: 8%; opacity: .7; } .c5-chiffres { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .c5-etoiles i, .c5-planete *, .c5-radar * { animation: none !important; } }