/*!
 * THÈME 10 « ISOMÉTRIQUE » (12/10/2026) — code propriétaire. S'ajoute au socle du Thème 1.
 * Inspiré de « Align — AI Recruitment Platform 3D » (Dribbble).
 */
body.ns-theme10 { --t1-encre: #0f1b2d; --t1-creme: #eef1f4; background: #f3f5f7; font-family: 'DM Sans', 'main-font-family', system-ui, sans-serif; }
body.ns-theme10 h1, body.ns-theme10 h2, body.ns-theme10 .t1-titre-section { font-weight: 700; letter-spacing: -.04em; }
body.ns-theme10 .t1-serif { background: none; color: var(--t1-marque) !important; }
body.ns-theme10 .t1-formation, body.ns-theme10 .t2-fin, body.ns-theme10 .t2-avi, body.ns-theme10 .t2-membre, body.ns-theme10 .t2-une, body.ns-theme10 .t2-faq details, body.ns-theme10 .t2-access, body.ns-theme10 .t1-session, body.ns-theme10 .t7-carte, body.ns-theme10 .t7-formation, body.ns-theme10 .t8-kpi, body.ns-theme10 .t2-tuile, body.ns-theme10 .t1-carte-form { border: 0 !important; box-shadow: 0 1px 0 #fff inset, 0 18px 40px -26px rgba(15,27,45,.35) !important; border-radius: 20px; background: #fff; }
body.ns-theme10 .t1-btn.plein, body.ns-theme10 .t4-btn, body.ns-theme10 .t7-btn { border: 0 !important; box-shadow: 0 10px 20px -10px var(--t1-marque) !important; background: var(--t1-marque) !important; color: #fff !important; border-radius: 12px; }
body.ns-theme10 .t1-sur-titre { transform: none; box-shadow: none; border: 0; background: #fff; }
body.ns-theme10 .t2-defile { background: var(--t1-marque); color: #fff; border: 0; transform: none; }
.tx-actions { display: flex; gap: 12px; flex-wrap: wrap; } .tx-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 13px 22px; font-weight: 700; background: var(--t1-marque); color: #fff !important; box-shadow: 0 12px 24px -12px var(--t1-marque); }
.tx-btn svg { width: 16px; height: 16px; } .tx-btn.sec { background: #fff; color: #0f1b2d !important; box-shadow: 0 6px 16px -10px rgba(15,27,45,.4); }
.i10-heros { background: linear-gradient(180deg, #eef1f4, #f3f5f7); padding: 140px 0 60px; overflow: hidden; }
.i10-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.i10-puce { display: inline-block; background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--t1-marque); box-shadow: 0 6px 16px -10px rgba(15,27,45,.4); }
.i10-titre { font-size: clamp(40px, 5.2vw, 78px); line-height: 1; margin: 18px 0; color: #0f1b2d !important; } .i10-titre span { color: var(--t1-marque); }
.i10-lead { color: #4c5a6d; max-width: 520px; margin: 0 0 26px; font-size: 17px; }
.i10-scene { height: 480px; perspective: 1600px; display: grid; place-items: center; }
.i10-iso { position: relative; width: 420px; height: 420px; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-40deg); animation: i10-flotte 7s ease-in-out infinite; }
@keyframes i10-flotte { 50% { transform: rotateX(58deg) rotateZ(-40deg) translateZ(14px); } }
.i10-iso .tapis { position: absolute; inset: 0; border-radius: 22px; background: color-mix(in srgb, var(--t4-jaune) 70%, var(--t1-second)); background-image: linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px); background-size: 28px 28px; box-shadow: 0 0 0 10px color-mix(in srgb, var(--t4-jaune) 55%, var(--t1-second)), 30px 40px 60px -10px rgba(15,27,45,.35); }
.i10-iso .tablette { position: absolute; left: 70px; top: 60px; width: 280px; height: 200px; border-radius: 18px; background: #f8fafc; transform: translateZ(40px); box-shadow: -14px 18px 0 -2px #cbd5e1, -30px 40px 40px -10px rgba(15,27,45,.45); padding: 10px; }
.i10-iso .ecran { width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: #fff; position: relative; }
.i10-iso .ecran img { width: 100%; height: 70%; object-fit: cover; } .i10-iso .barre { padding: 6px 8px; } .i10-iso .barre b { font-size: 11px; color: #0f1b2d; display: block; }
.i10-iso .barre i { display: block; height: 5px; border-radius: 99px; margin-top: 5px; background: linear-gradient(90deg, var(--t1-marque) 62%, #e2e8f0 62%); }
.i10-iso .cube { position: absolute; width: 60px; height: 60px; border-radius: 12px; background: #fff; box-shadow: -10px 12px 0 -2px #dbe3ec, -18px 26px 30px -10px rgba(15,27,45,.4); }
.i10-iso .c1 { right: 30px; bottom: 50px; transform: translateZ(30px); background: var(--t4-corail); box-shadow: -10px 12px 0 -2px color-mix(in srgb, var(--t4-corail) 70%, #000), -18px 26px 30px -10px rgba(15,27,45,.4); animation: i10-saut 4s ease-in-out infinite; }
.i10-iso .c2 { left: 30px; bottom: 30px; width: 40px; height: 40px; transform: translateZ(20px); animation: i10-saut 5s ease-in-out infinite -2s; }
@keyframes i10-saut { 50% { translate: 0 0 30px; } }
.i10-ecrans { padding: 100px 0; }
.i10-appareils { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.i10-appareil { background: #fff; border-radius: 22px; padding: 26px; display: grid; gap: 8px; box-shadow: 0 18px 40px -26px rgba(15,27,45,.35); }
.i10-appareil .volume { height: 150px; display: grid; place-items: center; perspective: 600px; margin-bottom: 8px; }
.i10-appareil .volume span { display: grid; place-items: center; width: 90px; height: 120px; border-radius: 16px; background: linear-gradient(135deg, #fff, #e8eef5); transform: rotateX(30deg) rotateZ(-20deg); box-shadow: -10px 14px 0 -2px #cbd5e1, -20px 30px 30px -10px rgba(15,27,45,.35); color: var(--t1-marque); transition: transform .5s; }
.i10-appareil .v1 span { width: 130px; height: 100px; } .i10-appareil .v2 span { width: 150px; height: 90px; }
.i10-appareil:hover .volume span { transform: rotateX(20deg) rotateZ(-10deg) translateY(-8px); } .i10-appareil .volume svg { width: 34px; height: 34px; }
.i10-appareil b { font-size: 18px; color: #0f1b2d; } .i10-appareil small { color: #4c5a6d; }
.ps-tete { position: relative; padding: 150px 0 70px; background: linear-gradient(180deg, #eef1f4, #f3f5f7); overflow: hidden; }
.i10-quadrillage { position: absolute; right: -10%; top: 0; width: 60%; height: 100%; background-image: linear-gradient(color-mix(in srgb, var(--t1-marque) 18%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--t1-marque) 18%, transparent) 1px, transparent 1px); background-size: 34px 34px; transform: perspective(800px) rotateX(50deg) rotateZ(-30deg); opacity: .7; }
.ps-centre { position: relative; } .ps-tete .t1-fil, .ps-tete .t1-fil a { color: #6b7a8d; } .ps-titre { font-size: clamp(38px, 5vw, 72px); color: #0f1b2d !important; margin: 14px 0; } .ps-mot { color: var(--t1-marque); }
.ps-sous { color: #4c5a6d; max-width: 600px; 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; background: #fff; border-radius: 10px; padding: 7px 13px; font-size: 13.5px; box-shadow: 0 6px 14px -10px rgba(15,27,45,.4); } .ps-puces svg { width: 15px; height: 15px; color: var(--t1-marque); }
@media (max-width: 900px) { .i10-grille, .i10-appareils { grid-template-columns: 1fr; } .i10-scene { height: 340px; } .i10-iso { width: 300px; height: 300px; } .i10-iso .tablette { left: 40px; width: 210px; height: 150px; } }
@media (prefers-reduced-motion: reduce) { .i10-iso, .i10-iso .cube { animation: none; } }
/* Lisibilité (12/10/2026) : les tuiles de couleur gardent un fond foncé sous leur texte blanc. */
body.ns-theme10 .t2-tuile.marque { background: var(--t1-marque) !important; } body.ns-theme10 .t2-tuile.sombre { background: var(--t5-nuit, #0b1020) !important; }
body.ns-theme10 .t2-tuile.marque h3, body.ns-theme10 .t2-tuile.marque p, body.ns-theme10 .t2-tuile.sombre h3 { color: #fff !important; } body.ns-theme10 .t2-tuile.sombre p { color: rgba(255,255,255,.75) !important; }
body.ns-theme10 .t2-appel { box-shadow: none !important; border: 0 !important; } body.ns-theme10 .t2-appel .t1-serif, body.ns-theme10 .t2-appel h2 .t1-serif { color: #fff !important; opacity: .85; -webkit-text-fill-color: #fff; background: none !important; }