/* ============================================================
   HYDREAULYS — Entretien des rivières (page-specific)
   Variables & classes partagées : styles.css, styles-gemapi.css
   ============================================================ */

.riv-hero__grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 56px; align-items: center; }
.riv-hero__photo { margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 30px 60px -30px rgba(0,58,112,.35); }
.riv-hero__photo image-slot { width: 100%; height: 100%; }

.riv-decision__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 48px; margin-top: 32px; }

/* ---------- Cartes d'interventions ---------- */
.riv-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.riv-card {
  position: relative; background: #fff; border: 1px solid var(--hy-line); border-radius: 22px;
  padding: 30px 26px; transition: all .3s ease;
}
.riv-card:hover { transform: translateY(-5px); border-color: var(--hy-blue); box-shadow: 0 30px 56px -30px rgba(0,80,152,.32); }
.riv-card__ico { width: 46px; height: 46px; border-radius: 13px; background: var(--hy-green-tint); color: var(--hy-blue); display: grid; place-items: center; margin-bottom: 20px; }
.riv-card__num { position: absolute; top: 26px; right: 24px; font-family: var(--font-sans); font-style: normal; font-size: 26px; color: var(--hy-line); }
.riv-card__title { font-size: 16.5px; font-weight: 700; color: var(--hy-blue-ink); letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 10px; }
.riv-card__desc { font-size: 14px; line-height: 1.55; color: var(--hy-muted); margin: 0; }

/* ---------- Comparatif on intervient / on préserve ---------- */
.riv-compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 44px; }
.riv-compare__col { border-radius: 22px; padding: 30px 30px 34px; }
.riv-compare__col--do { background: #fff; border: 1px solid var(--hy-line); }
.riv-compare__col--keep { background: var(--hy-green-tint); border: 1px solid var(--hy-green-soft); }
.riv-compare__head { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--hy-blue-ink); margin-bottom: 22px; }
.riv-compare__col--do .riv-compare__head { color: var(--hy-blue); }
.riv-compare__col--keep .riv-compare__head { color: #2a7a7a; }
.riv-compare__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.riv-compare__list li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; color: var(--hy-ink); }
.riv-compare__list li::before { content: "—"; position: absolute; left: 0; color: var(--hy-muted); }

/* ---------- Photo secteur renaturé ---------- */
.riv-restore-photo { margin: 56px 0 0; overflow: hidden; height: clamp(320px, 42vw, 620px); }
.riv-restore-photo image-slot { width: 100%; height: 100%; }

/* ---------- Reméandrage ---------- */
.riv-meander { margin-top: 80px; }
.riv-meander__title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; color: var(--hy-blue-ink); letter-spacing: -0.01em; margin: 0 0 28px; }
.riv-meander__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 44px; align-items: start; }
.riv-meander__compare { margin: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.riv-meander__frame { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16/9; background: var(--hy-paper); border: 1px solid var(--hy-line); }
.riv-meander__frame image-slot { width: 100%; height: 100%; }
.riv-meander__tag { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(0,58,112,.85); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; padding: 5px 12px; border-radius: var(--radius-pill); }

/* ---------- Frise horizontale (5 étapes) ---------- */
.riv-timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 8px; }
.riv-timeline__line { position: absolute; top: 18px; left: 18px; right: 18px; height: 2px; background: linear-gradient(90deg, var(--hy-blue) 0%, var(--hy-cyan) 100%); z-index: 0; }
.riv-timeline__item { position: relative; z-index: 1; padding-top: 54px; }
.riv-timeline__num {
  position: absolute; top: 0; left: 0; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: 3px solid var(--hy-blue); color: var(--hy-blue-ink);
  display: grid; place-items: center; font-weight: 800; font-size: 15px; transition: all .3s ease;
}
.riv-timeline__item:hover .riv-timeline__num { background: var(--hy-cyan); border-color: var(--hy-cyan); color: #fff; transform: scale(1.1); }
.riv-timeline__title { font-size: 15.5px; font-weight: 700; color: var(--hy-blue-ink); margin: 0 0 8px; letter-spacing: -0.01em; line-height: 1.3; }
.riv-timeline__desc { font-size: 13.5px; line-height: 1.55; color: var(--hy-muted); margin: 0; }

.riv-berges{margin-top:48px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;background:#fff;border:1px solid var(--hy-line);border-radius:22px;padding:32px 34px;max-width:880px}
.riv-berges__ico{width:48px;height:48px;border-radius:14px;background:var(--hy-green-tint);color:var(--hy-blue);display:grid;place-items:center}
.riv-berges__kicker{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#2a7a7a}
.riv-berges__title{font-size:20px;font-weight:700;color:var(--hy-blue-ink);letter-spacing:-.01em;line-height:1.3;margin:8px 0 14px;text-wrap:balance}
.riv-berges__body p{font-size:15px;line-height:1.6;color:var(--hy-ink);margin:0 0 10px}
.riv-berges__cta{display:inline-flex;align-items:center;gap:10px;margin-top:10px;padding:12px 20px;border-radius:var(--radius-pill);background:var(--hy-blue);color:#fff;font-size:14px;font-weight:700;text-decoration:none;transition:background .2s}
.riv-berges__cta:hover{background:var(--hy-blue-ink);color:#fff}
@media (max-width:700px){.riv-berges{grid-template-columns:1fr;padding:26px 22px}}

.riv-more__desc { font-size: 14px; line-height: 1.55; color: var(--hy-muted); margin: -6px 0 0; }

@media (max-width: 1100px) {
  .riv-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .riv-decision__grid { grid-template-columns: 1fr; }
  .riv-compare { grid-template-columns: 1fr; }
  .riv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .riv-meander__grid { grid-template-columns: 1fr; }
  .riv-timeline { grid-template-columns: repeat(2, 1fr); }
  .riv-timeline__line { display: none; }
}
@media (max-width: 700px) {
  .riv-cards { grid-template-columns: 1fr; }
  .riv-timeline { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Encadrés pleine largeur ---------- */
.gem-tip--full{max-width:none}

/* ---------- Slider avant / après ---------- */
.riv-ba{position:relative;margin:0;border-radius:18px;overflow:hidden;aspect-ratio:16/10;background:var(--hy-paper);border:1px solid var(--hy-line);cursor:ew-resize;user-select:none;touch-action:pan-y}
.riv-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.riv-ba__before{position:absolute;inset:0}
.riv-ba__tag-r{left:auto;right:12px}
.riv-ba__handle{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,58,112,.15);z-index:3;pointer-events:none}
.riv-ba__knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;color:var(--hy-blue);display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(0,58,112,.45)}
.riv-ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;z-index:4}
.riv-ba__range:focus-visible + *,.riv-ba:focus-within .riv-ba__knob{outline:3px solid var(--hy-cyan);outline-offset:2px}

/* ---------- Comparatif : style cartes Modes de gestion ---------- */
.riv-compare__head{gap:14px;font-size:17px}
.riv-compare__ico{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--hy-blue-tint);color:var(--hy-blue)}
.riv-compare__col--keep .riv-compare__ico{background:#fff;color:var(--hy-cyan)}
.riv-compare__list li{padding-left:20px}
.riv-compare__list li::before{content:"";top:.55em;width:7px;height:7px;border-radius:50%;background:var(--hy-blue)}
.riv-compare__col--keep .riv-compare__list li::before{background:#2a7a7a}

/* ---------- Restaurer : photo à droite du texte ---------- */
.riv-restore{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.riv-restore__photo{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/3}
.riv-restore__photo image-slot{width:100%;height:100%}
@media (max-width:900px){.riv-restore{grid-template-columns:1fr;gap:32px}}