:root {
    --fondPage: #eef2ef;
    --fondCarte: #ffffff;
    --texte: #1d2b25;
    --texteSecondaire: #6c7b73;
    --bordure: #dbe3dd;
 
    --vert: #1f6b45;
    --vertSurvol: #175636;
    --vertPale: #eaf4ee;
    --vertBordure: #bcdcc8;
 
    --rouge: #b23b30;
    --rougePale: #fbeeec;
    --rougeBordure: #eec7c1;
 
    --jauneVolant: #e2a72c;
    --jaunePale: #fdf3df;
 
    --bleuJoueur: #2f6ea8;
    --pruneJoueuse: #9b4a7d;
 
    --rayon: 14px;
    --ombre: 0 2px 10px rgba(20, 45, 32, .08);

    --bleuPale: #eaf0f7;
    --bleuBordure: #c3d5e8;
    --prunePale: #f7ecf3;
    --pruneBordure: #e4c6da;

    --bleuFond: #d7e5f3;
    --bleuFondBordure: #a9c6e2;
    --pruneFond: #f0dced;
    --pruneFondBordure: #ddb3cf;

    --ardoise: #44525c;
    --ardoisePale: #dde5ea;
    --ardoiseBordure: #ccd6dd;
}
 
* {
    box-sizing: border-box;
}
 
body {
    font-family: system-ui, "Segoe UI", sans-serif;
    background-color: var(--fondPage);
    color: var(--texte);
    margin: 0;
    padding: 28px 16px 56px;
    line-height: 1.45;
}
 
h1 {
    text-align: center;
    margin: 0 0 28px;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
 
/* Chaque champ de saisie et chaque liste déroulante partage la même
   apparence, sur les deux pages. */
input[type="text"],
input[type="search"],
select {
    font: inherit;
    color: var(--texte);
    background-color: #fff;
    border: solid 1px var(--bordure);
    border-radius: 10px;
    padding: 9px 12px;
}
 
input[type="text"]:focus,
input[type="search"]:focus,
select:focus {
    outline: none;
    border-color: var(--vert);
    box-shadow: 0 0 0 3px rgba(31, 107, 69, .18);
}

.barreRecherche {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 18px;
}

.messageListes {
    min-height: 1.3em;
    margin: 0 0 8px;
    padding: 4px 10px;
    font-size: .9rem;
    color: var(--vert);
    text-align: center;
    background-color: var(--vertPale);
    border: solid 1px var(--vertBordure);
    border-radius: 8px;
}
.messageListes:empty {
    background-color: transparent;
    border-color: transparent;
}

#rechercheParticipant {
    width: 100%;
    max-width: 320px;
}

.nom mark {
    background-color: #ffd873;
    color: inherit;
    border-radius: 4px;
    padding: 0 2px;
}
/* Les trois boutons d'action de l'application ont le même traitement. */
.btnAjoutPersonne,
.btnFormerEquipes,
.btnLancerTournoi {
    font: inherit;
    font-weight: 600;
    color: #fff;
    background-color: var(--vert);
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color .15s;
}
 
.btnAjoutPersonne:hover,
.btnFormerEquipes:hover,
.btnLancerTournoi:hover {
    background-color: var(--vertSurvol);
}
 
.btnAjoutPersonne:focus-visible,
.btnFormerEquipes:focus-visible,
.btnLancerTournoi:focus-visible,
.btnRetourListes:focus-visible,
.btnVictoire:focus-visible,
.icone:focus-visible {
    outline: solid 3px rgba(31, 107, 69, .45);
    outline-offset: 2px;
}
 
 
/* ============================ Page d'accueil ============================ */
 
/* Les deux blocs de réglage tiennent côte à côte s'ils sont enveloppés dans
   un div .barreConfiguration ; sinon ils s'empilent, la mise en forme des
   cartes reste la même. */
.barreConfiguration {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1150px;
    margin: 0 auto 24px;
}
 
.barreConfiguration .blocAjoutPersonne {
    flex: 2 1 380px;
    margin: 0;
}
 
