/* Habillage partagé du parcours membre : aucun changement aux actions ou à la grille. */
@property --portal-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
body[data-portal-page] {
    isolation: isolate;
    background: radial-gradient(ellipse at 12% 0%, rgba(27, 94, 209, .28), transparent 48%),
        radial-gradient(ellipse at 95% 30%, rgba(117, 50, 188, .2), transparent 44%),
        linear-gradient(145deg, #07101f, #0b1428 52%, #080b18);
    color: #e9eef9;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body[data-portal-page]::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at 65% 5%, rgba(70, 156, 255, .12), transparent 45%),
        linear-gradient(rgba(126, 164, 232, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126, 164, 232, .035) 1px, transparent 1px);
    background-size: auto, 48px 48px, 48px 48px;
    animation: portal-atmosphere 22s ease-in-out infinite alternate;
}
body[data-portal-page] :is(.box, .support-box, .card:not(.alert), .plan, .game-card, .hero),
body[data-portal-page="create_instance"] #create-instance-form {
    background: linear-gradient(145deg, rgba(24, 38, 66, .94), rgba(8, 15, 31, .96));
    border: 1px solid rgba(128, 164, 229, .25);
    box-shadow: 0 22px 60px rgba(0,0,0,.32), 0 0 28px rgba(61, 116, 236, .06), inset 0 1px 0 rgba(255,255,255,.08);
    border-radius: 20px;
}
body[data-portal-page] .portal-frame { position: relative; }
.portal-border, .portal-light { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.portal-border {
    padding: 1px; background: conic-gradient(from var(--portal-angle), transparent 12%, #44baff 23%, transparent 36%, transparent 60%, #d354ff 73%, #f64765 78%, transparent 92%);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
    opacity: .65; animation: portal-border-orbit 10s linear infinite;
}
.portal-light { opacity: 0; background: radial-gradient(340px circle at var(--portal-x, 50%) var(--portal-y, 0%), rgba(81, 154, 255, .12), transparent 70%); transition: opacity .3s ease; }
.portal-frame:hover > .portal-light { opacity: 1; }
body[data-portal-page] :is(h1, .header h1) { color: #f3f7ff; letter-spacing: -.025em; text-shadow: 0 0 28px rgba(96, 165, 250, .2); }
body[data-portal-page] :is(.box, .support-box, .top) h1 { font-size: clamp(25px, 3vw, 36px); line-height: 1.2; }
body[data-portal-page] :is(.intro, .muted, .game-description) { color: #b9c8e2; }
body[data-portal-page] :is(.box, .support-box, #create-instance-form) input:not([type="checkbox"]):not([type="hidden"]),
body[data-portal-page] :is(.box, .support-box, #create-instance-form) select,
body[data-portal-page] :is(.box, .support-box, #create-instance-form) textarea {
    box-sizing: border-box; color: #f1f5ff; background: rgba(3, 10, 24, .68);
    border: 1px solid rgba(122, 155, 210, .32); border-radius: 11px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.18);
}
body[data-portal-page] :is(input, textarea)::placeholder { color: #92a6c8; opacity: 1; }
body[data-portal-page] select option { color: #e9eef9; background: #101b30; }
body[data-portal-page] :is(.box, .support-box, #create-instance-form) :is(input, select, textarea):focus-visible {
    outline: 2px solid #6bbdff; outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(68, 140, 245, .13);
}
body[data-portal-page] :is(.btn-primary, .support-box .submit, .box button[type="submit"], #create-instance-form > button):not(:disabled) {
    color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.15), transparent 52%), linear-gradient(115deg, #075ddc, #0442ad 55%, #08718d);
    border: 1px solid rgba(91, 192, 255, .7); border-radius: 11px;
    box-shadow: 0 0 20px rgba(40,145,255,.22), inset 0 1px 0 rgba(255,255,255,.22);
}
body[data-portal-page] .support-box .mailto-button {
    background: linear-gradient(115deg, #7137d3, #6424ab 55%, #aa246e);
    border: 1px solid #b185e8; border-radius: 11px; box-shadow: 0 0 20px rgba(160,71,255,.2);
}
body[data-portal-page] .btn-manage:not(:disabled) {
    background: linear-gradient(115deg, #7137d3, #6424ab 55%, #aa246e); color: white;
    box-shadow: 0 0 16px rgba(141,72,239,.2);
}
body[data-portal-page] :is(.btn, button, .back):focus-visible { outline: 2px solid #8cd2ff; outline-offset: 3px; }
body[data-portal-page] :is(.dashboard-quick-stat, .admin-stat) {
    background: linear-gradient(145deg, rgba(35,57,96,.65), rgba(8,17,34,.8));
    border: 1px solid rgba(120,163,235,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
body[data-portal-page] .server-game-image { box-shadow: 0 6px 20px rgba(0,0,0,.25); }
body[data-portal-page] .plan .price { color: #8ccfff; text-shadow: 0 0 24px rgba(91,164,255,.25); }
body[data-portal-page="support"] .support-box { padding: clamp(24px, 5vw, 42px); }
body[data-portal-page="support"] .support-box h1::before {
    content: ''; display: block; width: 52px; height: 52px; margin: 0 auto 18px;
    background: #89ccff; mask: url('/assets/icons/support.svg') center / contain no-repeat;
}
body[data-portal-page="support"] .intro { max-width: 570px; margin-left: auto; margin-right: auto; }
body[data-portal-page="support"] label { color: #e0eafa; font-size: 14px; }
body[data-portal-page="support"] input[type="file"] { border-style: dashed !important; padding: 16px !important; }
body[data-portal-page="support"] input[type="file"]::file-selector-button {
    background: #273e68; color: #e9f3ff; border: 1px solid #668abf; border-radius: 7px; padding: 8px 12px; margin-right: 12px; cursor: pointer;
}
body[data-portal-page] .portal-action { position: relative; }
.portal-action > .portal-border { opacity: .9; padding: 1px; animation-duration: 6s; }
@keyframes portal-border-orbit { to { --portal-angle: 360deg; } }
@keyframes portal-atmosphere { to { opacity: .65; background-position: center, 24px 24px, 24px 24px; } }
@media (hover: hover) and (pointer: fine) {
    body[data-portal-page] :is(.plan, .game-card, .dashboard-quick-stat):hover { border-color: rgba(105,187,255,.65); box-shadow: 0 12px 32px rgba(25,88,186,.17); }
}
@media (max-width: 600px) {
    body[data-portal-page="login"] { margin: 0; padding: 20px; box-sizing: border-box; }
    body[data-portal-page] .box { box-sizing: border-box; max-width: 100%; padding: 28px 22px; }
    body[data-portal-page] .support-box .actions :is(.submit, .mailto-button) { flex-basis: auto; }
}
@media (prefers-reduced-motion: reduce) {
    body[data-portal-page]::before { animation: none; }
    .portal-border, .portal-light { display: none; }
}

/* Signature du logo harmonisée avec l’accueil. */
body[data-portal-page] .portal-logo-panel {
    position: relative; display: block; box-sizing: border-box;
    width: min(620px, 100%); max-width: 100%; margin: 0 auto 28px;
    padding: 14px 20px 24px; overflow: hidden; text-align: center; text-decoration: none;
    border: 1px solid rgba(239,35,60,.2); border-radius: 20px;
    background: linear-gradient(145deg, rgba(15,24,42,.70), rgba(5,10,21,.78));
    box-shadow: 0 0 36px rgba(78,117,235,.18), 0 18px 42px rgba(0,0,0,.25);
}
body[data-portal-page] .portal-logo-panel > img {
    position: relative; z-index: 1; display: block; width: 100%; max-width: 100%; height: auto;
    margin: 0; border-radius: 14px; box-shadow: none;
    filter: drop-shadow(0 0 20px rgba(83,153,255,.2)); animation: portal-logo-float 6s ease-in-out infinite;
}
.portal-logo-caption {
    position: relative; z-index: 1; display: block; margin-top: 12px;
    color: #8bbfff; font-size: clamp(12px, 1.2vw, 17px); font-weight: 800;
    letter-spacing: .13em; line-height: 1.6; text-transform: uppercase;
}
.portal-logo-panel > .portal-border { padding: 2px; opacity: .9; animation-duration: 5s; }
.portal-logo-orbit {
    position: absolute; left: 12%; top: -55px; width: 76%; height: 190px; pointer-events: none;
    border: 1px solid transparent; border-top-color: rgba(75,185,255,.65); border-bottom-color: rgba(177,94,255,.4);
    border-radius: 50%; box-shadow: 0 -5px 25px rgba(70,136,255,.22);
    animation: portal-logo-orbit 10s linear infinite;
}
.portal-logo-orbit-secondary { left: 19%; width: 62%; border-top-color: rgba(247,77,134,.5); animation-duration: 14s; animation-direction: reverse; }
.portal-logo-scan {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(135,203,255,.10) 48%, rgba(255,255,255,.13) 50%, transparent 63%);
    animation: portal-logo-scan 8s ease-in-out infinite;
}
@keyframes portal-logo-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -18px; } }
@keyframes portal-logo-orbit { from { transform: rotateX(58deg) rotateZ(0deg); } to { transform: rotateX(58deg) rotateZ(360deg); } }
@keyframes portal-logo-scan { 0%,18% { transform: translateX(-110%); } 55%,100% { transform: translateX(110%); } }
@media (max-width: 600px) { body[data-portal-page] .portal-logo-panel { padding: 12px 14px 18px; } }
@media (prefers-reduced-motion: reduce) {
    .portal-logo-orbit, .portal-logo-scan { display: none; }
    body[data-portal-page] .portal-logo-panel > img { animation: none; }
}