@charset "utf-8";
/* =====================================================================
   Activation des tickets par une société revendeur : connexion, saisie
   des codes, résultat, et historique des activations.
   Un seul écran (.view) visible à la fois, le js bascule entre eux.
   ===================================================================== */
@font-face {
  font-family: 'Inter';
  font-display: swap;
  src: local('Inter');
}
/* ----- Tokens (mappés sur le thème global pour que design_tools puisse
        re-skinner la page en live). ----- */
:root {
  --resa-muted: color-mix(in srgb, var(--color_brightness) 55%, transparent);
  --resa-border: color-mix(in srgb, var(--color_brightness) 12%, transparent);
  --resa-ok: #22C55E;
  --resa-ok-50: color-mix(in srgb, #22C55E 12%, var(--bkcolor_brightness_1, #fff));
  --resa-error: #f44336;
  --resa-error-50: color-mix(in srgb, #f44336 14%, var(--bkcolor_brightness_1, #fff));
  --resa-used: #9A9AA0;
  --resa-used-50: color-mix(in srgb, #9A9AA0 18%, var(--bkcolor_brightness_1, #fff));
}
html,
body {
  margin: 0;
  background: var(--bkcolor_body);
  font-family: var(--font_family), 'Inter', -apple-system, sans-serif;
  color: var(--color_body);
}
.view_result,
.view_history,
.history_error {
  display: none;
}
.codes_card {
  max-width: 100%;
}
.view,
.login_card {
  margin-bottom: 50px;
}
.view .ax-page_title {
  margin-bottom: 28px;
}
.view_link_buttons {
  margin-top: 28px;
  justify-content: flex-end;
  margin-bottom: 30px;
}
.history_link::before,
.activation_link::before {
  font-family: 'fontawesome bold';
  font-size: 14rem;
  margin-right: 10px;
}
.history_link::before {
  content: "\f1da";
}
.activation_link::before {
  content: "\f465";
}
/* =====================================================================
   Connexion société
   ===================================================================== */
.login_icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bkcolor_main) 14%, var(--bkcolor_brightness_2));
  color: var(--bkcolor_main);
}
.login_icon::before {
  font-family: 'fontawesome bold';
  font-size: 26rem;
  content: "\f54e";
}
header.ax-top_bar .ax-top_bar-company_name::before {
  content: "\f54e";
}
/* =====================================================================
   Saisie des codes
   ===================================================================== */
.code_line + .code_line {
  margin-top: 12px;
}
.code_row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.code_input {
  flex: 1;
  min-width: 0;
}
.code_remove {
  width: 34px;
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(17px * var(--border_radius_percent, 100) / 100);
  color: var(--resa-muted);
  cursor: pointer;
}
.code_remove:hover {
  background: color-mix(in srgb, var(--color_brightness) 10%, transparent);
  color: var(--color_brightness);
}
.code_remove::before {
  font-family: 'fontawesome bold';
  font-size: 16rem;
  content: "\f00d";
}
.code_message {
  padding-right: 42px;
  display: flex;
  min-height: 1lh;
}
.ax-form .code_message:empty::before {
  content: none;
}
.ax-form .code_message.is_error {
  color: var(--resa-error);
  opacity: 1;
}
.ax-form .code_message.is_error::before {
  content: "\f06a";
}
.activate_button {
  width: 100%;
  margin-top: 25px;
  max-width: 280px;
  justify-self: anchor-center;
}
/* =====================================================================
   Écrans de résultat (activés / erreur) — grande icône d'état, titre et
   message, comme mail_stop_mailing et vouchers_activation_check
   ===================================================================== */
