/* ============================================================
   5 Cibles — surcharges marque (vrai logo + menu cibles biathlon)
   Logo officiel : monogramme « 5 » dans la cible (VERROUILLÉ, brief DA).
   Menu : animation reprise du site Odoo actuel (.biathlon-dot) —
   la cible bascule du NOIR au BLANC au survol = « touché » au tir,
   remise aux DEUX cercles concentriques (debout + couché) du brief.
   ============================================================ */

/* --- Logo de marque dans le header --- */
.brand .brand-logo { height: 54px; width: auto; display: block; }
@media (max-width: 780px){ .brand .brand-logo { height: 44px; } }

/* --- Menu cibles (flip biathlon) --- */
.nav-cibles { perspective: 1200px; align-items: center; }

.bdot {
  width: 66px; height: 66px; display: inline-block;
  text-decoration: none; cursor: pointer; position: relative; perspective: 1200px;
}
.bdot-in {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; display: block;
}
.bdot-f, .bdot-b {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid #121212;
}
/* face avant = cible noire (pas touchée) */
.bdot-f { background: #121212; z-index: 1; box-shadow: 0 4px 8px rgba(0,0,0,.2); }
/* face arrière = cible blanche (touchée) : posée à plat, bascule au survol */
.bdot-b {
  background: #fff; z-index: 2; transform-origin: bottom center;
  transform: rotateX(-90deg); opacity: 0;
  transition: transform .6s ease-in, opacity 0s .6s;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 6px 12px rgba(0,0,0,.3);
}
.bdot:hover .bdot-b,
.bdot.is-active .bdot-b {
  transform: rotateX(0deg); opacity: 1;
  transition: transform .6s ease-out, opacity 0s;
}

/* DEUX cercles concentriques (brief : debout 115 + couché 45) */
.bdot-f::after, .bdot-b::after { /* anneau extérieur = debout */
  content: ''; position: absolute; width: 44px; height: 44px; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.bdot-f::before, .bdot-b::before { /* anneau intérieur = couché */
  content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.bdot-f::after  { border: 1.5px solid rgba(255,255,255,.85); }
.bdot-f::before { border: 1.5px solid #fff; }
.bdot-b::after  { border: 1.5px solid #121212; }
.bdot-b::before { border: 1.5px solid #121212; }

/* libellé centré (chip lisible par-dessus la cible) */
.bdot-f span, .bdot-b span {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 8.5px;
  line-height: 1.05; text-align: center; text-transform: uppercase; letter-spacing: .04em;
  position: relative; z-index: 3; border-radius: 2px; padding: 2px 5px; max-width: 56px;
}
.bdot-f span { color: #fff; background: #121212; }
.bdot-b span { color: #121212; background: #fff; }

@media (max-width: 980px){
  .bdot { width: 56px; height: 56px; }
  .bdot-f::after, .bdot-b::after { width: 38px; height: 38px; }
  .bdot-f::before, .bdot-b::before { width: 20px; height: 20px; }
}