/* ==========================================================================
   SECTIONS STYLES
   ========================================================================== */

/* ==========================================================================
   1. NAVIGATION & HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 100;
  background: rgba(11, 15, 20, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--border-subtle);
  transition: background var(--transition-normal), border-color var(--transition-normal);
}

.site-header .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--color-text-primary);
  text-decoration: none;
}

.brand-icon {
  width: 32px;
  height: 32px;
  color: var(--color-accent-cyan);
}

.brand-text span {
  color: var(--color-accent-cyan);
}

.nav-menu {
  display: none;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}

.nav-link {
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  position: relative;
  padding-block: 0.25rem;
  transition: color var(--transition-fast);
}

.nav-link:hover, .nav-link.active {
  color: var(--color-accent-cyan);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent-cyan);
  transition: width var(--transition-fast);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Burger Toggle */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text-primary);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.menu-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Drawer */
.mobile-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: 100%;
  background: rgba(18, 24, 32, 0.98);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transform: translateY(-120%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--transition-normal), opacity var(--transition-normal), visibility var(--transition-normal);
  z-index: 99;
}

.mobile-nav.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.mobile-nav .nav-list {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  width: 100%;
}

.mobile-nav .nav-link {
  font-size: 1.1rem;
  display: block;
  width: 100%;
}

@media (min-width: 992px) {
  .nav-menu {
    display: block;
  }
  .menu-toggle {
    display: none;
  }
  .mobile-nav {
    display: none;
  }
}

/* ==========================================================================
   2. HERO SECTION
   ========================================================================== */
.hero-section {
  padding-top: 2.5rem;
  padding-bottom: 4.5rem;
  position: relative;
  overflow: hidden;
}

@media (min-width: 992px) {
  .hero-section {
    padding-top: 4.5rem;
    padding-bottom: 6.5rem;
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 992px) {
  .hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3.5rem;
  }
}

.hero-badge-container {
  margin-bottom: 1.25rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 188, 212, 0.12);
  border: 1px solid rgba(0, 188, 212, 0.3);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent-cyan);
}

.hero-badge svg {
  width: 18px;
  height: 18px;
}

.hero-title {
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
  color: var(--color-text-primary);
}

.hero-title .highlight {
  background: var(--color-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 3.15rem;
  }
}

@media (min-width: 1200px) {
  .hero-title {
    font-size: 3.65rem;
  }
}

.hero-subtitle {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
  max-width: 580px;
}

@media (min-width: 768px) {
  .hero-subtitle {
    font-size: 1.18rem;
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.hero-key-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: var(--border-subtle);
}

@media (min-width: 576px) {
  .hero-key-facts {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fact-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fact-number {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-accent-cyan);
}

.fact-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* ── Carte blason ───────────────────────────────────────────────────────────
   Cadre premium : fond sombre profond, liseré dégradé, lueur cyan subtile.
   ────────────────────────────────────────────────────────────────────────── */
.flyer-preview-card {
  position: relative;
  /* fond en deux couches : lueur centrale + dégradé de surface */
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(0, 188, 212, 0.07) 0%, transparent 70%),
    linear-gradient(160deg, #1a2535 0%, #0d1520 100%);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  /* liseré dégradé cyan → teal */
  border: 1.5px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 1.5px rgba(0, 188, 212, 0.35),   /* liseré lumineux */
    0 20px 48px rgba(0, 0, 0, 0.55),        /* ombre portée profonde */
    0 0 32px rgba(0, 188, 212, 0.12);       /* halo ambiant */
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease;
  text-align: center;
  margin-inline: auto;
  width: 100%;
}

/* Trait décoratif en haut — dégradé cyan → teal, 3 px */
.flyer-preview-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #00bcd4 0%, #0d9488 100%);
  border-radius: 20px 20px 0 0;
  z-index: 2;
}

.flyer-preview-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1.5px rgba(0, 188, 212, 0.55),
    0 28px 60px rgba(0, 0, 0, 0.6),
    0 0 48px rgba(0, 188, 212, 0.2);
}

