/*

Theme Name: Seliweb View

Theme URI: https://github.com/seliweb

Description: Thème front-end pour le plugin Seliweb - Système d'Échange Local

Version: 0.7

Author: Philippe Le Duigou

Text Domain: seliweb-view

*/



/* ================================================================

   RESET & BASE

   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



:root {

    --color-primary:    #1d6a4a;

    --color-primary-dk: #134d35;

    --color-accent:     #e8a020;

    --color-accent-lt:  #fdf3e0;

    --color-text:       #222;

    --color-text-soft:  #555;

    --color-border:     #dde3dd;

    --color-bg:         #f4f6f4;

    --color-white:      #fff;

    --color-header-bg:  #1d6a4a;

    --color-footer-bg:  #134d35;

    --radius:           6px;

    --shadow:           0 2px 10px rgba(0,0,0,.08);

    --container:        1200px;

    --sidebar-w:        280px;

    --font-title:       'Merriweather', Georgia, serif;

    --font-body:        'Source Sans 3', 'Segoe UI', sans-serif;

}



html { font-size: 16px; scroll-behavior: smooth; }



body {

    font-family: var(--font-body);

    font-size: 1rem;

    line-height: 1.7;

    color: var(--color-text);

    background: var(--color-bg);

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}



a { color: var(--color-primary); text-decoration: none; }

a:hover { text-decoration: underline; }



img { max-width: 100%; height: auto; display: block; }



.swv-container {

    width: 100%;

    max-width: var(--container);

    margin: 0 auto;

    padding: 0 20px;

}



/* ================================================================

   BANNIÈRE (header)

   ================================================================ */

#swv-header {

    background: var(--color-header-bg);

    color: var(--color-white);

    position: relative;

}



.swv-header-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 120px;

    padding: 16px 20px;

    max-width: var(--container);

    margin: 0 auto;

    gap: 20px;

}



/* Bannière image de fond */

#swv-header.has-banner {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

#swv-header.has-banner::before {

    content: '';

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,.45);

}

#swv-header.has-banner .swv-header-inner {

    position: relative;

    z-index: 1;

}



/* Logo + titre */

.swv-site-brand {

    display: flex;

    align-items: center;

    gap: 16px;

    flex: 1;

    min-width: 0;

}



.swv-site-logo img {

    height: 72px;

    width: auto;

    border-radius: var(--radius);

}



.swv-site-logo-placeholder {

    width: 72px;

    height: 72px;

    background: rgba(255,255,255,.15);

    border: 2px solid rgba(255,255,255,.3);

    border-radius: var(--radius);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

    color: rgba(255,255,255,.7);

}



.swv-site-title {

    font-family: var(--font-title);

    font-size: clamp(1.4rem, 3vw, 2.2rem);

    font-weight: 700;

    color: var(--color-white);

    line-height: 1.2;

    text-shadow: 0 1px 3px rgba(0,0,0,.3);

}



.swv-site-desc {

    font-size: .9rem;

    color: rgba(255,255,255,.75);

    margin-top: 4px;

}



/* Bouton connexion */

.swv-login-btn {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    color: var(--color-white);

    text-decoration: none;

    padding: 10px 14px;

    border-radius: var(--radius);

    background: rgba(255,255,255,.12);

    border: 1px solid rgba(255,255,255,.25);

    transition: background .2s;

    white-space: nowrap;

    flex-shrink: 0;

}

.swv-login-btn:hover {

    background: rgba(255,255,255,.22);

    text-decoration: none;

    color: var(--color-white);

}



.swv-login-icon {

    width: 36px;

    height: 36px;

}



.swv-login-label {

    font-size: .78rem;

    font-weight: 600;

    letter-spacing: .04em;

    text-transform: uppercase;

}



/* ================================================================

   NAVIGATION PRINCIPALE (optionnelle)

   ================================================================ */

#swv-nav {

    background: var(--color-primary-dk);

    border-bottom: 2px solid var(--color-accent);

}



.swv-nav-inner {

    max-width: var(--container);

    margin: 0 auto;

    padding: 0 20px;

    display: flex;

    align-items: center;

    min-height: 44px;

}



#swv-nav ul {

    list-style: none;

    display: flex;

    gap: 4px;

    flex-wrap: wrap;

}



#swv-nav ul li a {

    display: block;

    padding: 10px 14px;

    color: rgba(255,255,255,.85);

    font-size: .9rem;

    font-weight: 500;

    border-radius: 3px;

    transition: background .15s, color .15s;

}


#swv-nav ul li a:hover,
#swv-nav ul li.current-menu-item > a {

    background: rgba(255,255,255,.12);

    color: var(--color-white);

    text-decoration: none;

}



