html, body {

  height: 100%;

  margin: 0;

  padding: 0;

  padding-top: constant(safe-area-inset-top);

  padding-top: env(safe-area-inset-top);

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  background-color: #f1f2f6;

  color: #1f2937;

}



body {

  display: flex;

  flex-direction: column;

  justify-content: center;

  background-color: #f1f2f6;

}



body.browser {

  background-color: black;

}



.container {

  display: flex;

  position: relative;

  flex-direction: column;

  padding-bottom: 1rem;

  /*height: calc(100vh - var(--footer-height, 3rem) - var(--titlebar-height, 3.5rem));*/

  /*height: 100vh;*/

  height: 100vh;

  background-color: #f1f2f6;

  overflow-y: auto;

  box-sizing: border-box;

}



body.browser .container {

  width: 100%;

  max-width: 600px;

  margin-left: auto;

  margin-right: auto;

}



.container.new-session {

  padding-top: 0rem;

  padding-bottom: 1rem;

  /*max-height: calc(100vh - 2rem);*/

  overflow-y: auto;

  

}



body.standalone .action-btn {

  bottom: 4.4rem;

}



body.browser .action-btn {

  position: absolute;

  bottom: 1rem;

  right: 1rem;

  /*right: calc(50vw - 300px + 1rem);*/

  }



.action-btn {

  position: fixed;

  right: 1rem;

  z-index: 50;

}



div.action-btn {

  width: fit-content;

  margin-left: auto;

}



.action-btn .btn {

  margin: 0;

}



.logout-btn {

  position: fixed;

  bottom: 6rem;

  right: 1rem;

  width: 100%;

  display: flex;

  justify-content: center;

  z-index: 50;

}

.logout-btn .btn {

  width: auto;

}



.page-title {

  margin: 0;

  padding-bottom: 0.5rem;

  font-size: 1.5rem;

  text-align: left;

  border-bottom: 1px solid #e5e7eb;

}



/* Styles communs */

.home-title {

  text-align: center;

  margin: 1rem 1rem 1rem 1rem;

}



.home-scratch{

  margin: 1rem 0rem 0rem 0rem;

}



/* Alignement de la meta (date & lieu) */

.session-meta {

  text-align: center;

  margin: 0rem 0rem 1rem 0rem; /* 1rem sous, 1rem latéral */

  font-size: 0.875rem;

  color: #374151;

}



/* Date et lieu déjà héritent la couleur et taille du thème */

.session-meta .session-date {

  color: #f97316; /* orange */

  margin-right: 0rem;

}

.session-meta .session-lieu {

  color: #374151; /* gris foncé */

}



.session-meta2 {

  margin: 0rem 0rem 0.25rem 0rem; /* 1rem sous, 1rem latéral */

  font-size: 0.7rem;

  color: #374151;

}



/* Date et lieu déjà héritent la couleur et taille du thème */

.session-meta2 .session-date {

  color: #f97316; /* orange */

  margin-right: 1rem;

}

.session-meta2 .session-lieu {

  color: #374151; /* gris foncé */

}





/* Form elements */

.form-group {

  margin-bottom: 1rem;

}



.form-group label {

  display: block;

  margin-bottom: 0.12rem;

  font-weight: 500;

}

.form-group input[type="text"],

.form-group input[type="password"],

.form-group input[type="date"],

.form-group select {

  width: 100%;

  padding: 0.75rem;

  border: 1px solid #ccc;

  border-radius: 0.5rem;

  box-sizing: border-box;

  font-size: 1rem;

}



/* Buttons base */

.btn {

  display: block;

  width: 100%;

  box-sizing: border-box;

  padding: 0.75rem;

  margin: 0.5rem 0;

  border: none;

  border-radius: 0.75rem;

  font-size: 1rem;

  font-weight: 500;

  text-align: center;

  cursor: pointer;

  text-decoration: none;

}

.btn-primary {

  background-color: #f97316;

  color: #fff;

}

.btn-primary:hover {

  background-color: #fb923c;

}

.btn-secondary {

  background-color: #e2e8f0;

  color: #1f2937;

}

.btn:disabled {

  background-color: #cbd5e1;

  color: #94a3b8;

  cursor: not-allowed;

}

.btn.full-width {

  box-sizing: border-box;

}



/* Session & tireurs list */

