/*
 * Portail des promotions — Burnier & Cie SA
 *
 * Les jetons de couleur et de typographie reprennent ceux du thème
 * `burnier-2026` (projet burnier24) pour rester dans la charte du site
 * corporate. Ils sont recopiés plutôt qu'importés : le portail doit pouvoir
 * vivre sans dépendance à cet autre projet.
 */
:root {
    --c-navy-900: #0b1524;
    --c-navy-700: #16263c;
    --c-navy-500: #2c4566;
    --c-gold-500: #c9a227;
    --c-gold-300: #e6cd84;
    --c-sand-50: #faf8f5;
    --c-grey-200: #e4e1dc;
    --c-grey-400: #a8a49d;
    --c-grey-600: #6b6862;
    --c-ink: #1a1a18;

    --ff-display: 'Cormorant Garamond', Georgia, serif;
    --ff-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ls-caps: 0.14em;
    --r-sm: 2px;
    --r-pill: 999px;
}

* { box-sizing: border-box; }

body {
    background: var(--c-navy-900);
    color: #fff;
    font-family: var(--ff-body);
    font-weight: 300;
    margin: 0;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

.portal {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: clamp(2rem, 1rem + 4vw, 4rem) clamp(1.25rem, 0.5rem + 2.5vw, 3.5rem);
}

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

/* En-tête */
.portal-head { margin-bottom: 3.5rem; text-align: center; }

.brand-mark {
    align-items: center;
    border: 1px solid var(--c-gold-500);
    border-radius: 50%;
    color: var(--c-gold-500);
    display: inline-flex;
    font-family: var(--ff-display);
    font-size: 1.75rem;
    height: 64px;
    justify-content: center;
    margin-bottom: 1.5rem;
    width: 64px;
}

.portal-head h1 {
    font-family: var(--ff-display);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    margin: 0 0 0.75rem;
}

.portal-lead {
    color: var(--c-grey-400);
    font-size: 0.8125rem;
    letter-spacing: var(--ls-caps);
    margin: 0;
    text-transform: uppercase;
}

/* Liste des promotions */
.portal-section { margin-bottom: 3rem; }

.portal-section-title {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--c-grey-400);
    display: flex;
    font-size: 0.6875rem;
    font-weight: 600;
    gap: 0.75rem;
    letter-spacing: var(--ls-caps);
    margin: 0 0 0.5rem;
    padding-bottom: 1rem;
    text-transform: uppercase;
}

.portal-section-title span {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--r-pill);
    color: #fff;
    font-size: 0.625rem;
    padding: 0.2rem 0.5rem;
}

.promo-list { list-style: none; margin: 0; padding: 0; }

.promo-row {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: space-between;
    padding: 1.25rem 0;
}

.promo-row-main { display: flex; flex-direction: column; gap: 0.3rem; }

.promo-name {
    font-family: var(--ff-display);
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.promo-commune {
    color: var(--c-grey-400);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.promo-row-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Statuts — mêmes clés que Promotion::getStatusOptions() */
.badge {
    border-radius: var(--r-sm);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.6rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-a_venir { background: rgba(255, 255, 255, 0.1); color: var(--c-grey-200); }
.badge-en_vente { background: var(--c-gold-500); color: var(--c-navy-900); }
.badge-vendu { background: rgba(255, 255, 255, 0.08); color: var(--c-grey-400); }
.badge-livre { background: rgba(47, 111, 79, 0.24); color: #7fc39b; }
.badge-draft { background: rgba(155, 44, 44, 0.24); color: #e59a9a; }

.promo-link {
    border-bottom: 1px solid rgba(201, 162, 39, 0.5);
    color: var(--c-gold-300);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    padding-bottom: 3px;
    text-transform: uppercase;
    transition: border-color 0.25s, color 0.25s;
    white-space: nowrap;
}

.promo-link span { margin-left: 0.4rem; }
.promo-link:hover { border-bottom-color: var(--c-gold-300); color: #fff; }

.promo-link--none {
    border-bottom-color: transparent;
    color: var(--c-grey-600);
}

.portal-empty {
    border: 1px dashed rgba(255, 255, 255, 0.16);
    color: var(--c-grey-400);
    font-size: 0.875rem;
    margin-bottom: 3rem;
    padding: 2rem;
    text-align: center;
}

/* Accès administration */
.portal-cta {
    align-items: center;
    background: var(--c-sand-50);
    color: var(--c-navy-900);
    display: flex;
    font-size: 0.6875rem;
    font-weight: 600;
    justify-content: space-between;
    letter-spacing: var(--ls-caps);
    padding: 1.15rem 1.5rem;
    text-transform: uppercase;
    transition: background 0.25s, transform 0.25s;
}

.portal-cta:hover { background: #fff; transform: translateY(-2px); }

.portal-foot {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--c-grey-600);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.625rem;
    gap: 0.75rem;
    justify-content: space-between;
    letter-spacing: 0.1em;
    margin-top: 3rem;
    padding-top: 1.5rem;
    text-transform: uppercase;
}

.portal-foot a:hover { color: var(--c-gold-300); }

@media (max-width: 560px) {
    .promo-row { align-items: flex-start; flex-direction: column; }
}