/*
Theme Name: Cycling Passion
Theme URI: #
Author: Antonin Kaminski
Description: A passion for cycling — Bootstrap 5 custom theme
Version: 1.2
License: Copyright
Text Domain: cycling
*/

/* =============================================
   BASE
   ============================================= */
* { font-family: 'Oswald', sans-serif; }
.handFont { font-family: 'Pacifico', cursive; }
html, body {max-width: 100%; }

a{color:#00AE93;}
a:hover{color:#1D5850;}
footer a:hover{color:#fff;}
h2.wp-block-heading{
	font-weight: 200;
    font-size: 3rem;
	margin-top:3rem;
	}

/* =============================================
   BOOTSTRAP OVERRIDES
   ============================================= */
.badge-white { background: rgba(255,255,255,.9); color: #333; }
.bg-dark  { background: #333 !important; }
.bg-light { background: #eee !important; }
.text-muted-custom { color: #aaa !important; }

/* =============================================
   NAVBAR
   ============================================= */
.navbar a { color: rgba(255,255,255,.7); transition: 200ms linear; }
.navbar a:hover { color: rgba(255,255,255,1); }

.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link.active {
    display: block;
    background: rgba(255,255,255,.8);
    color: #333 !important;
    border-radius: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.fixed-top { transition: background-color 200ms linear, padding 200ms linear; }

/* --- État "Lisible" (appliqué si scrolled OU si pas d'image de fond) --- */
.fixed-top.scrolled,
body:not(:has(header img:first-child)) .navbar,
body:not(:has(header.home, header.bikes)) .navbar {
    background-color: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(4px);
}

.fixed-top.scrolled a,
body:not(:has(header img:first-child)) .navbar a,
body:not(:has(header.home, header.bikes)) .navbar a {
    color: rgba(0,0,0,.65) !important;
}

.fixed-top.scrolled a:hover,
body:not(:has(header img:first-child)) .navbar a:hover,
body:not(:has(header.home, header.bikes)) .navbar a:hover {
    color: rgba(0,0,0,1) !important;
}

.fixed-top.scrolled .navbar-nav .nav-item.active > .nav-link,
.fixed-top.scrolled .navbar-nav .nav-link.active,
body:not(:has(header img:first-child)) .navbar .navbar-nav .nav-item.active > .nav-link,
body:not(:has(header img:first-child)) .navbar .navbar-nav .nav-link.active {
    background: rgba(0,0,0,.12);
    color: #111 !important;
}

.fixed-top.scrolled a.navbar-brand,
body:not(:has(header img:first-child)) .navbar a.navbar-brand,
body:not(:has(header.home, header.bikes)) .navbar a.navbar-brand {
    color: #333 !important;
}

.fixed-top.scrolled .navbar-toggler i,
body:not(:has(header img:first-child)) .navbar .navbar-toggler i {
    color: #333;
}

/* --- Gestion de la taille (Uniquement au Scroll) --- */
.navbar-brand { font-size: 2rem; transition: font-size 200ms linear; }
a.navbar-brand { color: #fff !important; }
.fixed-top.scrolled .navbar-brand { font-size: 1.2rem; }

.navbar-toggler { border: none; color: #fff; }
.navbar-toggler i { color: #fff; font-size: 1.4rem; }

/* =============================================
   HEADER / HERO
   ============================================= */
header.home, header.bikes {
    position: sticky;
    top: 0;
    max-width: 100%;
}
header.home          { height: 70vh; }
header.home--half    { height: 35vh; }   /* bikes archive: half height */
header.bikes         { height: 100vh; }

header.home h1,
header.bikes h1      { font-weight: 200; font-size: 4rem; color: #fff; }
header.home h3,
header.bikes h3      { font-size: 1.2rem; font-weight: 700; font-style: italic; color: rgba(255,255,255,.85); }

/* half-height variant — smaller text */
header.home--half h1 { font-size: 2.6rem; }
header.home--half h3 { font-size: 1rem; }

header.home img,
header.bikes img {
    object-fit: cover;
    height: 100%; width: 100%;
    position: absolute; top: 0; left: 0;
}
header.home::after,
header.bikes::after {
    content: '';
    display: block;
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,.6);
    z-index: 2;
}
header.home .content,
header.bikes .content {
    position: relative;
    z-index: 3;
    color: rgba(255,255,255,.8);
    display: flex; width: 100%; height: 100%; align-items: center;
}
.hero-year {
    color: rgba(255,255,255,.5);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .15em;
}
.departure-notice {
    color: LightCoral;
    font-size: 1.1rem;
    font-style: italic;
}

/* =============================================
   MAIN
   ============================================= */
main {
    background: #fff;
    position: relative;
    z-index: 512;
}

/* =============================================
   BIKE STORY
   ============================================= */
div.getty { max-width: none !important; }
div.theStory {
    box-shadow: 10px 20px 25px 0px rgba(0,0,0,0.8);
}
div.theStory p { line-height: 1.6rem; color: #555; }
div.theStory p::first-letter {
    font-size: 2rem; font-weight: 700;
    line-height: 1.6rem; color: #000;
}

/* =============================================
   SPECS
   ============================================= */
.contentSpec { border-left: 1px solid #ddd; }
.specWeight  { font-weight: 700; font-size: 1.6rem; color: #888; }
.spec-icon   { width: 32px; height: 32px; object-fit: contain; }
.spec-icon-fa{ font-size: 1.4rem; color: #888; }

/* =============================================
   TAG LIST
   ============================================= */
.tagList ul { margin: 0; padding: 0; }
.tagList li {
    display: inline-block;
    font-size: 1.2rem; font-weight: 200; text-transform: uppercase;
    background: #aaa; color: #fff;
    padding: .4rem .8rem; border-radius: .6rem;
    margin-right: 1rem; margin-bottom: 1rem;
    list-style: none;
}

/* =============================================
   BIKES GRID (index + archive)
   ============================================= */
.bikes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}
.bike-card {
    position: relative; overflow: hidden; border-radius: .5rem;
    background: #111; cursor: pointer; display: block;
    text-decoration: none !important;
}
.bike-card img {
    width: 100%; height: 280px; object-fit: cover; display: block;
    transition: transform 500ms ease, opacity 300ms ease;
}
.bike-card:hover img { transform: scale(1.06); opacity: .8; }
.bike-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, transparent 60%);
    pointer-events: none;
}
.bike-card--departed::after {
    background: linear-gradient(to top, rgba(60,0,0,.85) 0%, transparent 60%);
}
.bike-card-body {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 1rem 1.2rem; z-index: 3; color: #fff;
}
.bike-card-body h3   { font-size: 1.3rem; font-weight: 400; margin-bottom: .15rem; color: #fff; }
.bike-card-body .bike-subtitle { font-size: .85rem; font-style: italic; color: rgba(255,255,255,.65); margin-bottom: .2rem; }
.bike-card-body .nickname      { font-family: 'Pacifico', cursive; font-size: 1rem; color: rgba(255,255,255,.65); }
.bike-card-body .year          { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.45); margin-bottom: .2rem; }
.bike-card-body .departed-badge{
    display: inline-block; margin-top: .35rem;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    background: rgba(180,40,40,.7); color: #fff;
    padding: .15rem .5rem; border-radius: .4rem;
}
.no-thumbnail-placeholder {
    width: 100%; height: 280px; background: #222;
    display: flex; align-items: center; justify-content: center;
    color: #555; font-size: 3rem;
}

/* =============================================
   BIKES FILTER BAR
   ============================================= */
.bikes-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.filter-btn {
    background: #eee;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 2rem;
    padding: .3rem .9rem;
    font-size: .8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    transition: background 180ms, color 180ms, border-color 180ms;
    font-family: 'Oswald', sans-serif;
}
.filter-btn:hover {
    background: #333;
    color: #fff;
    border-color: #333;
}
.filter-btn.active {
    background: #111;
    color: #fff;
    border-color: #111;
}

/* =============================================
   PHOTO CARD + OVERLAY
   ============================================= */
.photo-card, .masonry-item {
    position: relative; overflow: hidden;
    border-radius: .35rem; background: #111;
}
.photo-card img, .masonry-img {
    width: 100%; display: block;
    transition: transform 400ms ease, opacity 300ms ease;
}
.photo-card:hover img,
.masonry-item:hover .masonry-img { transform: scale(1.04); opacity: .82; }

.photo-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: .4rem .6rem;
    display: flex; justify-content: space-between; align-items: flex-end;
    background: linear-gradient(transparent, rgba(0,0,0,.55));
    pointer-events: none;
}
.photo-overlay .left-tags { display: flex; flex-wrap: wrap; gap: .3rem; pointer-events: all; }
.tag-badge {
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    background: rgba(255,255,255,.18); color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    padding: .15rem .45rem; border-radius: .8rem;
    backdrop-filter: blur(2px);
}
.tag-badge.bike-tag { background: rgba(0,0,0,.35); }

.like-btn {
    pointer-events: all;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff; border-radius: 2rem;
    padding: .2rem .6rem; font-size: .75rem;
    cursor: pointer; display: flex; align-items: center; gap: .3rem;
    transition: background 200ms;
    backdrop-filter: blur(2px);
}
.like-btn:hover, .like-btn.liked {
    background: rgba(220,50,50,.75);
    border-color: rgba(255,120,120,.5);
}

/* =============================================
   MASONRY GRID
   ============================================= */
.masonry-grid { columns: 4; column-gap: .75rem; }
@media (max-width:1200px) { .masonry-grid { columns: 3; } }
@media (max-width:768px)  { .masonry-grid { columns: 2; } }
@media (max-width:480px)  { .masonry-grid { columns: 1; } }

.masonry-item {
    break-inside: avoid;
    margin-bottom: .75rem;
    display: block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 350ms ease, transform 350ms ease;
    cursor: pointer;
}
.masonry-item.loaded { opacity: 1; transform: none; }

/* =============================================
   LIGHTBOX MODAL  — z-index fix
   ============================================= */
#photoModal { z-index: 100001 !important; }
.modal-backdrop { z-index: 100000 !important; }

#photoModal .modal-dialog {
    max-width: 95vw;
    margin: auto;
}

#photoModal .modal-content {
    margin: auto;
}

.modal-photo-img {
    max-height: 90vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border: 14px solid #fff; /* Bordure blanche de 12px */
    border-radius: .4rem;
    background-color: #fff; /* Assure que le fond derrière l'image est blanc aussi */
}

.modal-photo-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    pointer-events: none;
    /* On remonte l'overlay pour qu'il commence après la bordure blanche */
    bottom: 14px !important;
    left: 14px !important;
    right: 14px !important;
}

.modal-photo-overlay > * {
    pointer-events: all;
}

.modal-meta .tag-badge {
    font-size: 0.8rem;
    backdrop-filter: blur(4px);
}

#photoModal .btn-close {
    top: -12px !important;    /* Aligné pile sur le bord haut de la photo */
    right: -12px !important;  /* Aligné pile sur le bord droit de la photo */
    opacity: 1 !important;
    background: #fff !important;
    border-radius: 0 0 0 .4rem !important;
    padding: 1.2rem;
    box-shadow: none !important; /* Suppression de l'ombre */
    border: none !important;     /* Suppression de la bordure qui cause le décalage */
    outline: none !important;

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23aaaaaa'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 1rem !important;
    filter: none !important;
}
#photoModal .btn-close:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
}


/* Nettoyage des anciennes règles modal si présentes */
#photoModal .modal-header,
#photoModal .modal-footer { display: none; }

    /* =============================================
       SORT CONTROLS

/* =============================================
   PICTURES PAGE copyright
   ============================================= */
.pictures-copyright {
    font-size: .8rem;
    font-weight: 300;
    color: #999;
    letter-spacing: .03em;
}

/* =============================================
   ABOUT PAGE
   ============================================= */
.about-content p { line-height: 1.8; color: #444; }
.about-content a { color: #333; text-decoration: underline; }

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
    background: #111;
    color: rgba(255,255,255,.4);
    text-align: center;
    padding: 2rem 1rem;
    font-size: .85rem;
    font-weight: 200;
    position: relative;
    z-index: 600;
}
.site-footer .footer-desc {
    color: rgba(255,255,255,.6);
    font-size: .95rem;
    margin-bottom: .75rem;
}
.site-footer .footer-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: .75rem;
}
.site-footer .footer-links a {
    color: rgba(255,255,255,.55);
    text-decoration: none;
    font-size: .9rem;
    transition: color 200ms;
}
.site-footer .footer-links a:hover { color: #fff; }
.site-footer .footer-copy { margin-bottom: 0; }