/* ================================================================

   BLOC RECHERCHE

   ================================================================ */

#swv-search {

    background: var(--color-white);

    border-bottom: 1px solid var(--color-border);

    padding: 16px 0;

}



.swv-search-inner {

    max-width: var(--container);

    margin: 0 auto;

    padding: 0 20px;

}



.swv-search-form {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    align-items: flex-end;

}



.swv-search-form select {

    padding: 8px 12px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    font-size: .9rem;

    font-family: var(--font-body);

    background: var(--color-bg);

    color: var(--color-text);

    cursor: pointer;

    min-width: 150px;

}

.swv-search-form select:focus {

    outline: none;

    border-color: var(--color-primary);

}



.swv-search-btn {

    padding: 8px 20px;

    background: var(--color-primary);

    color: var(--color-white);

    border: none;

    border-radius: var(--radius);

    font-size: .9rem;

    font-family: var(--font-body);

    font-weight: 600;

    cursor: pointer;

    transition: background .15s;

}

.swv-search-btn:hover { background: var(--color-primary-dk); }



.swv-reset-btn {

    padding: 8px 16px;

    background: transparent;

    color: var(--color-text-soft);

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    font-size: .9rem;

    font-family: var(--font-body);

    cursor: pointer;

    transition: border-color .15s;

}

.swv-reset-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }



/* ================================================================

   BARRE PAGINATION

   ================================================================ */

.swv-pagination-bar {

    background: var(--color-white);

    border-bottom: 1px solid var(--color-border);

    padding: 10px 0;

}



.swv-pagination-bar-bottom {

    border-bottom: none;

    border-top: 1px solid var(--color-border);

    padding: 10px 0 0;

    margin-top: 16px;

}



.swv-pagination-bar-inner {

    max-width: var(--container);

    margin: 0 auto;

    padding: 0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    flex-wrap: wrap;

}



.swv-page-info {

    font-size: .85rem;

    color: var(--color-text-soft);

    flex: 1;

    min-width: 160px;

}



.swv-bar-controls {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

}



/* Toggle liste/colonnes */

.swv-vue-toggle {

    display: flex;

    gap: 4px;

}



.swv-vue-btn {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 5px 10px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    background: var(--color-white);

    color: var(--color-text-soft);

    font-size: .82rem;

    font-family: var(--font-body);

    cursor: pointer;

    line-height: 1;

    transition: background .15s, color .15s, border-color .15s;

}



.swv-vue-btn:hover {

    background: var(--color-accent-lt);

    border-color: var(--color-primary);

    color: var(--color-primary);

}



.swv-vue-btn-actif {

    background: var(--color-primary);

    border-color: var(--color-primary);

    color: var(--color-white);

}



.swv-vue-btn-actif:hover {

    background: var(--color-primary-dk);

    color: var(--color-white);

}



.swv-pages-nav {

    display: flex;

    align-items: center;

    gap: 4px;

    flex-wrap: wrap;

}



.swv-page-prev,

.swv-page-next {

    padding: 5px 12px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    font-size: .85rem;

    color: var(--color-primary);

    background: var(--color-white);

    text-decoration: none;

    transition: background .15s;

}

.swv-page-prev:hover,

.swv-page-next:hover {

    background: var(--color-accent-lt);

    text-decoration: none;

}

.swv-page-prev.disabled,

.swv-page-next.disabled {

    color: #bbb;

    border-color: #eee;

    pointer-events: none;

}



.swv-page-num {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 30px;

    height: 30px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    font-size: .85rem;

    color: var(--color-primary);

    text-decoration: none;

    padding: 0 4px;

    transition: background .15s;

}

.swv-page-num:hover { background: var(--color-accent-lt); text-decoration: none; }

.swv-page-num.current {

    background: var(--color-primary);

    color: var(--color-white);

    border-color: var(--color-primary);

    font-weight: 700;

    pointer-events: none;

}

.swv-page-ellipsis {

    color: var(--color-text-soft);

    padding: 0 4px;

    font-size: .85rem;

}



/* ================================================================

   CONTENU PRINCIPAL : annonces + sidebar

   ================================================================ */

#swv-main {

    flex: 1;

    padding: 24px 0;

}



.swv-main-inner {

    max-width: var(--container);

    margin: 0 auto;

    padding: 0 20px;

    display: grid;

    grid-template-columns: 1fr var(--sidebar-w);

    gap: 24px;

    align-items: start;

}



/* ----------------------------------------------------------------

   Annonces en LISTE

   ---------------------------------------------------------------- */

