/* ============================================================
   LA CIBLERIE EN ANIMATIONS (3.70.0, pastilles 3.70.1)
   Page « La ciblerie » : les 5 jeux (data-cib="jeux") et les 19
   exercices IPSC (data-cib="ipsc"). Le dessin est construit par
   media/js/ciblerie.js. Tout est confine sous .vex-cib ; un seul
   theme sombre, comme les deux journees (journees.css).
   LISIBLE SANS LES COULEURS : chaque cible porte un MOT (TIR, NON,
   2e) ou un chiffre, une cible faite un ✓ ; la legende ecrit le
   nom de chaque couleur ; l'etape en cours et le bouton actif ont
   un bord epais, pas seulement une teinte.
   ============================================================ */
.vex-cib {
  color-scheme: dark;
  --bg: #0e1113;
  --panneau: #171b1e;
  --trait: #2b3236;
  --encre: #ecebe5;
  --doux: #9aa3a8;
  --ambre: #e9b44c;
  --ambre-clair: #f6d48a;
  --affiche: 'Arial Narrow', 'Roboto Condensed', sans-serif-condensed, 'Avenir Next Condensed', 'Helvetica Neue', Arial, sans-serif;
  --corps: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --chrono: ui-monospace, 'SF Mono', Consolas, 'Roboto Mono', monospace;
  background: var(--bg); color: var(--encre); font-family: var(--corps); font-size: 15px; line-height: 1.5;
  border-radius: 14px; padding: 16px; margin: 18px 0 26px; display: grid; gap: 12px;
}
.vex-cib *, .vex-cib *::before, .vex-cib *::after { box-sizing: border-box; }
.vex-cib p { margin: 0; }
.vex-cib .vc-sansjs { color: var(--doux); }

/* ---------- le choix ---------- */
.vex-cib .vc-choix { font-size: 13px; color: var(--doux); }
/* Les pastilles : 5 par ligne ; --n (pose par le script) = le nombre
   de pastilles de SA ligne, 4 sur la derniere ligne des exercices. Choisie = fond ambre ET bord clair epais ET aria-pressed :
   jamais la couleur seule. */
