:root {
    --anthracite: #1e1e1e;
    --noir: #121212;
    --bois: #c6a86d;
    --blanc: #f6f3ee;
}

/* =========================
   RESET
   ========================= */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--anthracite);
    color: var(--blanc);
    font-family: 'Montserrat', sans-serif;
}

/* =========================
   HEADER
   ========================= */
.header {
    background: var(--noir);
    border-bottom: 3px solid var(--bois);
}

.header-inner {
    max-width: 1200px;
    margin: auto;
    padding: 25px 20px;
    text-align: center;
}

.logo {
    width: 80%;
    max-height: 220px;
    margin: 0 auto;
    display: block;
}

/* NAV */
.nav {
    margin-top: 12px;
}

.nav a {
    color: var(--blanc);
    margin: 0 15px;
    text-decoration: none;
    font-family: 'Playfair Display', serif;
}

.nav a:hover {
    color: var(--bois);
}

/* =========================
   HERO
   ========================= */
.hero {
    padding: 90px 20px;
    text-align: center;
    background: #2a2a2a;
}

.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
}

.hero p {
    font-size: 18px;
}

/* =========================
   SECTIONS
   ========================= */
.section {
    padding: 60px 20px;
}

.section.dark {
    background: #2a2a2a;
}

/* =========================
   CARDS
   ========================= */
.card {
    border: 2px solid var(--bois);
    padding: 30px;
    background: rgba(0,0,0,0.45);
}

/* =========================
   CONTACT / RÉSERVATION
   ========================= */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 1000px;
    margin: auto;
}

.contact-card h2,
.reservation-card h2 {
    font-family: 'Playfair Display', serif;
    margin-bottom: 20px;
}

.contact-line {
    margin: 12px 0;
}

.contact-card a {
    color: var(--blanc);
    text-decoration: none;
}

.contact-card a:hover {
    color: var(--bois);
}

/* =========================
   FORM
   ========================= */
form {
    max-width: 480px;
    margin: auto;
}

form input {
    width: 100%;
    padding: 14px;
    margin: 10px 0;
    background: #1a1a1a;
    border: 1px solid var(--bois);
    color: var(--blanc);
    font-size: 15px;
}

form input::placeholder {
    color: #d6d2c8;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 14px 34px;
    border-radius: 30px;               /* ⬅️ coins bien arrondis */
    border: 2px solid var(--bois);

    background: transparent;
    color: var(--blanc);
    text-decoration: none;             /* ⬅️ PAS de soulignement */
    font-family: 'Playfair Display', serif;
    font-size: 16px;

    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-primary:hover {
    background: var(--bois);
    color: #121212;
    transform: translateY(-2px);       /* petit lift */
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

/* =========================
   LIGNE DATE / HEURE / PERSONNES
   ========================= */
.reservation-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}

/* =========================
   CHAMPS + / -
   ========================= */
.custom-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--bois);
    background: #1e1e1e;
    height: 48px;
    padding: 0 6px;
}

.custom-field input {
    border: none;
    background: transparent;
    color: var(--blanc);
    text-align: center;
    font-size: 15px;
    width: 100%;
    pointer-events: none;
}

.custom-field input:focus {
    outline: none;
}

.num-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--bois);
    background: transparent;
    color: var(--bois);
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.num-btn:hover {
    background: rgba(198,168,109,0.25);
    color: #fff;
}

.reservation-note {
    margin-top: 15px;
    font-size: 14px;
    opacity: 0.8;
}

/* =========================
   FOOTER – VERSION PROPRE & DÉFINITIVE
   ========================= */