.swv-annonces-liste .swv-card {

    display: flex;

    gap: 16px;

    background: var(--color-white);

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    padding: 14px;

    margin-bottom: 14px;

    transition: box-shadow .15s;

}

.swv-annonces-liste .swv-card:hover { box-shadow: var(--shadow); }



.swv-annonces-liste .swv-card-photo {

    flex-shrink: 0;

    width: 110px;

    height: 85px;

}

.swv-annonces-liste .swv-card-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 4px;

}

.swv-annonces-liste .swv-card-no-photo {

    width: 100%;

    height: 100%;

    background: #eee;

    border-radius: 4px;

}



.swv-annonces-liste .swv-card-body { flex: 1; min-width: 0; }



/* ----------------------------------------------------------------

   Annonces en COLONNES (grille)

   ---------------------------------------------------------------- */

.swv-annonces-grille {

    display: grid;

    grid-template-columns: repeat(var(--swv-cols, 3), 1fr);

    gap: 16px;

}



.swv-annonces-grille .swv-card {

    background: var(--color-white);

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    overflow: hidden;

    transition: box-shadow .15s, transform .15s;

    display: flex;

    flex-direction: column;

}

.swv-annonces-grille .swv-card:hover {

    box-shadow: var(--shadow);

    transform: translateY(-2px);

}



.swv-annonces-grille .swv-card-photo {

    width: 100%;

    aspect-ratio: 4/3;

    overflow: hidden;

}

.swv-annonces-grille .swv-card-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .3s;

}

.swv-annonces-grille .swv-card:hover .swv-card-photo img {

    transform: scale(1.04);

}

.swv-annonces-grille .swv-card-no-photo {

    width: 100%;

    aspect-ratio: 4/3;

    background: #e8ede8;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #aaa;

    font-size: 2rem;

}



.swv-annonces-grille .swv-card-body {

    padding: 12px;

    flex: 1;

    display: flex;

    flex-direction: column;

}



/* Éléments communs aux deux modes */

.swv-card-id {

    font-size: .75rem;

    color: #aaa;

    margin-bottom: 4px;

}



.swv-card-title {

    font-family: var(--font-title);

    font-size: 1rem;

    font-weight: 700;

    line-height: 1.3;

    margin-bottom: 6px;

}

.swv-card-title a { color: var(--color-text); }

.swv-card-title a:hover { color: var(--color-primary); text-decoration: none; }



.swv-card-date {

    font-size: .78rem;

    color: var(--color-text-soft);

    margin-bottom: 6px;

}



.swv-card-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 6px;

}



.swv-tag {

    display: inline-block;

    padding: 2px 8px;

    border-radius: 10px;

    font-size: .72rem;

    font-weight: 600;

    letter-spacing: .02em;

}

