/* RoutedesvinsBordeaux — mobile-first, sans framework */

:root {
    --wine:        #6e1423;
    --wine-dark:   #4a0d18;
    --wine-light:  #9a2a3c;
    --gold:        #c9a14a;
    --bg:          #faf7f4;
    --surface:     #ffffff;
    --ink:         #2a2024;
    --muted:       #7a6f72;
    --line:        #e9e0db;
    --ok:          #2f7d4f;
    --err:         #b3261e;
    --radius:      14px;
    --shadow:      0 2px 10px rgba(74, 13, 24, .08);
    --maxw:        720px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
}

a { color: var(--wine); }

img { max-width: 100%; height: auto; }

.muted { color: var(--muted); }
.center { text-align: center; }

/* ---------- Header / nav ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 1rem;
    background: var(--surface);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.brand-logo { display: block; height: 46px; width: auto; }
/* Variante texte du brand (page admin, sans logo) */
.brand-mark { font-size: 1.4rem; }
.brand-name { font-size: 1.05rem; font-weight: 700; }
.nav { display: flex; align-items: center; gap: .9rem; }
.nav a { color: var(--wine); text-decoration: none; font-size: .95rem; font-weight: 600; }
.nav a[aria-current="page"] { text-decoration: underline; }
.nav-cta {
    background: var(--wine);
    color: #fff !important;
    padding: .45rem .8rem;
    border-radius: 999px;
    font-weight: 700;
}
.nav-cta:hover { background: var(--wine-dark); }

/* ---------- Layout ---------- */
.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 1.2rem 1rem 3rem;
}

