/* ============================================================
   INSPIRATIONS — Desktop
============================================================ */
@media (min-width: 769px) {

    .inspirations-page {
        padding-top: 0;
    }

    /* ── Hero ────────────────────────────────────────────── */
    .insp-hero {
        position: relative;
        height: 580px;
        background-image: url('../images/inspiration/fond-hero-inspiration.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow: hidden;
    }

    /* Dégradé blanc en haut → header toujours lisible */
    .insp-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom,
            rgba(255,255,255,1) 0%,
            rgba(0,0,0,0.15) 30%,
            rgba(0,0,0,0.55) 100%);
        pointer-events: none;
        z-index: 0;
    }

    .insp-hero-content {
        position: relative;
        align-self: center;
        display: flex;
        z-index: 1;
        flex-direction: column;
        height: 100%;
        justify-content: flex-end;
    }

    .insp-hero-label {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: #FFFFFF;
        margin-bottom: 16px;
        opacity: 0;
        transform: translateY(10px);
        animation: insp-up 0.7s 0.1s forwards;
    }

    .insp-hero-title {
        font-family: 'Aboreto', serif;
        font-size: 64px;
        line-height: 1.7;
        color: #FFFFFF;
        font-weight: 400;
        margin-bottom: 70px;
        opacity: 0;
        transform: translateY(14px);
        animation: insp-up 0.7s 0.2s forwards;
    }

    .insp-hero-title span {
        color: transparent;
        -webkit-text-stroke: 1px rgba(255,255,255,0.35);
    }

    .insp-hero-subtitle {
        font-family: 'Work Sans', sans-serif;
        font-size: 17px;
        color: #FFFFFF;
        letter-spacing: 0.5px;
        margin-bottom: 70px;
        opacity: 0;
        animation: insp-up 0.7s 0.35s forwards;
    }

    /* ── Filtres ─────────────────────────────────────────── */
    .insp-filters-wrap {
        background: #FFFFFF;
        padding: 32px 70px;
        display: flex;
        justify-content: center;
    }

    .insp-filters {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .insp-filter {
        padding: 8px 4px;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        font-family: 'Work Sans', sans-serif;
        font-size: 16px;
        font-weight: 400;
        color: #000;
        cursor: pointer;
        transition: all 0.25s ease;
        letter-spacing: 0.3px;
        margin: 0 16px;
    }

    .insp-filter:hover {
        color: var(--color-primary);
    }

    .insp-filter.active {
        color: #000;
        font-weight: 500;
        border-bottom-color: var(--color-primary);
    }

    /* ── Grille ──────────────────────────────────────────── */
    .insp-grid-wrap {
        background: #FFFFFF;
        padding: 40px 70px 100px;
        min-height: 400px;
    }

    .insp-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: 60px;
        gap: 16px;
    }

    /* ── Cartes : tailles ────────────────────────────────── */

    /* Grande : 8 cols × 8 rows = ~480px */
    .insp-card--grande {
        grid-column: span 8;
        grid-row: span 8;
    }

    /* Moyenne : 4 cols × 8 rows */
    .insp-card--moyenne {
        grid-column: span 4;
        grid-row: span 8;
    }

    /* Petite : 4 cols × 5 rows = ~300px */
    .insp-card--petite {
        grid-column: span 4;
        grid-row: span 5;
    }

    /* Citation : 4 cols × 5 rows */
    .insp-card--citation {
        grid-column: span 4;
        grid-row: span 5;
    }

    /* Vidéo : 8 cols × 7 rows */
    .insp-card--video {
        grid-column: span 8;
        grid-row: span 7;
    }

    /* ── Carte base ──────────────────────────────────────── */
    .insp-card {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        transition: transform 0.35s ease, opacity 0.35s ease;
    }

    .insp-card.hidden {
        display: none;
    }

    .insp-card.filtering-out {
        opacity: 0;
        transform: scale(0.97);
    }

    /* ── Carte article ───────────────────────────────────── */
    .insp-card-link {
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
        position: relative;
    }

    .insp-card-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
    }

    .insp-card:hover .insp-card-img {
        transform: scale(1.04);
    }

    .insp-badge {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 3;
        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(8px);
        color: #FFFFFF;
        font-family: 'Josefin Sans', sans-serif;
        font-size: 11px;
        font-weight: 400;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 5px 12px;
        border-radius: 20px;
    }

    .insp-card-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 24px 20px 20px;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .insp-card-title {
        font-family: 'El Messiri', serif;
        font-size: 28px;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 1.25;
        margin: 0;
    }

    .insp-card--grande .insp-card-title {
        font-size: 32px;
    }

    .insp-card-cta {
        font-family: 'Work Sans', sans-serif;
        font-size: 15px;
        font-weight: 400;
        color: rgba(255,255,255,0.7);
        transition: color 0.3s;
    }

    .insp-card:hover .insp-card-cta {
        color: #FFFFFF;
    }

    /* ── Carte citation ──────────────────────────────────── */
    .insp-card--citation {
        background: var(--color-primary);
    }

    .insp-card-citation {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 32px 28px;
        text-align: center;
    }

    .citation-mark {
        font-family: 'El Messiri', serif;
        font-size: 72px;
        line-height: 0.5;
        color: rgba(255,255,255,0.25);
        margin-bottom: 16px;
        display: block;
    }

    .citation-text {
        font-family: 'El Messiri', serif;
        font-size: 18px;
        line-height: 1.5;
        color: #FFFFFF;
        font-style: italic;
    }

    /* ── Carte vidéo ─────────────────────────────────────── */
    .insp-card-video {
        width: 100%;
        height: 100%;
        position: relative;
        cursor: pointer;
    }

    .video-play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        width: 72px;
        height: 72px;
        transition: transform 0.3s ease;
    }

    .video-play-btn svg {
        width: 72px;
        height: 72px;
        filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4));
    }

    .insp-card-video:hover .video-play-btn {
        transform: translate(-50%, -50%) scale(1.1);
    }

    .insp-card-video .video-iframe-container {
        position: absolute;
        inset: 0;
        z-index: 5;
    }

    .insp-card-video .video-iframe-container iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

    .insp-card-video .insp-card-title {
        font-size: 32px;
    }

    /* ── État vide ───────────────────────────────────────── */
    .insp-empty {
        display: flex;
        padding: 80px 0px;
        text-align: center;
        justify-content: center;
    }

    .insp-empty-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    .insp-empty-icon svg {
        width: 48px;
        height: 48px;
        opacity: 0.4;
    }

    .insp-empty-title {
        font-family: 'El Messiri', serif;
        font-size: 28px;
        font-weight: 500;
        color: #123524;
        margin: 8px 0 0;
    }

    .insp-empty-text {
        font-family: 'Work Sans', sans-serif;
        font-size: 16px;
        color: #000;
        line-height: 1.5;
    }

    /* ── Animations ──────────────────────────────────────── */
    @keyframes insp-up {
        to { opacity: 1; transform: translateY(0); }
    }
}

