/* ══════════════════════════════════════════════════════
 Le Palais des Moustaches V2 — Style Global
 Palette : Crème #f9e4d8 | Bleu nuit #14192d | Bleu canard #446d7c
══════════════════════════════════════════════════════ */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
 font-family: 'Segoe UI', Arial, sans-serif;
 background: url("LepalaisGLD.svg") no-repeat center center fixed;
 background-size: 38%;
 background-color: #f9e4d8;
 color: #14192d;
 min-height: 100vh;
}

/* ── Page principale (accueil) ── */
.wrapper {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: center;
 height: 100vh;
 box-sizing: border-box;
 padding: 35px 20px 55px 20px;
}

/* ── Navigation accueil ── */
.nav-row {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 14px;
 flex-wrap: wrap;
 max-width: 1250px;
 width: 100%;
 margin: 0 auto;
}

.nav-item {
 text-decoration: none;
 padding: 12px 20px;
 min-width: 145px;
 text-align: center;
 color: #f9e4d8;
 font-weight: bold;
 text-transform: uppercase;
 font-size: 13px;
 letter-spacing: 1px;
 border: 2px solid #446d7c;
 border-radius: 6px;
 background-color: #446d7c;
 box-shadow: 0 4px 15px rgba(20, 25, 45, 0.12);
 transition: all 0.3s ease;
}

.nav-item:hover {
 background-color: #14192d;
 border-color: #14192d;
 color: #f9e4d8;
 transform: translateY(-2px) scale(1.03);
 box-shadow: 0 6px 20px rgba(20, 25, 45, 0.22);
}

.nav-item-account {
 background-color: #14192d;
 border-color: #14192d;
 color: #f9e4d8;
}

.nav-item-account:hover {
 background-color: #446d7c;
 border-color: #446d7c;
 color: #f9e4d8;
}

.nav-item-admin {
 background-color: #8c2d2d;
 border-color: #8c2d2d;
 color: #f9e4d8;
}

.nav-item-admin:hover {
 background-color: #14192d;
 border-color: #14192d;
 color: #f9e4d8;
}

.spacer { flex-grow: 1; }

/* ── Layout pages internes ── */
.page-wrapper {
 width: 100%;
 min-height: 100vh;
 background: rgba(249, 228, 216, 0.95);
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 40px 20px 80px;
}

.inner {
 width: 100%;
 max-width: 1100px;
}

.inner-sm {
 width: 100%;
 max-width: 620px;
}

/* ── Bouton retour & Navigation haut de page ── */
.top-nav-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-back-home-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    background: #446d7c;
    color: #f9e4d8 !important;
    border: 1.5px solid #446d7c;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px rgba(20, 25, 45, 0.1);
    transition: all 0.25s ease;
    cursor: pointer;
}

.btn-back-home-top:hover {
    background: #14192d;
    border-color: #14192d;
    transform: translateY(-2px);
}

.btn-account-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    background: #14192d;
    color: #f9e4d8 !important;
    border: 1.5px solid #14192d;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px rgba(20, 25, 45, 0.1);
    transition: all 0.25s ease;
    cursor: pointer;
}

.btn-account-top:hover {
    background: #446d7c;
    border-color: #446d7c;
    transform: translateY(-2px);
}

.btn-back-home-top svg {
 width: 16px; height: 16px;
 fill: currentColor;
 transition: transform 0.2s ease;
}

.btn-back-home-top:hover svg { transform: translateX(-3px); }

/* ── Titres ── */
h1 {
 color: #14192d;
 font-size: 2rem;
 text-transform: uppercase;
 letter-spacing: 3px;
 border-bottom: 2px solid #446d7c;
 display: inline-block;
 padding-bottom: 5px;
 margin-bottom: 6px;
}

.subtitle {
 color: rgba(20,25,45,0.7);
 font-size: 0.9rem;
 font-style: italic;
 margin-bottom: 30px;
}

/* ── Boutons ── */
.btn-gold {
 display: inline-block;
 text-decoration: none;
 background: #446d7c;
 color: #f9e4d8;
 border: 2px solid #446d7c;
 padding: 12px 28px;
 border-radius: 6px;
 font-size: 0.92rem;
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 1px;
 transition: all 0.2s ease;
 cursor: pointer;
 font-family: inherit;
}

.btn-gold:hover {
 background: #14192d;
 border-color: #14192d;
 color: #f9e4d8;
 transform: translateY(-2px);
}