.session-list {

  flex: 1;               /* prend tout l’espace vertical disponible */

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

  padding: 0;

  padding-bottom: var(--footer-height, 5rem);

}

.session-btn {

  display: flex;

  justify-content: space-between;

  align-items: center;

  /* on supprime width:100% */

  margin: 0.05rem 1rem;      /* 0.5rem vertical, 1rem horizontal */

  /* on garde le reste */

  padding: 1rem 0.9rem 0.9rem 1rem;

  background: #fff;

  border: none;

  border-radius: 0.75rem;

  box-shadow: 0 2px 4px rgba(0,0,0,0.1);

  box-sizing: border-box;

  text-align: left !important;

  position:relative;

}



.session-portrait {

  flex: 0 0 auto;

  margin-right: 1rem;

}

.session-portrait img {

  width: 4.8rem;

  height: 4.8rem;

  /*border-radius: 50%;*/

  object-fit: cover;

  display: block;

}

.center-img {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
}

.session-portrait2 img {

  width: 12rem;

  height: 12rem;

  /*border-radius: 50%;*/

  object-fit: cover;

  display: block;

}



.session-info {

  flex: 1;

  text-align: left; /* s’assure que tout le contenu reste à gauche */

}

.session-date {

  font-size: 0.7rem;

  color: #f97316;

  margin-bottom: 0.25rem;

}

.session-name {

  font-size: 1.25rem;

  font-weight: 600;

  margin-bottom: 0rem;

}



/* Cadenas rouge pour les séances archivées */

.session-name .icon-lock.locked {

  color: #ef4444;

  margin-left: 1rem;

  margin-bottom: 0.25rem;

  vertical-align: middle;

}





.session-lieu {

  font-size: 0.7rem;

  color: #374151;

}

.empty {

  font-size: 1rem;

  color: #6b7280;

  margin: 1rem;

}



.delete-icon {

  position: absolute;

  top: 0.3rem;         /* ajustez selon votre padding */

  right: 0.3rem;         /* aligné avec marge horizontale */

  padding: 0.25rem;

  cursor: pointer;

  color: #ef4444;      /* rouge vif */

  background: none;

}



/* Assurez-vous que le svg hérite de currentColor */

.delete-icon .icon-cross {

  width: 1rem;

  height: 1rem;

  stroke: currentColor;

  fill: none;

}



/* Error message */

.error-message {

  background-color: #fee2e2;

  color: #991b1b;

  padding: 0.75rem;

  border-radius: 0.5rem;

  margin-bottom: 1rem;

  font-size: 0.9rem;

}



/* Discipline & plateau buttons */

.btn-discipline,

.btn-plateau {

  flex: 1 1 48%;

  max-width: 48%;

  padding: 0.75rem;

  margin: 0;

  border-radius: 0.75rem;

  border: none;

  font-size: 1rem;

  font-weight: 500;

  text-align: center;

  background: #e2e8f0;

  color: #1f2937;

  cursor: pointer;

  box-sizing: border-box;

}

.btn-discipline.active,

.btn-plateau.active {

  background-color: #f97316;

  color: #fff;

}



/* Controls layout */

.controls {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

}



/* Checkbox labels */

.checkbox-label {

  flex: 1 1 45%;

  display: flex;

  align-items: center;

  gap: 0.5rem;

  margin-bottom: 0.5rem;

}



/* Tireurs plus gros pour faciliter la sélection */

.checkbox-label.tireur-large {

  font-size: 1.25rem;      /* augmente la taille du texte */

  padding: 0.75rem;        /* espace plus grand autour */

}



/* Pour s'assurer que l'ensemble des cases reste accessibles en deux colonnes */

.controls.wrap {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

}

.checkbox-label.tireur-large {

  flex: 1 1 calc(50% - 0.5rem); /* deux colonnes */

}



/* Tables */

table {

  /*width: calc(100% - 2rem);*/

  width: 100%;

  border-collapse: collapse;

  /*margin: 1rem 0;*/

  /*margin: 0 1rem;*/

  background: #fff;

  border-radius: 0.5rem;

  overflow: hidden;

  /*table-layout: fixed; */

}



