/* ============================================================
   YJ SITE — Commission d'enquête TotalEnergies (v3.3.0)
   Page riche : intro flottante + chiffres + thèmes + citation
   + actions en justice + CTA téléchargement PDF
============================================================ */

.yj-com{
    position:relative;
    width:100%;
    padding:60px 5% 100px;
    box-sizing:border-box;
    font-family:var(--yj-body);
    color:var(--yj-ink);
}
.yj-com__inner{
    position:relative; z-index:1;
    max-width:1300px;
    margin:0 auto;
}

/* ============ HEADER ============ */
.yj-com__header{
    text-align:left;
    margin-bottom:70px;
    max-width:920px;
    opacity:0;transform:translateY(20px);
    animation:yjComReveal .9s var(--yj-ease-out) .1s forwards;
}
@keyframes yjComReveal{ to{opacity:1;transform:translateY(0);} }

.yj-com__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--yj-body);
    font-size:12px; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase;
    color:var(--yj-terracotta);
    padding:8px 16px;
    border:1px solid rgba(199,93,58,.25);
    border-radius:4px;
    background:rgba(255,255,255,.5);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    margin-bottom:24px;
}
.yj-com__eyebrow-dot{
    width:7px; height:7px;
    border-radius:50%;
    background:var(--yj-terracotta);
    box-shadow:0 0 0 4px rgba(199,93,58,.18);
    animation:yjComPulse 2.4s ease-in-out infinite;
}
@keyframes yjComPulse{
    0%,100%{box-shadow:0 0 0 4px rgba(199,93,58,.18);}
    50%{box-shadow:0 0 0 9px rgba(199,93,58,.04);}
}

.yj-com__heading{
    font-family:var(--yj-display);
    font-size:clamp(38px, 5.5vw, 76px);
    font-weight:900; line-height:.98;
    letter-spacing:-.035em;
    color:var(--yj-ink);
    margin:0 0 18px;
}
.yj-com__heading span{
    color:var(--yj-green-deep);
    position:relative;
    display:inline-block;
}
.yj-com__heading span::after{
    content:"";
    position:absolute;
    left:0;right:0;
    bottom:-0.15em;
    height:.12em;
    background:var(--yj-terracotta);
    border-radius:2px;
}
.yj-com__subtitle{
    font-family:var(--yj-display);
    font-size:clamp(18px, 2vw, 24px);
    font-weight:300; line-height:1.4;
    color:var(--yj-muted);
    margin:0;
}

/* ============ INTRO : Cover image + text ============ */
.yj-com__intro{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr);
    gap:70px;
    align-items:center;
    margin-bottom:100px;
}

.yj-com__cover{
    position:relative;
    margin:0;
    opacity:0;transform:translateY(20px);
    transition:opacity .9s var(--yj-ease-out), transform .9s var(--yj-ease-out);
    transition-delay:.15s;
}
.yj-com__cover.is-revealed{
    opacity:1; transform:translateY(0);
}
.yj-com__cover-float{
    position:relative;
    aspect-ratio:3/4;
    max-width:440px;
    margin:0 auto;
    border-radius:8px;
    overflow:hidden;
    background:var(--yj-green-deep);
    /* Multi-layered modern shadow */
    box-shadow:
        0 50px 80px -30px rgba(27,94,61,.45),
        0 30px 50px -25px rgba(199,93,58,.18),
        0 18px 30px -18px rgba(0,0,0,.2);
    /* Gentle floating animation */
    animation:yjComFloat 7s ease-in-out infinite;
    transition:transform .8s var(--yj-ease), box-shadow .8s var(--yj-ease);
    cursor:pointer;
}
@keyframes yjComFloat{
    0%, 100%{ transform:translateY(0) rotate(-1.5deg); }
    50%{ transform:translateY(-14px) rotate(-1.5deg); }
}
.yj-com__cover-float:hover{
    animation-play-state:paused;
    transform:translateY(-8px) rotate(0) scale(1.03);
    box-shadow:
        0 70px 100px -30px rgba(27,94,61,.55),
        0 40px 60px -25px rgba(199,93,58,.25),
        0 25px 40px -18px rgba(0,0,0,.25);
}
.yj-com__cover-float::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, transparent 55%, rgba(199,93,58,.22));
    opacity:0;
    transition:opacity .5s var(--yj-ease);
    pointer-events:none;
}
.yj-com__cover-float:hover::after{ opacity:1; }
.yj-com__cover-float img{
    display:block;
    width:100%; height:100%;
    object-fit:cover;
    transition:transform 1.2s var(--yj-ease);
    filter:saturate(1.05) contrast(1.04);
}
.yj-com__cover-float:hover img{ transform:scale(1.05); }