.barreConfiguration .blocSelectionFormat {
    flex: 1 1 260px;
    margin: 0;
}
 
.blocAjoutPersonne,
.blocSelectionFormat {
    max-width: 1150px;
    margin: 0 auto 20px;
    background-color: var(--fondCarte);
    border: solid 1px var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 18px 22px 20px;
}
 
.blocAjoutPersonne h3,
.blocSelectionFormat h3 {
    margin: 0 0 14px;
    font-size: 1.05rem;
    font-weight: 600;
}
 
/* Le message de retour du serveur apparaît et disparaît. On réserve sa
   hauteur pour que le formulaire ne saute pas d'une ligne à chaque ajout. */
.blocAjoutPersonne .message {
    min-height: 1.3em;
    margin: 0 0 10px;
    font-size: .9rem;
    color: var(--vert);
}
 
.blocChoixDuGenre {
    margin-bottom: 12px;
}
 
#choixDuGenre,
#formatTournoi {
    min-width: 220px;
}
 
.formAjouterPersonne {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
 
.formAjouterPersonne .nouvellePersonne {
    flex: 1 1 260px;
    max-width: 360px;
}
 
 
/* ================== Réglages du format « par équipes » ================== */
 
.blocParametres {
    max-width: 1150px;
    margin: 0 auto;
}
 
.blocTirage {
    background-color: var(--fondCarte);
    border: solid 1px var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    margin: 0;
    padding: 22px 24px 24px;
    width: auto;
}
 
.blocListeParticipants {
    display: flex;
}
 
.blocJoueurs,
.blocJoueuses,
.blocParticipantsAbsents {
    width: 33.33%;
    padding: 0 18px;
}
 
.blocJoueurs,
.blocJoueuses {
    border-right: solid 1px var(--bordure);
}
 
.blocJoueurs {
    padding-left: 0;
}
 
.blocParticipantsAbsents {
    padding-right: 0;
}
 
.blocListeParticipants h5 {
    margin: 0 0 12px;
    padding-bottom: 8px;
    font-size: .95rem;
    font-weight: 600;
    text-align: center;
    border-bottom: solid 2px var(--vert);
}
 
.blocParticipantsAbsents h5 {
    border-bottom-color: var(--rouge);
    color: var(--texteSecondaire);
}
 
/* Une liste peut contenir beaucoup de monde. On borne sa hauteur et le
   défilement se fait dans la colonne, la page ne s'allonge pas. */
.listeJoueurs,
.listeJoueuses,
.listeAbsents {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 58vh;
    overflow-y: auto;
    padding-right: 4px;
}
 
 
/* ============================== Vignettes ============================== */
 
.blocVignette {
    display: flex;
    align-items: center;
}
 
.vignette {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 46px;
    width: auto;
    height: auto;
    margin-top: 0;
    padding: 6px 12px;
    background-color: var(--bleuFond);
    border: solid 1px var(--bleuFondBordure);
    border-left: solid 5px var(--bleuJoueur);
    border-radius: 12px;
}
 
.vignette-femme {
    background-color: var(--pruneFond);
    border-color: var(--pruneFondBordure);
    border-left-color: var(--pruneJoueuse);
}
 
.listeAbsents .vignette {
    background-color: var(--bleuPale);
    border-color: var(--bleuBordure);
    border-left-width: 5px;
    border-left-color: var(--bleuJoueur);
}

.listeAbsents .vignette-femme {
    background-color: var(--prunePale);
    border-color: var(--pruneBordure);
    border-left-color: var(--pruneJoueuse);
}
 
.nom {
    flex: 1;
    width: auto;
    min-width: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
 
.numTeteDeSerie {
    padding: 4px 8px;
    font-size: .85rem;
    font-weight: 600;
    color: #8a6410;
    background-color: var(--jaunePale);
    border-color: var(--jauneVolant);
    border-radius: 8px;
}
 
.icone {
    flex: none;
    cursor: pointer;
    margin-left: 8px;
    padding: 4px;
    border-radius: 8px;
    transition: background-color .15s;
}
 
.mettreDeCote {
    color: var(--rouge);
}
 
.mettreDeCote:hover {
    background-color: var(--rougePale);
}
 
.ajouterAuxParticipants {
    color: var(--vert);
}
 
.ajouterAuxParticipants:hover {
    background-color: var(--vertPale);
}

.supprimerParticipant {
    color: var(--texteSecondaire);
}

.supprimerParticipant:hover {
    color: var(--rouge);
    background-color: var(--rougePale);
}
.vignette .supprimerParticipant {
    margin-left: 0;
}
/* ========================= Formation des équipes ========================= */
 
.formationDesEquipes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: solid 1px var(--bordure);
}
 
.formationDesEquipes h5 {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    text-align: left;
}
 
.blocEquipes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    width: auto;
    padding: 0;
}
 