.view_result {
  padding-top: 30px;
  padding-bottom: 40px;
  overflow: hidden;
}
.view_result .icon {
  margin-top: 10px;
  margin-bottom: 20px;
  text-align: center;
}
.view_result .icon::before {
  font-family: 'fontawesome light';
  font-size: 90rem;
}
.view_ok .icon::before {
  content: "\f058";
  color: var(--resa-ok);
}
.view_error .icon::before {
  content: "\f057";
  color: var(--resa-error);
}
.view_result .page_title {
  text-align: center;
  font-size: 22rem;
  margin-top: 10px;
  margin-bottom: 25px;
}
.view_result .ax-block_content-message {
  margin-top: 0;
}
.view_result .ax-buttons {
  justify-content: center;
  margin-top: 30px;
}
/* =====================================================================
   Historique des activations
   ===================================================================== */
.history_card {
  position: relative;
}
.history_card[data-loading] {
  min-height: 160px;
}
.history_card[data-loading] .history_loader {
  display: block;
}
.history_empty {
  background: var(--bkcolor_brightness_1);
  color: var(--resa-muted);
  border-radius: calc(18px * var(--border_radius_percent, 100) / 100);
  padding: 30px;
  text-align: center;
  font-size: 14rem;
}
/* ---- Une campagne : l'entête toujours visible, les tickets au clic ---- */
.campaign {
  background: var(--bkcolor_brightness_1);
  border-radius: calc(18px * var(--border_radius_percent, 100) / 100);
  overflow: hidden;
}
.campaign + .campaign {
  margin-top: 14px;
}
.campaign_head {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 24px;
  cursor: pointer;
}
.campaign_head:hover {
  background: color-mix(in srgb, var(--color_brightness) 5%, transparent);
}
.campaign_title {
  flex: 1;
  min-width: 0;
  font-size: 17rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color_brightness);
  overflow-wrap: anywhere;
}
.campaign_counts {
  display: flex;
  gap: 24px;
  margin: 0;
}
.campaign_counts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.campaign_counts dt {
  font-size: 11rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--resa-muted);
  white-space: nowrap;
}
.campaign_counts dd {
  margin: 0;
  font-size: 16rem;
  font-weight: 800;
  color: var(--color_brightness);
  font-variant-numeric: tabular-nums;
}
.campaign_head::after {
  font-family: 'fontawesome bold';
  font-size: 14rem;
  content: "\f078";
  color: var(--resa-muted);
  transition: transform 0.2s;
}
.campaign[data-open="1"] .campaign_head::after {
  transform: rotate(180deg);
}
.campaign.is_empty .campaign_head {
  cursor: default;
}
.campaign.is_empty .campaign_head:hover {
  background: none;
}
.campaign.is_empty .campaign_head::after {
  visibility: hidden;
}
/* ---- Les tickets activés d'une campagne ---- */
.campaign_tickets {
  display: none;
}
.campaign[data-open="1"] .campaign_tickets {
  display: block;
}
.campaign_ticket {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 24px;
  border-top: 1px solid var(--resa-border);
}
.ticket_code {
  width: 130px;
  flex: none;
  font-size: 14rem;
  font-weight: 700;
  color: var(--color_brightness);
}
.ticket_activated {
  flex: 1;
  min-width: 0;
  font-size: 12.5rem;
  color: var(--resa-muted);
}
.ticket_chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--button_border_radius);
  font-size: 13rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--color_brightness);
  background: var(--resa-ok-50);
}
.ticket_chip::before {
  font-family: 'fontawesome bold';
  font-size: 13rem;
  content: "\f00c";
  color: var(--resa-ok);
}
.is_used .ticket_chip {
  background: var(--resa-used-50);
}
.is_used .ticket_chip::before {
  color: var(--resa-used);
}
.is_expired .ticket_chip {
  background: var(--resa-error-50);
}
.is_expired .ticket_chip::before {
  content: "\f00d";
  color: var(--resa-error);
}
/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 850px) {
  .campaign_head {
    position: relative;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 18px;
  }
  .campaign_title {
    flex: 1 0 100%;
    padding-right: 26px;
  }
  .campaign_counts {
    gap: 18px;
  }
  .campaign_head::after {
    position: absolute;
    right: 18px;
    top: 18px;
  }
  .campaign_ticket {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 18px;
  }
  .ticket_code {
    width: auto;
  }
}