.swv-tag-cat     { background: #e0ede7; color: #1d6a4a; }

.swv-tag-type    { background: #e8f0fe; color: #1a56a0; }

.swv-tag-rubrique{ background: #fef3e2; color: #8a5100; }



.swv-card-statut {

    display: inline-block;

    font-weight: 700;

    color: #5a5a9a;

    font-size: .85rem;

    margin-bottom: 4px;

}



.swv-card-prix {

    font-size: .9rem;

    font-weight: 600;

    color: var(--color-primary-dk);

    margin-top: auto;

    padding-top: 6px;

}



.swv-card-don { color: #1d6a4a; }





.swv-card-prix-item { white-space: nowrap; }



.swv-card-prix-coord {

    display: inline-block;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .04em;

    color: #fff;

    background: var(--color-primary, #1d6a4a);

    border-radius: 3px;

    padding: 1px 4px;

    margin: 0 2px;

    vertical-align: middle;

}



/* Vide */

.swv-annonces-empty {

    background: var(--color-white);

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    padding: 40px;

    text-align: center;

    color: var(--color-text-soft);

    font-style: italic;

}



/* ================================================================

   SIDEBAR

   ================================================================ */

#swv-sidebar {

    position: sticky;

    top: 20px;

}



.swv-widget {

    background: var(--color-white);

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    padding: 18px;

    margin-bottom: 20px;

}



.swv-widget-title {

    font-family: var(--font-title);

    font-size: 1rem;

    font-weight: 700;

    color: var(--color-primary);

    border-bottom: 2px solid var(--color-accent);

    padding-bottom: 8px;

    margin-bottom: 14px;

}



.swv-widget ul { list-style: none; }

.swv-widget ul li { padding: 5px 0; border-bottom: 1px solid var(--color-border); font-size: .9rem; }

.swv-widget ul li:last-child { border-bottom: none; }



/* ================================================================

   PIED DE PAGE

   ================================================================ */

#swv-footer {

    background: var(--color-footer-bg);

    color: rgba(255,255,255,.8);

    padding: 32px 0 16px;

    margin-top: auto;

}



.swv-footer-inner {

    max-width: var(--container);

    margin: 0 auto;

    padding: 0 20px;

}



.swv-footer-menus {

    display: flex;

    flex-wrap: wrap;

    gap: 32px;

    margin-bottom: 24px;

}



.swv-footer-menu h4 {

    font-family: var(--font-title);

    font-size: .9rem;

    font-weight: 700;

    color: var(--color-white);

    text-transform: uppercase;

    letter-spacing: .06em;

    margin-bottom: 10px;

}



.swv-footer-menu ul { list-style: none; }

.swv-footer-menu ul li { margin-bottom: 6px; }

.swv-footer-menu ul li a {

    color: rgba(255,255,255,.7);

    font-size: .88rem;

    transition: color .15s;

}

.swv-footer-menu ul li a:hover { color: var(--color-white); text-decoration: none; }



.swv-footer-bottom {

    border-top: 1px solid rgba(255,255,255,.12);

    padding-top: 14px;

    font-size: .8rem;

    color: rgba(255,255,255,.5);

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 8px;

}



/* ================================================================

   PAGE UNIQUE (single / page)

   ================================================================ */

.swv-single-wrap {

    max-width: var(--container);

    margin: 0 auto;

    padding: 24px 20px;

}



.swv-content {

    background: var(--color-white);

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    padding: 28px 32px;

}



.swv-content h1, .swv-content h2, .swv-content h3 {

    font-family: var(--font-title);

    margin-bottom: .6em;

}



.swv-content p { margin-bottom: 1em; }



/* ================================================================

   DÉTAIL ANNONCE

   ================================================================ */

.swv-detail-wrap {

    background: var(--color-white);

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    padding: 24px;

}



.swv-detail-back {

    display: inline-block;

    margin-bottom: 16px;

    font-size: .9rem;

    color: var(--color-primary);

}



.swv-detail-photos {

    display: flex;

    gap: 12px;

    margin-bottom: 20px;

    flex-wrap: wrap;

}

.swv-detail-photos img {

    max-width: 300px;

    max-height: 220px;

    object-fit: cover;

    border-radius: 4px;

    border: 1px solid var(--color-border);

}



.swv-detail-texte {

    font-size: .95rem;

    line-height: 1.75;

    color: #333;

    margin-bottom: 20px;

    white-space: pre-line;

}



.swv-detail-contact {

    border-top: 1px solid var(--color-border);

    padding-top: 16px;

}

.swv-detail-contact h4 {

    font-family: var(--font-title);

    font-size: 1rem;

    margin-bottom: 10px;

    color: var(--color-primary);

}



/* ================================================================

   PAGES DE CATÉGORIES

   ================================================================ */

.swv-category-wrap {

    max-width: 800px;

    margin: 0 auto;

    padding: 20px;

}



.swv-category-wrap h1 {

    font-family: var(--font-title);

    font-size: 2rem;

    color: var(--color-primary);

    margin-bottom: 20px;

    text-align: center;

}



.swv-posts-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.swv-post-item {

    background: var(--color-white);

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    padding: 20px;

    box-shadow: var(--shadow);

}



.swv-post-item h2 {

    font-family: var(--font-title);

    font-size: 1.25rem;

    margin-bottom: 10px;

}



.swv-post-item h2 a {

    color: var(--color-text);

    text-decoration: none;

}



.swv-post-item h2 a:hover {

    color: var(--color-primary);

    text-decoration: underline;

}



.swv-post-meta {

    font-size: .85rem;

    color: var(--color-text-soft);

    margin-bottom: 10px;

}



.swv-post-excerpt {

    color: var(--color-text);

    line-height: 1.6;

}



/* ================================================================

   RESPONSIVE

   ================================================================ */

@media (max-width: 900px) {

    .swv-main-inner {

        grid-template-columns: 1fr;

    }

    #swv-sidebar {

        position: static;

    }

    .swv-annonces-grille {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 600px) {

    .swv-header-inner { flex-wrap: wrap; min-height: auto; }

    .swv-search-form { flex-direction: column; }

    .swv-search-form select,

    .swv-search-btn,

    .swv-reset-btn { width: 100%; }

    .swv-annonces-grille { grid-template-columns: 1fr; }

    .swv-annonces-liste .swv-card { flex-direction: column; }

    .swv-annonces-liste .swv-card-photo { width: 100%; height: 160px; }

    .swv-footer-menus { flex-direction: column; gap: 20px; }

    .swv-footer-bottom { flex-direction: column; }

}