html {
  font-family: "helvetica neue", helvetica, arial, sans-serif;
}

body{
 background: #67BE4B; /* initial : #67BE4B ; testé mediumaquamarine */
 margin: 10px;
}

/* Pour conteneur sans marge et sans padding */
.sansmarge {
	padding: 0px;
	margin: 0px;
}

/* Pour centrer */
.centrer {
	text-align: center;
}

/* Texte à gauche */
.agauche {
	text-align: left;
}

/* entête de colonne */
.entete-colonne,
.entete-colonne-avec-sepinf {
	font-weight: bold;
	padding-bottom: 5px;
	margin: 0px 0px 5px 0px;
}
.entete-colonne-avec-sepinf {
	border-bottom: 1px solid #ccc;
}

/* sous-entête au sein d'une colonne */
.sous-entete-colonne {
	font-weight: 550;
	border-top: 1px solid #ccc;
	padding-top: 5px;
	margin-bottom: 0px;
}

/* Mise en évidence de texte ; chaque nom de classe correspond à un niveau de message dans l'objet Attention */
p.msgalerte {
	color: red;
	font-style: bold;
}
p.msgerreur {
	color: red;
}
p.msgfinal {
	color: green;
}
p.msginfo {
	color: currentcolor;
}
p.msgwarning {
	color: yellow;
	font-style: italic;
}

/* Encadrer un texte */
.encadrer_texte {
    width: fit-content;
    border: 2px solid red;
    background-color: #ff8040;
    color: blue;
    padding: 10px;
    margin: auto;
    text-align: center;
}

