/* Page des raids 4x4 — reprend la charte de la brochure : mêmes couleurs,
   mêmes polices, et des cartes bâties comme celles des circuits. */

.bandeau {
  background: linear-gradient(135deg, #2A1A12 0%, #4A2A18 55%, var(--navy) 100%);
  color: #FFF; text-align: center; padding: 46px 20px 40px;
}
.bandeau h2 { color: #FFF; margin: 0 0 12px; font-size: clamp(1.9rem, 4.6vw, 2.9rem); }
.bandeau p { max-width: 760px; margin: 0 auto; color: #F2E4C9; font-size: 1.02rem; }

/* Quatre cartes : deux par ligne se lisent mieux qu'une ligne de trois
   suivie d'une carte orpheline. */
main.raids { max-width: 1000px; }

/* ------------------------------------------------------------- les cartes */
.raids-grid {
  display: grid; gap: 26px; margin: 0 0 46px;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
.raid-card {
  background: var(--blanc); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--bleu-pale); box-shadow: 0 2px 16px rgba(0,0,0,.06);
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.raid-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.12); }

.raid-photo { position: relative; height: 230px; background: #2A1A12; overflow: hidden; }
.raid-photo .vue {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity .6s ease;
}
.raid-photo .vue.active { opacity: 1; }
.raid-photo .fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.42); color: #FFF; font-size: 1.2rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.raid-photo .fleche:hover { background: rgba(0,0,0,.65); }
.raid-photo .prec { left: 10px; } .raid-photo .suiv { right: 10px; }
.raid-photo .points { position: absolute; bottom: 10px; left: 0; right: 0;
                      display: flex; justify-content: center; gap: 6px; }
.raid-photo .point { width: 7px; height: 7px; border-radius: 50%; border: 0;
                     background: rgba(255,255,255,.45); cursor: pointer; padding: 0; }
.raid-photo .point.active { background: #FFF; }
.raid-photo .etiquette {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(18,56,47,.88); color: var(--jaune);
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; padding: 5px 11px; border-radius: 999px;
}

.raid-corps { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.raid-corps h3 { font-family: 'Playfair Display', Georgia, serif; color: var(--navy);
                 font-size: 1.22rem; margin: 0 0 8px; line-height: 1.3; }
.raid-duree { color: var(--or); font-weight: 700; font-size: .92rem; margin: 0 0 12px; }
.raid-resume { color: #4A463F; font-size: .95rem; margin: 0 0 16px; flex: 1; }
.raid-prix { color: var(--navy); font-weight: 700; font-size: 1.05rem; margin: 0 0 14px; }
.raid-liens { display: flex; flex-direction: column; gap: 8px; }
.raid-liens a { text-align: center; text-decoration: none; font-weight: 700; font-size: .95rem;
                padding: 12px 18px; border-radius: 999px; }
.raid-voir { background: var(--navy); color: #FFF; }
.raid-voir:hover { background: #0B2A23; }
.raid-devis { background: transparent; color: var(--navy); border: 1px solid var(--or); }
.raid-devis:hover { background: var(--bleu-pale); }

/* --------------------------------------------------- le discours d'expertise */
.expertise { background: var(--blanc); border: 1px solid var(--bleu-pale);
             border-radius: 14px; padding: 30px 28px; margin-bottom: 34px; }
.citation { border-left: 4px solid var(--or); padding: 4px 0 4px 18px; margin: 24px 0 0;
            font-family: 'Playfair Display', Georgia, serif; font-style: italic;
            font-size: 1.12rem; color: var(--navy); }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 14px; margin: 0 0 40px; }
.chiffre { background: var(--navy); color: #FFF; border-radius: 12px; padding: 20px 14px;
           text-align: center; }
.chiffre b { display: block; font-family: 'Playfair Display', Georgia, serif;
             font-size: 2rem; color: var(--jaune); line-height: 1.1; }
.chiffre span { font-size: .86rem; color: #D8E4DE; }