/* ── Zone image ─────────────────────────────────────────────────────────── */
.flyer-visual {
  background: transparent;
  border-radius: 0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 1.5rem 1.5rem 0.75rem;
}

.flyer-visual.blason-visual {
  aspect-ratio: unset;
  padding: 1.5rem 1.5rem 0.5rem;
}

/* Blason : ombre portée pour le faire « flotter » sur le fond */
.blason-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55))
          drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* ── Animation d'entrée — une seule fois ───────────────────────────────── */
@keyframes blasonEntrance {
  0%   { opacity: 0; transform: translateY(28px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

.blason-img {
  animation: blasonEntrance 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .blason-img { animation: none; }
}

.flyer-placeholder-icon {
  width: 64px;
  height: 64px;
  color: var(--color-accent-cyan);
  margin-bottom: 1rem;
  filter: drop-shadow(0 4px 12px rgba(0, 188, 212, 0.4));
}

.flyer-placeholder-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.flyer-placeholder-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  max-width: 240px;
  margin-bottom: 1.25rem;
}

/* ── Légende ────────────────────────────────────────────────────────────── */
.flyer-caption {
  padding: 0.65rem 1.25rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: 0.25rem;
}

/* ==========================================================================
   3. PROGRAMME SECTION (RUBRIQUE 1)
   ========================================================================== */
.programme-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;        /* plus serré sur mobile */
}

@media (min-width: 640px) {
  .programme-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 992px) {
  .programme-grid {
    gap: 1.75rem;
  }
}

/* Carte pleine largeur (occupe toute la ligne de la grille) */
.stand-card--wide {
  grid-column: 1 / -1;
}

.stand-card {
  background: var(--color-bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  position: relative;
  overflow: hidden;
  isolation: isolate; /* crée un contexte d'empilement pour les pseudo-éléments */
}

/* ── Trait de couleur en haut — toujours visible ─────────────────────── */
.stand-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--color-accent-gradient);
  opacity: 1;          /* toujours visible — pas besoin du hover sur mobile */
  transition: opacity var(--transition-normal);
  z-index: 1;
}

/* ── Illustration décorative en arrière-plan ─────────────────────────── */
.stand-card::after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 160px;
  height: 160px;
  opacity: 0.12;       /* lisible sans hover */
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  transition: opacity 0.4s ease, transform 0.6s ease;
}

/* Contenu au-dessus de l'illustration */
.stand-card > * {
  position: relative;
  z-index: 1;
}

/* Hover desktop : surbrillance supplémentaire */
@media (hover: hover) {
  .stand-card:hover::after {
    opacity: 0.2;
    transform: scale(1.06) rotate(-3deg);
  }

  .stand-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 188, 212, 0.4);
    box-shadow: var(--shadow-md), var(--shadow-glow-cyan);
  }

  .stand-card.highlight-card:hover {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: var(--shadow-md), var(--shadow-glow-orange);
  }
}

/* Feedback tactile sur mobile (active) */
.stand-card:active {
  transform: scale(0.985);
  transition: transform 0.12s ease;
}

.stand-card.highlight-card::before {
  background: var(--color-gold-gradient);
}

/* ══════════════════════════════════════════════════════════════════════
   ILLUSTRATIONS PAR STAND — SVG encodé en data-uri
   Couleurs vives, opacité gérée par ::after opacity
   ══════════════════════════════════════════════════════════════════════ */

/* Stand 1 — Santé Mentale : tête humaine + onde cérébrale (cyan vif) */
.stand-card--mental::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='72' r='52' fill='none' stroke='%2300e5ff' stroke-width='5'/%3E%3Cellipse cx='100' cy='130' rx='36' ry='18' fill='none' stroke='%2300e5ff' stroke-width='4'/%3E%3Crect x='88' y='148' width='24' height='18' rx='4' fill='none' stroke='%2300e5ff' stroke-width='3.5'/%3E%3Cpath d='M60 72 Q72 52 84 72 Q96 92 108 72 Q120 52 132 72 Q144 92 156 72' fill='none' stroke='%2300e5ff' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
  width: 180px;
  height: 180px;
  animation: standIlluPulse 4s ease-in-out infinite;
}