.colonneEquipe {
    background-color: var(--fondCarte);
    border: solid 1px var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 0 16px 16px;
}
 
.colonneEquipe h5 {
    margin: 0 0 14px;
    padding: 14px 0 10px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    border-bottom: solid 2px var(--vert);
}
 
.sousListeFemmes,
.sousListeHommes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
 
.sousListeFemmes {
    border-bottom: dashed 1px var(--bordure);
    padding-bottom: 10px;
    margin-bottom: 10px;
}
 
/* Une équipe sans joueuse n'affiche pas de séparateur dans le vide. */
.sousListeFemmes:empty {
    display: none;
    border-bottom: none;
    margin: 0;
    padding: 0;
}
 
/* Dans les équipes, la tête de série est un texte figé et non une liste
   déroulante. On lui donne l'aspect d'une pastille. */
.colonneEquipe .blocTeteDeSerie {
    flex: none;
    padding: 2px 9px;
    font-size: .75rem;
    font-weight: 700;
    color: #8a6410;
    background-color: var(--jaunePale);
    border: solid 1px var(--jauneVolant);
    border-radius: 999px;
}
 
.btnLancerTournoi {
    display: block;
    margin: 28px auto 0;
    padding: 14px 38px;
    font-size: 1.05rem;
}

.btnRetourListes {
    display: block;
    margin: 22px auto 0;
    font: inherit;
    font-weight: 600;
    color: var(--vert);
    background-color: #fff;
    border: solid 1px var(--bordure);
    border-radius: 10px;
    padding: 9px 18px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.btnRetourListes:hover {
    background-color: var(--vertPale);
    border-color: var(--vert);
}

/* ===================== Composition des équipes (survol) ===================== */

.blocCompositions {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto 24px;
}

.etiquetteCompositions {
    color: #fff;
    background-color: var(--ardoise);
    border: solid 1px var(--ardoise);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 12px 20px;
    font-weight: 600;
    letter-spacing: .02em;
    text-align: center;
    cursor: default;
    transition: background-color .15s, border-color .15s, color .15s;
}

.etiquetteCompositions:hover {
    color: #fff;
    background-color: #5a6b77;
    border-color: #5a6b77;
}

/* La liste est repliée au repos. On anime la hauteur maximale plutôt que la
   hauteur réelle, qui n'est pas connue tant que le contenu n'est pas affiché. */
.listeCompositions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .3s, opacity .3s, margin-top .3s;
}

/* Le second sélecteur garde la liste ouverte quand la souris quitte
   l'étiquette pour descendre dans les équipes. */
.etiquetteCompositions:hover + .listeCompositions,
.listeCompositions:hover {
    max-height: 600px;
    opacity: 1;
    margin-top: 16px;
}

