:root{
  --wheel-size: 520px;
}

.page-odd-targets{
  background:#f6f7f9;
}

/* HERO */
.oddtargets-hero{
  padding: 60px 0 28px;
  background: linear-gradient(135deg, rgba(63,156,53,.16), rgba(255,130,0,.08));
}

.oddtargets-kicker{
  margin:0 0 10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  color:var(--green, #3F9C35);
}

.oddtargets-hero h1{
  margin:0 0 12px;
  font-size:44px;
  font-weight:900;
}

.oddtargets-intro{
  margin:0;
  max-width:860px;
  line-height:1.7;
  color:#333;
}

/* TOP BAR */
.oddtargets-experience{
  padding: 28px 0 70px;
}

.oddtargets-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}

.oddtargets-status{
  text-align:center;
}

.oddtargets-status-label{
  display:block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#666;
  margin-bottom:4px;
}

.oddtargets-status strong{
  font-size:22px;
  font-weight:800;
}

.oddtargets-nav{
  width:52px;
  height:52px;
  border:none;
  border-radius:50%;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  cursor:pointer;
  font-size:18px;
  transition:.25s ease;
}

.oddtargets-nav:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.14);
}

/* LAYOUT */
.oddtargets-layout{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap:34px;
  align-items:start;
}

/* WHEEL */
.oddtargets-wheel-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.oddtargets-wheel-wrap{
  position:relative;
  width:var(--wheel-size);
  height:var(--wheel-size);
  display:flex;
  align-items:center;
  justify-content:center;
}

.oddtargets-wheel{
  position:relative;
  width:100%;
  height:100%;
  border-radius:50%;
  box-shadow:0 20px 40px rgba(0,0,0,.10);
  background:#fff;
  transition:transform .6s ease;
}

/* SEGMENTS CORRIGÉS */
.oddtargets-segment{
  position:absolute;
  top:50%;
  left:50%;

  width:100px;
  height:52px;

  margin-left:-59px;
  margin-top:-26px;

  border:none;
  border-radius:999px;

  color:#fff;
  font-weight:800;
  font-size:12px;
  line-height:1;

  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.18);

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 12px;
  white-space:nowrap;
  text-align:center;
  overflow:visible;

  transform: rotate(var(--angle)) translateY(calc(var(--translateY) - 30px));
  transition:transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

/* Le texte reste droit */
.oddtargets-segment span{
  display:block;
  transform:rotate(calc(-1 * var(--angle)));
  transform-origin:center;
  white-space:nowrap;
  text-align:center;
  pointer-events:none;
}

.oddtargets-segment:hover{
  transform:rotate(var(--angle)) translateY(var(--translateY)) scale(1.08);
  filter:brightness(1.08);
}

.oddtargets-segment.active{
  outline:4px solid rgba(255,255,255,.85);
  transform:rotate(var(--angle)) translateY(var(--translateY)) scale(1.12);
  z-index:5;
}

.oddtargets-wheel-center{
  position:absolute;
  width:170px;
  height:170px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:10;
  text-align:center;
}

.wheel-center-small{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#666;
}

#wheelCenterLabel{
  font-size:40px;
  font-weight:900;
  line-height:1;
  margin-top:4px;
}

.oddtargets-minihelp{
  margin-top:18px;
  text-align:center;
  color:#666;
  max-width:360px;
  line-height:1.6;
}

/* CONTENT PANEL */
.oddtargets-content-panel{
  background:#fff;
  border-radius:18px;
  padding:26px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.oddtargets-content-head{
  padding-bottom:18px;
  border-bottom:1px solid #ececec;
  margin-bottom:22px;
}

.oddtargets-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:88px;
  padding:8px 14px;
  border-radius:999px;
  color:#fff;
  font-weight:800;
  margin-bottom:12px;
}

.oddtargets-content-head h2{
  margin:0 0 10px;
  font-size:34px;
  font-weight:900;
  line-height:1.15;
}

.oddtargets-content-head p{
  margin:0;
  color:#444;
  line-height:1.7;
}

.oddtargets-targets{
  display:grid;
  gap:14px;
}

.oddtarget-card{
  border-radius:14px;
  padding:16px 18px;
  background:#f8f9fb;
  border-left:6px solid var(--target-color, #3F9C35);
  transition:.2s ease;
}

.oddtarget-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.07);
}

.oddtarget-code{
  display:inline-block;
  font-weight:800;
  font-size:14px;
  margin-bottom:8px;
  color:#111;
}

.oddtarget-text{
  margin:0;
  line-height:1.7;
  color:#333;
}

/* Cible longue : repli "Voir plus / Voir moins" */
.oddtarget-text.is-clamped{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.oddtarget-toggle{
  margin-top:8px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  font:inherit;
  font-weight:800;
  font-size:14px;
  color:var(--target-color, #3F9C35);
}
.oddtarget-toggle:hover{ text-decoration:underline; }

/* RESPONSIVE */
@media (max-width: 1200px){
  :root{
    --wheel-size: 460px;
  }

  .oddtargets-layout{
    grid-template-columns: 1fr;
  }

  .oddtargets-wheel-panel{
    order:1;
  }

  .oddtargets-content-panel{
    order:2;
  }

  .oddtargets-segment{
    width:108px;
    height:48px;
    margin-left:-54px;
    margin-top:-24px;
    font-size:11px;
    padding:0 10px;
  }
}

@media (max-width: 768px){
  :root{
    --wheel-size: 320px;
  }

  .oddtargets-hero h1{
    font-size:32px;
  }

  .oddtargets-topbar{
    gap:12px;
  }

  .oddtargets-status strong{
    font-size:18px;
  }

  .oddtargets-segment{
    width:82px;
    height:38px;
    margin-left:-41px;
    margin-top:-19px;
    font-size:9px;
    padding:0 6px;
  }

  .oddtargets-wheel-center{
    width:120px;
    height:120px;
  }

  #wheelCenterLabel{
    font-size:28px;
  }

  .oddtargets-content-panel{
    padding:18px;
  }

  .oddtargets-content-head h2{
    font-size:26px;
  }
}