:root{
    --corail: #ff6b52; /* corail */
    --vert: #00C853; /* vert */
    --bleu: #1E90FF; /* bleu */
    --jaune: #FFC857; /* jaune */
    --beige: #f4ebe4;    /* warm beige */
}

/* Local Gliker font */
@font-face{
    font-family: 'Gliker';
    src: url('../Font/gliker-regular.woff2') format('woff2'),
         url('../Font/gliker-regular.woff') format('woff'),
         url('../Font/gliker-regular.eot');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family: 'Gliker', sans-serif;
    background: var(--beige);
    -webkit-font-smoothing:antialiased;
    height:100vh;
    max-height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
}

.nav-wrap{
    padding:0.75rem 1rem;
}

.nav{
    width:95%;
    max-width:75rem;
    margin:0 auto;
    background: var(--beige);
    border:0.25rem solid var(--bleu);
    border-radius:1.75rem;
    padding: 0.5rem 1rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.nav-list{
    display:flex;
    gap:0.875rem;
    list-style:none;margin:0;padding:0;align-items:center;
    margin:0;
    padding:0;
    align-items:center;
}

.nav-link{
    display:inline-block;
    padding:0.625rem 1.5rem;
    border-radius:999px;
    border:0.1875rem solid var(--bleu);
    color:var(--bleu);
    text-decoration:none;
    font-weight:700;
    background:transparent;
    transition:all .16s ease;
}

.nav-Projets{
    background:var(--bleu);
    color:var(--beige);
}

.nav-Accueil:hover{
    border-color:var(--corail);
    color:var(--corail);
}

.nav-Outils:hover{
    border-color:var(--jaune);
    color:var(--jaune);
}

.nav-Contact:hover{
    border-color:var(--vert);
    color:var(--vert);
}

/* SVG sizing and color override for the inline flower */
.blue-svg{
    width:3rem;
    height:3rem;
    display:block
}

/* Rebuilt projets.css - clean, modular styles for the Projects page */

/* Note: site-wide variables and Gliker font are defined in Style/index.css which is included before this file. */

/* Layout */
.projects-page{
    padding:2rem 1rem 3rem;
    background:var(--page-bg);
}

/* Hero / title */
.projects-hero{ text-align:center; margin-bottom:2.4rem }
.projects-hero h1{
    color:var(--bleu); /* neutral heading color */
    font-size:clamp(2.25rem,6vw,4.5rem);
    margin:0 0 0.8rem;
    font-weight:800;
}

/* Filter pills */
.filter-pills{ display:flex; gap:1rem; justify-content:center; margin-bottom:1.8rem; flex-wrap:wrap }
.filter-pills .pill{
    display:inline-block;
    padding:0.5rem 1.125rem;
    border-radius:999px;
    border:0.2rem solid var(--bleu);
    color:var(--bleu); /* subtle neutral blue-green */
    text-decoration:none;
    font-weight:700;
    background:transparent;
    margin: 1rem 0;
}

.filter-pills .pill:hover{
    background:var(--bleu);
    color:var(--beige);
    cursor:pointer;
}

.filter-pills .pill.active{
    background:var(--bleu);
    color:var(--beige);
}

/* Grid */
.projects-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.6rem;
    max-width:68.75rem;
    margin:0 auto;
    align-items:start;
}

/* Card */
.project-card{
    background:var(--beige);
    border:0.2rem solid var(--bleu);
    border-radius:1.125rem;
    padding:0; /* inner spacing handled by .card-body */
    text-align:left;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow: 0 0.5rem 1.125rem rgba(22,22,22,0.04);
    background-color: var(--beige);
    z-index: 1;
}

.project-card:hover{
    transform: scale(1.03);
}

.project-card.empty{ opacity:0.6 }

/* Thumbnail frame */
.card-figure{
    width:100%;
    height:11.25rem;
    overflow:hidden;
    position:relative;
    margin: 0; /* reset: spacing in body */
}

.card-figure img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center center;
}