/* Stand 2 — Prévention Cancer : cœur + croix médicale (orange vif) */
.stand-card--cancer::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 168 L30 100 Q10 78 30 58 Q50 38 72 52 Q86 60 100 76 Q114 60 130 52 Q152 38 172 58 Q192 78 170 100 Z' fill='none' stroke='%23ff6d00' stroke-width='5' stroke-linejoin='round'/%3E%3Crect x='91' y='84' width='18' height='52' rx='4' fill='%23ff6d00' opacity='0.6'/%3E%3Crect x='74' y='101' width='52' height='18' rx='4' fill='%23ff6d00' opacity='0.6'/%3E%3C/svg%3E");
  width: 190px;
  height: 190px;
  animation: standIlluPulse 3.6s ease-in-out infinite 0.4s;
}

/* Stand 3 — Maquillage : moustache stylisée (magenta vif) */
.stand-card--maquillage::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M20 100 Q40 60 70 80 Q85 90 100 80 Q115 70 130 80 Q160 60 180 100 Q160 120 140 108 Q120 96 100 108 Q80 120 60 108 Q40 120 20 100 Z' fill='none' stroke='%23e040fb' stroke-width='5' stroke-linejoin='round'/%3E%3Ccircle cx='100' cy='60' r='10' fill='none' stroke='%23e040fb' stroke-width='3.5'/%3E%3Cpath d='M82 140 Q100 150 118 140' fill='none' stroke='%23e040fb' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
  width: 200px;
  height: 200px;
  animation: standIlluSpin 8s linear infinite;
}

/* Stand 4 — Gym / Marche : silhouette qui saute (bras levés, jambes écartées) + ondes sol (vert vif) */
.stand-card--gym::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='30' r='16' fill='none' stroke='%2376ff03' stroke-width='5'/%3E%3Cline x1='100' y1='46' x2='100' y2='102' stroke='%2376ff03' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M100 66 L66 44' stroke='%2376ff03' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M100 66 L134 44' stroke='%2376ff03' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M100 102 L72 148' stroke='%2376ff03' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M100 102 L128 148' stroke='%2376ff03' stroke-width='5' stroke-linecap='round'/%3E%3Cellipse cx='100' cy='168' rx='44' ry='8' fill='none' stroke='%2376ff03' stroke-width='3' opacity='0.5'/%3E%3Cellipse cx='100' cy='176' rx='28' ry='5' fill='none' stroke='%2376ff03' stroke-width='2' opacity='0.3'/%3E%3C/svg%3E");
  width: 180px;
  height: 180px;
  animation: standIlluBounce 2.8s ease-in-out infinite;
}

/* ── Animations des illustrations ────────────────────────────────────── */

/* Respiration lente */
@keyframes standIlluPulse {
  0%, 100% { transform: scale(1)    rotate(0deg); }
  50%       { transform: scale(1.05) rotate(2deg); }
}

/* Légère rotation continue */
@keyframes standIlluSpin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Rebond vertical */
@keyframes standIlluBounce {
  0%, 100% { transform: translateY(0);   }
  45%      { transform: translateY(-8px); }
}

/* Sur mobile, ralentir les animations pour économiser la batterie */
@media (max-width: 768px) {
  .stand-card--mental::after    { animation-duration: 6s; }
  .stand-card--cancer::after    { animation-duration: 5.5s; }
  .stand-card--maquillage::after { animation-duration: 12s; }
  .stand-card--gym::after       { animation-duration: 4s; }
}

@media (prefers-reduced-motion: reduce) {
  .stand-card::after { animation: none !important; }
}

.stand-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.stand-icon-box {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(0, 188, 212, 0.12);
  color: var(--color-accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(0, 188, 212, 0.25);
}

.stand-icon-box.gold {
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-accent-orange);
  border-color: rgba(245, 158, 11, 0.25);
}

.stand-icon-box svg {
  width: 28px;
  height: 28px;
}

.stand-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stand-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.stand-partner {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent-cyan);
}