.btn-ghost {
 display: inline-block;
 text-decoration: none;
 background: transparent;
 color: #446d7c;
 border: 2px solid #446d7c;
 padding: 12px 28px;
 border-radius: 6px;
 font-size: 0.92rem;
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 1px;
 transition: all 0.2s ease;
 cursor: pointer;
 font-family: inherit;
}

.btn-ghost:hover {
 background: #446d7c;
 color: #f9e4d8;
 transform: translateY(-2px);
}

.btn-danger {
 background: #c62828;
 color: #fff;
 border: 2px solid #c62828;
 padding: 10px 22px;
 border-radius: 6px;
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 1px;
 cursor: pointer;
 font-family: inherit;
 font-size: 0.88rem;
 transition: all 0.2s;
}

.btn-danger:hover { background: #b71c1c; transform: scale(1.02); }

/* ── Formulaires ── */
.form-card {
 background: #ffffff;
 border: 1px solid rgba(68,109,124,0.25);
 border-left: 4px solid #446d7c;
 box-shadow: 0 4px 20px rgba(20,25,45,0.06);
 border-radius: 8px;
 padding: 28px 30px;
 margin-bottom: 20px;
}

.form-grid-2 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 20px;
}

@media (max-width: 650px) { .form-grid-2 { grid-template-columns: 1fr; } }

.form-group { margin-bottom: 18px; }

.form-group label {
 display: block;
 color: #14192d;
 font-weight: bold;
 font-size: 0.92rem;
 margin-bottom: 6px;
}

.form-group input:not([type="radio"]):not([type="checkbox"]),
.form-group select,
.form-group textarea {
 width: 100%;
 background: #ffffff;
 border: 2px solid #446d7c;
 border-radius: 6px;
 color: #14192d;
 font-family: 'Segoe UI', Arial, sans-serif;
 font-size: 0.95rem;
 font-weight: 500;
 padding: 11px 14px;
 transition: border-color 0.3s, box-shadow 0.3s;
 outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
 border-color: #14192d;
 box-shadow: 0 0 0 3px rgba(68,109,124,0.2);
}

.form-group input[type="radio"],
.form-group input[type="checkbox"] {
 width: auto;
 padding: 0;
 background: transparent;
 border: none;
 accent-color: #446d7c;
 cursor: pointer;
}

.form-group textarea { resize: vertical; min-height: 70px; }

.form-hint {
 display: block;
 color: rgba(20,25,45,0.6);
 font-size: 0.8rem;
 font-style: italic;
 margin-top: 4px;
}

/* ── Messages ── */
.msg {
 padding: 14px 18px;
 border-radius: 6px;
 margin-bottom: 18px;
 font-weight: bold;
 font-size: 0.93rem;
 display: none;
}

