/* ============================================================
   YJ SITE — Base
   Variables CSS, reset, fond, blobs décoratifs globaux
============================================================ */
:root{
    --yj-green:        #2D7A4F;
    --yj-green-deep:   #1B5E3D;
    --yj-green-darker: #0E3B2A;
    --yj-green-soft:   #E8F0E5;
    --yj-terracotta:   #C75D3A;
    --yj-terracotta-2: #E89A7A;
    --yj-ink:          #1A2620;
    --yj-muted:        #5C6B5F;
    --yj-line:         rgba(45,122,79,.15);
    --yj-display: 'Roboto', system-ui, sans-serif;
    --yj-body:    'Poppins', system-ui, sans-serif;
    --yj-ease:     cubic-bezier(.22,.61,.36,1);
    --yj-ease-out: cubic-bezier(.16,1,.3,1);
}

/* ============ APP CONTAINER ============ */
.yj-app{
    position:relative;
    width:100%;
    min-height:100vh;
    font-family:var(--yj-body);
    color:var(--yj-ink);
    overflow:hidden;        /* keep blobs inside */
    overflow-x:hidden;
}
.yj-app *,
.yj-app *::before,
.yj-app *::after{
    box-sizing:border-box;
}

/* ============ BLOBS GLOBAUX (en fond de toute l'app) ============ */
.yj-app::before{
    content:"";
    position:absolute;
    top:0;right:-10%;
    width:55vw;height:55vw;
    max-width:700px;max-height:700px;
    background:radial-gradient(circle at center, rgba(45,122,79,.18), transparent 65%);
    filter:blur(50px);
    z-index:0;
    pointer-events:none;
    animation:yjFloat1 16s ease-in-out infinite;
}
.yj-app::after{
    content:"";
    position:absolute;
    top:20%;left:-10%;
    width:40vw;height:40vw;
    max-width:500px;max-height:500px;
    background:radial-gradient(circle at center, rgba(199,93,58,.18), transparent 60%);
    filter:blur(60px);
    z-index:0;
    pointer-events:none;
    animation:yjFloat2 20s ease-in-out infinite;
}
@keyframes yjFloat1{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-30px,40px) scale(1.06);}
}
@keyframes yjFloat2{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(40px,-30px) scale(1.08);}
}

/* ============ MAIN ============ */
.yj-app__main{
    position:relative;
    z-index:1;
}
.yj-app__section-wrap{
    position:relative;
    width:100%;
}