.stand-description {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.stand-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.stand-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.stand-features li svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent-cyan);
  flex-shrink: 0;
}

.stand-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: var(--border-subtle);
  font-size: 0.825rem;
  color: var(--color-text-muted);
}

.stand-badge-info {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ==========================================================================
   4. CONCOURS SECTION (RUBRIQUE 2)
   ========================================================================== */
/* Une seule colonne sur tous les écrans : formulaire d'upload en haut,
   galerie des participants toujours en dessous. */
.contest-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

/* Sur grand écran, le formulaire reste compact et centré au-dessus de la galerie */
.contest-upload-card {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

/* Formulaire de dépôt */
.contest-upload-card {
  background: var(--color-bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem;
  height: fit-content;
  box-shadow: var(--shadow-md);
  position: relative;
}

.contest-upload-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--color-accent-gradient);
}

.upload-card-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.upload-card-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 576px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0.4rem;
}

.form-input, .form-select {
  width: 100%;
  background: var(--color-bg-input);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.925rem;
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus, .form-select:focus {
  border-color: var(--color-accent-cyan);
  box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.2);
}

.form-select option {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
}

/* Dropzone de fichier */
.dropzone {
  border: 2px dashed rgba(0, 188, 212, 0.35);
  background: rgba(0, 188, 212, 0.03);
  border-radius: var(--radius-md);
  padding: 1.75rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.dropzone:hover, .dropzone.drag-active {
  border-color: var(--color-accent-cyan);
  background: rgba(0, 188, 212, 0.08);
}

.dropzone-icon {
  width: 40px;
  height: 40px;
  color: var(--color-accent-cyan);
}

.dropzone-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.dropzone-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.file-input-hidden {
  display: none;
}

.preview-container {
  display: none;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(0, 188, 212, 0.3);
}

.preview-container img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.btn-remove-preview {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background var(--transition-fast);
}

.btn-remove-preview:hover {
  background: #e11d48;
}

/* Galerie des participants */
.contest-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.gallery-title-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.contest-gallery-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-text-primary);
}

.contest-gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .contest-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .contest-gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.contest-card {
  background: var(--color-bg-card);
  border: var(--border-subtle);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  position: relative;
}

.contest-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 188, 212, 0.35);
  box-shadow: var(--shadow-md);
}

.contest-card.leader-card {
  border-color: rgba(245, 158, 11, 0.45);
}

.leader-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-gold-gradient);
  color: #0b0f14;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  z-index: 2;
  box-shadow: var(--shadow-sm);
}

/* Cadre photo de taille fixe : toutes les cartes ont exactement les mêmes dimensions */
.contest-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #0e141b;
}

/* contain = photo entière, sans recadrage ni zoom ; bandes sombres si le format diffère */
.contest-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.contest-category-tag {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(11, 15, 20, 0.85);
  backdrop-filter: blur(6px);
  color: var(--color-text-secondary);
  font-size: 0.725rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* En-tête de carte : avatar + pseudo */
.contest-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--color-bg-card);
}

.contest-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-gradient);
  color: #0b0f14;
  font-weight: 800;
  font-size: 1rem;
}

/* Pied de carte : bouton de vote + compteur */
.contest-card-footer {
  padding: 0.85rem 1rem 1rem;
  background: var(--color-bg-card);
  border-top: var(--border-subtle);
}

.contest-card-actions {
  display: flex;
}

.contest-participant-info {
  overflow: hidden;
  min-width: 0;
}

.contest-participant-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.contest-participant-team, .contest-participant-tag {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}

.btn-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-full);
  background: rgba(0, 188, 212, 0.1);
  color: var(--color-accent-cyan);
  border: 1px solid rgba(0, 188, 212, 0.3);
  font-size: 0.825rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.btn-vote svg {
  width: 18px;
  height: 18px;
}

.btn-vote:active {
  transform: scale(0.96);
}

.btn-vote:hover {
  background: var(--color-accent-cyan);
  color: #0b0f14;
  transform: scale(1.05);
}