.compositionEquipe {
    flex: 1 1 200px;
    background-color: var(--ardoisePale);
    border: solid 1px var(--ardoiseBordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 0 16px 14px;
}

.compositionEquipe h4 {
    margin: 0 0 10px;
    padding: 12px 0 8px;
    font-size: .95rem;
    color: var(--ardoise);
    text-align: center;
    border-bottom: solid 2px var(--ardoiseBordure);
}

.compositionEquipe ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.compositionEquipe li {
    padding: 4px 0 4px 10px;
    font-size: .9rem;
    background-color: #fff;
    border-left: solid 4px var(--bleuJoueur);
    border-radius: 0 8px 8px 0;
    margin-bottom: 4px;
}

.compositionEquipe .nomJoueuse {
    border-left-color: var(--pruneJoueuse);
}

/* ===================== Page du tournoi (rencontres) ===================== */
 
.blocRencontres {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}
 
.rencontre {
    flex: 1;
    min-width: 420px;
    max-width: 640px;
    background-color: var(--fondCarte);
    border: solid 1px var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 16px 24px 24px;
}
 
.rencontre h3 {
    margin: 8px 0 16px;
    padding-bottom: 12px;
    font-size: 1.1rem;
    text-align: center;
    border-bottom: solid 2px var(--vert);
}
 
.ligneMatch {
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding: 6px 10px;
    background-color: #fafbfa;
    border: solid 1px var(--bordure);
    border-radius: 12px;
}
 
.typeDeMatch {
    width: 130px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--texteSecondaire);
}
 
.camp {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    padding: 8px 12px;
    border-radius: 10px;
    transition: background-color .25s;
}
 
.camp2 {
    justify-content: flex-end;
}
 
.vs {
    padding: 0 12px;
    color: var(--texteSecondaire);
    font-style: italic;
}
 
.nomEquipe {
    font-weight: 500;
}
 
.btnVictoire {
    font: inherit;
    font-size: .85em;
    color: var(--texte);
    background-color: #fff;
    border: solid 1px var(--bordure);
    border-radius: 8px;
    padding: 5px 12px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
 
.btnVictoire:hover {
    background-color: var(--vertPale);
    border-color: var(--vert);
}
 
.camp.vainqueur {
    background-color: var(--vertPale);
}
 
.camp.vainqueur .btnVictoire {
    color: #fff;
    background-color: var(--vert);
    border-color: var(--vert);
}
 
.camp.perdant {
    background-color: var(--rougePale);
}

.camp.perdant .btnVictoire {
    color: var(--rouge);
    background-color: #fff;
    border-color: var(--rougeBordure);
    font-size: 0;
}

.camp.perdant .btnVictoire::after {
    content: "Défaite";
    font-size: .85rem;
}

.resultatRencontre {
    margin-top: 16px;
    padding: 10px;
    color: #fff;
    background-color: var(--vert);
    font-weight: 600;
    text-align: center;
    border-radius: 12px;
}

.titreTour {
    flex-basis: 100%;
    margin: 12px 0 0;
    font-size: 1.15rem;
    text-align: center;
}

/* ========================= Classement de la poule ========================= */

.blocClassement {
    flex-basis: 100%;
    max-width: 1400px;
    margin: 0 auto 28px;
}

.blocClassement h3 {
    margin: 0 0 16px;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
}

.listeClassement {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.carteClassement {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background-color: var(--fondCarte);
    border: solid 1px var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 18px 16px 16px;
}

/* La première carte est celle de l'équipe en tête. */
.carteClassement:first-child {
    background-color: var(--ardoisePale);
    border-color: var(--ardoiseBordure);
}

.positionClassement {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 6px;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--ardoise);
    border-radius: 999px;
}

.equipeClassement {
    margin-bottom: 8px;
    font-size: 1.05rem;
    font-weight: 600;
}

.detailClassement {
    font-size: .88rem;
    color: var(--texteSecondaire);
}

.chiffreClassement {
    font-weight: 700;
    color: var(--texte);
}

/* ===================== Fin de tournoi et phases finales ===================== */

.blocFinDeTournoi:empty {
    display: none;
}

.blocFinDeTournoi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: 1400px;
    margin: 28px auto 0;
}

.blocChoixPhaseFinale,
.blocDesignationManuelle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    background-color: var(--fondCarte);
    border: solid 1px var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 22px 24px;
}

.blocChoixPhaseFinale h3,
.blocDesignationManuelle h3 {
    width: 100%;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
}

.blocDesignationManuelle p {
    width: 100%;
    margin: 0;
    font-size: .92rem;
    color: var(--texteSecondaire);
    text-align: center;
}