.msg.visible { display: block; }
.msg.error { background: rgba(183,28,28,0.1); border: 1px solid #e53935; color: #c62828; }
.msg.success { background: rgba(27,94,32,0.1); border: 1px solid #4caf50; color: #1b5e20; }
.msg.info { background: rgba(68,109,124,0.1); border: 1px solid #446d7c; color: #14192d; }

/* ── Badges / Tags ── */
.badge {
 display: inline-block;
 padding: 3px 10px;
 border-radius: 4px;
 font-size: 0.75rem;
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.badge-blue { background: #446d7c; color: #f9e4d8; }
.badge-dark { background: #14192d; color: #f9e4d8; border: 1px solid #446d7c; }
.badge-green { background: rgba(27,94,32,0.15); color: #1b5e20; border: 1px solid #4caf50; }
.badge-red { background: rgba(183,28,28,0.12); color: #c62828; border: 1px solid #e53935; }
.badge-orange { background: rgba(230,81,0,0.1); color: #e65100; border: 1px solid #ff6d00; }
.badge-grey { background: rgba(20,25,45,0.08); color: rgba(20,25,45,0.6); }

/* ── Cards génériques ── */
.card {
 background: #ffffff;
 border: 1px solid rgba(68,109,124,0.2);
 border-radius: 10px;
 padding: 24px;
 box-shadow: 0 4px 15px rgba(20,25,45,0.06);
 transition: box-shadow 0.2s, transform 0.2s;
}

.card:hover {
 box-shadow: 0 8px 25px rgba(20,25,45,0.1);
 transform: translateY(-2px);
}

/* ── Section titles ── */
.section-title-row {
 display: flex;
 align-items: center;
 gap: 16px;
 margin-bottom: 25px;
}

.section-line {
 flex: 1;
 height: 2px;
 background: linear-gradient(to right, #446d7c, transparent);
}

.section-line.right {
 background: linear-gradient(to left, #446d7c, transparent);
}

.section-heading {
 color: #14192d;
 font-size: 1.2rem;
 text-transform: uppercase;
 letter-spacing: 2px;
 margin: 0;
 white-space: nowrap;
}

/* ── Tabs ── */
.tabs-bar {
 display: flex;
 border-bottom: 2px solid rgba(68,109,124,0.25);
 margin-bottom: 28px;
 gap: 0;
}

.tab-btn {
 padding: 12px 28px;
 font-size: 0.92rem;
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 1px;
 cursor: pointer;
 border: none;
 background: transparent;
 color: rgba(20,25,45,0.4);
 border-bottom: 3px solid transparent;
 margin-bottom: -2px;
 transition: all 0.25s;
 font-family: inherit;
 border-radius: 6px 6px 0 0;
}

.tab-btn:hover { color: #446d7c; }

.tab-btn.active {
 color: #14192d;
 border-bottom-color: #446d7c;
 background: rgba(68,109,124,0.07);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Spinner ── */
.spinner {
 display: inline-block;
 width: 20px; height: 20px;
 border: 3px solid rgba(68,109,124,0.3);
 border-top-color: #446d7c;
 border-radius: 50%;
 animation: spin 0.8s linear infinite;
 vertical-align: middle;
 margin-right: 8px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Loading overlay ── */
.loading-overlay {
 position: fixed;
 inset: 0;
 background: rgba(249,228,216,0.85);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 9999;
 backdrop-filter: blur(4px);
}

.loading-box {
 text-align: center;
 padding: 40px;
}

.loading-box .spinner { width: 40px; height: 40px; border-width: 4px; }

/* ── Footer légal ── */
.legal-footer {
 text-align: center;
 padding: 30px 12px 12px;
 font-size: 0.72rem;
 color: rgba(20,25,45,0.6);
 font-family: 'Segoe UI', Arial, sans-serif;
}

.legal-footer a {
 color: #446d7c;
 text-decoration: none;
 margin: 0 8px;
}

/* ── Tableau ── */
.table-wrap {
 overflow-x: auto;
 border-radius: 8px;
 border: 1px solid rgba(68,109,124,0.2);
}

table.data-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 0.88rem;
}

table.data-table thead tr {
 background: #446d7c;
 color: #f9e4d8;
}

table.data-table thead th {
 padding: 12px 14px;
 text-align: left;
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 font-size: 0.78rem;
}

table.data-table tbody tr {
 border-bottom: 1px solid rgba(20,25,45,0.07);
 transition: background 0.15s;
}

table.data-table tbody tr:hover { background: rgba(68,109,124,0.05); }

table.data-table tbody td {
 padding: 10px 14px;
 color: #14192d;
}

/* ── Modal ── */
.modal-overlay {
 position: fixed;
 inset: 0;
 background: rgba(20,25,45,0.5);
 z-index: 1000;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px;
 backdrop-filter: blur(4px);
}

.modal-box {
 background: #f9e4d8;
 border: 2px solid #446d7c;
 border-radius: 12px;
 padding: 32px;
 max-width: 550px;
 width: 100%;
 max-height: 90vh;
 overflow-y: auto;
 position: relative;
 box-shadow: 0 20px 60px rgba(20,25,45,0.2);
}

.modal-close {
 position: absolute;
 top: 14px; right: 16px;
 background: none;
 border: none;
 font-size: 1.4rem;
 cursor: pointer;
 color: rgba(20,25,45,0.5);
 line-height: 1;
 padding: 4px;
 border-radius: 4px;
 transition: color 0.2s, background 0.2s;
}

.modal-close:hover { color: #14192d; background: rgba(20,25,45,0.1); }

/* ── Responsive ── */
@media (max-width: 900px) {
 body { background-size: 50%; }
 .wrapper { padding: 25px 12px 50px 12px; }
 .nav-row { gap: 8px; }
 .nav-item { font-size: 11px; padding: 9px 12px; min-width: 120px; }
 .page-wrapper { padding: 24px 14px 60px; }
}



/* ── Protection copie ── */
body { -webkit-user-select: none; -ms-user-select: none; user-select: none; }
input, textarea, select, option { -webkit-user-select: text; -ms-user-select: text; user-select: text; }
img { pointer-events: none; }