.btn-vote.voted {
  background: rgba(0, 188, 212, 0.22);
  color: var(--color-accent-cyan);
  border-color: var(--color-accent-cyan);
  box-shadow: 0 0 12px rgba(0, 188, 212, 0.25);
  cursor: pointer;
}

.btn-vote.voted:hover {
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
  transform: scale(1.03);
}

.vote-count {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
}

/* ==========================================================================
   5. FAIRE UN DON (RUBRIQUE 3)
   ========================================================================== */
.donation-banner {
  background: radial-gradient(circle at 100% 0%, rgba(245, 158, 11, 0.12), transparent 50%),
              radial-gradient(circle at 0% 100%, rgba(0, 188, 212, 0.1), transparent 50%),
              var(--color-bg-card);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.5rem;
  box-shadow: var(--shadow-lg), var(--shadow-glow-orange);
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .donation-banner {
    padding: 3.5rem 3rem;
  }
}

.donation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 992px) {
  .donation-grid {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3.5rem;
  }
}

.donation-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.25;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .donation-title {
    font-size: 2.3rem;
  }
}

.donation-desc {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

.donation-causes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 576px) {
  .donation-causes {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cause-item {
  background: rgba(255, 255, 255, 0.04);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
}

.cause-icon {
  width: 28px;
  height: 28px;
  color: var(--color-accent-orange);
  margin-inline: auto;
  margin-bottom: 0.5rem;
}

.cause-label {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

/* Encadré d'action de don */
.donation-action-box {
  background: #111720;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.fdf-logo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 1.25rem;
}

.tax-deduction-note {
  font-size: 0.775rem;
  color: var(--color-text-dimmed);
  margin-top: 1rem;
  line-height: 1.4;
}

/* ==========================================================================
   6. FOOTER
   ========================================================================== */
.site-footer {
  background: #080c10;
  border-top: var(--border-subtle);
  padding-block: 3.5rem 2rem;
  margin-top: 3rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 3rem;
  }
}

.footer-brand-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.85rem;
  line-height: 1.6;
  max-width: 320px;
}

.footer-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-links a {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-accent-cyan);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.8rem;
  color: var(--color-text-dimmed);
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
  }
}

/* ==========================================================================
   7. RESPONSIVE MOBILE
   ========================================================================== */

/* Garde-fou contre le défilement horizontal (body a déjà overflow-x: hidden ;
   ne pas le poser aussi sur html, cela casserait le header sticky) */
body {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* --- Tablette & mobile (<= 992px) : le slot auth du header passe dans le tiroir --- */
@media (max-width: 991px) {
  #authNavSlot {
    display: none;
  }

  .mobile-nav {
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }

  .mobile-nav .nav-link {
    padding-block: 0.65rem;
  }

  /* Auth dans le tiroir : boutons empilés, pleine largeur */
  #authNavSlotMobile .btn-auth {
    width: 100%;
    min-height: 48px;
  }

  #authNavSlotMobile .auth-user-chip {
    width: 100%;
    justify-content: space-between;
    min-height: 48px;
  }

  #authNavSlotMobile .auth-username {
    max-width: none;
    flex: 1;
  }

  .mobile-nav > .btn {
    width: 100%;
  }
}

