/*
Theme Name: SandInes
Description: Thème sur mesure pour le blog de voyage Sandrine & Inès, sur le modèle du design original Wix.
Author: IMS
Version: 1.7
Text Domain: sandines
*/

:root {
    --color-text: #2b2b2b;
    --color-muted: #767676;
    --color-bg: #ffffff;
    --color-accent: #1a1a1a;
    --color-line: #e6b8d8;
    --font-main: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --max-width: 700px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-main);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

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

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.site-header {
    text-align: center;
    padding: 60px 20px 30px;
    border-bottom: 1px solid var(--color-line);
}

.site-title {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 700;
    font-size: 34px;
    margin: 0 0 8px;
    letter-spacing: 0.5px;
}

.site-tagline {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    color: var(--color-muted);
    font-size: 15px;
    margin: 0;
}

.header-banner {
    position: relative;
    height: 260px;
    margin-top: 30px;
    border-top: 4px solid #e6b8d8;
    border-bottom: 4px solid #e6b8d8;
    overflow: hidden;
}

.header-banner .banner-track {
    display: flex;
    height: 100%;
    width: max-content;
    animation: sandines-scroll 30s linear infinite;
}

.header-banner .banner-slide {
    flex: 0 0 auto;
    height: 100%;
    width: 360px;
    margin-right: 4px;
}

.header-banner .banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes sandines-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.site-nav {
    margin-top: 20px;
}

.site-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 0;
    margin: 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Feed */
.post-list {
    padding: 40px 0;
}

.post-card {
    display: flex;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--color-line);
}

.post-card:last-child {
    border-bottom: none;
}

.post-card .post-thumb {
    flex: 0 0 220px;
    width: 220px;
    height: 220px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0;
}

.post-card .post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card .post-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.post-card .post-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px;
}

.post-card .post-excerpt {
    color: var(--color-text);
    font-size: 14px;
    margin: 0 0 14px;
}

.post-card .post-meta {
    margin-bottom: 10px;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--color-muted);
}

.post-meta .author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.post-meta .author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Single post */
.single-post-header {
    padding: 50px 0 20px;
}

.single-post-header .post-title {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 16px;
}

.single-post-content {
    padding: 20px 0 50px;
    font-size: 16px;
}

.single-post-content img {
    border-radius: 4px;
    margin: 24px 0;
    cursor: zoom-in;
}

.single-post-content p {
    margin: 0 0 20px;
    text-align: justify;
}

/* Newsletter */
.newsletter-block {
    text-align: center;
    padding: 50px 20px;
    border-top: 1px solid var(--color-line);
}

.newsletter-block h2 {
    font-size: 20px;
    margin: 0 0 8px;
}

.newsletter-block p {
    color: var(--color-muted);
    font-size: 14px;
    margin: 0 0 20px;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.newsletter-form input[type="email"] {
    padding: 10px 14px;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    font-size: 14px;
    min-width: 240px;
}

.newsletter-form button {
    padding: 10px 20px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

/* Footer */
.site-footer {
    text-align: center;
    padding: 30px 20px;
    font-size: 13px;
    color: var(--color-muted);
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 0 50px;
    font-size: 14px;
}
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    color: var(--color-text);
    text-decoration: none;
    border-radius: 50%;
    box-sizing: border-box;
}
.pagination .page-numbers.current {
    border: 1px solid var(--color-line);
}
.pagination .page-numbers.dots {
    border: none;
}


@media (max-width: 560px) {
    .post-card {
        flex-direction: column;
    }
    .post-card .post-thumb {
        width: 100%;
        height: 200px;
    }
}

/* Galeries photo dans les articles (ajoute par Ines/Claude - juillet 2026) */
.gallery-inline, .post-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 16px 0 20px 0;
}
.gallery-inline img, .post-gallery img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 4px;
    cursor: zoom-in;
}
.gallery-inline.natural img, .post-gallery.natural img,
img.lb-thumb.natural-size {
    height: auto;
    object-fit: initial;
}
.single-post-content img.lb-thumb {
    cursor: zoom-in;
}

/* Compatibilité avec le bloc Galerie natif de l'éditeur WordPress : même rendu
   en grille de 3 colonnes que les galeries importées, quel que soit le nombre
   de colonnes choisi dans l'éditeur */
.single-post-content .wp-block-gallery.wp-block-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 20px 0 !important;
    float: none !important;
}
/* L'enveloppe de chaque photo (figure.wp-block-image) est traitée par WordPress
   comme un élément flex avec flex-basis calculé, ce qui l'écrase à quelques
   pixels de large dans un contexte grid. On neutralise ça explicitement. */
.single-post-content .wp-block-gallery.wp-block-gallery > * {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}
.single-post-content .wp-block-gallery.wp-block-gallery img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    margin: 0 !important;
}

/* Lightbox plein ecran */
#sandines-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#sandines-lightbox.open { display: flex; }
#sandines-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
}
#sandines-lightbox .lb-close,
#sandines-lightbox .lb-prev,
#sandines-lightbox .lb-next {
    position: fixed;
    color: #fff;
    background: rgba(0,0,0,0.5);
    border: none;
    font-size: 28px;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 4px;
    z-index: 10000;
}
#sandines-lightbox .lb-close { top: 20px; right: 20px; }
#sandines-lightbox .lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
#sandines-lightbox .lb-next { right: 20px; top: 50%; transform: translateY(-50%); }

.post-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 32px 0 24px 0;
    padding-top: 20px;
    border-top: 1px solid var(--color-line);
}
.post-navigation .nav-previous,
.post-navigation .nav-next,
.post-navigation .nav-home {
    flex: 1;
}
.post-navigation .nav-next {
    text-align: right;
}
.post-navigation .nav-home {
    text-align: center;
}
.post-navigation a {
    display: inline-block;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--color-text, #2b2b2b);
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    font-size: 14px;
    transition: background 0.15s ease;
}
.post-navigation a:hover {
    background: #f2f2f2;
}
@media (max-width: 600px) {
    .post-navigation {
        flex-direction: column;
        align-items: stretch;
    }
    .post-navigation .nav-next {
        text-align: left;
    }
    .post-navigation .nav-home {
        text-align: center;
    }
}
.sandines-comment-divider {
    border: none;
    border-top: 1px solid var(--color-line);
    margin: 24px 0;
}
#commentform,
.comment-respond,
#respond {
    max-width: 100%;
}
#commentform textarea,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
}
#commentform p {
    max-width: 100%;
}
.post-navigation-top {
    margin: 0 0 24px 0;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

.newsletter-message {
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 0 0 12px 0;
}
.newsletter-success {
    background: #e6f4ea;
    color: #1e4620;
}
.newsletter-error {
    background: #fce8e6;
    color: #611a15;
}
.header-cta {
    text-align: center;
    padding: 15px 0;
}
.header-cta .btn-carte {
    display: inline-block;
    padding: 10px 24px;
    background-color: rgb(230, 184, 216);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}
.header-cta .btn-carte:hover {
    opacity: 0.85;
}