/* ================================
   Base & Accessibilité
================================ */
:root{
  /* Gabarits fluides */
  --content-max: 1200px;
  --gap-xl: clamp(2rem, 5vw, 6rem);
  --gap-lg: clamp(1.25rem, 3.5vw, 3rem);
  --gap-md: clamp(0.75rem, 2.5vw, 2rem);

  /* Typo fluide */
  --fs-h1: clamp(1.4rem, 2.5vw, 2.2rem);
  --fs-intro: clamp(1rem, 1.6vw, 1.25rem);
  --fs-btn: clamp(0.95rem, 1.4vw, 1.1rem);

  /* Cible : taille fluide, limite basse/haute */
  --target-size: clamp(180px, 42vw, 300px);

  /* Ombres & couleurs */
  --ink: #1f1f1f;
  --ink-weak: #555;
  --bg-page: #f9f9f9;
  --ring-yellow: #FFD700;
  --ring-red: #E31B23;
  --ring-blue: #0062BE;
  --ring-black: #000;
  --ring-white: #FFF;
}

/* ----------------------------------
   GÉNÉRAL
---------------------------------- */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: "Inter", Arial, sans-serif;
  background: var(--bg-page);
  box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; }

/* ----------------------------------
   CONTAINER PRINCIPAL
---------------------------------- */
.container-cible {
  position: relative;
  width: 100%;
  max-width: 100%;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--gap-lg) var(--gap-md);
}

.cible-wrapper {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xl);
}

/* ----------------------------------
   TITRES & INTRO
---------------------------------- */
.cible-header h1 {
  font-size: var(--fs-h1);
  margin: 0;
  color: var(--ink);
  text-align: center;
}

.intro {
  font-size: var(--fs-intro);
  font-weight: 500;
  color: var(--ink-weak);
  max-width: min(90ch, 90%);
  padding: var(--gap-md);
  margin: 0 auto;
  text-align: center;
  line-height: 1.6;
}

/* ----------------------------------
   BLOC : Flèches + Cible + Boutons
---------------------------------- */
.arrow-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xl);
  flex-wrap: nowrap;                  /* desktop : à l’horizontale */
  width: 100%;
}

.arrow-label-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md);
  min-width: 0;                       /* évite débordements à fort zoom */
}

.arrow-wrapper {
  width: min(86vw, 520px);
  max-width: 520px;
}

.arrow {
  display: block;
  width: 100%;                        /* SVG fluide */
  height: auto;
  margin: 0 auto;
}

.label-wrapper {
  display: flex;
  justify-content: center;
}

/* ----------------------------------
   CIBLE + TRÉPIED
---------------------------------- */
.target-stand {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  gap: var(--gap-md);
}

.target {
  position: relative;
  width: var(--target-size);
  height: var(--target-size);
  margin: 0 auto;
  z-index: 4;
}

.target .ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid black;
}

/* Anneaux (tailles relatives à --target-size) */
.ring-center { width: 8%;  height: 8%;  background: var(--ring-yellow); }

.ring-1 { width: 16%; height: 16%; background: var(--ring-yellow); border: 1px solid black !important; }
.ring-2 { width: 24%; height: 24%; background: var(--ring-yellow); }

.ring-3 { width: 32%; height: 32%; background: var(--ring-red); }
.ring-4 { width: 40%; height: 40%; background: var(--ring-red); }

.ring-5 { width: 48%; height: 48%; background: var(--ring-blue); }
.ring-6 { width: 56%; height: 56%; background: var(--ring-blue); }

.ring-7 { width: 64%; height: 64%; background: var(--ring-black); border: 1px solid white !important; }
.ring-8 { width: 72%; height: 72%; background: var(--ring-black); border: 1px solid white !important; }

.ring-9  { width: 80%; height: 80%; background: var(--ring-white); }
.ring-10 { width: 88%; height: 88%; background: var(--ring-white); border: 2px solid black !important; }

/* Pieds */
.leg {
  position: absolute;
  width: 6px;
  height: 36%;
  background: #8B5E3C;
  bottom: -24%;
  z-index: 1;
  transform-origin: top center;
  border-radius: 20%;
}

.leg-left   { left: calc(50% - 24%); transform: rotate(18deg); z-index: 3; }
.leg-right  { right: calc(50% - 24%); transform: rotate(-18deg); z-index: 3; }
.leg-center { left: 50%; transform: translateX(-50%); height: 22%; bottom: -16%; background: #6e4321; z-index: 1; }

/* Ombre sous la cible */
.shadow {
  position: absolute;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 260px;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(4px);
  z-index: 2;
}

/* ----------------------------------
   BOUTONS
---------------------------------- */
.demo-button {
  padding: 0.75rem 1.25rem;
  font-size: var(--fs-btn);
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(to right, #4f46e5, #6366f1);
  border: 0;
  border-radius: 10px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  will-change: transform;
}
.demo-button:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.demo-button:active { transform: scale(0.985); }
.demo-button.active { background: linear-gradient(to right, #10b981, #34d399); }


/* Le footer reste collé en bas */
footer {
  margin-top: auto;
}


/* ----------------------------------
   RESPONSIVE & ZOOM
---------------------------------- */

/* Mobiles & zoom élevé : tout passe en colonne */
@media (max-width: 960px) {
  .arrow-container {
    flex-direction: column;
    align-items: center;
    gap: var(--gap-lg);
  }
  .arrow-wrapper { width: min(92vw, 520px); }
  .target { --target-size: clamp(180px, 56vw, 280px); }
}

/* Très petits écrans / zoom 300–400% */
@media (max-width: 480px) {
  .intro { padding: 0.75rem; }
  .arrow-wrapper { width: 95vw; }
  .target { --target-size: clamp(160px, 66vw, 260px); }
}

/* Réduction mouvements si demandé par l’utilisateur */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}