/* --- Mobile (<= 768px) --- */
@media (max-width: 768px) {
  :root {
    --header-height: 64px;
  }

  .section {
    padding-block: 3rem;
  }

  .section-header {
    margin-bottom: 2rem;
  }

  .section-title {
    font-size: 1.65rem;
  }

  .section-subtitle {
    font-size: 0.95rem;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .contest-upload-card {
    padding: 1.5rem 1.15rem;
  }

  .form-input,
  .form-select {
    min-height: 48px;
    font-size: 1rem; /* évite le zoom automatique d'iOS au focus */
  }

  .dropzone {
    min-height: 120px;
  }

  .contest-gallery-header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .contest-gallery-title,
  .upload-card-title {
    font-size: 1.2rem;
  }

  /* Bouton de vote : zone tactile >= 44px */
  .btn-vote {
    min-height: 44px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  .donation-banner {
    padding: 2rem 1.15rem;
  }

  .donation-title {
    font-size: 1.6rem;
  }

  .donation-action-box {
    padding: 1.5rem 1.15rem;
  }

  .site-footer {
    padding-block: 2.5rem 1.5rem;
  }

  .footer-bottom {
    text-align: center;
  }
}

/* --- Galerie : 2 colonnes compactes sous 768px, image entière (sans recadrage) --- */
@media (max-width: 767px) {
  .contest-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
  }

  /* En-tête compact : avatar réduit, pseudo seul */
  .contest-gallery-grid .contest-card-header {
    padding: 0.5rem 0.6rem;
    gap: 0.5rem;
  }

  .contest-gallery-grid .contest-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }

  .contest-gallery-grid .contest-participant-name {
    font-size: 0.85rem;
  }

  .contest-gallery-grid .contest-participant-tag {
    display: none;
  }

  /* Pied compact : bouton de vote ajusté à la demi-largeur (zone tactile >= 44px) */
  .contest-gallery-grid .contest-card-footer {
    padding: 0.5rem;
  }

  .contest-gallery-grid .contest-card-footer .btn-vote {
    min-height: 44px;
    padding: 0.4rem 0.5rem;
    gap: 0.3rem;
    font-size: 0.8rem;
  }

  .contest-gallery-grid .btn-vote svg {
    width: 16px;
    height: 16px;
  }

  .contest-gallery-grid .leader-badge {
    top: 6px;
    left: 6px;
    font-size: 0.6rem;
    padding: 0.2rem 0.45rem;
  }

  .contest-card-footer .btn-vote {
    width: 100%;
  }
}

/* --- Petit mobile (<= 480px) --- */
@media (max-width: 480px) {
  .section {
    padding-block: 2.5rem;
  }

  .section-title {
    font-size: 1.45rem;
  }

  .hero-title {
    font-size: 1.75rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .brand {
    font-size: 1rem;
    gap: 0.5rem;
    min-width: 0;
  }

  .brand-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  .nav-actions {
    gap: 0.5rem;
  }

  /* Le bouton "Je donne" reste accessible dans le tiroir */
  .nav-actions > .btn-cta {
    display: none;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .contest-upload-card {
    padding: 1.25rem 1rem;
  }

  .contest-card-header {
    padding: 0.75rem 0.85rem;
  }

  .contest-card-footer {
    padding: 0.75rem 0.85rem 0.85rem;
  }

  .stand-card {
    padding: 1.25rem;
  }

  .stand-header {
    gap: 0.85rem;
  }

  .stand-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .donation-title {
    font-size: 1.4rem;
  }

  .fact-number {
    font-size: 1.1rem;
  }
}

/* ==========================================================================
   8. UI MOBILE-FIRST "APP" — header flouté, zones tactiles 48px, animations
   ========================================================================== */

/* Header & tiroir de navigation : effet verre dépoli façon iOS */
.site-header,
.mobile-nav {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
  /* Header compact : padding latéral réduit */
  .site-header .container {
    padding-inline: 1rem;
  }

  /* Boutons d'action principaux : 48px minimum pour le pouce */
  .btn:not(.btn-sm),
  .btn-primary,
  .btn-cta,
  .btn-auth,
  .auth-submit-btn,
  .login-submit-btn,
  .btn-vote {
    min-height: 48px;
  }
}

/* Cœur de vote : rebond (Animate.css) plus rapide et sans décalage de la mise en page */
.btn-vote .heart-icon {
  transform-origin: center;
  --animate-duration: 0.6s;
}

/* Respecte le réglage "réduire les animations" du système */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .animate__animated {
    animation: none !important;
  }
}
/* ==========================================================================
   9. CARTES DE LA GALERIE — animation de couleur au survol + vue agrandie
   ========================================================================== */

.contest-card {
  cursor: pointer;
}

.contest-card:focus-visible {
  outline: 2px solid var(--color-accent-cyan);
  outline-offset: 2px;
}

/* Survol : la bordure et la lueur passent en douceur du cyan à l'orange */
@keyframes cardColorShift {
  0%, 100% {
    border-color: rgba(0, 188, 212, 0.65);
    box-shadow: 0 6px 24px rgba(0, 188, 212, 0.28);
  }
  50% {
    border-color: rgba(245, 158, 11, 0.7);
    box-shadow: 0 6px 24px rgba(245, 158, 11, 0.28);
  }
}

.contest-card:hover {
  animation: cardColorShift 2.4s ease-in-out infinite;
}

.contest-card:hover .contest-card-header,
.contest-card:hover .contest-card-footer {
  background: var(--color-bg-card-hover);
}

.contest-card-header,
.contest-card-footer {
  transition: background var(--transition-normal);
}

/* Vue agrandie d'une carte */
.card-lightbox {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5, 8, 12, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.card-lightbox-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  max-height: 100%;
  background: var(--color-bg-card);
  border: 1px solid rgba(0, 188, 212, 0.45);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), var(--shadow-glow-cyan);
  overflow: hidden;
}

