/* Agir territoire */

.section--gallery{
    background:var(--c-white);
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    margin-top:-50px; position:relative;
    padding:200px 20px 200px;
    text-align:center;
}
.gallery{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:80px;
    max-width:1840px; margin:0 auto 100px;
}
.gallery__item{
    aspect-ratio:4/3;
    border-radius:var(--r-md);
    overflow:hidden;
    transition:transform .3s, box-shadow .3s;
}
.gallery__item img{ width:100%; height:100%; object-fit:cover; }
.gallery__item:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.gallery__caption{
    max-width:600px; margin:0 auto 100px;
    color:var(--c-blue-2); font-size:16px; line-height:1.5;
}
.video-block__play--lg{
    margin:0 auto;
    max-width:820px;
}

/* TXT vs IMG sections */
.section--txtimg{
    padding:0 20px 200px;
    max-width:1110px; margin:0 auto;
}
.txtimg{
    display:grid; grid-template-columns:504px 1fr; gap:106px;
    align-items:center;
}
.txtimg--reverse{ grid-template-columns:1fr 504px; }
.txtimg--reverse .txtimg__img{ order:0; }
.txtimg__txt{ display:flex; flex-direction:column; gap:32px; }
.txtimg__txt h2{ font-family:var(--f-display); font-weight:700; font-size:45px; line-height:1; color:var(--c-blue); }
.txtimg__txt p{ font-size:16px; line-height:1.5; color:var(--c-blue-2); max-width:440px; }
.txtimg__img{
    height:450px;
    border-radius:var(--r-md); overflow:hidden;
    box-shadow:var(--shadow-soft);
}
.txtimg__img img{ width:100%; height:100%; object-fit:cover; }
.txtimg-sep{
    height:10px; width:200px; margin:100px auto;
    background:url("../assets/icons/wave-underline.svg") no-repeat center/contain;
    opacity:.5;
}

/* Quizz promo */
.section--quizz-promo{
    background:linear-gradient(180deg, #96ded9 0%, var(--c-white) 100%);
    padding:150px 20px;
    text-align:center;
}
.quizz-promo__head{ max-width:840px; margin:0 auto 50px; display:flex; flex-direction:column; gap:20px; }
.quizz-promo__head h2{ font-family:var(--f-display); font-weight:700; font-size:45px; line-height:1; color:var(--c-blue); }
.quizz-promo__head p{ color:var(--c-blue-2); font-size:16px; }
.quizz-promo__preview{ margin:0 auto 50px; max-width:850px; transform:rotate(-1deg); }

.quiz-preview-card{
    background:var(--c-white);
    border-radius:36px;
    box-shadow:var(--shadow-soft);
    overflow:hidden;
    display:grid; grid-template-columns:325px 1fr;
    transform:rotate(var(--rot, 0));
}
.quiz-preview-card__visual{
    background:var(--c-blue-light) url("../assets/img/territoire-1.jpg") center/cover;
    min-height:500px;
}
.quiz-preview-card__content{
    padding:50px 117px 50px 88px;
    display:flex; flex-direction:column; gap:18px; align-items:flex-start;
    text-align:left;
}
.quiz-preview-card__step{
    font-family:var(--f-display); font-weight:600; font-size:8px;
    color:var(--c-green);
}
.quiz-preview-card__content h3{
    font-family:var(--f-display); font-weight:700; font-size:14px; line-height:1.2;
    color:var(--c-blue);
}
.quiz-preview-card__grid{
    display:grid; grid-template-columns:1fr 1fr; gap:5px;
    width:100%;
}
.quiz-preview-card__answer{
    border-radius:7px;
    padding:23px 14px 12px;
    display:flex; flex-direction:column; align-items:center; gap:14px;
    background:var(--c-blue-pale);
}
.quiz-preview-card__answer span{
    border:1px solid var(--c-blue); border-radius:26px;
    padding:7px 9px;
    font-family:var(--f-display); font-weight:600; font-size:11px;
    color:var(--c-blue);
}
.quiz-preview-card__answer b{
    font-family:var(--f-display); font-weight:700; font-size:11.7px;
    color:var(--c-blue); text-align:center; line-height:1.2;
}
.quiz-preview-card__answer.is-selected{
    background:var(--c-yellow-pale);
    border:3.5px solid var(--c-yellow);
    box-shadow:0 4.6px 8.7px rgba(0,0,0,.1);
}
.quiz-preview-card__cta{
    width:100%;
    background:var(--c-green); color:var(--c-white);
    border-radius:7px; padding:9px 14px;
    font-family:var(--f-display); font-weight:600; font-size:9px;
    cursor:pointer;
}

@media (max-width: 980px){
    .gallery{ grid-template-columns:repeat(2, 1fr); gap:24px; }
    .txtimg, .txtimg--reverse{ grid-template-columns:1fr; gap:32px; }
    .quiz-preview-card{ grid-template-columns:1fr; }
    .quiz-preview-card__content{ padding:24px; }
}