th, td {

  padding: 0.75rem;

  text-align: center;

  border-bottom: 1px solid #e5e7eb;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

th {

  background: #f1f5f9;

  font-weight: 600;

}

tbody tr:last-child td {

  border-bottom: none;

}



/* Score control buttons */

.controls.score-controls {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  gap: 0.5rem;

  margin-top: 1rem;

}

.controls.score-controls button {

  flex: 1;

}

.btn-vert {

  background-color: #22c55e;

  color: #fff;

}

.btn-orange {

  background-color: #f97316;

  color: #fff;

}

.btn-red {

  background-color: #ef4444;

  color: #fff;

}



/* Footer navigation */





body.standalone .footer-nav {

  position: fixed;

  width: 100%;

  bottom: 0;

  left: 0;

}



body.browser .footer-nav {

  bottom: 0;

  width: 100%;

  max-width: 600px;

  margin-left: auto;

  margin-right: auto;

}







.footer-nav {

  

  /*width: 100%;*/

  background: #fff;

  border-top: 1px solid #e5e7eb;

  display: flex;

  z-index: 100;

}





.footer-nav button {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 0.5rem 0;

  border: none;

  background: none;

  color: #475569;

}

.footer-nav button .icon {

  width: 24px;

  height: 24px;

  margin-bottom: 0.25rem;

  fill: currentColor;

    cursor: pointer;

}

.footer-nav button.active,

.footer-nav button:focus {

  color: #f97316;

}



/* Pour que le formulaire « Nouveau/Modifier tireur » ait les mêmes marges latérales */

main.container.new-session form {

  margin: 0 1rem;

}



main.container.new-tireur form {

  margin: 0 1rem;

}



/* (Optionnel) si vous voulez aussi que les boutons « Créer » et « Annuler » héritent de ces marges) */

main.container.new-session .btn {

  margin-left: 0rem;

  margin-right: 0rem;

}



.btn.full-width {

  display: block;        /* s’étend en block */

  box-sizing: border-box;

  /*width: auto;*/           /* pas width:100% */

  /*margin: 0.5rem 1rem;*/   /* 0.5rem vertical, 1rem latéral */

}



.tireur-name {

  text-align: left;

  font-weight: 500;

  line-height: 1.2;

}



.total-cell {

  font-weight: 600;

  background-color: #f1f5f9;

}



.controls.score-controls {

  margin-top: 1.5rem;

}



/* Bloc tireur */

.shooter-block {

  margin: 1rem;

  padding: 0.75rem;

  background: #fff;

  border-radius: 0.75rem;

  box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}

.shooter-block.active {

  border: 2px solid #f97316;

}



/* Nom du tireur */

.shooter-name {

  text-align: left;

  font-size: 1rem;

  margin-bottom: 0.5rem;

}



/* Ligne de plateaux */

.plateau-row {

  display: flex;

  gap: 0.25rem;

  margin-bottom: 0.5rem;

}

.plateau-cell {

  flex: 1;

  height: 2rem;

  background: #e5e7eb;       /* gris clair */

  border-radius: 0.25rem;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.9rem;

}

/* États des plateaux */

.cell-missed  { background: #991b1b; color: #fff; } /* rouge */

.cell-first   { background: #22c55e; color: #fff; } /* vert */

.cell-second  { background: #f97316; color: #fff; } /* orange */



/* Résumé */

.shooter-summary {

  text-align: right;

  font-size: 0.9rem;

  margin-bottom: 1rem;

}

.broken-count { color: #f97316; font-weight: 600; }

.total-points{ font-weight: 600; }



/* Boutons de score : moins arrondis */

.score-controls .btn {

  border-radius: 0.25rem;

  flex: 1;

  margin: 0 0.25rem;

  font-size: 0.9rem;

}

/* Couleurs */

.btn-missed { background: #374151; color: #fff; }         /* gris foncé */

.btn-first  { background: #f97316; color: #fff; }         /* orange */

.btn-second { background: #fb923c; color: #fff; }         /* orange pâle */





/* Bloc tireur */

.shooter-block {

  margin: 1rem;

  padding: 0.75rem;

  background: #fff;

  border-radius: 0.75rem;

  box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}



/* En-tête : nom à gauche, résumé à droite */

.shooter-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 0.2rem;

}

.shooter-name {

  font-weight: 500;

}

.shooter-summary {

  font-size: 0.9rem;

}

.broken-count { color: #f97316; font-weight: 600; }

.total-points { font-weight: 600; }



/* Rangée de tirs : carrés gris */

.shots-row {

  display: flex;

  gap: 0.25rem;

}

.shot-cell {

  flex: 1;

  height: 1.75rem;

  background: #e5e7eb;

  border-radius: 0.25rem;

}





body.standalone .score-controls .btn {

  margin: 0rem 0.25rem;

}



body.browser .score-controls .btn {

  margin: 0rem 0.25rem;

}



/* Boutons score moins arrondis */

.score-controls .btn {

  border-radius: 0.25rem;

  flex: 1;

  /*margin: 3rem 0.25rem;*/

  font-size: 0.9rem;

  padding: 1.2rem;

}

/* Couleurs */

.btn-missed { background: #374151; color: #fff; }

.btn-first  { background: #f97316; color: #fff; }

.btn-second { background: #fb923c; color: #fff; }



/* 1. Conteneur de tous les tireurs en flex-wrap deux colonnes */

#shooters {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

 /* margin: 0 1rem;*/ /* garder les mêmes marges latérales */

}



/* 2. Chaque bloc fait environ la moitié de la largeur disponible */

.shooter-block {

  flex: 1 1 calc(50% - 1rem); /* deux colonnes, 1rem d’écart total */

  margin-bottom: 0.7rem;      /* espacement réduit vertical */

  margin-top : 0.2rem;

  padding: 0.5rem;            /* padding réduit pour gagner de la place */

}



/* 3. Réduire un peu les hauteurs pour que 3 rangées tiennent à l’écran */

.shooter-name      { font-size: 0.95rem; margin-bottom: 0.75rem; }

.shooter-summary   { font-size: 0.85rem; }

.shots-row .shot-cell {

  height: 1.2rem;   /* hauteur réduite */

}



/* 4. S’assurer que main.container occupe tout l’espace sauf footer + controls */

main.container {

  /*height: calc(100vh - 5.5rem);*/ /* par exemple footer (~3rem) + controls (~3rem) */

  /*height: calc(100vh - 3.5rem);*/

  

  overflow: hidden;            /* plus de scroll */

}



/* 5. Les contrôles restent visibles */

.score-controls {

  display: flex;

  /*margin: 0 1rem;*/

  /*position: absolute;*/

  bottom: 1rem;  /* juste au-dessus du footer */

  /*left: 0; right: 0;*/

  padding: 0 1rem;

  

  /*max-width: calc(600px - 2rem);

  width: 100%;*/

  /*margin-left: auto;

  margin-right: auto;*/

}



/* États des plateaux après clic */

.cell-missed {

  background: #ff0000 !important;  /* manqué = rouge vif */

}



.cell-first {

  background: #22c55e !important;  /* 1er coup = vert */

}



.cell-second {

  background: #0000ff !important;  /* 2ème coup = bleu */

}

.shot-cell {  background: #e5e7eb; }

.shot-cell.active-cell {

  outline: 2px solid #f97316;  /* orange vif */

  outline-offset: -1px;

}



/* Afficher le numéro de plateau au-dessus de chaque case */

.shot-cell {

  position: relative;

}



.shot-cell::before {

  content: attr(data-p);

  position: absolute;

  top: -0.80rem;            /* décale au-dessus de la case */

  left: 50%;

  transform: translateX(-50%);

  font-size: 0.7rem;         /* petit texte */

  color: #6b7280;            /* gris moyen */

  pointer-events: none;      /* pour que le label ne gêne pas le clic */

}



.controls .btn sup {

  font-size: 0.7em;

  vertical-align: super;

}



.title-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 1rem;

  margin-bottom: 0rem;

}



/*.title-bar .page-title {

  flex: 1;

  margin: 2.5rem 1rem 1rem 1rem;

  text-align: center;

}*/



body.standalone .btn-icon {

  margin: 0rem 0rem 0rem 0rem;

}



body.browser .btn-icon {

  margin: 0rem 0rem 0rem 0rem;

}



body.standalone .btn-stats {

  margin: 0rem 2rem 0rem 0rem;

}



body.browser .btn-stats {

  margin: 0rem 2rem 0rem 0rem;

}



/* Styles communs */

.btn-icon {

  background: none;

  border: none;

  padding: 0rem;

  cursor: pointer;

  color: #475569;

}



.btn-icon:disabled {

  opacity: 0.3;

  cursor: default;

}



/* Cadenas : gris clair par défaut, rouge si .locked */

.btn-icon .icon-lock {

  width: 24px; height: 24px;

  color: #cbd5e1;    /* gris clair */

  transition: color 0.2s;

}



/* Tous les scores saisis, avant verrouillage : noir */

.btn-icon.ready .icon-lock {

  color: #1f2937;   /* noir/gris foncé */

}



#titleLockBtn.locked .icon-lock {

  color: #ef4444;    /* rouge vif */

}



.shooter-header {

  display: flex;

  align-items: center;

  /* on garde name à gauche et summary à droite, rank au centre */

}



.shooter-header .shooter-name,

.shooter-header .shooter-summary {

  flex: 1;                /* prennent tout l’espace disponible */

}



.shooter-header .shooter-rank {

  flex: 0 0 auto;         /* taille automatique */

  background-color: #000; /* fond noir */

  color: #fff;            /* texte blanc */

  padding: 0.25rem 0.5rem;

  border-radius: 0.25rem;

  text-align: center;

  /* on force le centrage horizontal au milieu de la ligne */

  margin: 0 auto;

}



/* Par défaut, on cache le badge */

.shooter-rank-inline {

  display: none;

  background-color: #000;

  color: #fff;

  padding: 0.1rem 0.4rem;

  border-radius: 0.25rem;

  font-weight: 600;

  margin-right: 0.5rem;

  font-size: 0.9em;

}



/* Quand le conteneur #shooters prend la classe 'complete', on affiche */

#shooters.complete .shooter-rank-inline {

  display: inline-block;

}



.session-details {

  display: flex;

  justify-content: space-between; /* meta à gauche, winner à droite */

  align-items: center;

  font-size: 0.775rem;

  margin: 0.25rem 0;

}



.session-details .session-data {

  color: #6b7280;

  font-size: 0.8rem;

  color: #374151;

}



.session-details .session-winner {

  color: #1f2937;

  font-size: 0.8rem;

  font-weight: 500;

}



.session-info {

  position: relative; /* pour le .session-podium en absolute */

}



/* Conteneur du top 3 */

.session-podium {

  position: absolute;

  left: 50%;               /* à mi-largeur du bouton */

  top: 0.25rem;             /* ajustez selon vos espaces */

  transform: translateX(0);/* pas de décalage horizontal supplémentaire */

  text-align: left;

  /* facultatif : taille et style */

  font-size: 0.7rem;

  line-height: 1;

}



/* Chaque ligne du podium */

.session-podium .podium-line {

  margin-bottom: 0.25rem;

  color: #1f2937;          /* même couleur que le texte */

  font-weight: 500;

}



/* Conteneur des stats sous le nom */

.tireur-stats {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  font-size: 0.9rem;

  color: #6b7280;

  margin-top: 0.2rem;

}

.tireur-stats .stat {

  white-space: nowrap;

}



/* ----------------------------------------------------------------

   Carte de statistiques

------------------------------------------------------------------*/

.divider {

  margin: 1rem;

  border: none;

  border-top: 1px solid #e5e7eb;

}



.stats-card {

  margin: 0.5rem 1rem 0rem 1rem;

  padding: 1rem;

  background: #fff;

  border-radius: 0.75rem;

  box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}



.stats-bilan {

  padding: 0;

}



.stats-bilan thead th {

  padding-top: 0.3em;

  padding-bottom: 0.3em;

  /*font-size: 0.85em;*/

  line-height: 1.2;

}



.stats-bilan thead tr:nth-child(2) th {

  font-weight: normal;

  font-size: 0.8em;

  padding: 0.2em 0;

}



.stats-card table {

  width: 100%;

  table-layout: fixed;

}



/* Cible les colonnes 4 à 7 (Pts, Moy Pts, Ptx, Moy Ptx) */

.stats-card table th:nth-child(n+4),

.stats-card table td:nth-child(n+4) {

  text-align: center; /* recentre le contenu */

}



.stats-card h2 {

  margin: 0rem;

  font-size: 0.8rem;

  color: #374151;

}



/* Liste en flex pour alignement label / valeur */

.stats-list {

  list-style: none;

  margin: 0;

  padding: 0;

}

.stats-list li {

  display: flex;

  justify-content: space-between;

  padding: 0.5rem 0;

  border-bottom: 1px solid #f1f5f9;

}

.stats-list li:last-child {

  border-bottom: none;

}



.stat-label {

  color: #4b5563;

}

.stat-value {

  font-weight: 600;

  color: #1f2937;

}



.session-actions {

  display: flex;

  align-items: center;

  gap: 0.5rem;

}

.btn-icon {

  background: none;

  border: none;

  font-size: 1.5rem;

  cursor: pointer;

  color: #475569;

}

.btn-icon:hover {

  color: #f97316;

}



.bilan-container {

  width: 100%;

  max-width: 600px;

  margin-left: auto;

  margin-right: auto;

  /*margin: 1rem auto;*/

}



.bilan-container table {

  width: 100%;

  border-collapse: separate;

  border-spacing: 0;

  border: 1px solid #e5e7eb;

  font-size: 0.7rem;

}



.bilan-container thead th {

  padding: 0.5rem;

  background: #f1f5f9;

  text-align: center;

  border-bottom: 1px solid #e5e7eb;

}



.bilan-container tbody td {

  padding: 0.5rem;

  text-align: center;

  border: none;

}



.bilan-container td:first-child {

text-align:center;

}



.bilan-container td:nth-child(2) {

  text-align: left;

}



.moy-pts,

.moy-ptx {

  background-color: #fef3c7; /* jaune pâle */

  font-weight: bold;

  color: #92400e; /* brun/orangé foncé */

  border-left: 1px solid #fcd34d;

  border-right: 1px solid #fcd34d;

}



.stats-bilan {

  /*margin-top: 2rem;*/

}



h2.page-subtitle {

  margin-bottom: 0rem;

  font-size: 1.1rem;

  text-align: center;

}



th.sortable.asc::after  { content: " ↑"; font-size: 0.9em; }

th.sortable.desc::after { content: " ↓"; font-size: 0.9em; }



.btn-podium {

  color: #475569;       /* même couleur que les icônes normales */

  padding-right: 0.5rem;

  padding-bottom: 0.2rem;

}



.btn-podium:hover {

  color: #f97316;       /* ou votre couleur d’accent */

}



.btn-vide {

  padding-left: 0.5rem;

}



.non-classable {

  color: #888;

  font-style: italic;

}



.classement-explication {

  padding: 0.6em 0em 0em 0em;

  margin-top: 1.5em;

  background: #fff;

  border-radius: 1em;

  /*box-shadow: 0 2px 6px rgba(0,0,0,0.05);*/

  font-size: 0.7em;

  line-height: 1.6;

}



.classement-explication h2.section-title {

  margin-bottom: 0.75em;

  font-size: 1.2em;

  border-bottom: 1px solid #ddd;

  padding-bottom: 0.3em;

}



tr.non-classable td {

  font-style: italic;

  opacity: 0.8;

}

.tab-switch {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 1rem 1rem 1rem;
  background: #f1f2f6;
  z-index: 10;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  position: sticky;
  top: 3.3rem; /* hauteur approximative du titre h1 */
  /*border-bottom: 1px solid #e5e7eb;*/
}

.tab-btn {
  flex: 1;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 0.5rem;
  background: #e2e8f0;
  color: #1f2937;
  cursor: pointer;
}

.tab-btn.active {
  background: #f97316;
  color: #fff;
}

.tab-content.hidden {
  display: none;
}


/* A VIRER AU BESOIN */
/* ---- CALENDRIER ---- */
.calendar{
  display:grid;
  grid-template-columns: repeat(7,1fr);
  gap:0.5rem;
  padding:0 1rem 1rem;
}

.cal-header{
  text-align:center;
  font-weight:600;
  color:#374151;
  font-size:0.8rem;
}

.cal-cell{
  position:relative;
  background:#fff;
  border-radius:0.75rem;
  box-shadow:0 2px 4px rgba(0,0,0,0.05);
  min-height:4.2rem;
  padding:0.4rem;
  cursor:default;
  transition:box-shadow .15s;
}

.cal-cell.has-session{ cursor:pointer; }
.cal-cell.has-session:hover{ box-shadow:0 3px 6px rgba(0,0,0,0.1); }

.cal-cell.today{ outline:2px solid #f97316; outline-offset:-2px; }

.cal-cell.out-month{ opacity:.35; }

.day-number{
  font-size:.85rem;
  font-weight:500;
  color:#1f2937;
}

.badge{
  position:absolute;
  top:.35rem;
  right:.4rem;
  background:#f97316;
  color:#fff;
  font-size:.65rem;
  font-weight:600;
  padding:0 .35rem;
  border-radius:999px;
}

.session-popover{
  display:none;
  position:absolute;
  z-index:20;
  top:2.3rem; left:50%;
  transform:translateX(-50%);
  min-width:11rem;
  background:#fff;
  border-radius:.5rem;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  padding:.5rem;
}

.session-popover.visible{ display:block; }

.session-link{
  display:block;
  padding:.3rem .2rem;
  font-size:.8rem;
  text-decoration:none;
  color:#1f2937;
  border-radius:.35rem;
}

.session-link:hover{ background:#f1f5f9; }

@media (hover:none){                /* meilleur tactile */
  .session-popover{ left:auto; right:0; transform:none; }
}

#btn-create:not(:disabled) {
  color: #f97316;
}

.btn-new-session {
  color: #f97316;
}

/* Tireurs non membres grisés */
.checkbox-label.non-membre {
  color: #9ca3af;          /* gris */
  opacity: 0.65;           /* léger affaiblissement */
}

.checkbox-label.non-membre input[type="checkbox"] {
  accent-color: #9ca3af;   /* si navigateurs compatibles (Chrome, Edge, Firefox) */
}

/* Au survol : garder un feedback visuel */
.checkbox-label.non-membre:hover {
  opacity: 0.85;
}

.chart-controls { display:flex; gap:1.5rem; flex-wrap:wrap; align-items:flex-start; margin-bottom:1rem; }
.chart-controls select[multiple] { min-width:200px; }
.control-block { display:flex; flex-direction:column; gap:.4rem; }
.charts-wrapper { display:flex; flex-direction:column; gap:2rem; }
@media (min-width:1000px){ .charts-wrapper { flex-direction:row; } .chart-box { flex:1; } }
.chart-box { position:relative; background:#fff; border:1px solid #ccc; padding:.5rem .75rem 1.2rem; border-radius:6px; overflow:hidden; }
.chart-title { text-align:center; font-size:.8rem; color:#555; margin-top:.4rem; }
.legend { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; font-size:.75rem; }
.legend-item { display:flex; align-items:center; gap:.3rem; padding:.2rem .4rem; border:1px solid #ddd; border-radius:4px; background:#fafafa; }
.legend-swatch { width:14px; height:14px; border-radius:3px; border:1px solid #3333; }
canvas { max-width:100%; height:auto; }

/* --- Bouton “+ Nouvelle session” en rond orange -------------------- */
.btn-new-session {
  /* ‑ Réinitialise celles héritées de .btn-icon */
  color: #fff;                 /* le + sera blanc */
  width: 48px;                 /* diamètre du bouton */
  height: 48px;
  border-radius: 50%;          /* rond parfait */
  background: #f97316;         /* orange de la charte */
  display: flex;               /* centre l’icône */
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgb(0 0 0 / .15);
  transition: background .15s, box-shadow .15s;
}

.btn-new-session:hover {
  background: #fb923c;         /* orange un peu plus clair */
  box-shadow: 0 4px 8px rgb(0 0 0 / .18);
}

/* L’icône “plus” : traits blancs, pas de remplissage */
.btn-new-session svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;        /* hérite du blanc défini plus haut */
  stroke-width: 2.5;
  fill: none;                  /* pas de remplissage */
}

.btn-icon.btn-add {
  color: #f97316;           /* orange principal */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;/* cercle cliquable régulier */
  border-radius: 999px;
}

.btn-icon.btn-add:hover   { color:#fb923c; }
.btn-icon.btn-add:active  { color:#ea580c; }

.btn-icon.btn-add {
  color: #f97316;             /* orange thème */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;  /* cercle cliquable régulier */
  border-radius: 999px;
}

.btn-icon.btn-add:hover  { color:#fb923c; }
.btn-icon.btn-add:active { color:#ea580c; }

.toggle-group .active {
  color: #f97316;
  font-weight: bold; /* optionnel pour mettre en évidence */
}

.tab-switch {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 1rem 0.5rem 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.tab-btn {
  flex: 1;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 0.5rem;
  background: #e2e8f0;
  color: #1f2937;
  cursor: pointer;
}

.tab-btn.active {
  background: #f97316;
  color: #fff;
}

/* Médaille devant le nom des 3 premiers */
.medal {
  display: inline-flex;
  vertical-align: middle;
  margin-right: .4rem;
}
.medal svg {
  width: 16px;
  height: 16px;
}