/* ============================================================
   INSPIRATIONS — Mobile
============================================================ */
@media (max-width: 768px) {


    .insp-hero {
        position: relative;
        height: 500px;
        background-image: url('../images/inspiration/fond-hero-inspiration.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow: hidden;
    }

    .insp-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom,
            rgba(255,255,255,1) 0%,
            rgba(0,0,0,0.1) 25%,
            rgba(0,0,0,0.5) 100%);
        z-index: 0;
    }

    .insp-hero-content { 
        position: relative;
        display: flex;
        height: 100%;
        z-index: 1;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 24px;
    }

    .insp-hero-label {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 12px;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: #FFFFFF;
        margin-bottom: 20px;
    }

    .insp-hero-title {
        font-family: 'Aboreto', serif;
        font-size: 40px;
        color: #FFFFFF;
        font-weight: 400;
        line-height: 1.1;
        margin-bottom: 50px;
    }

    .insp-hero-title span {
        color: transparent;
        -webkit-text-stroke: 1px rgba(255,255,255,0.35);
    }

    .insp-hero-subtitle {
        font-family: 'Work Sans', sans-serif;
        font-size: 15px;
        margin-bottom: 40px;
        color: #FFFFFF;
    }

    .insp-filters-wrap {
        background: #FFFFFF;
        padding: 20px 24px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .insp-filters-wrap::-webkit-scrollbar { display: none; }

    .insp-filters {
        display: flex;
        gap: 8px;
        white-space: nowrap;
        padding-bottom: 4px;
    }

    .insp-filter {
        padding: 8px 4px;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        font-family: 'Work Sans', sans-serif;
        font-size: 15px;
        color: #000;;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.25s;
        flex-shrink: 0;
        margin: 0 10px;
    }

    .insp-filter.active {
        color: #000;
        font-weight: 500;
        border-bottom-color: var(--color-primary);
    }

    .insp-grid-wrap {
        background: #FFFFFF;
        padding: 24px 16px 60px;
    }

    .insp-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .insp-card {
        border-radius: 14px;
        overflow: hidden;
        transition: opacity 0.3s;
    }

    .insp-card.hidden { display: none; }

    /* Heights mobiles */
    .insp-card--grande  { height: 320px; }
    .insp-card--moyenne { height: 280px; }
    .insp-card--petite  { height: 220px; }
    .insp-card--video   { height: 260px; }
    .insp-card--citation { height: auto; min-height: 180px; }

    .insp-card-link { display: block; width: 100%; height: 100%; text-decoration: none; position: relative; }
    .insp-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }

    .insp-badge {
        position: absolute;
        top: 14px; left: 14px;
        z-index: 3;
        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(8px);
        color: #FFFFFF;
        font-family: 'Josefin Sans', sans-serif;
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 5px 12px;
        border-radius: 20px;
    }

    .insp-card-overlay {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        padding: 20px 16px 16px;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
        z-index: 2;
    }

    .insp-card-title {
        font-family: 'El Messiri', serif;
        font-size: 22px;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 1.25;
        margin: 0 0 6px;
    }

    .insp-card-cta {
        font-family: 'Work Sans', sans-serif;
        font-size: 15px;
        color: rgba(255,255,255,0.7);
    }

    .insp-card--citation { background: var(--color-primary); }
    .insp-card-citation {
        width: 100%; height: 100%;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        padding: 32px 24px; text-align: center;
    }
    .citation-mark {
        font-family: 'El Messiri', serif;
        font-size: 56px; line-height: 0.5;
        color: rgba(255,255,255,0.25);
        margin-bottom: 16px; display: block;
    }
    .citation-text {
        font-family: 'El Messiri', serif;
        font-size: 17px; line-height: 1.5;
        color: #FFFFFF; font-style: italic;
    }

    .insp-card-video { width: 100%; height: 100%; position: relative; cursor: pointer; }
    .video-play-btn {
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3; width: 60px; height: 60px;
    }
    .video-play-btn svg { width: 60px; height: 60px; }
    .insp-card-video .video-iframe-container { position: absolute; inset: 0; z-index: 5; }
    .insp-card-video .video-iframe-container iframe { width: 100%; height: 100%; border: none; }

    .insp-empty { padding: 60px 0 40px; text-align: center; }
    .insp-empty-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .insp-empty-icon svg { width: 40px; height: 40px; opacity: 0.4; }
    .insp-empty-title { font-family: 'El Messiri', serif; font-size: 22px; font-weight: 500; color: #123524; margin: 8px 0 0; }
    .insp-empty-text { font-family: 'Work Sans', sans-serif; font-size: 15px; color: #888888; line-height: 1.5; }
    .insp-empty-reset {
        margin-top: 16px; padding: 10px 28px;
        background: transparent;
        border: 1px solid #D4D4D4;
        border-radius: 40px;
        font-family: 'Josefin Sans', sans-serif;
        font-size: 15px; color: #555555;
        cursor: pointer;
    }
}

/* ============================================================
   INSPIRATIONS — Mobile petits écrans
============================================================ */

@media (max-width: 360px) {
    .insp-hero {
        margin-top: 50px;
    }
}

/* ============================================================
   ANIMATIONS FILTRES — 4 types assignés aléatoirement
============================================================ */

.insp-card.anim-top-down,
.insp-card.anim-right-left,
.insp-card.anim-fadein,
.insp-card.anim-popup {
    opacity: 0;
}

.insp-card.anim-top-down.anim-ready {
    animation: insp-top-down 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes insp-top-down {
    from { transform: translateY(-28px) scaleY(0.92); clip-path: inset(0 0 100% 0); }
    to   { transform: translateY(0)     scaleY(1);    clip-path: inset(0 0 0% 0); }
}

.insp-card.anim-right-left.anim-ready {
    animation: insp-right-left 0.65s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

@keyframes insp-right-left {
    0%   { transform: translateX(48px); }
    60%  { transform: translateX(-6px); }
    80%  { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

.insp-card.anim-fadein.anim-ready {
    animation: insp-fadein 0.65s ease forwards;
}

@keyframes insp-fadein {
    from { opacity: 0.3; }
    to   { opacity: 1; }
}

.insp-card.anim-popup.anim-ready {
    animation: insp-popup 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes insp-popup {
    from {transform: scale(0.88); }
    to   {transform: scale(1); }
}