@media(max-width:760px){nav{display:none}.story{grid-template-columns:1fr}.story img{height:500px}.container{padding:65px 17px}.timeline{padding-left:20px}.timeline:before{left:22px}.timeline-item{grid-template-columns:45px 1fr}.timeline-dot{grid-column:1}.timeline-time,.timeline-item:nth-child(even) .timeline-time{grid-column:2;grid-row:1;text-align:left;padding:0 0 0 12px;align-self:start}.timeline-content,.timeline-item:nth-child(even) .timeline-content{grid-column:2;grid-row:1;margin:55px 0 20px 12px;text-align:left}.gallery{grid-template-columns:repeat(2,1fr)}.gallery figure,.gallery figure:first-child,.gallery figure:last-child{grid-column:span 1}.count{grid-template-columns:repeat(2,1fr)}.verse p{font-size:25px}}
@media (max-width: 760px) {

    .hero {
        min-height: 100svh;
    }

    .hero-image {
        object-position: center 25%;
    }

    .hero-border {
        inset: 12px;
    }

    .hero-content {
        padding-top: 30px;
    }

    .hero-top {
        font-size: 8px;
        margin-bottom: 25px;
    }

    .hero-line {
        width: 28px;
    }

    .hero-intro {
        font-size: 16px;
    }

    .hero h1 {
        font-size: clamp(58px, 17vw, 90px);
        gap: 10px;
    }

    .hero-date {
        font-size: 10px;
        letter-spacing: .22em;
    }

    .hero-location {
        font-size: 8px;
    }

    .hero-button {
        margin-top: 30px;
        padding: 12px 17px;
        font-size: 8px;
    }

    .hero-scroll {
        bottom: 18px;
    }

}

.hero h1 {
    font-size: clamp(48px, 14vw, 75px);
}
@media (max-width: 760px) {

    .hero-content {
        width: 92%;
        padding: 30px 20px;
        background: rgba(3, 30, 25, 0.20);
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }

    .hero-content::before {
        left: -30px;
        right: -30px;
        top: -30px;
        bottom: -30px;

        filter: blur(1px);
    }

}
@media (max-width: 768px) {
    .gallery {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Première photo en pleine largeur */
    .gallery figure:first-child {
        grid-column: 1 / -1;
    }

    /* Dernière photo en pleine largeur */
    .gallery figure:last-child {
        grid-column: 1 / -1;
    }

    .gallery figure {
        margin: 0;
        overflow: hidden;
    }

    .gallery img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }
}

@media (max-width: 600px) {

    .palette-section {
        padding: 70px 15px;
    }

    .color-palette {
        gap: 25px 15px;
    }

    .color-circle {
        width: 60px;
        height: 60px;
    }

    .color-item {
        min-width: 85px;
    }

    .color-item span {
        font-size: 11px;
    }
}