/* Styles maison de Ralvéo.
   Habillage graphique conforme à la maquette d'accueil (nav sombre, recherche
   héro, grille d'événements, bandeau CTA, footer sombre). Identité de marque
   provisoire (logo/couleurs) : à remplacer sans refonte structurelle une fois
   la marque déposée. */

/* Police officielle Ralvéo (baseline accueil validée le 2026-08-02).
   Hébergée localement (aucune dépendance à un CDN externe, cf. le principe
   déjà retenu pour le logo dans docs/charte-graphique.md). */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins/poppins-400.9212f6f9860f.woff2") format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins/poppins-500.a09f2fccfee3.woff2") format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins/poppins-600.72993dddf88a.woff2") format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins/poppins-700.25b0e113ca7c.woff2") format('woff2');
}

/* Palette officielle Livre bleu (validée 2026-08-03).
   Orange clair ajouté le 2026-08-03 : couleur de marque dédiée au CTA
   « Recherche bénévoles » (distincte de l'accent vert, jamais utilisée comme
   second bouton plein d'une même zone). */
:root {
  --rv-dark: #171817;
  --rv-dark-2: #1b2025;
  --rv-green: #31BF62;
  --rv-green-dark: #1B8C46;
  --rv-green-light: #7ED8A0;
  --rv-cream: #eef3ea;
  --rv-bg: #f7f7f5;
  --rv-border: #e6e5e0;
  --rv-orange: #f7c067;
  --rv-orange-dark: #e0a745;
  --rv-orange-text: #7a4410;
}

body {
  display: flex; flex-direction: column; min-height: 100vh; background: var(--rv-bg);
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { flex: 1 0 auto; }

a { color: var(--rv-green-dark); }
a:hover { color: var(--rv-green); }

.btn-primary {
  --bs-btn-bg: var(--rv-green);
  --bs-btn-border-color: var(--rv-green);
  --bs-btn-hover-bg: var(--rv-green-dark);
  --bs-btn-hover-border-color: var(--rv-green-dark);
  --bs-btn-active-bg: var(--rv-green-dark);
  --bs-btn-active-border-color: var(--rv-green-dark);
}

/* Animations légères (survol des boutons). */
.btn { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.btn:hover { transform: translateY(-1px); }

.rv-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; }
.text-rv-green { color: var(--rv-green-light) !important; }
.text-rv-accent { color: var(--rv-green-dark); }

/* --------------------------------------------------------------------
   Comment ça marche ? (histoire + fonctionnement)
   -------------------------------------------------------------------- */
.rv-story-block {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfa 100%);
  border: 1px solid var(--rv-border);
  border-left: 4px solid var(--rv-green);
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgba(20, 24, 28, 0.06);
}
.rv-story p { font-size: 1.05rem; color: #333; }
.rv-story__lead { font-size: 1.2rem; font-weight: 600; color: var(--rv-dark); }
.rv-story__quote {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--rv-green-dark);
  line-height: 1.4;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rv-border);
  max-width: 62ch;
}

.rv-howto-card {
  background: #fff;
  border: 1px solid var(--rv-border);
  border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(20, 24, 28, 0.05);
}
.rv-howto-card__icon {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--rv-cream); color: var(--rv-green-dark);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}

/* Lien d'évitement rendu visible au focus clavier. */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 1080;
}

/* Carte événement : zone visuelle à hauteur homogène. */
.event-card__media { height: 160px; overflow: hidden; }
.event-card__image { height: 100%; width: 100%; object-fit: cover; }

