/*
Theme Name: ZINA Brand
Theme URI: https://zinaapp.eu
Author: ZINA
Description: Thème ZINA construit sur le design system zina-brand.css — complet, réactif, compatible Live Composer, WooCommerce et Gutenberg. Thème sombre/clair avec bascule, classes site-*.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: zinabrand
Tags: dark, light, responsive, drag-and-drop, live-composer, woocommerce, block-editor
*/

/* ====== NAVIGATION WORDPRESS (adaptation au design system site-*) ====== */

/* Barre du haut : grille 3 colonnes (brand | nav | actions) */
.site-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding-block: 18px 0;
}
.site-top .site-mainnav { grid-column: 2; justify-self: center; }
.site-top .site-actions { grid-column: 3; justify-self: end; display: flex; gap: 8px; align-items: center; }

/* Nav WordPress : <ul><li> → horizontal, style pilule */
.site-top .site-mainnav ul {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-top .site-mainnav li {
    margin: 0;
    padding: 0;
}
.site-top .site-mainnav a {
    color: var(--zina-muted, #999);
    text-decoration: none;
    padding: 8px 13px;
    border-radius: var(--zina-pill, 999px);
    font-size: 13px;
    border: 1px solid transparent;
    display: inline-block;
    transition: color .15s, border-color .15s, background .15s;
}
.site-top .site-mainnav a:hover,
.site-top .site-mainnav .current-menu-item a,
.site-top .site-mainnav a[aria-current="page"] {
    color: var(--zina-text, #eee);
    border-color: var(--zina-border-strong, #444);
    background: var(--zina-surface-raised, rgba(255,255,255,.06));
}

/* Boutons d'action (pilules propre, pas cheap) */
.site-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.site-actions .zina-chip,
.site-actions a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--zina-text, #eee);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: var(--zina-pill, 999px);
    border: 1px solid var(--zina-border-strong, rgba(128,128,128,.3));
    background: var(--zina-surface-raised, rgba(255,255,255,.04));
    transition: border-color .15s, background .15s;
    white-space: nowrap;
}
.site-actions .zina-chip:hover,
.site-actions a:hover {
    border-color: var(--zina-accent, #6c7bff);
    background: var(--zina-surface-hover, rgba(255,255,255,.08));
    text-decoration: none;
}

/* Bascule de thème */
.site-theme-toggle {
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

/* ====== RAIL DE MARQUE (gauche) ====== */
.site-rail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px 20px;
}
.site-rail__brand {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--zina-text, #eee);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.site-rail__brand:hover { text-decoration: none; color: var(--zina-text); }
.site-rail__kicker {
    font-size: .82rem;
    color: var(--zina-muted);
    margin: 0;
}
.site-rail__statement {
    font-size: .95rem;
    font-weight: 500;
    color: var(--zina-text);
    margin: 0;
}
.site-rail__foot {
    font-size: .78rem;
    color: var(--zina-muted);
    margin: 0;
    margin-top: auto;
}

/* ====== PIED DE PAGE ====== */
.site-footer {
    padding: 28px 20px;
    border-top: 1px solid var(--zina-border, rgba(128,128,128,.2));
    font-size: .82rem;
    color: var(--zina-muted);
}
.site-footer a {
    color: var(--zina-muted);
    text-decoration: none;
    margin-inline: 8px;
}
.site-footer a:hover { color: var(--zina-text); text-decoration: underline; }

/* ====== WOOCOMMERCE : cartes produits ====== */
.woocommerce ul.products li.product {
    background: var(--zina-surface, rgba(255,255,255,.03));
    border: 1px solid var(--zina-border, rgba(128,128,128,.2));
    border-radius: 12px;
    padding: 20px;
}
.woocommerce ul.products li.product h2 {
    font-size: 1.05rem;
    color: var(--zina-text);
}
.woocommerce ul.products li.product .price {
    color: var(--zina-accent, #6c7bff);
    font-weight: 600;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .site-pill {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--zina-pill, 999px);
    background: var(--zina-accent, #6c7bff);
    color: #fff;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: opacity .15s;
}
.woocommerce ul.products li.product .button:hover { opacity: .85; }

/* ====== RESPONSIVE ====== */
@media (max-width: 960px) {
    .site-layout { grid-template-columns: 1fr; }
    .site-rail { flex-direction: row; align-items: center; justify-content: space-between; padding: 16px; }
    .site-rail__kicker, .site-rail__foot { display: none; }
    .site-rail__statement { font-size: .85rem; }
    .site-top { grid-template-columns: 1fr; text-align: center; }
    .site-top .site-mainnav { grid-column: 1; justify-self: stretch; }
    .site-top .site-mainnav ul { justify-content: center; }
    .site-top .site-actions { grid-column: 1; justify-self: center; margin-top: 8px; }
}
@media (max-width: 600px) {
    .site-top .site-mainnav ul { flex-direction: column; gap: 2px; }
    .site-top .site-actions { flex-direction: column; }
}

/* Le CSS complet du design system est chargé dans functions.php */