/* ============================================================
   Thème "Windows XP / Internet Explorer 6" — fait exprès rétro
   et légèrement pénible. Bienvenue en 2003.
   ============================================================ */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #235; /* bleu XP "desktop" */
    background-image: radial-gradient(circle at 50% 0%, #5b8ac6 0%, #1a3b6b 60%, #0e2648 100%);
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    color: #000;
}

/* ---------- Fenêtre Internet Explorer ---------- */

.ie-window {
    max-width: 780px;
    margin: 24px auto;
    background: #ece9d8;
    border: 1px solid #0a246a;
    box-shadow: 3px 3px 10px rgba(0,0,0,.5);
}

.ie-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 4px 3px 6px;
    background: linear-gradient(180deg, #2657d6 0%, #3d7cf4 8%, #2657d6 40%, #1941c9 60%, #123fae 100%);
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    text-shadow: 1px 1px 1px rgba(0,0,0,.4);
    user-select: none;
}

.ie-titlebar .ie-title {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ie-titlebar .ie-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.ie-window-buttons {
    display: flex;
    gap: 2px;
}

.ie-window-buttons button {
    width: 21px;
    height: 19px;
    background: linear-gradient(180deg,#5b8ff0,#1a45c0);
    border: 1px solid #0a246a;
    border-radius: 2px;
    color: #fff;
    font-weight: bold;
    font-size: 11px;
    cursor: pointer;
    line-height: 1;
}
.ie-window-buttons button.close {
    background: linear-gradient(180deg,#f0736b,#c21b0e);
}
.ie-window-buttons button:active {
    filter: brightness(0.85);
}

.ie-menubar {
    display: flex;
    gap: 14px;
    padding: 3px 8px;
    background: #ece9d8;
    border-bottom: 1px solid #b9b6a3;
    font-size: 11px;
}
.ie-menubar span {
    cursor: default;
}
.ie-menubar span:hover {
    background: #316ac5;
    color: #fff;
    padding: 0 3px;
    margin: 0 -3px;
}

.ie-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #ece9d8;
    border-bottom: 1px solid #b9b6a3;
}

.ie-toolbar .ie-tbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    color: #444;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: not-allowed;
    opacity: .55;
}
.ie-toolbar .ie-tbtn .glyph {
    font-size: 15px;
}

.ie-addressbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #ece9d8;
    border-bottom: 1px solid #b9b6a3;
    font-size: 11px;
}
.ie-addressbar .label {
    font-weight: bold;
}
.ie-addressbar .bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #7f9db9;
    padding: 2px 6px;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
}
.ie-addressbar .go {
    background: linear-gradient(180deg,#f8f7f1,#d9d6c3);
    border: 1px solid #8f8b76;
    padding: 2px 10px;
    cursor: default;
}

.ie-content {
    background: #fff;
    min-height: 380px;
    padding: 18px 24px 24px;
    border-bottom: 1px solid #b9b6a3;
}

.ie-statusbar {
    display: flex;
    justify-content: space-between;
    padding: 3px 10px;
    background: #ece9d8;
    font-size: 11px;
    color: #333;
}

/* ---------- Contenu ---------- */

h1.party-title {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    color: #123fae;
    text-align: center;
    font-size: 28px;
    margin: 4px 0 2px;
}

.party-subtitle {
    text-align: center;
    color: #555;
    margin-bottom: 18px;
    font-style: italic;
}

.blink {
    animation: blink 1s steps(1) infinite;
}
@keyframes blink {
    50% { opacity: 0; }
}

.marquee-wrap {
    overflow: hidden;
    white-space: nowrap;
    background: #ffff99;
    border: 1px dashed #999;
    padding: 4px 0;
    margin-bottom: 14px;
}
.marquee-wrap span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 14s linear infinite;
    font-weight: bold;
    color: #a00;
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.guest-profiles {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin: 18px 0;
    flex-wrap: wrap;
}
.guest-card-link {
    text-decoration: none;
    cursor: pointer;
}
.guest-card {
    border: 1px solid #7f9db9;
    background: #f4f6fb;
    width: 190px;
    padding: 10px;
    text-align: center;
    transition: background 0.1s, box-shadow 0.1s;
}
.guest-card-link:hover .guest-card {
    background: #e4ecfb;
    box-shadow: 0 0 0 1px #123fae inset;
}
.guest-card .icon {
    font-size: 34px;
}
.guest-card h3 {
    margin: 6px 0 2px;
    font-size: 13px;
    color: #123fae;
}
.guest-card p {
    font-size: 11px;
    color: #333;
    margin: 0;
}

/* ---------- Boutons style Windows XP classique ---------- */

.xp-button, button.xp-button, input[type="submit"].xp-button {
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    background: linear-gradient(180deg,#fdfdfd 0%,#ece9d8 45%,#d9d6c3 55%,#c9c6b1 100%);
    border: 1px solid #003c74;
    border-radius: 3px;
    padding: 6px 18px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 #fff;
}
.xp-button:active {
    background: linear-gradient(180deg,#c9c6b1,#ece9d8);
}
.xp-button.big {
    font-size: 15px;
    font-weight: bold;
    padding: 10px 26px;
    display: block;
    margin: 20px auto 0;
}

/* ---------- Formulaire ---------- */

.xp-fieldset {
    border: 1px solid #7f9db9;
    padding: 12px 16px 16px;
    margin-bottom: 14px;
}
.xp-fieldset legend {
    font-weight: bold;
    color: #123fae;
    padding: 0 6px;
}
.xp-row {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.xp-row label {
    width: 220px;
    flex-shrink: 0;
    font-size: 12px;
}
.xp-input, textarea.xp-input {
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    border: 1px solid #7f9db9;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,.3);
    padding: 3px 5px;
    flex: 1;
    background: #fff;
}
.xp-radio-group label {
    width: auto;
    margin-right: 14px;
    font-size: 12px;
}

/* ---------- MessageBox (la vraie star du thème) ---------- */

.xp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.xp-messagebox {
    width: 360px;
    background: #ece9d8;
    border: 1px solid #0a246a;
    box-shadow: 4px 4px 14px rgba(0,0,0,.6);
    font-family: Tahoma, sans-serif;
}
.xp-messagebox .mb-titlebar {
    background: linear-gradient(180deg, #2657d6 0%, #3d7cf4 8%, #2657d6 40%, #1941c9 60%, #123fae 100%);
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    padding: 3px 6px;
    display: flex;
    justify-content: space-between;
}
.xp-messagebox .mb-titlebar .mb-x {
    background: linear-gradient(180deg,#f0736b,#c21b0e);
    border: 1px solid #7a0d05;
    color: #fff;
    width: 18px;
    height: 16px;
    line-height: 14px;
    text-align: center;
    font-size: 10px;
    cursor: pointer;
}
.xp-messagebox .mb-body {
    display: flex;
    gap: 14px;
    padding: 18px 18px 8px;
    align-items: flex-start;
}
.xp-messagebox .mb-icon {
    font-size: 32px;
    line-height: 1;
}
.xp-messagebox .mb-text {
    font-size: 12px;
    padding-top: 4px;
}
.xp-messagebox .mb-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 12px 12px 16px;
}
.xp-messagebox .mb-actions .xp-button {
    min-width: 76px;
}

/* ---------- Barre de progression façon "installation Windows" ---------- */

.xp-progress-wrap {
    text-align: center;
    padding: 40px 20px;
}
.xp-progress-bar {
    width: 320px;
    height: 20px;
    margin: 16px auto 0;
    background: #fff;
    border: 1px solid #7f9db9;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,.3);
    overflow: hidden;
    position: relative;
}
.xp-progress-bar .fill {
    position: absolute;
    top: 0; left: -40%;
    width: 40%;
    height: 100%;
    background: repeating-linear-gradient(90deg, #1941c9 0 8px, #3d7cf4 8px 16px);
    animation: xp-loading 1.1s linear infinite;
}
@keyframes xp-loading {
    0% { left: -40%; }
    100% { left: 100%; }
}

/* ---------- Assistant façon "Clippy" ---------- */

.clippy {
    position: fixed;
    bottom: 14px;
    right: 18px;
    max-width: 230px;
    background: #ffffe1;
    border: 1px solid #000;
    padding: 10px 12px;
    font-size: 11px;
    box-shadow: 3px 3px 8px rgba(0,0,0,.4);
    z-index: 500;
}
.clippy::before {
    content: "📎";
    font-size: 22px;
    position: absolute;
    right: -6px;
    bottom: -26px;
}
.clippy .clippy-close {
    float: right;
    cursor: pointer;
    font-weight: bold;
    margin-left: 8px;
}

/* ---------- Fausse pub pop-under ---------- */

.fake-ad {
    position: fixed;
    top: 40px;
    left: 40px;
    width: 260px;
    background: linear-gradient(135deg,#ffe259,#ffa751);
    border: 3px solid #a00;
    padding: 14px;
    font-weight: bold;
    text-align: center;
    color: #900;
    z-index: 400;
    box-shadow: 4px 4px 12px rgba(0,0,0,.5);
}
.fake-ad .fake-ad-close {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 10px;
    color: #333;
    cursor: pointer;
    background: #ddd;
    border: 1px solid #999;
    width: 12px;
    height: 12px;
    line-height: 10px;
    text-align: center;
}

/* ---------- Explorateur de fichiers (liste des invités) ---------- */

table.xp-explorer {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
table.xp-explorer th {
    background: linear-gradient(180deg,#fefefe,#e3e1d3);
    border: 1px solid #b9b6a3;
    padding: 5px 8px;
    text-align: left;
}
table.xp-explorer td {
    border: 1px solid #e5e3d8;
    padding: 5px 8px;
}
table.xp-explorer tr:nth-child(even) td {
    background: #f4f6fb;
}
table.xp-explorer tr:hover td {
    background: #316ac5;
    color: #fff;
}

.errorlist {
    display: none; /* les erreurs Django classiques sont désactivées : une seule à la fois, façon messagebox ! */
}

a {
    color: #00f;
}
a:visited {
    color: #609;
}

.scam-popup {
    position: fixed;
    top: 60px;
    right: 30px;
    width: 220px;
    background: linear-gradient(135deg, #ffee00, #ff3d00);
    border: 3px solid #b30000;
    padding: 14px;
    text-align: center;
    font-weight: bold;
    color: #7a0000;
    z-index: 600;
    box-shadow: 4px 4px 14px rgba(0,0,0,.6);
    animation: scamBlink 1s infinite;
    cursor: pointer;
}
@keyframes scamBlink {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}
.scam-popup .scam-close {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 10px;
    color: #333;
    cursor: pointer;
    background: #ddd;
    border: 1px solid #999;
    width: 12px;
    height: 12px;
    line-height: 10px;
    text-align: center;
}
.scam-popup a {
    color: #7a0000;
    text-decoration: none;
    display: block;
}
/* ==========================================================
   Blocage volontaire des petits écrans (téléphones, tablettes) :
   "à l'époque", ces appareils n'existaient pas encore. On cache
   la fenêtre IE et on affiche un faux écran d'erreur à la place.
   ========================================================== */

/* ==========================================================
   Blocage volontaire des petits écrans (téléphones, tablettes) :
   "à l'époque", ces appareils n'existaient pas encore. On cache
   la fenêtre IE et on affiche un faux écran d'erreur à la place
   — pendant 10 secondes seulement, puis on laisse entrer.
   ========================================================== */

.mobile-block {
    display: none;
}

@media (max-width: 900px), (pointer: coarse) {
    body:not(.xp-mobile-unlocked) .ie-window {
        display: none !important;
    }
    body:not(.xp-mobile-unlocked) .clippy,
    body:not(.xp-mobile-unlocked) .fake-ad,
    body:not(.xp-mobile-unlocked) .scam-popup {
        display: none !important;
    }
    body:not(.xp-mobile-unlocked) .mobile-block {
        display: flex;
        position: fixed;
        inset: 0;
        align-items: center;
        justify-content: center;
        background: #123fae;
        padding: 24px;
    }
    .mobile-block-box {
        background: #ece9d8;
        border: 1px solid #0a246a;
        box-shadow: 4px 4px 14px rgba(0,0,0,.6);
        width: auto;
        text-align: center;
        font-family: Tahoma, sans-serif;
        height: 80%;
        max-height: 90%;
    }
    .mobile-block-icon {
        font-size: 40px;
        margin-bottom: 10px;
    }
    .mobile-block-title {
        font-weight: bold;
        color: #123fae;
        font-size: xx-large;
        margin-bottom: 10px;
    }
    .mobile-block-text {
        font-size: large;
        color: #333;
        margin-bottom: 14px;
    }
    .mobile-block-countdown {
        font-size: x-large;
        color: #123fae;
        font-weight: bold;
    }
}