/* ═══════════════════════════════════════════════════════════
   Studio ESEO — Page Concours photo (concours.css)

    charger après cineseo.css (qui fournit le menu, le pied de page
   et les classes .cin-section / .section-head / .section-title…).
   Typographie : typo.css · thèmes clair/sombre : base.css (section 1d).

   Identité de la page : ambre #f0a500 sur noir / crème.
═══════════════════════════════════════════════════════════ */

[hidden] { display: none !important; }

/* ── Couleurs (thème sombre par défaut ; la variante claire est dans base.css) ── */
:root:has(.concours-hero),
body:has(.concours-hero) {
    --noir:      #0d0d0f;
    --blanc:     #f5f3ee;
    --gris:      #17171c;
    --muted:     #9a9aaa;
    --accent:    #f0a500;
    --on-accent: #0d0d0f;
}

body:has(.concours-hero) {
    margin: 0;
    background: var(--noir);
    color: var(--blanc);
    font-family: var(--font);
}

/* ── Ouverture ───────────────────────────────────────────── */
.concours-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 160px clamp(24px, 6vw, 96px) 96px;
    overflow: hidden;
    background: #0d0d0f;
    color: var(--blanc);
}

/* Fond : halo ambré + image facultative « concours-hero.jpg » (à placer à côté de la page) */
.concours-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 78% 18%, rgba(240, 165, 0, 0.30), transparent 55%),
        linear-gradient(to bottom, rgba(13, 13, 15, 0.25), #0d0d0f 96%),
        url("concours-hero.jpg") center / cover no-repeat;
    pointer-events: none;
}

.concours-hero-content { position: relative; max-width: 900px; }

.concours-label {
    margin: 0 0 20px;
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--accent);
}

.concours-title {
    margin: 0 0 28px;
    font-size: var(--fs-hero);
    font-weight: var(--fw-bold);
    line-height: var(--lh-hero);
    letter-spacing: var(--ls-title);
    color: var(--blanc);
}
.concours-title span { color: var(--accent); }

.concours-desc {
    margin: 0;
    max-width: 56ch;
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: var(--muted);
}

/* ── Concours actuel ─────────────────────────────────────── */
.concours-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    max-width: 960px;
    padding: clamp(24px, 4vw, 48px);
    background: var(--gris);
    border-radius: 16px;
}

.concours-statut {
    padding: 4px 14px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--accent);
}
.concours-statut.en-cours { background: var(--accent); color: var(--on-accent); }
.concours-statut.termine  { border-color: var(--muted); color: var(--muted); }

.concours-dates { margin: 0; font-size: var(--fs-ui); color: var(--muted); }
.concours-theme { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-title); color: var(--blanc); }
.concours-texte { margin: 0; max-width: 70ch; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--muted); white-space: pre-line; }
.concours-vide { margin: 0; color: var(--muted); }

/* ── Participation en ligne (formulaire + widget Uploadcare) ── */
.participation {
    align-self: stretch;
    margin-top: 12px;
    padding-top: 28px;
    border-top: 1px solid color-mix(in srgb, var(--blanc) 12%, transparent);
}
.participation-titre { margin: 0 0 6px; font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-title); color: var(--blanc); }
.participation-aide  { margin: 0 0 20px; font-size: var(--fs-ui); color: var(--muted); }
.participation-form  { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 560px; }
.participation-form .champ { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.participation-form label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--muted);
}
.participation-form input {
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--blanc) 22%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--blanc) 6%, transparent);
    color: var(--blanc);
    font: inherit;
    font-size: var(--fs-ui);
}
.participation-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.participation-upload { display: flex; flex-direction: column; gap: 8px; }
.participation-form button[type="submit"] { border: 0; cursor: pointer; font: inherit; font-weight: var(--fw-semibold); }
.participation-form button[type="submit"]:disabled { opacity: 0.45; cursor: not-allowed; }
.participation-etat { margin: 0; min-height: 1.4em; font-size: var(--fs-ui); color: var(--muted); }
.participation-etat.erreur { color: #ff8f80; }

/* ── Gagnants ────────────────────────────────────────────── */
.gagnants {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
}

.gagnant {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    background: var(--gris);
    border-radius: 12px;
}
.gagnant.rang-1 { box-shadow: 0 0 0 2px var(--accent); }

.gagnant-photo {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: #000;
    font: inherit;
    cursor: zoom-in;
}
.gagnant-photo.vide { cursor: default; background: color-mix(in srgb, var(--blanc) 8%, transparent); }
.gagnant-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.gagnant-photo:hover img { transform: scale(1.04); }
.gagnant-photo:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.gagnant-rang {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.gagnant-corps { padding: 16px 20px 20px; }
.gagnant-nom   { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--blanc); }
.gagnant-titre { margin: 4px 0 0; font-size: var(--fs-ui); font-style: italic; color: var(--muted); }

/* ── Palmarès ────────────────────────────────────────────── */
.palmares-edition {
    padding: 40px 0;
    border-top: 1px solid color-mix(in srgb, var(--blanc) 12%, transparent);
}
.palmares-edition:first-child { border-top: 0; padding-top: 0; }
.palmares-titre { margin: 0 0 6px; font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-title); color: var(--blanc); }
.palmares-meta  { margin: 0 0 24px; font-size: var(--fs-ui); color: var(--muted); }

/* ── Photo en grand ──────────────────────────────────────── */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    background: rgba(0, 0, 0, 0.92);
    cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 8px; cursor: default; }
.lightbox-cap { margin: 0; max-width: 70ch; text-align: center; font-size: var(--fs-ui); color: #f5f3ee; }
.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.12); }

@media (max-width: 600px) {
    .concours-hero { padding-top: 120px; padding-bottom: 64px; }
    .gagnants { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
}