/* Accueil : maquettes d'interface, aide au choix et publics, sur le thème de la vitrine. */
.playnest-site .pn-home-status { position: absolute; z-index: 2; top: 40px; right: 6%; display: grid; gap: 4px; width: 190px; padding: 16px 18px; background: #fff; border-radius: 14px; box-shadow: 0 20px 45px #425c8924; transform: rotate(3deg); }
.playnest-site .pn-home-status > span { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 9px; border-radius: 999px; background: #e8f2ee; color: #477c72; font-size: 10px; font-weight: 700; }
.playnest-site .pn-home-status > span i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pn-home-pulse 2s ease-in-out infinite; }
.playnest-site .pn-home-status strong { margin-top: 6px; font-size: 15px; color: #334461; }
.playnest-site .pn-home-status small { font-size: 10px; color: #8b98ae; }
.playnest-site .pn-home-status div { display: flex; align-items: center; margin-top: 10px; }
.playnest-site .pn-home-status b { display: grid; place-items: center; width: 26px; height: 26px; margin-right: -6px; border-radius: 8px; border: 2px solid #fff; background: #bcc8e1; color: #4f6286; font-size: 11px; }
.playnest-site .pn-home-status b:nth-child(2) { background: #efd1a7; color: #8d6a3d; }
.playnest-site .pn-home-status b:nth-child(3) { background: #f5c9b8; color: #9a5642; }
.playnest-site .pn-home-status em { margin-left: 14px; font-style: normal; font-size: 10px; color: #8b98ae; }
@keyframes pn-home-pulse { 50% { opacity: .35; } }

.playnest-site .pn-home-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.playnest-site .pn-home-features article { padding: 22px 22px 24px; background: #fff; border: 1px solid #dde1e8; border-radius: 14px; transition: transform .2s, box-shadow .2s; }
.playnest-site .pn-home-features article:hover { transform: translateY(-3px); box-shadow: 0 16px 40px #202e4310; }
.playnest-site .pn-home-features h3 { font-size: 17px; letter-spacing: -.3px; color: #26354e; margin: 20px 0 8px; }
.playnest-site .pn-home-features p { font-size: 13px; line-height: 1.75; color: #7b8595; margin: 0; }

.playnest-site .pn-home-mock { display: grid; gap: 7px; min-height: 118px; padding: 14px; border-radius: 11px; background: #f3f5fa; border: 1px solid #e8edf4; align-content: center; }
.playnest-site .pn-home-mock span { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: #5c6c86; }
.playnest-site .pn-home-mock.is-console { background: #25344e; border-color: #25344e; }
.playnest-site .pn-home-mock.is-console span { font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; color: #afbed3; }
.playnest-site .pn-home-mock.is-console span::before { content: "> "; color: #7389ad; }
.playnest-site .pn-home-mock.is-console b { color: #f4c3ad; font-weight: 600; }
.playnest-site .pn-home-mock.is-players span, .playnest-site .pn-home-mock.is-rights span, .playnest-site .pn-home-mock.is-backups span, .playnest-site .pn-home-mock.is-files span { padding: 7px 10px; background: #fff; border-radius: 8px; }
.playnest-site .pn-home-mock.is-players b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #bcc8e1; color: #4f6286; font-size: 10px; }
.playnest-site .pn-home-mock.is-players span:nth-child(2) b { background: #efd1a7; color: #8d6a3d; }
.playnest-site .pn-home-mock.is-players i { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #477c72; }
.playnest-site .pn-home-mock.is-players .is-off { background: transparent; border: 1px dashed #c9d2e2; color: #8b98ae; }
.playnest-site .pn-home-mock.is-players .is-off b { background: #e6eaf2; color: #8b98ae; }
.playnest-site .pn-home-mock.is-backups i { width: 8px; height: 8px; border-radius: 50%; background: #8198f0; }
.playnest-site .pn-home-mock.is-backups .is-new { background: transparent; border: 1px dashed #c9d2e2; color: #3d5ee8; }
.playnest-site .pn-home-mock.is-backups .is-new i { background: #e98770; }
.playnest-site .pn-home-mock.is-files span { font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; color: #5c6c86; }
.playnest-site .pn-home-mock.is-files span:last-child { color: #d0634b; }
.playnest-site .pn-home-mock.is-schedule span { display: grid; grid-template-columns: 30px 1fr; font: 600 10px ui-monospace, monospace; color: #8c9db6; }
.playnest-site .pn-home-mock.is-schedule span::after { content: ""; height: 11px; border-radius: 999px; background: linear-gradient(90deg, transparent var(--from), #3d5ee8 var(--from), #8198f0 var(--to), #e6e9f0 var(--to)); }
.playnest-site .pn-home-mock.is-schedule span:last-child::after { background: linear-gradient(90deg, transparent var(--from), #e98770 var(--from), #f2b69a var(--to), #e6e9f0 var(--to)); }
.playnest-site .pn-home-mock.is-rights span { justify-content: space-between; }
.playnest-site .pn-home-mock.is-rights i { position: relative; flex: 0 0 28px; height: 16px; border-radius: 999px; background: #dfe3ea; }
.playnest-site .pn-home-mock.is-rights i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.playnest-site .pn-home-mock.is-rights .is-on i { background: #477c72; }
.playnest-site .pn-home-mock.is-rights .is-on i::after { left: 14px; }

.playnest-site .pn-home-sizer { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(200px, 1.2fr); align-items: center; gap: 10px 28px; margin-bottom: 22px; padding: 18px 22px; background: #fff; border: 1px solid #dde1e8; border-radius: 14px; }
.playnest-site .pn-home-sizer[hidden] { display: none; }
.playnest-site .pn-home-sizer label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 650; color: #26354e; }
.playnest-site .pn-home-sizer output { font-size: 20px; font-weight: 750; letter-spacing: -.5px; color: #3d5ee8; white-space: nowrap; }
.playnest-site .pn-home-sizer input { width: 100%; accent-color: #3d5ee8; }
.playnest-site .pn-home-sizer p { grid-column: 1 / -1; margin: 0; font-size: 13px; color: #6f7a8c; }
.playnest-site .pn-offer { position: relative; transition: border-color .2s, box-shadow .2s, transform .2s; }
.playnest-site .pn-offer.is-fit { border-color: #3d5ee8; box-shadow: 0 16px 40px #3d5ee81f; transform: translateY(-4px); }
.playnest-site .pn-home-fit { position: absolute; top: -11px; left: 26px; padding: 4px 11px; border-radius: 999px; background: #3d5ee8; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .3px; }

.playnest-site .pn-home-audiences { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.playnest-site .pn-home-audiences a { display: flex; flex-direction: column; padding: 28px 26px; border-radius: 18px; text-decoration: none; color: inherit; background: #eaeef3; transition: transform .2s, box-shadow .2s; }
.playnest-site .pn-home-audiences a:nth-child(2) { background: #f0e7df; }
.playnest-site .pn-home-audiences a:nth-child(3) { background: #e6eee9; }
.playnest-site .pn-home-audiences a:hover { transform: translateY(-4px); box-shadow: 0 18px 45px #202e4312; }
.playnest-site .pn-home-audiences .pn-kicker { margin: 22px 0 10px; }
.playnest-site .pn-home-audiences h3 { font-size: 21px; line-height: 1.3; letter-spacing: -.6px; color: #26354e; margin: 0 0 12px; }
.playnest-site .pn-home-audiences p:not(.pn-kicker) { font-size: 13px; line-height: 1.75; color: #6f7a8c; margin: 0 0 20px; }
.playnest-site .pn-home-audiences em { margin-top: auto; font-style: normal; font-size: 12px; font-weight: 700; color: #202e43; }
.playnest-site .pn-home-audience-art { display: flex; align-items: center; height: 64px; font-size: 52px; line-height: 1; }
.playnest-site .pn-home-audience-art.is-friends b { display: grid; place-items: center; width: 48px; height: 54px; margin-right: -10px; border-radius: 14px; border: 4px solid #eaeef3; background: #bcc8e1; color: #6f82a6; font-size: 28px; font-weight: 400; }
.playnest-site .pn-home-audience-art.is-friends b:nth-child(2) { background: #efd1a7; color: #b28c5a; transform: translateY(8px); }
.playnest-site .pn-home-audience-art.is-friends b:nth-child(3) { background: #f5c9b8; color: #b56c55; }
.playnest-site .pn-home-audience-art.is-family { color: #ce927f; transform: rotate(-12deg); transform-origin: left center; }
.playnest-site .pn-home-audience-art.is-community { color: #477c72; }
.playnest-site .pn-home-faq-note { margin: 20px 0 0; font-size: 13px; color: #7d8694; }

/* The other Atelink brands, laid out like the audience cards. */
.playnest-site .pn-home-brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.playnest-site .pn-home-brands a { display: flex; flex-direction: column; padding: 28px 26px; border: 1px solid #e5e0d7; border-radius: 18px; text-decoration: none; color: inherit; background: #fffdf9; transition: transform .2s, box-shadow .2s, border-color .2s; }
.playnest-site .pn-home-brands a:hover { transform: translateY(-4px); box-shadow: 0 18px 45px #202e4312; border-color: var(--brand-line); }
.playnest-site .pn-home-brands .is-newscloud { --brand-line: #316b57; }
.playnest-site .pn-home-brands .is-dowebo { --brand-line: #145cff; }
.playnest-site .pn-home-brands .is-virtana { --brand-line: #392d46; }
.playnest-site .pn-home-brands img { width: 56px; height: 56px; border-radius: 15px; }
.playnest-site .pn-home-brands .is-dowebo img { border: 1px solid #e5e0d7; }
.playnest-site .pn-home-brands .pn-kicker { flex-wrap: wrap; margin: 22px 0 10px; }
.playnest-site .pn-home-brands .pn-kicker b { padding: 2px 8px; border-radius: 999px; background: #fdf3df; color: #392d46; font-weight: 700; letter-spacing: .8px; }
.playnest-site .pn-home-brands h3 { font-size: 21px; line-height: 1.3; letter-spacing: -.6px; color: #26354e; margin: 0 0 12px; }
.playnest-site .pn-home-brands p:not(.pn-kicker) { font-size: 13px; line-height: 1.75; color: #6f7a8c; margin: 0 0 20px; }
.playnest-site .pn-home-brands em { margin-top: auto; font-style: normal; font-size: 12px; font-weight: 700; color: #202e43; }

@media (max-width: 1050px) {
    .playnest-site .pn-home-features, .playnest-site .pn-home-audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .playnest-site .pn-home-brands { grid-template-columns: 1fr; max-width: 620px; }
    .playnest-site .pn-home-status { top: 30px; right: 0; }
}
@media (max-width: 760px) {
    .playnest-site .pn-home-features, .playnest-site .pn-home-audiences { grid-template-columns: 1fr; }
    .playnest-site .pn-home-status { width: 160px; padding: 12px 14px; top: 20px; }
    .playnest-site .pn-home-sizer { grid-template-columns: 1fr; padding: 16px; }
}