/* v3 Updated CSS with improved 'Voir sur Flickr' button */
/* css/styles.css */
:root {
    --gap: 1rem;
    --gap-header: 3rem;
    --margin: 2rem;
    --card-bg: #fff;
    --text-color: #333;
    --secondary-text: #666;
    --nav-bg: #fff;
    --footer-bg: #fff;
    --overlay-bg: rgba(0, 0, 0, 0.6);
    --radius: 0.5rem;
    --animation-duration: 0.5s;
    --transition-duration: 0.3s;
    /* Dark mode variables */
    --dark-bg: #121212;
    --dark-card-bg: #1e1e1e;
    --dark-text: #eee;
    --dark-secondary-text: #ccc;
    --dark-nav-bg: #1a1a1a;
    --dark-footer-bg: #1a1a1a;
}

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

body {
    font-family: system-ui, sans-serif;
    background: var(--card-bg);
    color: var(--text-color);
    padding: 0 var(--margin);
    transition: background var(--transition-duration) ease,
    color var(--transition-duration) ease;
}

/* Dark Mode */
body.dark-mode {
    background: var(--dark-bg);
    color: var(--dark-text);
}

/* Navbar full-width */
.navbar {
    width: calc(100% + 2 * var(--margin));
    margin-left: calc(-1 * var(--margin));
    background: var(--nav-bg);
    transition: background var(--transition-duration) ease;
}
body.dark-mode .navbar {
    background: var(--dark-nav-bg);
}

/* Bar de filtres de tags */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin: var(--gap) auto;
    max-width: 1200px;
    padding: 0 var(--margin);
}

.filters .tag-btn {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--secondary-text);
    border-radius: var(--radius);
    background: none;
    color: var(--secondary-text);
    cursor: pointer;
    transition: background var(--transition-duration) ease,
    color var(--transition-duration) ease;
}
.filters .tag-btn.active {
    background: var(--secondary-text);
    color: var(--card-bg);
}
body.dark-mode .filters .tag-btn {
    border-color: var(--dark-secondary-text);
    color: var(--dark-secondary-text);
}
body.dark-mode .filters .tag-btn.active {
    background: var(--dark-secondary-text);
    color: var(--dark-bg);
}

/* Nav container */
.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gap-header) 0;
}

.nav-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.75rem;
    text-align: center;
    flex: 1;
}

/* Theme toggle icon clickable */
.mode-label {
    display: inline-block;
    width: 24px;
    height: 24px;
    cursor: pointer;
    position: relative;
    text-indent: -9999px;
    overflow: hidden;
    transition: transform var(--transition-duration) ease;
}
.mode-label:hover {
    transform: scale(1.1);
}
.mode-label::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    transition: background-image var(--transition-duration) ease;
}
.mode-label::before {
    /* Sun icon */
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='5' stroke='%23333' stroke-width='2'/%3E%3Cline x1='12' y1='1' x2='12' y2='3' stroke='%23333' stroke-width='2'/%3E%3Cline x1='12' y1='21' x2='12' y2='23' stroke='%23333' stroke-width='2'/%3E%3Cline x1='1' y1='12' x2='3' y2='12' stroke='%23333' stroke-width='2'/%3E%3Cline x1='21' y1='12' x2='23' y2='12' stroke='%23333' stroke-width='2'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64' stroke='%23333' stroke-width='2'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78' stroke='%23333' stroke-width='2'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36' stroke='%23333' stroke-width='2'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22' stroke='%23333' stroke-width='2'/%3E%3C/svg%3E");
}
body.dark-mode .mode-label::before {
    /* Moon icon */
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 12.79C20.24 13.13 19.43 13.32 18.59 13.32C14.12 13.32 10.68 9.88 10.68 5.41C10.68 4.57 10.87 3.76 11.21 3C7.33 3.86 4.32 7.4 4.32 11.58C4.32 16.45 8.55 20.19 13.41 20.19C17.59 20.19 21.13 17.17 21.99 13.29Z' stroke='%23eee' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

/* Gallery Masonry */
#gallery {
    column-count: 1;
    column-gap: var(--gap);
    margin: var(--gap) auto;
    max-width: 1500px;
    column-fill: balance;
    transition: opacity var(--transition-duration) ease;
}
@media (min-width: 600px) {
    #gallery { column-count: 2; }
}
@media (min-width: 1024px) {
    #gallery { column-count: 3; }
}

/* Photo card */
.photo-card {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: var(--gap);
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp var(--animation-duration) ease forwards;
    transition: background var(--transition-duration) ease;
}
body.dark-mode .photo-card {
    background: var(--dark-card-bg);
}
.photo-card:hover {
    transform: translateY(-4px);
}
.photo-card img {
    width: 100%;
    display: block;
    object-fit: cover;
}
.photo-card figcaption {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;  /* always white */
    opacity: 0;
    transition: opacity var(--transition-duration) ease;
    padding: var(--gap);
    z-index: 1;
}
.photo-card:hover figcaption {
    opacity: 1;
}
.photo-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--overlay-bg);
    opacity: 0;
    transition: opacity var(--transition-duration) ease;
    z-index: 0;
}
.photo-card:hover::after {
    opacity: 1;
}

/* Button Voir sur Flickr */
.original-btn {
    margin-top: var(--gap);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius);
    background: rgba(0,0,0,0.4);
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    border: none;
    text-decoration: none;
    transition: background var(--transition-duration) ease;
}
.original-btn a {
    color: inherit;
    text-decoration: none;
}
.original-btn:hover {
    background: rgba(0,0,0,0.6);
}
.original-btn::before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Footer full-width */
footer {
    width: calc(100% + 2 * var(--margin));
    margin-left: calc(-1 * var(--margin));
    text-align: center;
    padding: var(--gap) 0;
    background: var(--footer-bg);
    transition: background var(--transition-duration) ease;
}
body.dark-mode footer {
    background: var(--dark-footer-bg);
}

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}