/*
 * Bandeau cours mobile — compteurs.
 *
 * Architecture :
 * - socle commun : géométrie, typographie, icônes, couleurs et responsive ;
 * - variante Pointage : Présents + Absents excusés + Absents payants ;
 * - variante Historique : Présents + Absents excusés + Absents payants ;
 * - variante Réservation : Réservations uniquement.
 *
 * Le contenu numérique reste piloté par le métier/JS ; cette feuille ne fait
 * qu'exprimer la composition visuelle propre à chaque mode.
 * Aucune priorité forcée.
 */

@media (max-width:1050px){
  /* -----------------------------------------------------------------------
   * Socle commun
   * --------------------------------------------------------------------- */
  .course-heading-row.calendar-heading > .header-course-counters{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    z-index:4;
    justify-self:end;
    align-self:center;
    margin:0;
    width:123px;
    height:113px;
    min-height:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:6px;
    overflow:visible;
  }

  #headerParticipantsLabel{display:none;}

  .header-course-counters .header-counter-group{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:0;
    white-space:nowrap;
  }

  .header-course-counters .header-counter-participants strong{
    font-size:53px;
    line-height:.88;
    color:#36763d;
    font-weight:900;
  }

  .header-course-counters .header-participants-icon{
    width:47px;
    height:47px;
    flex:0 0 47px;
    color:#222;
  }

  .header-course-counters .header-participants-icon svg,
  .header-course-counters .header-absence-icon svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .header-course-counters .header-participants-icon svg{stroke-width:2.7;}
  .header-course-counters .header-participants-icon .mark{stroke:#3f8b49;stroke-width:3.7;}

  .header-course-counters .header-counter-horizontal-separator{
    width:100%;
    height:1px;
    background:var(--line);
  }

  .header-course-counters .header-absence-row{
    grid-template-columns:1fr 1px 1fr;
    align-items:center;
    width:100%;
    min-width:0;
  }

  .header-course-counters .header-counter-vertical-separator{
    width:1px;
    height:25px;
    background:var(--line);
    justify-self:center;
  }

  .header-course-counters .header-counter-absence{gap:3px;}
  .header-course-counters .header-counter-absence strong{
    font-size:22px;
    line-height:1;
    font-weight:900;
  }

  .header-course-counters .header-absence-icon{
    width:20px;
    height:20px;
    flex:0 0 20px;
  }

  .header-course-counters .header-absence-icon svg{stroke-width:2.5;}
  .header-course-counters .header-counter-excused{color:#c27a13;}
  .header-course-counters .header-counter-paid{color:#b94444;}
  .header-course-counters .header-counter-excused .mark{stroke:#c27a13;stroke-width:3;}
  .header-course-counters .header-counter-paid .mark{stroke:#b94444;stroke-width:3;}

  /* -----------------------------------------------------------------------
   * Variante Pointage
   * Présents en compteur principal ; absences excusées/payantes dessous.
   * --------------------------------------------------------------------- */
  .app.course-mode-pointage .header-course-counters .header-counter-horizontal-separator{
    display:block;
  }
  .app.course-mode-pointage .header-course-counters .header-absence-row{
    display:grid;
  }

  /* -----------------------------------------------------------------------
   * Variante Historique
   * Même composition des compteurs que Pointage, mais sans en déduire que
   * les deux modes sont identiques ailleurs dans le bandeau.
   * Les cours annulés utilisent également cette composition informative.
   * --------------------------------------------------------------------- */
  .app.course-closed .header-course-counters,
  .app.course-cancelled .header-course-counters{
    display:flex;
  }
  .app.course-closed .header-course-counters .header-counter-horizontal-separator,
  .app.course-cancelled .header-course-counters .header-counter-horizontal-separator{
    display:block;
  }
  .app.course-closed .header-course-counters .header-absence-row,
  .app.course-cancelled .header-course-counters .header-absence-row{
    display:grid;
  }

  /* -----------------------------------------------------------------------
   * Variante Réservation
   * Le compteur principal représente les réservations. Les deux compteurs
   * d'absence et leur séparateur n'appartiennent pas à ce mode.
   * --------------------------------------------------------------------- */
  .app.course-mode-future .header-course-counters .header-counter-horizontal-separator,
  .app.course-mode-future .header-course-counters .header-absence-row{
    display:none;
  }
  .app.course-mode-future .header-course-counters{
    justify-content:center;
  }
}

@media (max-width:700px){
  /* Responsive commun : chaque variante conserve ensuite sa composition. */
  .course-heading-row.calendar-heading > .header-course-counters{width:104px;height:109px;gap:5px;}
  .header-course-counters .header-counter-group{gap:4px;}
  .header-course-counters .header-counter-participants strong{font-size:41px;}
  .header-course-counters .header-participants-icon{width:33px;height:33px;flex-basis:33px;}
  .header-course-counters .header-counter-absence strong{font-size:18px;}
  .header-course-counters .header-absence-icon{width:17px;height:17px;flex-basis:17px;}
  .header-course-counters .header-counter-vertical-separator{height:21px;}
}

@media (max-width:430px){
  .course-heading-row.calendar-heading > .header-course-counters{width:82px;height:96px;gap:4px;}
  .header-course-counters .header-counter-participants strong{font-size:35px;}
  .header-course-counters .header-participants-icon{width:27px;height:27px;flex-basis:27px;}
  .header-course-counters .header-counter-absence strong{font-size:15px;}
  .header-course-counters .header-absence-icon{width:14px;height:14px;flex-basis:14px;}
  .header-course-counters .header-counter-vertical-separator{height:18px;}
}

@media (max-width:380px){
  .course-heading-row.calendar-heading > .header-course-counters{width:76px;gap:3px;}
  .header-course-counters .header-counter-absence strong{font-size:14px;}
  .header-course-counters .header-absence-icon{width:13px;height:13px;flex-basis:13px;}
}