/* --------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------- */
.rv-navbar {
  background:
    radial-gradient(16rem 16rem at 90% -20%, rgba(126,216,160,0.16), rgba(126,216,160,0) 70%),
    linear-gradient(160deg, #24312a 0%, #151d18 100%);
}
.rv-navbar .navbar-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.rv-navbar .rv-tagline { display: flex; flex-direction: column; line-height: 1.2; margin-left: 0.1rem; }
.rv-tagline__line1 { font-size: 0.75rem; color: #b7bdb4; font-weight: 400; }
.rv-tagline__line2 { font-size: 0.95rem; color: var(--rv-green-light); font-weight: 700; }
.rv-navbar .nav-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: #d7dad3;
}
.rv-navbar .nav-link.active {
  color: #fff;
  border-bottom: 2px solid var(--rv-green-light);
}
.rv-navbar .nav-link:hover { color: #fff; }
.rv-navbar .dropdown-menu { min-width: 14rem; }
.rv-navbar__menu {
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 0.75rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.09);
  margin-top: 0.9rem; padding-top: 0.9rem;
}
.rv-navbar__menu .navbar-nav { width: auto; }

.rv-home-pitch { font-size: 1.25rem; font-weight: 500; line-height: 1.4; color: var(--rv-dark); margin: 0 0 1rem; }
.rv-home-pitch__hl { color: var(--rv-green-dark); font-weight: 600; }

/* --------------------------------------------------------------------
   Recherche héro (accueil)
   -------------------------------------------------------------------- */
.rv-hero-search {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfa 100%);
  border: 1px solid var(--rv-border);
  border-radius: 1.25rem;
  box-shadow: 0 1rem 2.5rem rgba(20, 24, 28, 0.07);
  overflow: hidden;
}
.rv-hero-search__icon {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--rv-green);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  flex: none;
}
.rv-hero-search__deco { position: absolute; top: 0; right: 0; opacity: 0.6; pointer-events: none; }

.rv-mission-text { max-width: 62ch; font-size: 1.05rem; color: #4d514a; }
.rv-hero-search .btn { white-space: nowrap; }

/* --------------------------------------------------------------------
   Grille d'événements (accueil)
   -------------------------------------------------------------------- */
.rv-event-card { position: relative; border: 1px solid var(--rv-border); }
.rv-event-card .event-card__media { height: 170px; position: relative; }
.rv-event-card__favorite {
  position: absolute; top: 0.6rem; right: 0.6rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); border: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--rv-dark);
}
.rv-event-card__meta { display: flex; align-items: center; gap: 0.4rem; color: #6b6f66; font-size: 0.9rem; }
.rv-event-card__arrow {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--rv-border); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--rv-green);
}
.rv-event-card__arrow:hover { background: var(--rv-cream); }

/* Cartes portrait de la grille d'événements (accueil). */
.rv-event-card-portrait {
  border: 1px solid var(--rv-border);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.rv-event-card-portrait:hover {
  box-shadow: 0 0.5rem 1.25rem rgba(20, 24, 28, 0.08);
  transform: translateY(-2px);
}
.rv-event-card-portrait__media { aspect-ratio: 3 / 4; overflow: hidden; }
.rv-event-card-portrait__image { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Mention « Recherche des bénévoles » (grille accueil et grandes cartes). */
.rv-event-volunteers {
  display: flex; align-items: center; gap: 0.35rem;
  min-height: 1.25rem;
  font-size: 0.8rem; font-weight: 600; color: var(--rv-green-dark);
}

/* Grandes cartes empilées de la page « Événements » (recherche) — cartes
   autonomes (aucun renvoi vers une autre page) ; seul le visuel s'agrandit,
   sur place, dans une fenêtre modale. */
.rv-event-card-large {
  display: flex; flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--rv-border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(20, 24, 28, 0.05);
  scroll-margin-top: 1rem;
}
.rv-event-card-large__media-col { flex: none; width: 300px; background: var(--rv-cream); position: relative; }
.rv-event-card-large__main { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; }
.rv-event-card-large__bar {
  background: linear-gradient(160deg, #24312a 0%, #151d18 100%);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.6rem 0.9rem;
}
.rv-event-card-large__bar-right { display: flex; gap: 0.5rem; }
.rv-event-card-large__content { padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: 0.6rem; }
.rv-event-card-large__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }

/* Visuel au format A4 portrait (proportionnel quelle que soit l'image). */
.rv-event-media-a4 { aspect-ratio: 210 / 297; width: 100%; height: auto; }
.rv-event-detail__media {
  max-width: 320px;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--rv-cream);
}
.rv-event-detail__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rv-event-card-large__media {
  position: relative; display: block;
  border: none; padding: 0; margin: 0;
  overflow: hidden;
  background: var(--rv-cream);
  cursor: zoom-in;
}
.rv-event-card-large__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-event-card-large__media--empty {
  display: flex; align-items: center; justify-content: center; cursor: default;
}
.rv-event-card-large__zoom {
  position: absolute; left: 0.75rem; bottom: 0.75rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(20, 24, 28, 0.75); color: #fff;
  font-size: 0.8rem; font-weight: 600;
  padding: 0.4rem 0.75rem; border-radius: 999px;
}

.rv-event-card-large__description { color: #4d514a; font-size: 0.95rem; margin-bottom: 1.25rem; }

/* Actions communes (enregistrer / partager / responsable des bénévoles). */
.rv-event-actions .btn { white-space: nowrap; }
.rv-responsible-panel__body {
  margin-top: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--rv-cream);
  border-radius: 0.75rem;
  font-size: 0.9rem;
}

/* Sur fond clair (fiche détail), les actions restent lisibles malgré
   btn-outline-light (pensé pour le bandeau sombre de la carte Événements). */
.card .rv-event-actions .btn-outline-light {
  --bs-btn-color: var(--rv-dark);
  --bs-btn-border-color: var(--rv-border);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--rv-dark);
  --bs-btn-hover-border-color: var(--rv-dark);
}

