/* ============================================================
   .surface — Composant carte unique (Stitch v3)

   Remplace : .card, .home-card, .mood-box, .ded-box, .upc-card,
              cartes inline.
   Variantes :
     .surface           — défaut, panneau d'info
     .surface-flush     — full-bleed mobile (listes longues)
     .surface-accent    — highlight (sondage, événement actif)
   ============================================================ */

.surface {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

@media (min-width: 1025px) {
    .surface {
        padding: 20px;
        border-radius: 20px;
        gap: 12px;
    }
}

/* Full-bleed mobile : pour listes longues sans bord visuel */
@media (max-width: 640px) {
    .surface-flush {
        margin-left: calc(-1 * var(--app-gutter));
        margin-right: calc(-1 * var(--app-gutter));
        border-left: none;
        border-right: none;
        border-radius: 0;
        padding-left: var(--app-gutter);
        padding-right: var(--app-gutter);
    }
}

/* Accent : sondage actif, événement en cours */
.surface-accent {
    border-color: rgba(255, 107, 0, 0.30);
    background: linear-gradient(180deg,
        rgba(255, 107, 0, 0.06) 0%,
        var(--bg-2) 60%);
}

/* Header de section interne */
.surface-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
}

.surface-eyebrow {
    font: 600 12px/1 var(--font-text);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0;
}

.surface-meta {
    font-size: 11px;
    color: var(--text-3);
}

.surface-link {
    margin-left: auto;
    font-size: 12px;
    color: var(--orange);
    text-decoration: none;
    font-weight: 600;
}

.surface-link:hover { color: var(--orange-hi); }

.surface-body {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

/* Fix : l'attribut [hidden] doit cacher la surface même quand .surface
   override son display via class. Indispensable pour cta-event qui
   démarre en hidden et n'est révélé qu'avec un contenu pertinent. */
.surface[hidden],
[hidden] { display: none !important; }