/* ============================================================
   YJ Revue de presse — Front-end
   Charte : vert deep #1B5E3D + terracotta #C75D3A + crème #FAF7EE
   Roboto (titres 900) + Poppins (corps)
============================================================ */

.yj-revue{
    --yjr-green:        #2D7A4F;
    --yjr-green-deep:   #1B5E3D;
    --yjr-terracotta:   #C75D3A;
    --yjr-cream:        #FAF7EE;
    --yjr-ink:          #1A2620;
    --yjr-muted:        #5C6B5F;
    --yjr-line:         rgba(45,122,79,.15);
    --yjr-display:      'Roboto', system-ui, sans-serif;
    --yjr-body:         'Poppins', system-ui, sans-serif;
    --yjr-ease:         cubic-bezier(.22,.61,.36,1);
    --yjr-ease-out:     cubic-bezier(.16,1,.3,1);

    position:relative;
    width:100%;
    font-family:var(--yjr-body);
    color:var(--yjr-ink);
    box-sizing:border-box;
}
.yj-revue *,
.yj-revue *::before,
.yj-revue *::after{ box-sizing:border-box; }

/* ============ GRID ============ */
.yj-revue__grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:22px;
}

/* ============ CARD ============ */
.yj-revue-card{
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid var(--yjr-line);
    border-radius:8px;
    overflow:hidden;
    box-shadow:
        0 14px 28px -18px rgba(27,94,61,.22),
        0 8px 16px -12px rgba(0,0,0,.08);
    transition:transform .45s var(--yjr-ease),
               box-shadow .45s var(--yjr-ease),
               border-color .45s var(--yjr-ease);
    position:relative;
    /* Enter animation */
    opacity:0;
    transform:translateY(18px);
    animation:yjRevueIn .65s var(--yjr-ease-out) forwards;
}
@keyframes yjRevueIn{
    to{ opacity:1; transform:translateY(0); }
}
.yj-revue-card:hover{
    transform:translateY(-6px);
    border-color:var(--yjr-green-deep);
    box-shadow:
        0 32px 56px -22px rgba(27,94,61,.4),
        0 16px 28px -14px rgba(0,0,0,.16);
}

/* ============ MEDIA ============ */
.yj-revue-card__media{
    display:block;
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    background:linear-gradient(135deg, #E8F0E5, #D5E5D0);
    text-decoration:none;
}
.yj-revue-card__media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 1s var(--yjr-ease), filter .5s var(--yjr-ease);
    filter:saturate(1.04) contrast(1.03);
}
/* When we had to fall back to the bundled SVG, contain it without cropping */
.yj-revue-card__media img.yj-revue-card__img--fallback{
    object-fit:cover;
    background:linear-gradient(135deg, #1B5E3D, #0E3B2A);
    filter:none;
}
.yj-revue-card:hover .yj-revue-card__media img{
    transform:scale(1.06);
}
.yj-revue-card__media-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, transparent 55%, rgba(199,93,58,.18));
    opacity:0;
    transition:opacity .5s var(--yjr-ease);
    pointer-events:none;
}
.yj-revue-card:hover .yj-revue-card__media-overlay{ opacity:1; }

/* ============ BODY ============ */
.yj-revue-card__body{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:22px 22px 20px;
    gap:10px;
}

.yj-revue-card__source{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:5px 10px 5px 7px;
    background:rgba(45,122,79,.08);
    border-radius:4px;
    align-self:flex-start;
    transition:background .35s var(--yjr-ease);
}
.yj-revue-card:hover .yj-revue-card__source{
    background:rgba(199,93,58,.1);
}
.yj-revue-card__favicon{
    width:14px;height:14px;
    border-radius:3px;
    flex-shrink:0;
}
.yj-revue-card__host{
    font-family:var(--yjr-body);
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.02em;
    color:var(--yjr-green-deep);
    text-transform:lowercase;
    transition:color .35s var(--yjr-ease);
}
.yj-revue-card:hover .yj-revue-card__host{ color:var(--yjr-terracotta); }

.yj-revue-card__title{
    margin:4px 0 0;
    font-family:var(--yjr-display);
    font-size:17.5px;
    font-weight:900;
    line-height:1.25;
    letter-spacing:-.015em;
    color:var(--yjr-ink);
    transition:color .35s var(--yjr-ease);
}
.yj-revue-card__title a{
    color:inherit;
    text-decoration:none;
}
.yj-revue-card:hover .yj-revue-card__title{ color:var(--yjr-green-deep); }

