/* Comprendre les risques */

.hero--violet{
    position:relative;
    min-height:778px;
    background:linear-gradient(180deg, #c5cbff 0%, #989fff 60%, var(--c-blue-soft) 100%);
    color:var(--c-white);
    overflow:hidden;
    border-bottom-left-radius:var(--r-xl);
    border-bottom-right-radius:var(--r-xl);
}
.hero--violet .hero-pattern{
    position:absolute; inset:0;
    background:url("../assets/img/pattern-pool.png") center/cover;
    opacity:.3; mix-blend-mode:plus-lighter; pointer-events:none;
}
.hero--violet .hero-content{
    position:relative;
    max-width:780px; margin:0 auto;
    padding:240px 20px 80px;
    text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:32px;
}
.hero--violet .hero-title{
    font-size:60px; letter-spacing:-1.2px; line-height:1.2;
    color:var(--c-white);
}
.hero--violet .hero-lead{ color:var(--c-white); max-width:680px; }
.hero-scroll{
    background:var(--c-blue);
    color:var(--c-white);
    border-radius:50%;
    width:120px; height:120px;
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
    font-family:var(--f-ui); font-weight:700; font-size:14px;
    gap:6px;
    transition:transform .3s;
}
.hero-scroll:hover{ transform:translateY(4px); }
.hero-scroll__arrow{ font-size:18px; }

/* ---- Cycle ---- */
.section--cycle{
    background:var(--c-white);
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    margin-top:-50px;
    position:relative;
    padding:200px 20px 150px;
    overflow:hidden;
}
.section-ghost{
    font-family:var(--f-display); font-weight:700; font-size:90px;
    color:var(--c-blue); opacity:.2;
    text-align:center; line-height:1;
    margin-bottom:60px;
}
.cycle-track{
    max-width:1300px; margin:0 auto;
    display:grid; grid-template-columns:repeat(3, 1fr); gap:50px;
    position:relative;
}
.cycle-track::after{
    content:""; position:absolute; left:50px; right:50px; top:200px;
    height:8px; background:url("../assets/icons/wave-underline.svg") repeat-x center/auto 100%;
    opacity:.6;
}
.cycle-card{
    display:flex; flex-direction:column; gap:20px; align-items:flex-start;
    position:relative; z-index:1;
}
.cycle-card__visual{
    background:var(--c-blue-light);
    border-radius:var(--r-md);
    height:400px; width:100%;
    background-image:url("../assets/img/risques-innodation.png");
    background-size:50%; background-position:center; background-repeat:no-repeat;
}
.cycle-card header{ display:flex; gap:20px; align-items:center; }
.cycle-num{
    background:var(--c-blue); color:var(--c-white);
    padding:7px 14px; border-radius:45px;
    font-family:var(--f-display); font-weight:600; font-size:18px;
    min-width:40px; text-align:center;
}
.cycle-num--accent{ background:var(--c-violet); }
.cycle-card p{ color:var(--c-blue-2); font-size:16px; line-height:1.5; max-width:330px; }

/* ---- Inondations + types ---- */
.section--inondations{ padding:150px 20px; }
.inondations{
    max-width:1110px; margin:0 auto;
    display:grid; grid-template-columns:550px 1fr; gap:10px;
    align-items:start;
}
.inondations__feature{
    background:var(--c-mint);
    border-radius:var(--r-md);
    padding:50px 40px;
    display:flex; flex-direction:column; gap:24px; align-items:center;
    text-align:center;
}
.inondations__feature img{ max-width:340px; }
.inondations__feature h3{ font-family:var(--f-display); font-weight:700; font-size:45px; color:var(--c-blue); }
.inondations__feature p{ font-size:16px; color:var(--c-blue-2); }
.inondations__feature strong{ color:var(--c-red); font-weight:900; }

.inondations__list{ display:flex; flex-direction:column; gap:15px; }
.ino-card{
    border-radius:var(--r-md);
    padding:40px;
    display:flex; flex-direction:column; gap:10px;
}
.ino-card--blue{ background:var(--c-blue-pale); }
.ino-card--yellow{ background:var(--c-yellow); }
.ino-card--cyan{ background:var(--c-blue-light); }
.ino-card__icon{ font-size:32px; }
.ino-card h4{ font-family:var(--f-display); font-weight:700; font-size:25px; color:var(--c-blue); }
.ino-card p{ color:var(--c-blue-2); font-size:16px; line-height:1.5; max-width:440px; }

/* ---- Aggravants ---- */
.section--aggravants{
    background:linear-gradient(180deg, transparent 0%, var(--c-blue) 100%);
    padding:150px 20px 300px;
    color:var(--c-white);
}
.aggravants__title{
    font-family:var(--f-display); font-weight:700; font-size:45px;
    color:var(--c-blue); text-align:center; margin-bottom:80px;
}
.aggravants{
    max-width:1110px; margin:0 auto;
    display:grid; grid-template-columns:repeat(3, 1fr); gap:25px;
    align-items:stretch;
}
.agg-card{
    background:var(--c-rose-pale);
    border-radius:var(--r-md);
    padding:40px;
    display:flex; flex-direction:column; gap:16px; align-items:center;
    text-align:center;
    transform:rotate(var(--rot, 0deg));
    transition:transform .3s;
}
.agg-card:hover{ transform:rotate(0); }
.agg-icon{
    width:56px; height:56px;
    background:var(--c-blue); color:var(--c-white);
    border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:24px;
}
.agg-card h3{ font-family:var(--f-display); font-weight:700; font-size:25px; color:var(--c-red); }
.agg-card p{ color:var(--c-red); font-size:16px; line-height:1.5; }

/* ---- Crues historiques ---- */
.section--crues{
    background:var(--c-blue);
    color:var(--c-white);
    padding:80px 0 150px;
    position:relative;
    overflow:hidden;
}
.section--crues::before{
    content:""; position:absolute; inset:0;
    background:url("../assets/img/pattern-pool.png") center/cover;
    opacity:.15; mix-blend-mode:plus-lighter; pointer-events:none;
}
.section--crues .container{ position:relative; z-index:1; }
.crues__title{
    font-family:var(--f-display); font-weight:700; font-size:45px;
    color:var(--c-white); margin-bottom:50px;
}
.crues{
    display:grid; grid-template-columns:1fr 1fr; gap:60px;
    align-items:center;
}
.crues__media{
    border-radius:15px; overflow:hidden; aspect-ratio:4/3;
    transform:rotate(-3.5deg);
    box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.crues__media img{ width:100%; height:100%; object-fit:cover; }
.crues__list{ display:flex; flex-direction:column; gap:60px; color:var(--c-white); }
.crue h3{ font-family:var(--f-display); font-weight:700; font-size:25px; color:var(--c-white); margin-bottom:24px; }
.crue p{ font-size:16px; line-height:1.5; }
.crue:not(.is-active){ opacity:.3; }

.video-block{
    margin-top:120px;
    display:flex; flex-direction:column; align-items:center; gap:32px;
    text-align:center;
}
.video-block__play{
    position:relative;
    width:100%; max-width:830px; aspect-ratio:16/9;
    border:1px solid var(--c-violet-2);
    border-radius:22px;
    overflow:hidden;
    cursor:pointer;
}
.video-block__play img{ width:100%; height:100%; object-fit:cover; opacity:.85; }
.video-play{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:128px; height:128px;
    background:var(--c-white); border-radius:50%;
    box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.video-play::after{
    content:""; position:absolute; top:50%; left:55%; transform:translate(-50%,-50%);
    border-left:30px solid var(--c-blue);
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
}
.video-block__txt h3{ font-family:var(--f-display); font-weight:700; font-size:45px; color:var(--c-white); margin-bottom:20px; }
.video-block__txt p{ max-width:680px; font-size:16px; line-height:1.5; }

/* CTA Island variants */
.cta-island--yellow{ background:var(--c-yellow); }
.cta-island--yellow::before{ display:none; }

@media (max-width: 980px){
    .hero--violet .hero-title{ font-size:36px; }
    .section-ghost{ font-size:42px; }
    .cycle-track{ grid-template-columns:1fr; }
    .cycle-track::after{ display:none; }
    .inondations{ grid-template-columns:1fr; }
    .aggravants{ grid-template-columns:1fr; }
    .crues{ grid-template-columns:1fr; gap:32px; }
}