/* Personnalisation bouton */
.bouton,
.bouton-demih {
  border: 0;
  line-height: 2.5;
  margin: 10px 5px;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  background-color: rgba(220, 0, 0, 1);
  background-image: linear-gradient(
    to top left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0)
  );
  box-shadow:
    inset 2px 2px 3px rgba(255, 255, 255, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

.bouton-demih {
	line-height: 1.5;
}

.bouton:hover,
.bouton-demih:hover {
  background-color: rgba(255, 0, 0, 1);
}

.bouton:active,
.boton-demih:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

/* Pour mettre à la suite horizontalement, verticalement */
.ctnr-horizontal {
	display: flex;
	flex-direction: row;
}
.ctnr-vertical {
	display: flex;
	flex-direction: column;
}
/* Item flex occupant toute la place restante */
.ctnr-flex-item-autre {
	flex: 1;                  /* s'étend pour occuper la place disponible */
}
/* Item flex ne s'étendant pas */
.ctnr-flex-item-dernier {
	flex-grow: 0;             /* ne s'étend pas */
}
/* Pour centrer le contenu */
.ctnr-centre {
	display: flex;
	justify-content: center;  /* centre horizontalement */
	align-items: center;      /* centre verticalement (si hauteur définie) */
	height: 200px;            /* hauteur optionnelle pour le centrage vertical */
	text-align:center;        /* centre le texte à l'intérieur */
}

/* Pour encadrer */
.ctnr-encadre {
	border: 2px solid #4A90E2;  /* couleur et épaisseur du cadre */
	padding: 1rem;              /* espace inétrieur */
	margin: 1rem 0;             /* espace extérieur */
	border-radius: 8px;         /* coins arrondis */
}

/* Pour une présentation 2 colonnes ou 1 colonne selon largeur écran */
.conteneur-flex {
	display: flex;
	flex-direction: row;
}
@media (max-width: 800px) {
	.conteneur-flex {
		flex-direction: column;
	}
}

/* Mise en forme de la barre de navigation */

/* Source : https://verpex.com/blog/website-tips/how-to-create-a-responsive-hamburger-menu-using-css */
.barnav {
  background: teal;
}
.barnav-item1 {
  background: gold;
}
.barnav-items {
  background: crimson;
}
	  
nav.barnav {
  position: static;
  display: flex;
  padding: 0;
}
ul.barnav {
  padding:0;
  display: flex;
  list-style:none;
}
a.barnav-item1, a.barnav-items {
  margin: 0;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  font-family: sans-serif;
}
a.barnav-item1:hover, a.barnav-items:hover {
  text-decoration: underline;
}

input.barnav {
  width: 40px;
  aspect-ratio: 1;
  display: none;
  overflow: hidden;
  margin:10px 20px 10px auto;
  box-sizing: border-box;
  
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
}
input.barnav:before,
input.barnav:after {
  content:"";
  grid-area:1/1;
  transition:.3s;
}
input.barnav:before {
  background:
    radial-gradient(closest-side at 12.5% 25%,#fff 96%,#0000) 0 0/80% 40%,
    linear-gradient(#fff 50%,#0000 0) top/80% 40% repeat-y;
}
input.barnav:after {
  padding: 10%;
  background: 
    radial-gradient(closest-side at 50% 12.5%,#fff 96%,#0000) top /20% 80% repeat-y,
    radial-gradient(closest-side at 12.5% 50%,#fff 96%,#0000) left/80% 20% repeat-x,
    conic-gradient(from 90deg at 33% 33%, #0000 90deg, #fff 0)
     100% 100%/60% 60% padding-box content-box;
  transform: translate(-100%) translateZ(0) rotate(45deg);
  opacity:0;
}
input.barnav:checked:before {
  transform: translate(100%);
  opacity:0;
}
input.barnav:checked:after {
  transform: translate(0) translateZ(0) rotate(45deg);
  opacity:1;
}


@media (max-width:800px) {
  ul.barnav {
    position: fixed;
    top: 0;
    left: 0;
    background: inherit;
    flex-direction: column;
    /*inset: 0 0 0;*/
    padding: 40px;
    margin: 0;
    align-items: center;
    justify-content: center;
    gap: 30px;
    transform: translate(-100%);
    opacity: 0;
    transition: .3s;
  }
  input.barnav {
    display: grid;
    z-index: 3;
  }
  input.barnav:checked + ul {
    transform: translate(0);
    opacity: 1;
  }
}

/* Edition concours */
.col1caracteristiques {
	min-width: 240px;
}

/* Inscription archer */
	/* Bloc inscription en mode responsive : tout à gauche si grand écran, centré si petit écran */
	.bloc-inscrire {
	  text-align: left;
	  margin-top: 10px;
	  margin-bottom: 0px;
	  margin-right: 0px;
	  margin-left: 0px;
	}
	@media (max-width: 768px) {
	  .bloc-inscrire {
	    text-align: center;
	  }
	}
	
	/* Conteneur pour créer un défilement horizontal sur la partie inscrits */
	.conteneur-defilementh {
	  display: flex;
	  flex-direction: column;
	  flex-wrap: nowrap; /* Empêche le retour à la ligne */
	  overflow-x: auto;  /* Active le scrolling horizontal */
	  width: 100%;       /* Largeur du conteneur */
	  -webkit-overflow-scrolling: touch; /* Pour un scrolling fluide sur mobile */
	}
	
	/* Conteneurs pour créer une rangée partie inscription ou inscrit */
    .conteneur-inscription,
    .conteneur-inscrits {
      display: inline-flex;
      flex-wrap: nowrap;
      gap: 0px; /* Espacement entre les colonnes */
      margin: 0px 0px;
      border: 2px solid darkolivegreen;
      border-collapse: collapse;
    }

    /* Colonnes */
    .colonne-inscription,
    .colonne-inscription-depart-impair,
    .colonne-inscrits,
    .colonne-inscrits-col1,
    .colonne-inscription-padding,
    .colonne-inscrits-padding {
      /*flex: 1; /* Chaque colonne prend un espace égal */
      box-sizing: border-box;
      min-width: 250px; /* Largeur pour chaque colonne */
      max-width: 250px; /* Largeur pour chaque colonne */
      padding: 10px;
      /*background-color: #f0f0f0;*/
      border: 1px solid #ccc;
      border-collapse: collapse;
      margin: 0px;
      text-align: center;
    }
    .colonne-inscrits-col1 {
      display: flex;
    }
    .colonne-inscrits-col1-archer {
      text-align: left;
      padding-left: 2px;
    }
    .colonne-inscription-padding,
    .colonne-inscrits-padding {
      border: 0px;
    }
    
    /* Couleur fonds alternée pour les colonnes inscriptions 
    .bloc-inscrire > .colonne-inscription:nth-child(odd) {
      background: darkseagreen;
    } */
    
    /* Pour afficher à gauche sur grand écran et au centre sur petit */
    .ajuster-responsive {
      text-align: left;
    }

    /* Réorganisation en une seule colonne sur petits écrans */
    @media (max-width: 768px) {
      .conteneur-inscription {
        flex-direction: column;
      }
      .colonne-inscription {
        margin: auto;
      }
      .colonne-inscription-depart-impair {
        background: darkseagreen;
        margin: auto;
      }
      .colonne-inscription-padding {
        min-width: 0px;
        max-width: 0px;
      }
      .ajuster-responsive {
        text-align: center;
      }
    }
    
    /* input select choix archer */
    .select-archer {
	  width: 100%;
	  /*max-width: 300px;*/
	  padding: 0.5em 2em 0.5em 0.5em;
	  border: 2px solid #4A90E2;
  	  border-radius: 4px;
	}
    
/* Styles pour la page liste des concours */
/*
.pagelst {
	width: 100%;
}
*/
button.pagelst-inscrire {
	width: 100%;
}
table.pagelst {
	table-layout: fixed;
  	/*width: 100%;*/
  	border-collapse: collapse;
  	border: 3px solid purple;	
}
td.pagelst {
	border-left: 1px solid;
	border-right: 1px solid;
	padding-left: 10px;
	padding-right: 10px;
}
td.pagelst-centre {
	border-left: 1px solid;
	border-right: 1px solid;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}
th.pagelst {
	border: 1px solid;
	height: 50px;
	padding-left: 10px;
	padding-right: 10px;
}
tr.pagelst-separateur {
	border-bottom: 1px solid #ddd;
}

/* Styles pour la page de connexion */

.pagecnx {
 width:320px;
 margin:0 auto;
 margin-top:10%;
}
/* Bordered form */
form.pagecnx {
 width:100%;
 padding: 10px;
 border: 1px solid #f1f1f1;
 background: #fff;
 box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
h1.pagecnx {
 width: 70%;
 margin: 0 auto;
 padding-bottom: 10px;
 text-align: center;
}

/* Full-width inputs */
input[type=text].pagecnx, input[type=password].pagecnx {
 width: 100%;
 padding: 12px 20px;
 margin: 8px 0;
 display: inline-block;
 border: 1px solid #ccc;
 box-sizing: border-box;
}

/* Set a style for all buttons */
input[type=submit].pagecnx {
 background-color: #53af57;
 color: white;
 padding: 14px 20px;
 margin: 8px 0;
 border: none;
 cursor: pointer;
 width: 100%;
}
input[type=submit]:hover.pagecnx {
 background-color: white;
 color: #53af57;
 border: 1px solid #53af57;
}