.yj-com__cover-badge{
    position:absolute;
    bottom:-18px; right:-12px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 18px;
    background:var(--yj-terracotta);
    color:#fff;
    border-radius:4px;
    font-family:var(--yj-body);
    font-size:11px; font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    box-shadow:0 20px 40px -15px rgba(199,93,58,.55);
    z-index:2;
    transform:rotate(2deg);
    transition:transform .4s var(--yj-ease), box-shadow .4s var(--yj-ease);
}
.yj-com__cover-badge svg{ width:14px; height:14px; }
.yj-com__cover-float:hover ~ .yj-com__cover-badge,
.yj-com__cover:hover .yj-com__cover-badge{
    transform:rotate(0) scale(1.05);
    box-shadow:0 28px 50px -15px rgba(199,93,58,.7);
}

/* Intro text */
.yj-com__intro-text{
    opacity:0;transform:translateY(20px);
    transition:opacity .9s var(--yj-ease-out), transform .9s var(--yj-ease-out);
    transition-delay:.3s;
}
.yj-com__intro-text.is-revealed{
    opacity:1; transform:translateY(0);
}
.yj-com__intro-title{
    font-family:var(--yj-display);
    font-size:clamp(26px, 3vw, 36px);
    font-weight:900;
    line-height:1.15;
    letter-spacing:-.025em;
    color:var(--yj-green-deep);
    margin:0 0 22px;
}
.yj-com__intro-text p{
    font-family:var(--yj-body);
    font-size:15.5px;
    line-height:1.75;
    color:var(--yj-ink);
    margin:0 0 18px;
}

/* PDF download button (inline in intro) */
.yj-com__btn-pdf{
    display:inline-flex;
    align-items:center;
    gap:16px;
    margin-top:14px;
    padding:18px 24px;
    background:var(--yj-green-deep);
    color:#fff;
    text-decoration:none;
    border-radius:6px;
    box-shadow:
        0 20px 40px -15px rgba(27,94,61,.45),
        0 8px 16px -10px rgba(0,0,0,.2);
    transition:all .4s var(--yj-ease);
    position:relative;
    overflow:hidden;
}
.yj-com__btn-pdf::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--yj-terracotta);
    transform:translateY(100%);
    transition:transform .45s var(--yj-ease-out);
    z-index:0;
}
.yj-com__btn-pdf > *{ position:relative; z-index:1; }
.yj-com__btn-pdf:hover{
    transform:translateY(-4px);
    box-shadow:
        0 30px 55px -15px rgba(199,93,58,.55),
        0 12px 20px -10px rgba(0,0,0,.25);
    color:#fff;
}
.yj-com__btn-pdf:hover::before{ transform:translateY(0); }
.yj-com__btn-pdf-icon{
    flex-shrink:0;
    width:44px; height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.15);
    border-radius:4px;
    transition:transform .5s var(--yj-ease);
}
.yj-com__btn-pdf-icon svg{ width:22px; height:22px; }
.yj-com__btn-pdf:hover .yj-com__btn-pdf-icon{
    transform:scale(1.08) translateY(-2px);
}
.yj-com__btn-pdf-body{
    display:flex;
    flex-direction:column;
    gap:3px;
}
.yj-com__btn-pdf-title{
    font-family:var(--yj-body);
    font-size:14px;
    font-weight:600;
    letter-spacing:.005em;
}
.yj-com__btn-pdf-meta{
    font-family:var(--yj-body);
    font-size:11.5px;
    font-weight:400;
    opacity:.7;
    letter-spacing:.02em;
}