/* Photo entière, sans recadrage ni zoom, dans la limite de l'écran */
.card-lightbox-img {
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  background: #0e141b;
}

.card-lightbox-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem 0.35rem;
}

.card-lightbox-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-lightbox-votes {
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-accent-cyan);
}

.card-lightbox-hint {
  padding: 0 1.1rem 0.9rem;
  font-size: 0.775rem;
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .contest-card:hover {
    animation: none;
  }
}
/* ==========================================================================
   10. GALERIE SUR ORDINATEUR — cartes compactes, 4 photos par ligne (>= 992px)
   ========================================================================== */
@media (min-width: 768px) {
  .contest-gallery-grid {
    gap: 1rem;
    align-items: start;
  }

  /* En-tête et pied compacts */
  .contest-gallery-grid .contest-card-header {
    padding: 0.6rem 0.75rem;
    gap: 0.6rem;
  }

  .contest-gallery-grid .contest-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }

  .contest-gallery-grid .contest-participant-name {
    font-size: 0.9rem;
  }

  .contest-gallery-grid .contest-participant-tag {
    font-size: 0.7rem;
  }

  .contest-gallery-grid .contest-card-footer {
    padding: 0.6rem 0.75rem 0.75rem;
  }

  .contest-gallery-grid .contest-card-footer .btn-vote {
    width: 100%;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }

  .contest-gallery-grid .btn-vote svg {
    width: 16px;
    height: 16px;
  }

  .contest-gallery-grid .leader-badge {
    top: 8px;
    left: 8px;
    font-size: 0.62rem;
    padding: 0.2rem 0.5rem;
  }
}

/* ==========================================================================
   11. CLÔTURE VIN CHAUD — bannière finale programme
   ========================================================================== */

/* Vapeur SVG animée */
@keyframes steamRise {
  0%   { opacity: 0;   transform: translateY(0)   scaleX(1); }
  40%  { opacity: 0.9; transform: translateY(-8px) scaleX(1.1); }
  100% { opacity: 0;   transform: translateY(-18px) scaleX(0.8); }
}

.vapeur {
  transform-origin: center bottom;
  animation: steamRise 2.4s ease-in-out infinite;
}
.vapeur.v2 { animation-delay: 0.8s; }
.vapeur.v3 { animation-delay: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .vapeur { animation: none; opacity: 0.6; }
}

/* Bannière */
.vin-chaud-banner {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  background:
    radial-gradient(ellipse 70% 80% at 10% 50%, rgba(245, 158, 11, 0.1) 0%, transparent 60%),
    linear-gradient(135deg, #1a1208 0%, #120d18 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  border-radius: 20px;
  padding: 2.25rem 2.5rem;
  box-shadow:
    0 0 0 1.5px rgba(245, 158, 11, 0.2),
    0 16px 40px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(245, 158, 11, 0.1);
  position: relative;
  overflow: hidden;
}

/* Trait décoratif supérieur — dégradé orange */
.vin-chaud-banner::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
  border-radius: 20px 20px 0 0;
}