.page-intro { margin: .5rem 0 1.4rem; }
.page-intro h1 { font-size: 1.6rem; margin: 0 0 .3rem; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    background: var(--wine);
    color: #fff;
    text-decoration: none;
    padding: .7rem 1.1rem;
    border: 0;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.btn:hover { background: var(--wine-light); }
.btn-lg { padding: .9rem 1.5rem; font-size: 1.05rem; }
.btn-ghost {
    background: transparent;
    color: var(--wine);
    border: 2px solid var(--wine);
}
.actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---------- Filters ---------- */
.filters {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin-bottom: 1.4rem;
}
.field-search input[type="search"] {
    font: inherit;
    padding: .7rem .9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    width: 100%;
    background: var(--surface);
}
.filters-selects { display: grid; gap: .6rem; grid-template-columns: 1fr; }
.results-count { color: var(--muted); font-size: .9rem; margin: .2rem 0 .8rem; }
.card-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.tag {
    font-size: .72rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: #f1e6e9;
    color: var(--wine);
    font-weight: 600;
}
.tag-aud { background: #efe7d4; color: #8a6d1f; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.chip {
    text-decoration: none;
    color: var(--wine);
    background: var(--surface);
    border: 1px solid var(--line);
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .9rem;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--wine); background: #f8f1f3; }
.chip:focus-visible { outline: 2px solid var(--wine-light); outline-offset: 2px; }
.chip-on, .chip-on:hover { background: var(--wine); color: #fff; border-color: var(--wine); }

/* Chip « jour précis » : input date natif habillé en pastille */
.chip-day { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.chip-day input[type="date"] {
    font: inherit;
    font-size: .9rem;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    min-width: 7.5rem;
    min-height: 1.3rem; /* iOS : évite l'input date vide qui se réduit à zéro */
}
.chip-day input[type="date"]:focus { outline: none; }
.chip-day.chip-on input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* Croix pour retirer le filtre de jour */
.chip-clear { padding: .4rem .65rem; line-height: 1; }

/* ---------- Cards ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.card-link { display: block; padding: 1rem; text-decoration: none; color: inherit; }
.card-link:hover { background: #fdfbfa; }
.card-date {
    display: inline-block;
    color: var(--wine);
    font-weight: 700;
    font-size: .85rem;
    text-transform: capitalize;
}
.card-date-now { color: var(--ok); text-transform: none; }
.card-title { font-size: 1.15rem; margin: .2rem 0 .35rem; }
.card-city { display: block; color: var(--muted); font-size: .9rem; }
.card-desc { margin: .5rem 0 0; color: var(--ink); font-size: .95rem; }

.empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 1.5rem; text-align: center; }

/* ---------- Pagination ---------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: 1.6rem 0 .4rem;
}
.page-num, .page-btn {
    text-decoration: none;
    color: var(--wine);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .5rem .8rem;
    font-size: .95rem;
    transition: background .15s ease, border-color .15s ease;
}
.page-num:hover, .page-btn:hover { border-color: var(--wine); background: #f8f1f3; }
.page-num:focus-visible, .page-btn:focus-visible { outline: 2px solid var(--wine-light); outline-offset: 2px; }
.page-current { background: var(--wine); color: #fff; border-color: var(--wine); font-weight: 700; }
.page-btn { font-weight: 600; }
.page-ellipsis { color: var(--muted); padding: 0 .15rem; }

/* ---------- Event detail ---------- */
.back { display: inline-block; margin-bottom: .8rem; text-decoration: none; }
.event h1 { font-size: 1.7rem; margin: 0 0 1rem; }
.event-meta { display: grid; gap: .6rem; margin: 0 0 1.2rem; }
.event-meta div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; }
.event-meta dt { font-weight: 700; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.event-meta dd { margin: .15rem 0 0; }
.event-desc { font-size: 1.05rem; }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 560px; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field > span { font-weight: 600; font-size: .95rem; }
.field input, .field select, .field textarea {
    font: inherit;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--wine-light);
    border-color: var(--wine-light);
}
.field-row { display: grid; gap: 1.1rem; }
.err { color: var(--err); font-size: .85rem; font-style: normal; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.alert { padding: .8rem 1rem; border-radius: 10px; margin-bottom: 1rem; }
.alert-error { background: #fdecea; color: var(--err); border: 1px solid #f5c6c2; }
.alert-ok { background: #eaf6ef; color: var(--ok); border: 1px solid #bfe3cc; }

/* ---------- Landing ---------- */
.hero {
    text-align: center;
    padding: 2rem 1rem 2.4rem;
    border-radius: var(--radius);
    color: #fff;
    margin-bottom: 1.6rem;
    background: linear-gradient(135deg, var(--wine), var(--wine-dark));
}
.hero h1 { font-size: 1.7rem; margin: 0 0 .6rem; }
.hero .lead { font-size: 1.05rem; opacity: .95; margin: 0 0 1.3rem; }
.hero .btn { background: var(--gold); color: var(--wine-dark); }
.hero .actions { justify-content: center; }

.features { display: grid; gap: 1rem; margin-bottom: 1.8rem; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; text-align: center; }
.feature-ico { font-size: 2rem; }
.feature h2 { font-size: 1.1rem; margin: .5rem 0 .3rem; }
.feature p { margin: 0; color: var(--muted); }

.steps { margin-bottom: 1.8rem; }
.steps ol { padding-left: 1.2rem; }
.steps li { margin: .4rem 0; }

.cta-band { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.cta-band h2 { margin: 0 0 .5rem; }

/* ---------- Admin ---------- */
.admin-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.admin-table th, .admin-table td { text-align: left; padding: .6rem; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .9rem; }
.admin-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.badge { font-size: .75rem; padding: .15rem .5rem; border-radius: 999px; background: var(--line); }

/* Gestion des campagnes publicitaires (admin) */
.ad-thumb { display: block; max-width: 180px; height: auto; border: 1px solid var(--line); border-radius: 4px; }
.ad-live { list-style: none; margin: 0 0 1rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.ad-live li { margin: .4rem 0; }
.ad-live .ad-thumb { margin-top: .4rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 1.6rem 1rem; text-align: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: .6rem; }
.footer-legal { font-size: .85rem; }
.footer-legal a { color: var(--muted); }
.site-footer .muted { font-size: .85rem; }

/* ---------- Bannière publicitaire (leaderboard) ---------- */
.ad-leaderboard {
    display: block;
    margin: 0 0 1.4rem;
    text-align: center;
}
.ad-leaderboard img {
    width: 100%;
    max-width: 728px;
    height: auto;
    border-radius: 10px;
    box-shadow: var(--shadow);
}
.ad-offer {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.2rem;
    margin-bottom: 1.6rem;
}
.ad-offer h2 { margin-top: 1.2rem; }
.ad-offer h2:first-of-type { margin-top: 0; }
.ad-preview { width: 100%; max-width: 728px; height: auto; border-radius: 10px; display: block; margin: .4rem 0 .6rem; }
.ad-leaderboard-footer { margin: 1.6rem 0 .4rem; }
.ad-places { margin: .2rem 0 .8rem; padding-left: 1.2rem; display: grid; gap: .4rem; }
.ad-schema {
    width: 100%;
    max-width: 560px;
    height: auto;
    display: block;
    margin: .4rem auto .9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
}

/* Choix de l'emplacement (formulaire) */
.field-placement { border: 0; padding: 0; margin: 0; }
.field-placement legend { font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: .35rem; }
.place-opts { display: grid; gap: .6rem; grid-template-columns: 1fr; }
.place-opt {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .6rem;
    row-gap: .15rem;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .7rem .8rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.place-opt:hover { border-color: var(--wine-light); }
.place-opt input[type="radio"] { accent-color: var(--wine); margin: 0; }
.place-name { font-weight: 700; color: var(--wine); }
.place-desc { grid-column: 2; font-size: .85rem; color: var(--muted); }
.place-opt:has(input:checked) {
    border-color: var(--wine);
    background: #f8f1f3;
    box-shadow: 0 0 0 1px var(--wine) inset;
}
@media (min-width: 560px) {
    .place-opts { grid-template-columns: 1fr 1fr; }
}

/* Tableau de prix des offres publicitaires */
.price-table-wrap {
    margin: .8rem 0 .5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
}
.price-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.price-table th, .price-table td {
    padding: .75rem .9rem;
    text-align: left;
    vertical-align: middle;
}
.price-table thead th {
    background: var(--wine);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.price-table tbody tr { border-top: 1px solid var(--line); }
.price-table tbody tr:first-child { border-top: 0; }
.price-table tbody tr:hover { background: #fdfbfa; }
.price-table tbody th { font-weight: 700; white-space: nowrap; }
.price-table td[data-label="Durée"] { white-space: nowrap; }
.price-table tr.price-free, .price-table tr.price-free:hover { background: #f8f3e7; }

.price { font-weight: 800; color: var(--wine); font-size: 1.02rem; white-space: nowrap; }
.price-free .price { color: var(--ok); }

/* Pastille couleur par niveau d'offre */
.tier-dot {
    display: inline-block;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    margin-right: .5rem;
}
.tier-free     { background: var(--ok); }
.tier-bronze   { background: #cd7f32; }
.tier-silver   { background: #9aa3ad; }
.tier-gold     { background: #d4a017; }
.tier-platinum { background: #5d6b7a; }

.eco-badge {
    display: inline-block;
    padding: .18rem .6rem;
    border-radius: 999px;
    background: #e7f3ea;
    color: var(--ok);
    font-weight: 700;
    font-size: .82rem;
    white-space: nowrap;
}

/* Mobile : le tableau devient des cartes empilées, lisibles sans défilement */
@media (max-width: 640px) {
    .price-table thead { display: none; }
    .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; }
    .price-table tbody tr { padding: .35rem 0 .55rem; }
    .price-table tbody th { padding: .6rem .9rem .25rem; font-size: 1.05rem; }
    .price-table td {
        display: flex;
        align-items: baseline;
        gap: .6rem;
        padding: .25rem .9rem;
    }
    .price-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: .85rem;
        color: var(--muted);
        margin-right: auto; /* libellé à gauche, valeur(s) groupées à droite */
    }
    .price-table td.eco-none { display: none; } /* « — » inutile en mode carte */
}

/* ---------- Pages de contenu (légal, contact) ---------- */
.prose { max-width: 100%; }
.prose h2 { margin-top: 1.8rem; }
.prose h3 { margin-top: 1.2rem; }
.prose p, .prose li { color: var(--ink); }
.prose ul { padding-left: 1.2rem; }
.contact-meta { margin: .4rem 0 1.4rem; }

/* ---------- Desktop ---------- */
@media (min-width: 640px) {
    .page-intro h1 { font-size: 2rem; }
    .filters-selects { grid-template-columns: repeat(3, 1fr); }
    .cards { grid-template-columns: 1fr 1fr; }
    .field-row { grid-template-columns: 1fr 1fr; }
    .features { grid-template-columns: repeat(3, 1fr); }
    .hero { padding: 3.2rem 2rem; }
    .hero h1 { font-size: 2.3rem; }
}