:root {
  --mi-rose:    #8b5e52;
  --mi-rose-l:  #f5ede9;
  --mi-gold:    #c9a84c;
  --mi-text:    #3a2820;
  --mi-muted:   #7a6058;
  --mi-border:  #e0d0ca;
  --mi-bg:      #fdf8f5;
  --mi-radius:  10px;
  --mi-shadow:  0 4px 20px rgba(139,94,82,.12);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
.mi-wrap{max-width:680px;margin:0 auto;padding:20px 16px 60px;font-family:'Georgia',serif;color:var(--mi-text);}
.mi-header{text-align:center;padding:40px 20px 30px;background:linear-gradient(160deg,var(--mi-rose-l),#fff);border-radius:var(--mi-radius);margin-bottom:30px;border:1px solid var(--mi-border);}
.mi-hearts{font-size:2.5rem;margin-bottom:8px;}
.mi-header h1{font-size:2rem;color:var(--mi-rose);font-style:italic;margin-bottom:4px;}
.mi-date{color:var(--mi-gold);font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px;}
.mi-famille{color:var(--mi-muted);font-size:.9rem;}
.mi-step{background:#fff;border:1px solid var(--mi-border);border-radius:var(--mi-radius);padding:28px;box-shadow:var(--mi-shadow);}
.mi-step h2{font-size:1.2rem;color:var(--mi-rose);margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--mi-border);}
.mi-step p{color:var(--mi-muted);font-size:.9rem;margin-bottom:20px;line-height:1.6;}
.mi-field{margin-bottom:16px;}
.mi-field label{display:block;font-size:.85rem;font-weight:600;color:var(--mi-muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em;}
.mi-field input,.mi-field select,.mi-field textarea{width:100%;padding:10px 14px;border:1px solid var(--mi-border);border-radius:6px;font-size:.95rem;font-family:inherit;color:var(--mi-text);background:#fdfaf8;transition:border-color .2s;}
.mi-field input:focus,.mi-field select:focus,.mi-field textarea:focus{outline:none;border-color:var(--mi-rose);box-shadow:0 0 0 3px rgba(139,94,82,.12);}
.mi-field-half{display:inline-block;width:calc(50% - 6px);margin-right:10px;}
.mi-field-half:nth-child(even){margin-right:0;}
.mi-fieldset{border:1px solid var(--mi-border);border-radius:6px;padding:14px;margin-bottom:16px;}
.mi-fieldset legend{font-size:.85rem;font-weight:600;color:var(--mi-muted);padding:0 6px;text-transform:uppercase;}
.mi-check{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;margin-top:10px;line-height:1.5;cursor:pointer;}
.mi-check input{margin-top:3px;accent-color:var(--mi-rose);}
.mi-btn{display:inline-flex;align-items:center;gap:6px;padding:12px 24px;border-radius:6px;font-size:.95rem;font-family:inherit;font-weight:600;cursor:pointer;border:none;transition:all .2s;}
.mi-btn-primary{background:var(--mi-rose);color:#fff;width:100%;justify-content:center;margin-top:8px;}
.mi-btn-primary:hover{background:#7a4e43;}
.mi-btn-outline{background:transparent;color:var(--mi-rose);border:1.5px solid var(--mi-rose);}
.mi-btn-outline:hover{background:var(--mi-rose-l);}
.mi-membre{background:#fdf8f5;border:1px solid var(--mi-border);border-radius:8px;padding:18px;margin-bottom:14px;}
.mi-membre-titre{font-size:1rem;color:var(--mi-rose);margin-bottom:12px;}
.mi-membre-fields{display:flex;flex-wrap:wrap;gap:0;}
.mi-actions-membres{text-align:center;margin:12px 0 20px;}
.mi-messages-section h2{margin-top:0;}
.mi-msg{padding:12px 16px;border-radius:8px;margin-bottom:10px;}
.mi-msg-guest{background:var(--mi-rose-l);border-left:3px solid var(--mi-rose);}
.mi-msg-admin{background:#f0f7f0;border-left:3px solid #5a8a5a;}
.mi-msg-author{font-size:.8rem;font-weight:700;color:var(--mi-muted);display:block;margin-bottom:4px;}
.mi-msg p{font-size:.9rem;line-height:1.6;}
.mi-msg small{font-size:.75rem;color:#aaa;display:block;margin-top:4px;}
.mi-error{background:#fff0f0;border:1px solid #e0a0a0;color:#8b2020;padding:20px 24px;border-radius:var(--mi-radius);text-align:center;}
.mi-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#3a2820;color:#fff;padding:12px 24px;border-radius:50px;font-size:.9rem;opacity:0;transition:all .3s;pointer-events:none;z-index:9999;}
.mi-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.mi-qr-block{text-align:center;margin-top:16px;padding:16px;background:var(--mi-rose-l);border-radius:8px;}
.mi-qr-url{font-size:.75rem;word-break:break-all;margin:8px 0;color:var(--mi-muted);}
@media(max-width:500px){.mi-field-half{width:100%;margin-right:0;}}


/* ═══════════════════════════════════════════════════════════════
   SECTION LISTE SPÉCIALE — Témoin / DJ
   ═══════════════════════════════════════════════════════════════ */
.section-liste-speciale {
    padding: clamp(3rem, 6vw, 6rem) 0;
    background: var(--color-surface);
    border-top: 1px solid oklch(from var(--color-text) l c h / 0.08);
}
.liste-header { text-align: center; margin-bottom: var(--space-10); }
.liste-badge {
    display: inline-flex; align-items: center; gap: .4em;
    padding: .35em .9em; border-radius: 9999px;
    font-size: var(--text-xs); font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    margin-bottom: var(--space-4);
}
.badge-dj     { background: #1a1a2e; color: #e8b86d; border: 1px solid #e8b86d44; }
.badge-temoin { background: #2a1a2e; color: #c9a0dc; border: 1px solid #c9a0dc44; }
.liste-titre { font-family: var(--font-display); font-size: var(--text-xl); margin-bottom: var(--space-3); }
.liste-desc  { color: var(--color-text-muted); max-width: 50ch; margin: 0 auto var(--space-6); }

.btn-charger-liste {
    padding: .7em 1.8em; border-radius: var(--radius-full);
    background: var(--color-primary); color: #fff;
    font-size: var(--text-sm); font-weight: 600;
    cursor: pointer; border: none;
    transition: background 180ms ease, transform 120ms ease;
}
.btn-charger-liste:hover  { background: var(--color-primary-hover); transform: translateY(-1px); }
.btn-charger-liste:active { transform: translateY(0); }

/* Stats */
.liste-stats {
    display: flex; gap: var(--space-4); flex-wrap: wrap;
    justify-content: center; margin-bottom: var(--space-6);
}
.stat-chip {
    background: var(--color-surface-offset);
    border: 1px solid oklch(from var(--color-text) l c h / 0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm); text-align: center;
}
.stat-chip strong { display: block; font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); }

/* Filtres */
.liste-filtres {
    display: flex; gap: var(--space-3); flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.filtre-input, .filtre-select {
    flex: 1; min-width: 200px; padding: .55em .9em;
    border: 1px solid oklch(from var(--color-text) l c h / 0.15);
    border-radius: var(--radius-md);
    background: var(--color-surface-2); color: var(--color-text);
    font-size: var(--text-sm);
}
.filtre-input:focus, .filtre-select:focus {
    outline: 2px solid var(--color-primary); outline-offset: 2px;
}

/* Table */
.liste-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid oklch(from var(--color-text) l c h / 0.08); }
.liste-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.liste-table thead tr { background: var(--color-surface-offset); }
.liste-table th, .liste-table td {
    padding: .6em .8em; text-align: left;
    border-bottom: 1px solid oklch(from var(--color-text) l c h / 0.06);
}
.liste-table th { font-weight: 600; font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.liste-table tbody tr:hover { background: var(--color-surface-offset); }
.liste-table tbody tr:last-child td { border-bottom: none; }
.liste-vide { text-align: center; color: var(--color-text-muted); padding: var(--space-8); }

/* Export */
.liste-export { display: flex; justify-content: flex-end; margin-top: var(--space-4); }
.btn-export {
    padding: .55em 1.4em; border-radius: var(--radius-md);
    background: var(--color-surface-offset-2);
    border: 1px solid oklch(from var(--color-text) l c h / 0.12);
    font-size: var(--text-sm); font-weight: 500; cursor: pointer;
    transition: background 180ms ease;
}
.btn-export:hover { background: var(--color-surface-dynamic); }

@media (max-width: 640px) {
    .liste-stats { gap: var(--space-2); }
    .stat-chip    { padding: var(--space-2) var(--space-3); }
    .liste-table th, .liste-table td { padding: .4em .5em; font-size: .75rem; }
}


/* ═══════════════════════════════════════════════════════════════
   PROGRAMME DE LA JOURNÉE
   ═══════════════════════════════════════════════════════════════ */
.mi-programme {
    margin: var(--mi-space, 2rem) 0;
    padding: 2rem 1.5rem;
    background: #fff9f5;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.06);
}
.mi-programme-titre {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #3a2a1a;
    text-align: center;
}
.mi-prog-step {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.mi-prog-step:last-child { border-bottom: none; }
.mi-prog-icon {
    font-size: 2rem;
    flex-shrink: 0;
    width: 2.5rem;
    text-align: center;
    line-height: 1;
    padding-top: .2rem;
}
.mi-prog-content h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .35rem;
    color: #2d1e12;
}
.mi-prog-time {
    font-size: .9rem;
    color: #555;
    margin-bottom: .2rem;
}
.mi-prog-lieu {
    font-size: .85rem;
    color: #777;
    margin-bottom: .3rem;
}
.mi-prog-maps {
    display: inline-block;
    font-size: .82rem;
    color: #c07a3a;
    text-decoration: none;
    font-weight: 600;
    margin-top: .2rem;
}
.mi-prog-maps:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   HÉBERGEMENTS
   ═══════════════════════════════════════════════════════════════ */
.mi-hebergements {
    margin: 1.5rem 0;
    padding: 2rem 1.5rem;
    background: #f7fbf4;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.06);
}
.mi-heb-intro {
    font-size: .9rem;
    color: #666;
    margin-bottom: 1.2rem;
    text-align: center;
}
.mi-heb-grid {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.mi-heb-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 10px;
    padding: .75rem 1rem;
    transition: box-shadow 160ms ease;
}
.mi-heb-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.mi-heb-icon { font-size: 1.5rem; flex-shrink: 0; }
.mi-heb-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.mi-heb-info strong { font-size: .95rem; color: #2d1e12; }
.mi-heb-type { font-size: .78rem; color: #999; }
.mi-heb-btn {
    flex-shrink: 0;
    padding: .4em .9em;
    border-radius: 20px;
    background: #c07a3a;
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 160ms ease;
}
.mi-heb-btn:hover { background: #9e6129; }

@media (min-width: 480px) {
    .mi-heb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}


/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════════ */
.mi-subtitle {
    font-size: .9rem;
    color: #b08060;
    margin-top: .25rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.mi-login-intro {
    font-size: .95rem;
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.mi-field-password label { margin-bottom: .4rem; }

.mi-password-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.mi-password-wrap input {
    flex: 1;
    padding-right: 2.8rem;
}
.mi-toggle-pwd {
    position: absolute;
    right: .6rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    padding: .2rem;
    line-height: 1;
    transition: color 150ms ease;
}
.mi-toggle-pwd:hover { color: #555; }

.mi-msg {
    padding: .75rem 1rem;
    border-radius: 8px;
    font-size: .9rem;
    margin-bottom: 1rem;
}
.mi-msg-error {
    background: #fde8e8;
    color: #b00020;
    border: 1px solid #f5c2c2;
}
.mi-msg-success {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #c8e6c9;
}

.mi-login-hint {
    margin-top: 1.5rem;
    font-size: .82rem;
    color: #aaa;
    text-align: center;
    line-height: 1.6;
    border-top: 1px solid #eee;
    padding-top: 1.2rem;
}

/* ── Bouton déconnexion ─────────────────────────────────────── */
.mi-btn-logout {
    background: none;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 20px;
    padding: .3em .9em;
    font-size: .78rem;
    color: #999;
    cursor: pointer;
    transition: all 150ms ease;
}
.mi-btn-logout:hover {
    border-color: #c07a3a;
    color: #c07a3a;
}

/* ── Hint champ mdp ─────────────────────────────────────────── */
.mi-hint {
    display: block;
    font-size: .78rem;
    color: #aaa;
    margin-top: .35rem;
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════
   CONTACTS UTILES
   ═══════════════════════════════════════════════════════════════ */
.mi-contacts {
    margin: 1.5rem 0;
    padding: 2rem 1.5rem;
    background: #f8f5ff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.06);
}
.mi-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .8rem;
}
.mi-contact-card {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.mi-contact-icon {
    font-size: 1.7rem;
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
    line-height: 1.2;
}
.mi-contact-info {
    flex: 1;
    min-width: 0;
}
.mi-contact-info strong {
    display: block;
    font-size: 1rem;
    color: #2d1e12;
    margin-bottom: .15rem;
}
.mi-contact-info span {
    display: block;
    font-size: .84rem;
    color: #777;
    line-height: 1.4;
    margin-bottom: .7rem;
}
.mi-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.mi-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .45em .9em;
    border-radius: 999px;
    background: #8b5e52;
    color: #fff;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    transition: background 160ms ease, transform 120ms ease;
}
.mi-contact-btn:hover {
    background: #7a4e43;
    transform: translateY(-1px);
    color: #fff;
}
.mi-contact-btn-light {
    background: #f5ede9;
    color: #8b5e52;
}
.mi-contact-btn-light:hover {
    background: #ead7d0;
    color: #7a4e43;
}

/* ═══════════════════════════════════════════════════════════════
   INSTALLATION APPLICATION MOBILE / PWA
   ═══════════════════════════════════════════════════════════════ */
.mi-pwa-install {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 9998;
    max-width: 560px;
    margin: 0 auto;
    padding: 1rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(60,40,32,.18);
    font-family: inherit;
    color: var(--mi-text, #3a2820);
}
.mi-pwa-install[hidden] { display: none !important; }
.mi-pwa-install-title {
    display: block;
    font-weight: 700;
    color: var(--mi-rose, #8b5e52);
    margin-bottom: .25rem;
}
.mi-pwa-install p {
    font-size: .88rem;
    line-height: 1.45;
    color: var(--mi-muted, #7a6058);
    margin: 0 0 .75rem;
}
.mi-pwa-install-actions {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
}
.mi-pwa-install .mi-btn {
    padding: .65rem 1rem;
    font-size: .88rem;
    margin-top: 0;
    width: auto;
}
.mi-pwa-install-close {
    position: absolute;
    top: .5rem;
    right: .6rem;
    border: 0;
    background: transparent;
    color: #aaa;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.mi-pwa-install-close:hover { color: #555; }
.mi-pwa-help,
.mi-pwa-ios-help {
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(0,0,0,.06);
    font-size: .82rem;
    color: var(--mi-muted, #7a6058);
}