/* Illustration tasse */
.vin-chaud-illu {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vin-chaud-svg {
  width: 110px;
  height: 110px;
  filter: drop-shadow(0 4px 16px rgba(245, 158, 11, 0.35));
}

/* Contenu texte */
.vin-chaud-content {
  flex: 1;
  min-width: 0;
}

.vin-chaud-time {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.35rem;
  line-height: 1;
}

.vin-chaud-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin-bottom: 0.65rem;
}

.vin-chaud-desc {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: 1.1rem;
  max-width: 580px;
}

.vin-chaud-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* ── Responsive mobile — stand cards ────────────────────────────────── */
@media (max-width: 639px) {
  .stand-card {
    padding: 1.25rem 1rem;
    border-radius: var(--radius-md);
  }

  /* Illustration plus petite pour ne pas déborder */
  .stand-card::after {
    width: 110px;
    height: 110px;
    opacity: 0.15;    /* légèrement plus visible car zone réduite */
  }

  .stand-title {
    font-size: 1.05rem;
  }

  .stand-description {
    font-size: 0.875rem;
  }

  .stand-features li {
    font-size: 0.825rem;
  }

  .stand-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.75rem;
  }

  /* Vin chaud : empiler illustration + texte */
  .vin-chaud-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
    margin-top: 2rem;
  }

  .vin-chaud-illu {
    align-self: center;
  }

  .vin-chaud-svg {
    width: 80px;
    height: 80px;
  }

  .vin-chaud-time {
    font-size: 1.75rem;
  }

  .vin-chaud-title {
    font-size: 1.15rem;
  }

  .vin-chaud-desc {
    font-size: 0.875rem;
  }
}

/* Vapeur : ralentir sur mobile pour économiser batterie */
@media (max-width: 768px) {
  .vapeur { animation-duration: 3.5s; }
}

/* ==========================================================================
   11. AFFICHE DE L'ÉVÉNEMENT
   ========================================================================== */
.affiche-wrapper {
  max-width: 860px;
  margin-inline: auto;
}

.affiche-card {
  position: relative;
  background:
    radial-gradient(ellipse 70% 50% at 50% 20%, rgba(0, 188, 212, 0.07) 0%, transparent 70%),
    linear-gradient(160deg, #1a2535 0%, #0d1520 100%);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 0 0 1.5px rgba(0, 188, 212, 0.3),
    0 24px 56px rgba(0, 0, 0, 0.55),
    0 0 36px rgba(0, 188, 212, 0.1);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease;
}

/* Trait dégradé cyan → teal en haut */
.affiche-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #00bcd4 0%, #0d9488 100%);
  border-radius: 20px 20px 0 0;
  z-index: 2;
}

.affiche-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1.5px rgba(0, 188, 212, 0.5),
    0 32px 64px rgba(0, 0, 0, 0.6),
    0 0 48px rgba(0, 188, 212, 0.18);
}

/* Zone iframe / embed du PDF */
.affiche-embed-area {
  width: 100%;
  padding: 1.25rem 1.25rem 0.75rem;
  box-sizing: border-box;
}

.affiche-iframe {
  display: block;
  width: 100%;
  height: 680px;
  border: none;
  border-radius: 10px;
  background: #f5f5f5;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Pied de carte : label + bouton télécharger */
.affiche-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  flex-wrap: wrap;
}

.affiche-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* Fallback si le navigateur ne peut pas afficher le PDF */
.affiche-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 2rem;
}

/* Responsive : blason réduit + iframe moins haute sur mobile */
@media (max-width: 768px) {
  .hero-visual .flyer-preview-card {
    max-width: 320px;
    margin-inline: auto;
  }

  .affiche-iframe {
    height: 480px;
  }

  .affiche-embed-area {
    padding: 1rem 1rem 0.5rem;
  }

  .affiche-card-footer {
    padding: 0.65rem 1rem 1rem;
  }
}

@media (max-width: 480px) {
  .affiche-iframe {
    height: 360px;
  }

  .affiche-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .affiche-card-footer .btn {
    width: 100%;
    justify-content: center;
  }
}