/* Les boutons des phases finales reprennent l'aspect des boutons d'action de
   l'application. Celui des demi-finales est grisé quand il n'y a pas assez
   d'équipes pour les remplir. */
.btnPhaseFinale,
.btnFinDuTournoi,
.btnDemiFinales,
.btnFinaleSeule,
.btnValideVainqueur {
    font: inherit;
    font-weight: 600;
    color: #fff;
    background-color: var(--vert);
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    cursor: pointer;
    transition: background-color .15s;
}

.btnPhaseFinale:hover,
.btnFinDuTournoi:hover,
.btnDemiFinales:hover,
.btnFinaleSeule:hover,
.btnValideVainqueur:hover {
    background-color: var(--vertSurvol);
}

.btnDemiFinales[disabled] {
    color: var(--texteSecondaire);
    background-color: var(--bordure);
    cursor: not-allowed;
}

.btnFinDuTournoi {
    color: var(--vert);
    background-color: #fff;
    border: solid 1px var(--bordure);
}

.btnFinDuTournoi:hover {
    background-color: var(--vertPale);
    border-color: var(--vert);
}

.blocVainqueur {
    width: 100%;
    padding: 18px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--vert);
    text-align: center;
    border-radius: var(--rayon);
}

/* ===================== Tournoi terminé (lecture seule) ===================== */

/* Les points sont déjà distribués aux participants, plus aucun résultat ne doit changer.
   Les boutons gardent leur couleur de victoire ou de défaite, qui sert maintenant à lire
   le résultat, mais ne réagissent plus ni au survol ni au clic. */
   .lectureSeule .btnVictoire {
    pointer-events: none;
}

/* Le JavaScript construit les boutons de phase finale et de fin de tournoi dans ce bloc,
   et il n'y a plus rien à y proposer. */
.lectureSeule .blocFinDeTournoi {
    display: none;
}

/* Le bandeau n'a de sens qu'une fois le tournoi terminé, il reste donc masqué jusqu'à ce
   que la classe de lecture seule le révèle. */
   .bandeauTermine {
    display: none;
}

.lectureSeule .bandeauTermine {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 14px 20px;
    color: var(--texte);
    background-color: var(--jauneVolant);;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .18);
    z-index: 10;
}

.texteTermine {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.btnPodium {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--texte);
    border-radius: 10px;
    padding: 11px 26px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
    transition: background-color .15s, transform .15s;
}

.btnPodium:hover {
    background-color: #30453a;
    transform: translateY(-1px);
}

/* Le bandeau est en position fixe, donc hors du flux : sans cette réserve en bas de page,
   il recouvrirait la dernière rencontre. Le fond s'assombrit pour qu'on voie au premier
   coup d'œil qu'on est sur un tournoi clos. */
.lectureSeule {
    padding-bottom: 90px;
    background-color: #dde3df;
}

/* Les couleurs des cartes sont éteintes sans être effacées : les verts et les rouges des
   résultats restent reconnaissables, puisque c'est ce qu'on revient lire. Le bandeau reste
   en dehors et garde son jaune vif. */
   .lectureSeule .blocCompositions,
   .lectureSeule .blocRencontres,
   .lectureSeule .blocClassement {
       filter: saturate(.55);
       opacity: .85;
   }

/* ============================ Petits écrans ============================ */
 
@media (max-width: 900px) {
    body {
        padding: 20px 12px 40px;
    }
 
    .blocListeParticipants {
        flex-direction: column;
    }
 
    .blocJoueurs,
    .blocJoueuses,
    .blocParticipantsAbsents {
        width: 100%;
        padding: 0 0 16px;
        margin-bottom: 16px;
        border-right: none;
        border-bottom: solid 1px var(--bordure);
    }
 
    .blocParticipantsAbsents {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none;
    }
 
    .listeJoueurs,
    .listeJoueuses,
    .listeAbsents {
        max-height: none;
        overflow-y: visible;
    }
 
    .rencontre {
        min-width: 0;
    }
 
    .ligneMatch {
        flex-wrap: wrap;
    }
}
 
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}