.footer {
    border-top: 1px solid #c6a86d;
    padding: 40px 20px 20px;
    background: radial-gradient(circle at top, #111 0%, #000 70%);
    font-size: 14px;
}

/* GRID */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* COLONNES */
.footer-col { color:#ddd; }

.footer-title {
    color:#c6a86d;
    font-weight:600;
    margin-bottom:14px;
}

/* LIGNES AVEC ICÔNES */
.footer-line,
.footer-links a {
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:10px;
}

.footer-line img,
.footer-links a img {
    width: 60px;
    height: 60px;
    padding: 0;
    object-fit: contain;
    transform: scale(1.6); /* ⚠️ triche */
}

/* LIENS */
.footer-links a {
    color:#ddd;
    text-decoration:none;
}
.footer-links a:hover { color:#c6a86d; }

/* RÉSEAUX */
.footer-socials {
    display:flex;
    justify-content:center;
    gap:16px;
}
.footer-socials img {
    width:60px;
    height:60px;
    filter:brightness(1.25) contrast(1.15);
}

/* COPYRIGHT */
.footer-copy {
    margin-top:30px;
    font-size:13px;
    color:#888;
    text-align:center;
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 800px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    .reservation-row {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 38px;
    }

    .logo {
        width: 95%;
    }
}

.card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}

.section:last-of-type {
    padding-bottom: 40px;
}

.grid-soirees {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.soiree-card {
    position:relative;
    border:2px solid var(--bois);
    overflow:hidden;
    text-decoration:none;
    color:#fff;
    transition:transform .3s ease;
}

.soiree-card:hover {
    transform:translateY(-6px);
}

.soiree-card img {
    width:100%;
    height:260px;
    object-fit:cover;
}

.badge {
    position:absolute;
    top:10px;
    left:10px;
    background:var(--bois);
    color:#121212;
    padding:6px 14px;
    border-radius:20px;
    font-size:13px;
}

.agenda-item {
    display:flex;
    gap:20px;
    border-bottom:1px solid rgba(198,168,109,.3);
    padding:20px 0;
}

.agenda-date {
    text-align:center;
    font-size:28px;
    color:var(--bois);
}

#modal {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    justify-content:center;
    align-items:center;
}

#modal img {
    max-width:90%;
    max-height:90%;
}

/* =========================
   ADMIN LAYOUT
========================= */

.admin-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: calc(100vh - 200px);
}

/* SIDEBAR */
.admin-sidebar {
    background: #121212;
    border-right: 2px solid var(--bois);
    padding: 30px 20px;
}

.admin-sidebar h2 {
    font-family: 'Playfair Display', serif;
    margin-bottom: 30px;
}

.admin-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-menu a {
    color: var(--blanc);
    text-decoration: none;
    padding: 12px 15px;
    border-radius: 8px;
    transition: all .2s ease;
}

.admin-menu a:hover,
.admin-menu a.active {
    background: rgba(198,168,109,0.15);
    color: var(--bois);
}

.admin-menu .logout {
    margin-top: 30px;
    color: #ff8080;
}

/* CONTENU */
.admin-content {
    padding: 40px;
}

/* HEADER */
.admin-header {
    margin-bottom: 40px;
}

.admin-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
}

/* TUILES */
.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
}

.admin-tile {
    background: rgba(0,0,0,0.45);
    border: 2px solid var(--bois);
    padding: 30px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--blanc);
    transition: all .25s ease;
}

.admin-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

.admin-tile .icon {
    font-size: 32px;
}

.admin-tile h3 {
    margin: 15px 0 10px;
    font-family: 'Playfair Display', serif;
}

/* MOBILE */
@media (max-width: 900px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        border-right: none;
        border-bottom: 2px solid var(--bois);
    }
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.admin-table th,
.admin-table td {
    border-bottom: 1px solid rgba(198,168,109,0.3);
    padding: 12px;
}

.admin-form label {
    margin-top: 15px;
    display: block;
}

.admin-form input,
.admin-form textarea {
    width: 100%;
    margin-top: 6px;
    padding: 12px;
}

.admin-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 30px;
}

.admin-sidebar {
    border: 2px solid var(--bois);
    padding: 20px;
    background: rgba(0,0,0,0.4);
}

.admin-sidebar a {
    display: block;
    padding: 10px;
    color: var(--blanc);
    text-decoration: none;
}

.admin-sidebar a:hover {
    background: rgba(198,168,109,0.2);
}

.admin-content h1 {
    margin-bottom: 20px;
}

.admin-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    gap: 20px;
}

.admin-tile {
    border: 2px solid var(--bois);
    padding: 30px;
    text-align: center;
    text-decoration: none;
    color: var(--blanc);
    font-size: 18px;
}

.agenda-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
}

.agenda-list {
    display: grid;
    gap: 20px;
}

.agenda-card {
    position: relative;
    background: #1e1e1e;
    border: 2px solid #c6a86d;
    padding: 15px;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.agenda-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.agenda-card img {
    width: 100%;
    margin-bottom: 10px;
}

.agenda-meta {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #121212;
    border: 1px solid #c6a86d;
    padding: 6px 10px;
    text-align: center;
}

.agenda-meta .day {
    font-size: 20px;
    font-weight: bold;
}

.agenda-meta .month {
    font-size: 12px;
    text-transform: uppercase;
}

.agenda-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #c6a86d;
    color: #121212;
    padding: 4px 10px;
    font-weight: bold;
    font-size: 12px;
}