.card-body{ padding:0.875rem 1.125rem 1.125rem; display:flex; flex-direction:column; gap:0.625rem }
.project-card h3{ margin:0; color:var(--bleu); font-size:1.05rem; font-weight:800 }
.muted{ display:block; color:var(--bleu); opacity:0.50; font-weight:600 }
.card-tools{ display:flex; align-items:center; gap:0.625rem }
.tool{ display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:1.75rem; border-radius:0.5rem; background:#f1f1f1; color:#333; font-weight:800 }
.tool-icon{
    width:1.75rem;
    height:1.75rem;
    display:inline-block;
}
.tool-label{ color:var(--bleu); font-weight:700; }

.card-video-badge{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:4rem;
    height:4rem;
    background:rgba(30, 144, 255, 0.9);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
    transition:all 200ms ease;
}

.project-card:hover .card-video-badge{
    background:var(--bleu);
    transform:translate(-50%, -50%) scale(1.15);
}

/* Per-card focal adjustment: miroir needs its subject pulled up */
.project-card[data-id="miroir"] .card-figure img{
    object-position: 50% 30%; /* focal point lifted for the poster */
}

/* Decorative "spaces" behind hero that can grow */
.hero-bg{
    position:absolute;
    inset:0; /* fill hero area */
    z-index:0;
    pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; }
.space{
    position:absolute;
    width:auto; height:auto;
    transform-origin:center center;
    filter:blur(0.875rem);
    opacity:0.95;
    transform:translate3d(0,0,0) scale(1);
    transition:transform 450ms cubic-bezier(.2,.9,.3,1), opacity 300ms ease, filter 220ms ease;
    animation: space-pulse 6s ease-in-out infinite;
}
.space path{
    /* use the theme colors for fills; each .space--N will override via specific rule */
    fill: currentColor;
}
.space--1{ left:6%; top:10%; width:clamp(7.5rem,25vw,22.5rem); height:auto; color: var(--bleu) }
.space--2{ right:8%; top:6%; width:clamp(5.625rem,18vw,16.25rem); height:auto; color: var(--corail); animation-delay:0.8s }
.space--3{ left:18%; bottom:6%; width:clamp(6.25rem,20vw,17.5rem); height:auto; color: var(--jaune); animation-delay:1.4s }
.space--4{ right:22%; bottom:18%; width:clamp(4.375rem,14vw,12.5rem); height:auto; color: var(--vert); animation-delay:2s }


@keyframes space-pulse{
    0%{
        transform: translate3d(0,0,0) scale(1) rotate(0deg);
        opacity:0.95;
    }
    25%{
        transform: translate3d(0.375rem,-0.25rem,0) scale(1.03) rotate(-0.6deg);
        opacity:0.88;
    }
    50%{
        transform: translate3d(0,-0.5rem,0) scale(1.06) rotate(0.6deg);
        opacity:0.82;
    }
    75%{
        transform: translate3d(-0.375rem,-0.25rem,0) scale(1.03) rotate(-0.6deg);
        opacity:0.88;
    }
    100%{
        transform: translate3d(0,0,0) scale(1) rotate(0deg);
        opacity:0.95;
    }
}

/* ============================================
   LIGHTBOX MODAL STYLES
   ============================================ */

.lightbox{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    display:none;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity 300ms ease;
}

.lightbox.active{
    display:flex;
    opacity:1;
}

.lightbox-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.85);
    backdrop-filter:blur(4px);
    cursor:pointer;
    pointer-events:auto;
}

