/*
 * WinetPay — La vitrine d'un annonceur (`.vit-*`). 09-CDC-ADS.md, ADS-D19 / ADS-D20 / ADS-D40.
 *
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 * 🔴 LE THÈME POSSÈDE LA COULEUR, LE STYLE POSSÈDE LA FORME
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 *
 * Règle déjà mesurée et déjà payée UNE FOIS sur ce projet : un style qui redéfinit les variables
 * `--c-*` bat le thème par spécificité, et l'annonceur qui change de couleur ne voit rien changer.
 *
 * **Cette feuille ne redéfinit AUCUNE variable `--c-*`.** Les trois formes d'ADS-D40 ne touchent
 * qu'à la mise en page : grilles, ordres, tailles. La couleur vient de `ThemeResolver`, posée sur
 * le scope par la vue — sept presets déjà garantis AA, plus le mode personnalisé.
 *
 * ⚠️ PIÈGE CONNU : la règle générique `button { background: var(--bo-primary) }` d'app.css fuit sur
 * tout <button> non redéclaré. Le bouton de contact REDÉCLARE son fond, survol compris.
 */

.vit-scope {
    --vit-ink: var(--c-text);
    --vit-dim: var(--c-text-muted);
    --vit-card: var(--c-surface);
    --vit-line: var(--c-border);
    --vit-radius: var(--r-lg);
    --vit-dur: 160ms;

    background: var(--c-bg);
    color: var(--vit-ink);
}

/* ═════════════════════════ Commun aux trois formes ═════════════════════════ */

.vit-banniere {
    /* Ratio FIXE : la bannière ne doit pas faire sauter la page en arrivant. */
    aspect-ratio: 4 / 1;
    overflow: hidden;
    background: var(--vit-line);
}

.vit-banniere img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.vit-hero-corps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
    align-items: center;
    padding-block: var(--sp-6);
}

.vit-logo {
    inline-size: 6rem;
    block-size: 6rem;
    border-radius: var(--vit-radius);
    object-fit: cover;
    background: var(--vit-card);
    border: 1px solid var(--vit-line);
}

.vit-identite { flex: 1 1 16rem; min-inline-size: 0; }

.vit-nom {
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--sp-1);
    text-wrap: balance;
}

.vit-slogan { margin: 0 0 var(--sp-1); color: var(--vit-dim); }
.vit-lieu { margin: 0; font-size: var(--fs-small); color: var(--vit-dim); }

.vit-contact { flex: none; }

.vit-tel {
    /* Redéclaré : sans cela, la règle générique d'app.css impose son propre fond. */
    background: var(--c-primary);
    color: var(--c-text-inverse);
    border: 0;
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-md);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    /* ≥ 44 px de cible tactile (§16.12). */
    min-block-size: 2.75rem;
}

.vit-tel:hover { background: var(--c-primary-700); }
.vit-tel:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

.vit-corps { padding-block: var(--sp-6) var(--sp-10); }

.vit-bloc { margin-bottom: var(--sp-8); }

.vit-bloc-t {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--sp-4);
}

.vit-texte { margin: 0; color: var(--vit-ink); line-height: 1.6; }

.vit-offre {
    padding: var(--sp-5);
    background: var(--c-primary-50);
    border: 1px solid var(--c-primary-200);
    border-radius: var(--vit-radius);
}

.vit-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--sp-3);
    list-style: none;
    padding: 0;
    margin: 0;
}

.vit-galerie-i { border-radius: var(--r-md); overflow: hidden; background: var(--vit-line); }

.vit-galerie-i img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform var(--vit-dur) ease;
}

/* `transform` seul : zéro mise en page recalculée, le contrat de performance du projet. */
.vit-galerie-i:hover img { transform: scale(1.03); }

.vit-horaires {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-2) var(--sp-6);
    margin: 0;
}

.vit-horaires dt { color: var(--vit-dim); }
.vit-horaires dd { margin: 0; font-variant-numeric: tabular-nums; }

.vit-reseaux { display: flex; flex-wrap: wrap; gap: var(--sp-3); list-style: none; padding: 0; margin: 0; }

.vit-mention {
    margin: var(--sp-8) 0 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--vit-line);
    font-size: var(--fs-small);
    color: var(--vit-dim);
    text-align: center;
}

/* ═════════════════════════ FORME 1 — « vitrine » (défaut) ═════════════════════════
 *
 * Bannière large, identité centrée en dessous, galerie en grille. La forme d'un commerce qui a
 * quelque chose à MONTRER : un bijoutier, un traiteur, un atelier.
 */

[data-layout="vitrine"] .vit-hero-corps { justify-content: center; text-align: center; }
[data-layout="vitrine"] .vit-identite { flex-basis: 100%; }
[data-layout="vitrine"] .vit-corps { max-inline-size: 60rem; }

/* ═════════════════════════ FORME 2 — « comptoir » ═════════════════════════
 *
 * L'identité et le contact restent FIXES à gauche ; le contenu défile à droite. La forme d'un
 * commerce qu'on appelle : garage, plombier, école. Le numéro ne quitte jamais l'écran.
 */

@media (min-width: 60rem) {
    [data-layout="comptoir"] .vit-corps {
        display: grid;
        grid-template-columns: 18rem 1fr;
        gap: var(--sp-8);
        align-items: start;
    }

    [data-layout="comptoir"] .vit-hero-corps {
        position: sticky;
        inset-block-start: var(--sp-4);
        flex-direction: column;
        align-items: flex-start;
    }
}

[data-layout="comptoir"] .vit-banniere { aspect-ratio: 6 / 1; }

/* ═════════════════════════ FORME 3 — « carte » ═════════════════════════
 *
 * Une colonne unique, dense, pensée pour un pouce. La forme d'une carte de visite qu'on partage
 * sur WhatsApp : tout est lisible sans un seul geste latéral.
 */

[data-layout="carte"] .vit-corps { max-inline-size: 34rem; }
[data-layout="carte"] .vit-banniere { display: none; }
[data-layout="carte"] .vit-hero-corps { flex-direction: column; align-items: center; text-align: center; }
[data-layout="carte"] .vit-logo { inline-size: 5rem; block-size: 5rem; border-radius: 50%; }
[data-layout="carte"] .vit-tel { inline-size: 100%; }
[data-layout="carte"] .vit-galerie { grid-template-columns: repeat(2, 1fr); }
[data-layout="carte"] .vit-bloc { margin-bottom: var(--sp-6); }

/*
 * Une animation qu'on ne peut pas refuser n'est pas premium (§16.12).
 */
@media (prefers-reduced-motion: reduce) {
    .vit-scope *,
    .vit-scope *::before,
    .vit-scope *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}