.agenda-view {
    background: #1a1a1a;
    border: 2px solid #c6a86d;
    padding: 25px;
    min-height: 300px;
}

.agenda-placeholder {
    opacity: .7;
    text-align: center;
}

.hero-home {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-actions {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-secondary {
    padding: 12px 22px;
    border: 1px solid #c6a86d;
    color: #c6a86d;
    text-decoration: none;
    border-radius: 30px;
    transition: background .2s ease, color .2s ease;
}

.btn-secondary:hover {
    background: #c6a86d;
    color: #000;
}

.card-large {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.menu-card {
    background: #111;
    border: 1px solid #c6a86d;
    padding: 25px;
    text-align: center;
    text-decoration: none;
    color: #ddd;
    transition: transform .2s ease, background .2s ease;
}

.menu-card:hover {
    transform: translateY(-5px);
    background: #161616;
}

.menu-card h3 {
    margin-top: 10px;
    color: #c6a86d;
}

.card-highlight {
    text-align: center;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.bois-border {
    position: relative;
    border-radius: 18px;
    padding: 32px;
    background: linear-gradient(
        145deg,
        #0e0e0e,
        #141414
    );
}

/* Bordure bois */
.bois-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 4px; /* ÉPAISSEUR DE LA BORDURE */
    background: linear-gradient(
        135deg,
        var(--bois-clair),
        var(--bois-moyen),
        var(--bois-fonce),
        var(--bois-moyen)
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* =========================
   AMÉLIORATION BORDURES BOIS
   (sans suppression)
========================= */

/* Tous les blocs principaux */
.card,
.menu-card,
.admin-tile,
.agenda-card,
.agenda-view,
.soiree-card {
    position: relative;
    border-radius: 22px; /* coins plus doux */
    overflow: hidden;
}

/* Bordure bois élargie */
.card::before,
.menu-card::before,
.admin-tile::before,
.agenda-card::before,
.agenda-view::before,
.soiree-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 6px; /* ⬅️ PLUS LARGE (moins que bannière) */
    border-radius: 26px;

    background: linear-gradient(
        135deg,
        #e2c98a,
        #c6a86d,
        #8f6a2f,
        #c6a86d
    );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}

/* Légère profondeur */
.card,
.menu-card,
.admin-tile,
.agenda-card,
.agenda-view,
.soiree-card {
    box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

/* =========================
   AJUSTEMENT BOIS – SANS SUPPRESSION
   ========================= */

/* Variables bois plus riches */
:root {
    --bois-clair: #e6c98a;
    --bois-moyen: #c6a86d;
    --bois-fonce: #9f7f45;
}

/* Cartes / blocs principaux */
.card,
.menu-card,
.agenda-card,
.agenda-view,
.soiree-card,
.admin-tile,
.bois-border {
    border-radius: 26px; /* plus doux */
}

/* Bordure bois LARGE */
.card,
.menu-card,
.agenda-card,
.agenda-view,
.soiree-card {
    position: relative;
    border: none;
}

/* Faux cadre bois */
.card::before,
.menu-card::before,
.agenda-card::before,
.agenda-view::before,
.soiree-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 6px; /* ÉPAISSEUR BOIS (moins que bannière) */
    border-radius: 26px;
    background: linear-gradient(
        135deg,
        var(--bois-clair),
        var(--bois-moyen),
        var(--bois-fonce),
        var(--bois-moyen)
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Légère profondeur */
.card,
.menu-card,
.agenda-card,
.soiree-card {
    background: radial-gradient(circle at top, #1a1a1a, #0e0e0e);
}

/* =========================
   SIDEBAR ADMIN – MOBILE
========================= */

@media (max-width: 900px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: fixed;
        top: 0;
        left: -260px;
        width: 240px;
        height: 100vh;
        background: #121212;
        z-index: 1000;
        transition: left .3s ease;
    }

    .admin-sidebar.open {
        left: 0;
    }
}

/* =========================
   ADMIN – GALERIES ACTIONS
   ========================= */

.admin-table .actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-action {
    padding: 6px 16px;
    border-radius: 24px;
    border: 1px solid var(--bois);
    background: transparent;
    color: var(--bois);
    text-decoration: none;
    font-size: 13px;
    transition: all .2s ease;
}

.btn-action:hover {
    background: var(--bois);
    color: #121212;
}

.btn-delete {
    border-color: #b86a6a;
    color: #b86a6a;
}

.btn-delete:hover {
    background: #b86a6a;
    color: #121212;
}


/* =========================
   ADMIN – ACTIONS TABLE
   ========================= */

.admin-table .actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-action {
    padding: 6px 14px;
    border-radius: 22px;
    border: 1px solid var(--bois);
    text-decoration: none;
    font-size: 13px;
    background: transparent;
    color: var(--bois);
    transition: all .2s ease;
}

.btn-action:hover {
    background: var(--bois);
    color: #121212;
}

.btn-delete {
    border-color: #b86a6a;
    color: #b86a6a;
}

.btn-delete:hover {
    background: #b86a6a;
    color: #121212;
}

.btn-action.disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

/* =========================
   ADMIN – BOÎTES & TABLES
========================= */

.admin-box {
    margin-top: 30px;
}

/* Table bois */
.admin-table-wood {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0,0,0,0.35);
    border-radius: 18px;
    overflow: hidden;
}

.admin-table-wood thead {
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.65),
        rgba(0,0,0,0.45)
    );
}

.admin-table-wood th {
    padding: 18px;
    color: var(--bois);
    font-weight: 600;
    border-bottom: 1px solid rgba(198,168,109,0.35);
}

.admin-table-wood td {
    padding: 18px;
    border-bottom: 1px solid rgba(198,168,109,0.2);
}

.admin-table-wood tr:last-child td {
    border-bottom: none;
}

.admin-table-wood tbody tr:hover {
    background: rgba(198,168,109,0.06);
}

/* Cellules */
.admin-table-wood .actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Vide */
.admin-table-wood .empty {
    text-align: center;
    padding: 40px;
    opacity: .6;
}

/* Bouton danger */
.btn-secondary.danger {
    border-color: #a85c5c;
    color: #e2a0a0;
}

.btn-secondary.danger:hover {
    background: #a85c5c;
    color: #000;
}

.gallery-grid .thumbs {
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.thumb {
    width:160px;
    border-radius:12px;
    cursor:pointer;
    transition:.3s;
}
.thumb:hover { transform:scale(1.05); }

#lightbox {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    justify-content:center;
    align-items:center;
    z-index:999;
}
#lightbox img {
    max-width:90%;
    max-height:90%;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.gallery-item {
    text-align: center;
}

.gallery-item img {
    width: 100%;
    border-radius: 12px;
    cursor: pointer;
    transition: transform .2s ease;
}

.gallery-item img:hover {
    transform: scale(1.05);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
    gap: 25px;
    margin-top: 30px;
}

.gallery-item {
    text-align: center;
}

.thumb {
    width: 100%;
    border-radius: 14px;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}

.thumb:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 25px rgba(0,0,0,.4);
}

/* ===== LIGHTBOX ===== */
#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#lightbox img {
    max-width: 90%;
    max-height: 90%;
}

.lb-close,
.lb-prev,
.lb-next {
    position: absolute;
    color: #c6a86d;
    font-size: 40px;
    cursor: pointer;
    user-select: none;
}

.lb-close {
    top: 30px;
    right: 40px;
}

.lb-prev {
    left: 40px;
}

.lb-next {
    right: 40px;
}

.thumb-box {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

#lightbox {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.92);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

#lightbox img {
    max-width:90%;
    max-height:90%;
}

#lightbox .close {
    position:absolute;
    top:30px;
    right:40px;
    font-size:40px;
    cursor:pointer;
    color:#fff;
}

#lightbox .prev,
#lightbox .next {
    position:absolute;
    top:50%;
    font-size:50px;
    cursor:pointer;
    color:#fff;
    user-select:none;
}

#lightbox .prev { left:30px; }
#lightbox .next { right:30px; }

.badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.badge-success {
    background: rgba(0,200,120,.15);
    color: #5cffb0;
}

.badge-danger {
    background: rgba(200,80,80,.15);
    color: #ff9a9a;
}

.badge-role {
    background: rgba(198,168,109,.15);
    color: #c6a86d;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
}