/* CTA « Recherche bénévoles » — couleur de marque dédiée (orange clair). */
.btn-rv-volunteer { background: var(--rv-orange); border: 1px solid var(--rv-orange); color: var(--rv-orange-text); font-weight: 600; }
.btn-rv-volunteer:hover { background: var(--rv-orange-dark); border-color: var(--rv-orange-dark); color: var(--rv-orange-text); }

/* Mise en valeur « Recherche bénévoles » : halo orange pulsé (rétabli). */
@keyframes rv-vol-pulse {
  0%   { box-shadow: 0 0 6px 1px rgba(247, 192, 103, 0.6), 0 0 0 0 rgba(247, 192, 103, 0.55); }
  70%  { box-shadow: 0 0 10px 2px rgba(247, 192, 103, 0.7), 0 0 0 10px rgba(247, 192, 103, 0); }
  100% { box-shadow: 0 0 6px 1px rgba(247, 192, 103, 0.6), 0 0 0 0 rgba(247, 192, 103, 0); }
}
.btn-rv-volunteer { position: relative; animation: rv-vol-pulse 2s ease-out infinite; }
.btn-rv-volunteer:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .btn-rv-volunteer { animation: none; box-shadow: 0 0 8px 1px rgba(247, 192, 103, 0.6); }
}