.yj-revue-card__date{
    font-family:var(--yjr-body);
    font-size:11.5px;
    font-weight:500;
    letter-spacing:.04em;
    color:var(--yjr-muted);
    text-transform:lowercase;
}

.yj-revue-card__excerpt{
    margin:4px 0 0;
    font-family:var(--yjr-body);
    font-size:13.5px;
    line-height:1.6;
    color:var(--yjr-muted);
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    flex:1;
}

.yj-revue-card__footer{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--yjr-line);
    transition:border-color .35s var(--yjr-ease);
}
.yj-revue-card:hover .yj-revue-card__footer{ border-color:rgba(199,93,58,.3); }

.yj-revue-card__read{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--yjr-body);
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.005em;
    color:var(--yjr-green-deep);
    text-decoration:none;
    transition:color .35s var(--yjr-ease), gap .35s var(--yjr-ease);
}
.yj-revue-card__read svg{
    width:14px;height:14px;
    transition:transform .35s var(--yjr-ease);
}
.yj-revue-card:hover .yj-revue-card__read{
    color:var(--yjr-terracotta);
    gap:11px;
}
.yj-revue-card:hover .yj-revue-card__read svg{
    transform:translate(3px,-3px);
}

/* ============ SKELETONS (during initial fetch) ============ */
.yj-revue__skeletons{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:22px;
    transition:opacity .35s var(--yjr-ease), max-height .35s var(--yjr-ease);
}
.yj-revue__skeletons.is-hidden{
    opacity:0;
    max-height:0;
    overflow:hidden;
    pointer-events:none;
}
.yj-revue__skeleton{
    background:#fff;
    border:1px solid var(--yjr-line);
    border-radius:8px;
    padding-bottom:22px;
    overflow:hidden;
}
.yj-revue__skeleton-img,
.yj-revue__skeleton-line{
    background:linear-gradient(90deg, rgba(45,122,79,.06), rgba(45,122,79,.12), rgba(45,122,79,.06));
    background-size:200% 100%;
    animation:yjRevueShimmer 1.4s linear infinite;
}
.yj-revue__skeleton-img{
    width:100%;
    aspect-ratio:16/9;
}
.yj-revue__skeleton-line{
    height:12px;
    margin:18px 22px 0;
    border-radius:3px;
}
.yj-revue__skeleton-line.short{
    width:50%;
}
@keyframes yjRevueShimmer{
    0%{ background-position:200% 0; }
    100%{ background-position:-200% 0; }
}

/* ============ LOAD MORE ============ */
.yj-revue__loadmore-wrap{
    display:flex;
    justify-content:center;
    margin-top:40px;
}
.yj-revue__loadmore{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 26px;
    background:transparent;
    border:1.5px solid var(--yjr-ink);
    border-radius:4px;
    font-family:var(--yjr-body);
    font-size:13.5px;
    font-weight:600;
    letter-spacing:.005em;
    color:var(--yjr-ink);
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition:color .35s var(--yjr-ease),
               transform .35s var(--yjr-ease),
               box-shadow .35s var(--yjr-ease);
}
.yj-revue__loadmore::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--yjr-ink);
    transform:translateX(-100%);
    transition:transform .45s var(--yjr-ease-out);
    z-index:0;
}
.yj-revue__loadmore > *{ position:relative; z-index:1; }
.yj-revue__loadmore:hover{
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 14px 24px -10px rgba(0,0,0,.3);
}
.yj-revue__loadmore:hover::before{ transform:translateX(0); }
.yj-revue__loadmore svg{
    width:14px;height:14px;
    transition:transform .35s var(--yjr-ease);
}
.yj-revue__loadmore:hover svg{ transform:translateY(2px); }

.yj-revue__loadmore.is-loading{
    pointer-events:none;
    opacity:.7;
}
.yj-revue__loadmore.is-loading svg{
    animation:yjRevueSpin 1s linear infinite;
}
@keyframes yjRevueSpin{
    100%{ transform:rotate(360deg); }
}

.yj-revue__loadmore.is-hidden{
    display:none;
}

/* ============ EMPTY ============ */
.yj-revue__empty{
    padding:40px 30px;
    text-align:center;
    background:rgba(255,255,255,.5);
    border:2px dashed var(--yjr-line);
    border-radius:8px;
    font-size:14px;
    color:var(--yjr-muted);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 720px){
    .yj-revue__grid,
    .yj-revue__skeletons{
        grid-template-columns:1fr;
        gap:18px;
    }
    .yj-revue-card__body{
        padding:18px 18px 16px;
    }
    .yj-revue-card__title{
        font-size:16.5px;
    }
    .yj-revue__loadmore{
        width:100%;
        justify-content:center;
    }
}