/* ============ STATS ============ */
.yj-com__stats-wrap{
    margin-bottom:100px;
}
.yj-com__stats-label{
    display:inline-block;
    font-family:var(--yj-body);
    font-size:11px; font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--yj-green-deep);
    padding-bottom:6px;
    border-bottom:2px solid var(--yj-terracotta);
    margin-bottom:30px;
}
.yj-com__stats{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:18px;
}
.yj-com__stat{
    padding:30px 26px;
    background:rgba(255,255,255,.7);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid var(--yj-line);
    border-radius:8px;
    box-shadow:
        0 18px 36px -22px rgba(27,94,61,.25),
        0 8px 16px -12px rgba(0,0,0,.08);
    transition:all .45s var(--yj-ease);
    position:relative;
    overflow:hidden;
    opacity:0;transform:translateY(20px);
}
.yj-com__stat.is-revealed{ opacity:1; transform:translateY(0); }
.yj-com__stat::before{
    content:"";
    position:absolute;
    top:0; left:0;
    width:100%; height:3px;
    background:var(--yj-terracotta);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .5s var(--yj-ease-out);
}
.yj-com__stat:hover{
    transform:translateY(-6px);
    border-color:var(--yj-green-deep);
    box-shadow:
        0 35px 60px -25px rgba(27,94,61,.4),
        0 18px 30px -15px rgba(0,0,0,.15);
}
.yj-com__stat:hover::before{ transform:scaleX(1); }

.yj-com__stat-value{
    font-family:var(--yj-display);
    font-size:clamp(50px, 6vw, 72px);
    font-weight:900;
    line-height:.9;
    letter-spacing:-.04em;
    color:var(--yj-green-deep);
    margin-bottom:8px;
    transition:color .35s var(--yj-ease);
}
.yj-com__stat-value span{
    font-size:.45em;
    margin-left:4px;
    color:var(--yj-terracotta);
    font-weight:700;
}
.yj-com__stat:hover .yj-com__stat-value{ color:var(--yj-terracotta); }
.yj-com__stat-label{
    font-family:var(--yj-body);
    font-size:14px;
    font-weight:600;
    color:var(--yj-ink);
    margin-bottom:10px;
    letter-spacing:.005em;
}
.yj-com__stat-text{
    font-family:var(--yj-body);
    font-size:12.5px;
    line-height:1.55;
    color:var(--yj-muted);
}

/* ============ THEMES ============ */
.yj-com__themes-wrap{
    margin-bottom:100px;
}
.yj-com__themes-title{
    font-family:var(--yj-display);
    font-size:clamp(28px, 3.6vw, 42px);
    font-weight:900;
    letter-spacing:-.025em;
    color:var(--yj-ink);
    margin:0 0 36px;
    line-height:1.15;
}
.yj-com__themes{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:20px;
}
.yj-com__theme{
    position:relative;
    padding:28px 26px;
    background:rgba(255,255,255,.55);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid var(--yj-line);
    border-radius:8px;
    box-shadow:0 14px 28px -16px rgba(27,94,61,.18);
    transition:all .45s var(--yj-ease);
    overflow:hidden;
    opacity:0;transform:translateY(20px);
}
.yj-com__theme.is-revealed{ opacity:1; transform:translateY(0); }
.yj-com__theme::after{
    content:"";
    position:absolute;
    bottom:-50%; right:-50%;
    width:200px; height:200px;
    background:radial-gradient(circle, rgba(199,93,58,.12), transparent 70%);
    opacity:0;
    transition:opacity .5s var(--yj-ease);
    pointer-events:none;
}
.yj-com__theme:hover{
    transform:translateY(-4px);
    border-color:var(--yj-green-deep);
    background:rgba(255,255,255,.85);
    box-shadow:
        0 28px 50px -22px rgba(27,94,61,.35),
        0 14px 24px -14px rgba(0,0,0,.12);
}
.yj-com__theme:hover::after{ opacity:1; }
.yj-com__theme-num{
    font-family:var(--yj-display);
    font-size:13px;
    font-weight:900;
    letter-spacing:.15em;
    color:var(--yj-terracotta);
    margin-bottom:14px;
    transition:transform .4s var(--yj-ease);
}
.yj-com__theme:hover .yj-com__theme-num{
    transform:translateX(4px);
}
.yj-com__theme h4{
    font-family:var(--yj-display);
    font-size:19px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:-.015em;
    color:var(--yj-ink);
    margin:0 0 12px;
    transition:color .35s var(--yj-ease);
}
.yj-com__theme:hover h4{ color:var(--yj-green-deep); }
.yj-com__theme p{
    font-family:var(--yj-body);
    font-size:13.5px;
    line-height:1.65;
    color:var(--yj-muted);
    margin:0;
}