.vex-cib .vc-pastilles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.vex-cib .vc-pastilles button.vc-pastille {
  flex: 0 0 calc((100% - (var(--n, 5) - 1) * 6px) / var(--n, 5)); min-width: 0; min-height: 44px; padding: 5px 4px;
  font: 700 var(--vc-tp, 14px)/1.12 var(--affiche); text-align: center;
  /* jamais de coupure au milieu d'un mot : le script reduit la taille
     de TOUTES les pastilles du lecteur jusqu'a ce que chaque mot tienne */
  overflow-wrap: normal; word-break: normal; hyphens: manual; white-space: normal; overflow: hidden;
  color: var(--encre); background: var(--panneau); border: 1px solid var(--trait); border-radius: 10px;
}
/* dernier recours, ecran tres etroit : meme a 9 px un mot ne tient pas -> on le coupe plutot que de le cacher */
.vex-cib .vc-pastilles.vc-serre button.vc-pastille { overflow-wrap: anywhere; padding-left: 1px; padding-right: 1px; }
.vex-cib .vc-pastilles button.vc-pastille:hover { border-color: var(--ambre); }
.vex-cib .vc-pastilles button.vc-pastille[aria-pressed="true"] {
  background: var(--ambre); color: #1a1304; border: 3px solid var(--ambre-clair); padding: 3px 2px;
}
@media (min-width: 560px) {
  .vex-cib .vc-pastilles button.vc-pastille { min-height: 40px; }
}
.vex-cib .vc-quoi { color: var(--doux); }
.vex-cib .vc-fiche { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vex-cib .vc-fiche li { font-size: 13.5px; padding: 3px 10px; border: 1px solid var(--trait); border-radius: 999px; background: var(--panneau); margin: 0; }
.vex-cib .vc-fiche li::before { content: none; }

/* ---------- la scene et le telephone ---------- */
.vex-cib .vc-duo { display: grid; gap: 12px; }
@media (min-width: 700px) { .vex-cib .vc-duo { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
.vex-cib .vc-scene { background: var(--panneau); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; }
.vex-cib .vc-svg { display: block; width: 100%; height: auto; max-width: none; font-family: var(--corps); }
.vex-cib .vc-tel { background: #050607; border: 2px solid #3b4348; border-radius: 22px; padding: 12px; display: grid; gap: 8px; }
.vex-cib .vc-tel-barre { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--doux); padding: 0 4px; }
.vex-cib .vc-ecran { background: #121517; border-radius: 12px; padding: 12px 14px; min-height: 176px; display: grid; align-content: center; gap: 6px; }
.vex-cib .vc-gros { font-family: var(--affiche); font-weight: 800; font-size: clamp(40px, 12vw, 64px); line-height: 1; text-align: center; color: var(--encre); }
.vex-cib .vc-gros.vc-ready { color: var(--ambre-clair); font-size: clamp(34px, 10vw, 52px); }
.vex-cib .vc-gros.vc-chrono { font-family: var(--chrono); font-weight: 400; }
.vex-cib .vc-sous { text-align: center; color: var(--doux); font-size: 15px; min-height: 1.5em; }
.vex-cib .vc-recap { display: flex; justify-content: center; gap: 4px 14px; flex-wrap: wrap; font-size: 14px; }
.vex-cib .vc-lig { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--trait); padding: 3px 0; font-size: 14px; }
.vex-cib .vc-lig span { color: var(--doux); }
.vex-cib .vc-lig b { text-align: right; font-weight: 700; }
/* la ligne qu'on vient de toucher (1re scene) : ▸ + bord gauche epais + fond, jamais la couleur seule */
.vex-cib .vc-lig.vc-tape { background: #2a2414; border-left: 4px solid var(--ambre); padding-left: 6px; border-radius: 4px; }
.vex-cib .vc-lig.vc-tape span { color: var(--ambre-clair); font-weight: 700; }
.vex-cib .vc-pret {
  margin-top: 6px; font: 700 17px/1 var(--affiche); letter-spacing: .1em; text-align: center; padding: 11px;
  border-radius: 10px; background: #2a3135; border: 2px solid #2a3135; color: var(--encre);
}
/* « appuye » : fond ambre ET bord clair epais ET le mot reste PRET */
.vex-cib .vc-pret.app { background: var(--ambre); color: #1a1304; border: 3px solid var(--ambre-clair); }
.vex-cib .vc-drapeau { font-size: 13px; border: 2px dashed var(--ambre); border-radius: 8px; padding: 6px 10px; text-align: center; }

/* ---------- la consigne ---------- */
.vex-cib .vc-consigne { background: var(--panneau); border: 1px solid var(--trait); border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px; min-height: 9.5em; }
.vex-cib .vc-etape { font-family: var(--affiche); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 12.5px; color: var(--ambre); }
.vex-cib .vc-titre { font-family: var(--affiche); font-weight: 800; font-size: 23px; line-height: 1.15; color: var(--encre); }
.vex-cib .vc-cmd { font-family: var(--affiche); font-weight: 700; font-size: 17px; color: var(--ambre-clair); }
.vex-cib .vc-cmd:empty { display: none; }
.vex-cib .vc-texte { max-width: 64ch; }

/* ---------- les boutons ---------- */
.vex-cib .vc-commandes, .vex-cib .vc-etapes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vex-cib button {
  font: 700 14.5px/1 var(--corps); color: var(--encre); background: var(--panneau); border: 1px solid var(--trait);
  border-radius: 10px; padding: 10px 13px; cursor: pointer; margin: 0; text-transform: none; box-shadow: none; min-height: 40px;
}
.vex-cib button:hover { border-color: var(--ambre); background: var(--panneau); color: var(--encre); }
.vex-cib button:focus-visible { outline: 3px solid var(--ambre-clair); outline-offset: 2px; }
.vex-cib button[aria-pressed="true"] { border: 2px solid var(--ambre); padding: 9px 12px; }
.vex-cib .vc-etapes button { font-family: var(--affiche); font-size: 15px; padding: 8px 10px; min-width: 40px; }
.vex-cib .vc-etapes button[aria-current="step"] { background: var(--ambre); color: #1a1304; border: 3px solid var(--ambre-clair); padding: 6px 8px; }

/* ---------- la legende des couleurs (jeux) ---------- */
.vex-cib .vc-legende { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.vex-cib .vc-legende li { display: flex; align-items: center; gap: 8px; margin: 0; }
.vex-cib .vc-legende li::before { content: none; }
.vex-cib .vc-legende i { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; }
.vex-cib .vc-note { font-size: 13.5px; color: var(--doux); }

@media (max-width: 420px) {
  .vex-cib { padding: 12px 10px; border-radius: 10px; margin-left: 0; margin-right: 0; }
  .vex-cib .vc-pastilles { gap: 5px; }
  .vex-cib .vc-pastilles button.vc-pastille { flex-basis: calc((100% - (var(--n, 5) - 1) * 5px) / var(--n, 5)); padding: 4px 2px; border-radius: 8px; }
  .vex-cib .vc-pastilles button.vc-pastille[aria-pressed="true"] { padding: 2px 0; }
  .vex-cib .vc-titre { font-size: 21px; }
}

/* ---------- 3.76.0 : sur telephone ----------
   L'animation prend tout l'ecran du telephone, d'un bord a l'autre,
   au lieu de rester dans le cadre de l'article : la scene passe de
   263 a 355 px de large sur un iPhone, ses textes d'un tiers plus
   grands (le dessin de 360 de large n'est donc plus reduit). */
@media (max-width: 560px) {
  .vex-cib { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; padding-left: 10px; padding-right: 10px; }
}