.rv-event-info-row { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.4rem 0; border-bottom: none; }
.rv-event-info-row__icon {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none;
  background: var(--rv-green); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.rv-event-info-row__label { font-size: 0.8rem; font-weight: 700; color: var(--rv-dark); }
.rv-event-info-row__value { font-size: 0.95rem; color: #4d514a; }
.rv-event-info-row__value a { font-weight: 600; }
.rv-struck { color: #9a9a9a; text-decoration: line-through; }
.rv-event-card-large__title,
.rv-event-card-large__description,
.rv-event-info-row__value { overflow-wrap: anywhere; }

.rv-cancel-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(120,120,120,0.18);
}
.rv-cancel-stamp {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  pointer-events: none; white-space: nowrap;
  border: 7px solid rgba(192,57,43,0.6);
  color: rgba(192,57,43,0.66);
  font-size: clamp(2.6rem, 7vw, 3.8rem); font-weight: 800; letter-spacing: 4px;
  padding: 0.45rem 1.4rem; border-radius: 10px;
  box-shadow: inset 0 0 0 3px rgba(192,57,43,0.22);
}

.rv-event-contact-bar {
  display: flex; flex-wrap: wrap; gap: 1rem;
  border-top: 1px solid var(--rv-border);
  padding-top: 0.75rem; margin-top: 0.25rem;
}
.rv-event-contact-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0; border: none;
  color: var(--rv-dark); font-weight: 500; text-decoration: none;
  flex: 0 0 auto;
}
.rv-event-contact-item:hover { background: transparent; color: var(--rv-green-dark); }
.rv-event-contact-item__icon { width: auto; height: auto; background: transparent; color: var(--rv-green-dark); }
.rv-event-contact-item__label { font-weight: 700; color: var(--rv-dark); font-size: 0.9rem; }
.rv-phone-code {
  display: inline-block;
  padding: 0 .4rem;
  border-radius: .4rem;
  border: 1px solid var(--rv-border);
  background: #f2f4f0;
  color: var(--rv-dark);
  font-weight: 600;
  font-size: .85em;
}

@media (max-width: 767px) {
  .rv-event-card-large__media-col { width: 100%; }
  .rv-event-media-a4 { aspect-ratio: auto; height: 220px; }
}

/* --------------------------------------------------------------------
   Bandeau CTA « Vous organisez un événement ? »
   -------------------------------------------------------------------- */
.rv-cta-band {
  background: #fff;
  border: 2px dashed var(--rv-green);
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
}
.rv-cta-band__icon {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--rv-green);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
.rv-footer {
  color: #b7bdb4;
  font-size: 0.78rem;
  background:
    radial-gradient(18rem 18rem at 8% 120%, rgba(49,191,98,0.18), rgba(49,191,98,0) 70%),
    linear-gradient(160deg, #24312a 0%, #151d18 100%);
}
.rv-footer a { color: #d7dad3; text-decoration: none; }
.rv-footer a:hover { color: #fff; text-decoration: underline; }
.rv-footer h2 { color: #fff; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem; }
.rv-footer .rv-tagline { display: flex; flex-direction: column; line-height: 1.2; }
.rv-footer .rv-tagline__line1 { color: #8b9086; font-size: 0.7rem; }
.rv-footer .rv-tagline__line2 { color: var(--rv-green-light); font-size: 0.78rem; font-weight: 700; }
.rv-footer__nav li { margin-bottom: 0.15rem; }
.rv-footer > .container { position: relative; z-index: 1; }

/* --------------------------------------------------------------------
   Parcours d'authentification (connexion, inscription, mot de passe, 2FA)
   -------------------------------------------------------------------- */
.rv-auth { display: flex; justify-content: center; padding: 1rem 0 2rem; }
.rv-auth__card {
  width: 100%; max-width: 30rem;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfa 100%);
  border: 1px solid var(--rv-border);
  border-top: 4px solid var(--rv-green);
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgba(20, 24, 28, 0.06);
  padding: 2rem;
}
.rv-auth__card--wide { max-width: 44rem; }
.rv-auth__icon {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--rv-cream); color: var(--rv-green-dark);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.rv-auth__title { font-size: 1.5rem; font-weight: 700; color: var(--rv-dark); margin: 0 0 0.5rem; text-align: center; }
.rv-auth__intro { color: #4d514a; font-size: 0.95rem; text-align: center; }
.rv-auth__footer {
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px solid var(--rv-border);
  font-size: 0.9rem; text-align: center;
}
.rv-auth__footer p { margin-bottom: 0.35rem; }

/* MC-001 : bloc affiche plus large, fond sombre, image centrée verticalement */
.rv-event-card-large__media-col {
  width: 360px;
  background: linear-gradient(160deg, #24312a 0%, #151d18 100%);  /* même dégradé que le bandeau */
  display: flex; align-items: center; justify-content: center;
}
.rv-event-card-large__media { background: transparent; }
.rv-event-card-large__media--empty { color: #b7bdb4; }
@media (max-width: 767px) { .rv-event-card-large__media-col { width: 100%; } }

/* Nombre de bénévoles recherchés : pastille contrastée dans le bouton
   « Recherche bénévoles » (fond orange), pour rester immédiatement
   repérable sans flèche ni animation. */
.rv-vol-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem;
  margin-left: 0.4rem; padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--rv-orange-text); color: #fff;
  font-weight: 700; font-size: 0.8rem; line-height: 1;
}

.rv-dept-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
}
.rv-dept-cell {
  padding: .4rem .6rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .5rem;
  background: #fff;
}
.rv-dept-cell--has {
  border-color: var(--rv-green);
  background: rgba(49, 191, 98, .06);
}
@media (max-width: 575.98px) {
  .rv-dept-grid { grid-template-columns: repeat(2, 1fr); }
}

.rv-map-link {
  position: relative; z-index: 2; /* reste cliquable au-dessus d'un stretched-link */
  color: inherit;
  text-decoration: none;
}
.rv-map-link:hover,
.rv-map-link:focus {
  color: var(--rv-green);
  text-decoration: underline;
}

.rv-heart-btn { line-height: 1; padding: .35rem .55rem; }
.rv-heart-btn .rv-icon { display: block; width: 24px; height: 24px; }
/* Cœur plein + rouge quand l'événement est déjà en favori. */
.rv-heart-on { color: #e0245e; border-color: #e0245e; }
.rv-heart-on .rv-icon { fill: currentColor; stroke: currentColor; }
.rv-heart-btn:hover .rv-icon { fill: currentColor; }