/* ============ QUOTE ============ */
.yj-com__quote{
    position:relative;
    margin:0 0 100px;
    padding:60px clamp(40px, 6vw, 80px);
    background:linear-gradient(135deg, var(--yj-green-deep) 0%, #154A30 100%);
    border-radius:10px;
    color:#fff;
    box-shadow:
        0 50px 90px -30px rgba(27,94,61,.55),
        0 25px 50px -20px rgba(0,0,0,.2);
    overflow:hidden;
    opacity:0;transform:translateY(30px);
    transition:opacity 1s var(--yj-ease-out), transform 1s var(--yj-ease-out);
}
.yj-com__quote.is-revealed{ opacity:1; transform:translateY(0); }
.yj-com__quote::before{
    content:"";
    position:absolute;
    top:-30%; right:-10%;
    width:50%; height:160%;
    background:radial-gradient(ellipse, rgba(199,93,58,.25), transparent 60%);
    filter:blur(40px);
    pointer-events:none;
}
.yj-com__quote-mark{
    position:absolute;
    top:30px; left:30px;
    width:54px; height:40px;
    color:var(--yj-terracotta);
    opacity:.5;
}
.yj-com__quote blockquote{
    position:relative;
    font-family:var(--yj-display);
    font-size:clamp(18px, 2.2vw, 26px);
    font-weight:300;
    line-height:1.5;
    letter-spacing:-.01em;
    color:#fff;
    margin:0 0 28px;
    max-width:880px;
    z-index:1;
}
.yj-com__quote figcaption{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:4px;
    padding-left:18px;
    border-left:2px solid var(--yj-terracotta);
    font-family:var(--yj-body);
    font-size:13px;
}
.yj-com__quote figcaption strong{
    font-weight:700;
    color:#fff;
    letter-spacing:.01em;
}
.yj-com__quote figcaption span{
    color:rgba(255,255,255,.65);
    font-size:12.5px;
}

/* ============ LEGAL ACTIONS ============ */
.yj-com__legal-wrap{
    margin-bottom:80px;
}
.yj-com__legal-label{
    display:inline-block;
    font-family:var(--yj-body);
    font-size:11px; font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--yj-green-deep);
    padding-bottom:6px;
    border-bottom:2px solid var(--yj-terracotta);
    margin-bottom:18px;
}
.yj-com__legal-title{
    font-family:var(--yj-display);
    font-size:clamp(28px, 3.6vw, 42px);
    font-weight:900;
    letter-spacing:-.025em;
    color:var(--yj-ink);
    margin:0 0 16px;
    line-height:1.15;
}
.yj-com__legal-intro{
    font-family:var(--yj-body);
    font-size:15px;
    line-height:1.65;
    color:var(--yj-muted);
    max-width:760px;
    margin:0 0 36px;
}
.yj-com__legal-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:18px;
}
.yj-com__legal-card{
    position:relative;
    padding:26px 24px;
    background:#fff;
    border:1px solid var(--yj-line);
    border-radius:8px;
    box-shadow:0 14px 28px -18px rgba(27,94,61,.2);
    transition:all .45s var(--yj-ease);
    opacity:0;transform:translateY(20px);
}
.yj-com__legal-card.is-revealed{ opacity:1; transform:translateY(0); }
.yj-com__legal-card:hover{
    transform:translateY(-4px);
    border-color:var(--yj-terracotta);
    box-shadow:
        0 28px 50px -20px rgba(199,93,58,.3),
        0 14px 24px -14px rgba(0,0,0,.12);
}
.yj-com__legal-card-tag{
    display:inline-block;
    padding:4px 10px;
    background:rgba(199,93,58,.12);
    color:var(--yj-terracotta);
    border-radius:3px;
    font-family:var(--yj-body);
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:14px;
}
.yj-com__legal-card h4{
    font-family:var(--yj-display);
    font-size:17px;
    font-weight:900;
    line-height:1.25;
    letter-spacing:-.01em;
    color:var(--yj-ink);
    margin:0 0 12px;
}
.yj-com__legal-card p{
    font-family:var(--yj-body);
    font-size:13px;
    line-height:1.65;
    color:var(--yj-muted);
    margin:0;
}