.lightbox-content{
    position:relative;
    z-index:1001;
    background:var(--beige);
    border-radius:2rem;
    border:0.2rem solid var(--bleu);
    max-width:85vw;
    max-height:85vh;
    width:85vw;
    height:85vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow: 0 2rem 4rem rgba(0,0,0,0.3);
    animation:lightbox-in 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lightbox-content.image-lightbox{
    max-width:85vw;
    max-height:85vh;
    width:85vw;
    height:85vh;
}

.lightbox-content.video-lightbox{
    max-width:90vw;
    max-height:90vh;
    width:90vw;
    height:90vh;
}

@keyframes lightbox-in{
    from{
        opacity:0;
        transform:scale(0.9) translateY(-2rem);
    }
    to{
        opacity:1;
        transform:scale(1) translateY(0);
    }
}

.lightbox-close{
    position:absolute;
    top:1.5rem;
    right:1.5rem;
    z-index:1002;
    width:3rem;
    height:3rem;
    border:none;
    background:var(--bleu);
    color:var(--beige);
    font-size:2rem;
    font-weight:700;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 200ms ease;
}

.lightbox-close:hover{
    background:var(--corail);
    transform:rotate(90deg) scale(1.1);
}

.lightbox-body{
    display:flex;
    flex:1;
    overflow:hidden;
    gap:0;
    padding:0;
    align-items:stretch;
}

.lightbox-body.video-lightbox{
    flex-direction:row;
    gap:2rem;
    padding:2rem;
}

.lightbox-figure{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    margin:0;
    padding:0;
    background:#f4ebe4;
}

.lightbox-body.video-lightbox .lightbox-figure{
    flex:0 0 60%;
}

.lightbox-image-container{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.lightbox-media-image{
    max-width:65%;
    max-height:65%;
    object-fit:contain;
    object-position:center;
    transition:opacity 200ms ease;
}

.lightbox-counter{
    background:rgba(30, 144, 255, 0.9);
    color:var(--beige);
    padding:0.75rem 1.5rem;
    border-radius:999px;
    font-size:1rem;
    font-weight:700;
    backdrop-filter:blur(10px);
    white-space:nowrap;
}

.lightbox-info{
    flex:0 0;
    width:20rem;
    display:none;
    flex-direction:column;
    justify-content:flex-start;
    padding:2rem;
    background:var(--beige);
    margin-right: 4rem;
}

.lightbox-body.video-lightbox .lightbox-info{
    display:flex;
    flex:0 0 40%;
    width:auto;
    padding:0;
    border-left:none;
}

.lightbox-nav{
    position:absolute;
    bottom:2rem;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:1.5rem;
    z-index:1002;
    align-items:center;
    justify-content:center;
}

.lightbox-nav-btn{
    width:3.5rem;
    height:3.5rem;
    border:0.2rem solid var(--bleu);
    background:var(--beige);
    color:var(--bleu);
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
    font-weight:700;
    box-shadow:0 0.5rem 1.5rem rgba(30, 144, 255, 0.15);
    position:relative;
}

.lightbox-nav-btn svg{
    width:1.25rem;
    height:1.25rem;
    stroke-width:2.5;
}

.lightbox-nav-btn:hover{
    background:var(--bleu);
    color:var(--beige);
    transform:scale(1.15);
    box-shadow:0 0.75rem 2rem rgba(30, 144, 255, 0.35);
}

.lightbox-nav-btn:active{
    transform:scale(0.95);
}

.lightbox-nav-prev{
    animation:slide-in-left 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lightbox-nav-next{
    animation:slide-in-right 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slide-in-left{
    from{
        opacity:0;
        transform:translateX(1rem);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes slide-in-right{
    from{
        opacity:0;
        transform:translateX(-1rem);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

/* Video player in lightbox */
.lightbox-media-video{
    width:100%;
    height:auto;
    max-height:100%;
    border:none;
    border-radius:0;
}

.lightbox-image-indicators{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    margin-top:1rem;
}

.lightbox-image-counter{
    font-size:0.85rem;
    color:var(--bleu);
    font-weight:600;
}

.lightbox-image-dots{
    display:flex;
    gap:0.5rem;
}

.lightbox-image-dot{
    width:0.6rem;
    height:0.6rem;
    border-radius:50%;
    background:rgba(30, 144, 255, 0.3);
    cursor:pointer;
    transition:all 200ms ease;
}

.lightbox-image-dot.active{
    background:var(--bleu);
    width:1.2rem;
    border-radius:0.3rem;
}

.lightbox-image-dot:hover{
    background:var(--bleu);
}

.lightbox-info{
    flex:0 0 30%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

.lightbox-info h2{
    margin:0 0 1rem 0;
    color:var(--bleu);
    font-size:1.5rem;
    font-weight:800;
    line-height:1.2;
}

.lightbox-description{
    color:#555;
    font-size:0.95rem;
    line-height:1.6;
    margin:0 0 1.5rem 0;
    flex:1;
}

.lightbox-tools{
    display:flex;
    flex-wrap:wrap;
    gap:0.8rem;
}

.lightbox-tool-item{
    display:flex;
    align-items:center;
    gap:0.5rem;
    background:rgba(30, 144, 255, 0.1);
    padding:0.5rem 1rem;
    border-radius:999px;
    font-size:0.85rem;
    font-weight:600;
    color:var(--bleu);
}

.lightbox-tool-item img{
    width:1.2rem;
    height:1.2rem;
}

.lightbox-nav{
    position:absolute;
    bottom:2rem;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:1.5rem;
    z-index:1002;
}

.lightbox-nav-btn{
    width:3.5rem;
    height:3.5rem;
    border:0.2rem solid var(--bleu);
    background:var(--beige);
    color:var(--bleu);
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
    font-weight:700;
    box-shadow:0 0.5rem 1.5rem rgba(30, 144, 255, 0.15);
    position:relative;
}

.lightbox-nav-btn svg{
    width:1.25rem;
    height:1.25rem;
    stroke-width:2.5;
}

.lightbox-nav-btn:hover{
    background:var(--bleu);
    color:var(--beige);
    transform:scale(1.15);
    box-shadow:0 0.75rem 2rem rgba(30, 144, 255, 0.35);
}

.lightbox-nav-btn:active{
    transform:scale(0.95);
}

.lightbox-nav-prev{
    animation:slide-in-left 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lightbox-nav-next{
    animation:slide-in-right 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slide-in-left{
    from{
        opacity:0;
        transform:translateX(1rem);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes slide-in-right{
    from{
        opacity:0;
        transform:translateX(-1rem);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

/* Video lightbox layout */
.lightbox.video-lightbox .lightbox-body{
    flex-direction:row;
    gap:2rem;
    padding:2rem;
}

.lightbox.video-lightbox .lightbox-figure{
    flex:0 0 60%;
}

.lightbox.video-lightbox .lightbox-info{
    display:flex !important;
    flex:0 0 40%;
    width:auto;
    padding:0;
    border-left:none;
}

/* PDF viewer in lightbox */
.lightbox-pdf-container{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    overflow:auto;
    background:#f4ebe4;
}

.lightbox-pdf-canvas{
    max-width:80%;
    max-height:80%;
    box-shadow:0 0.25rem 0.5rem rgba(0,0,0,0.1);
    margin-bottom: 5rem;
}