/*
 * 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:0;
    bottom:0;
    transform:none;
    z-index:4;
    justify-self:end;
    align-self:stretch;
    margin:0;
    width:123px;
    height:auto;
    min-height:0;
    padding:0 0 60px;
    box-sizing:border-box;
    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;
  }

  /* Zone basse de 60 px : actions iconiques. Un trait de séparation reprend
     le langage visuel des compteurs pour distinguer clairement information
     et action sans modifier leur géométrie. */
  .header-course-counters .mobile-header-actions{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    z-index:5;
    border-top:1px solid var(--line);
    box-sizing:border-box;
  }

  /* Les fonds restent pastel ; la couleur sémantique est portée par le
     pictogramme afin de rester cohérent avec l'ergonomie générale. */
  .header-course-counters .mobile-header-action{
    width:42px;
    height:42px;
    flex:0 0 42px;
    padding:0;
    border:1px solid currentColor;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:none;
  }

  .header-course-counters .mobile-header-action svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .header-course-counters .mobile-header-action-cancel{
    background:#f8dddd;
    color:#b94444;
  }
  .header-course-counters .mobile-header-action-check{
    background:#dff0e1;
    color:#2f7438;
  }
  .header-course-counters .mobile-header-action-back{
    background:#dce9f6;
    color:#3478bd;
  }
  .header-course-counters .mobile-header-action:disabled{
    opacity:.45;
    cursor:default;
  }

  #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;
    flex:0 0 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;gap:5px;}
  .header-course-counters .mobile-header-actions{gap:7px;}
  .header-course-counters .mobile-header-action{width:40px;height:40px;flex-basis:40px;}
  .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;gap:4px;}
  .header-course-counters .mobile-header-actions{gap:6px;}
  .header-course-counters .mobile-header-action{width:34px;height:34px;flex-basis:34px;}
  .header-course-counters .mobile-header-action svg{width:21px;height:21px;}
  .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 .mobile-header-actions{gap:5px;}
  .header-course-counters .mobile-header-action{width:32px;height:32px;flex-basis:32px;}
  .header-course-counters .header-counter-absence strong{font-size:14px;}
  .header-course-counters .header-absence-icon{width:13px;height:13px;flex-basis:13px;}
}