/* ============ FINAL CTA ============ */
.yj-com__final{
    opacity:0;transform:translateY(30px);
    transition:opacity 1s var(--yj-ease-out), transform 1s var(--yj-ease-out);
}
.yj-com__final.is-revealed{ opacity:1; transform:translateY(0); }
.yj-com__final-inner{
    display:grid;
    grid-template-columns:minmax(0, 1.5fr) auto;
    gap:50px;
    align-items:center;
    padding:50px clamp(30px, 5vw, 60px);
    background:rgba(255,255,255,.8);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid var(--yj-line);
    border-radius:10px;
    box-shadow:
        0 30px 60px -25px rgba(27,94,61,.3),
        0 15px 30px -15px rgba(0,0,0,.1);
}
.yj-com__final-eyebrow{
    font-family:var(--yj-body);
    font-size:12px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--yj-green-deep);
    margin-bottom:14px;
}
.yj-com__final-title{
    font-family:var(--yj-display);
    font-size:clamp(24px, 3vw, 36px);
    font-weight:900;
    letter-spacing:-.025em;
    color:var(--yj-ink);
    margin:0 0 14px;
    line-height:1.15;
}
.yj-com__final-text p{
    font-family:var(--yj-body);
    font-size:14.5px;
    line-height:1.6;
    color:var(--yj-muted);
    margin:0;
}
.yj-com__final-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 26px;
    background:var(--yj-terracotta);
    color:#fff;
    text-decoration:none;
    border-radius:4px;
    font-family:var(--yj-body);
    font-size:13.5px;
    font-weight:600;
    letter-spacing:.01em;
    box-shadow:0 18px 36px -14px rgba(199,93,58,.5);
    transition:all .4s var(--yj-ease);
    white-space:nowrap;
    position:relative;
    overflow:hidden;
}
.yj-com__final-btn::before{
    content:"";
    position:absolute;
    inset:0;
    /* Darken to a deeper terracotta on hover — no more green-on-green */
    background:linear-gradient(135deg, #A04527, #7E3520);
    transform:translateX(-100%);
    transition:transform .45s var(--yj-ease-out);
    z-index:0;
}
.yj-com__final-btn > *{ position:relative; z-index:1; color:#fff; }
.yj-com__final-btn:hover{
    transform:translateY(-3px);
    color:#fff;
    box-shadow:0 26px 50px -16px rgba(199,93,58,.6);
}
.yj-com__final-btn:hover::before{ transform:translateX(0); }
.yj-com__final-btn svg{ width:18px; height:18px; color:#fff; stroke:#fff; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px){
    .yj-com__intro{ grid-template-columns:1fr; gap:50px; }
    .yj-com__cover-float{ max-width:360px; }
    .yj-com__final-inner{ grid-template-columns:1fr; gap:28px; }
    .yj-com__final-btn{ justify-self:start; }
}
@media (max-width: 720px){
    .yj-com{ padding:40px 6% 80px; }
    .yj-com__header{ margin-bottom:50px; }
    .yj-com__intro{ margin-bottom:70px; }
    .yj-com__cover-float{ max-width:300px; }
    .yj-com__btn-pdf{ padding:14px 18px; gap:12px; width:100%; box-sizing:border-box; }
    .yj-com__btn-pdf-icon{ width:38px; height:38px; }
    .yj-com__btn-pdf-icon svg{ width:18px; height:18px; }
    .yj-com__stats-wrap, .yj-com__themes-wrap, .yj-com__legal-wrap{ margin-bottom:70px; }
    .yj-com__stat{ padding:24px 22px; }
    .yj-com__quote{ padding:40px 24px; margin-bottom:70px; }
    .yj-com__quote-mark{ width:40px; height:30px; top:20px; left:20px; }
}
@media (max-width: 480px){
    .yj-com__heading{ font-size:38px; }
    .yj-com__final-inner{ padding:35px 22px; }
    .yj-com__final-btn{ width:100%; justify-content:center; box-sizing:border-box; }
}