Merge remote-tracking branch 'origin/main'

- Script V30__add_ancienne_categorie_and_sexe.sql pour ajouter les champs en DB.

- Mise à jour des colonnes telephone, ancienne_categorie et sexe.

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "java.compile.nullAnalysis.mode": "automatic"
+}

as-talange-common/pom.xml

@@ -5,7 +5,7 @@
     <parent>
         <artifactId>as-talange-parent</artifactId>
         <groupId>com.astalange</groupId>
-        <version>1.0-SNAPSHOT</version>
+        <version>1.4-SNAPSHOT</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
 

as-talange-core/pom.xml

@@ -5,7 +5,7 @@
     <parent>
         <artifactId>as-talange-parent</artifactId>
         <groupId>com.astalange</groupId>
-        <version>1.0-SNAPSHOT</version>
+        <version>1.4-SNAPSHOT</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
 

as-talange-core/src/main/java/com/astalange/core/entity/Adherent.java

@@ -35,7 +35,7 @@ public class Adherent {
     @Column(nullable = false, length = 100)
     private String email;
 
-    @Column(length = 20)
+    @Column(nullable = false, length = 20)
     private String telephone;
 
     @Column(name = "representant_legal", length = 150)
@@ -47,6 +47,9 @@ public class Adherent {
     @Column(name = "ancien_club", length = 150)
     private String ancienClub;
 
+    @Column(name = "ancienne_categorie", length = 50)
+    private String ancienneCategorie;
+
     private boolean residentTalange = true;
 
     @Column(nullable = false, length = 10)
@@ -99,6 +102,9 @@ public class Adherent {
     public String getAncienClub() { return ancienClub; }
     public void setAncienClub(String ancienClub) { this.ancienClub = ancienClub; }
 
+    public String getAncienneCategorie() { return ancienneCategorie; }
+    public void setAncienneCategorie(String ancienneCategorie) { this.ancienneCategorie = ancienneCategorie; }
+
     public boolean isResidentTalange() { return residentTalange; }
     public void setResidentTalange(boolean residentTalange) { this.residentTalange = residentTalange; }
 

as-talange-core/src/main/java/com/astalange/core/entity/Categorie.java

@@ -18,6 +18,9 @@ public class Categorie {
     @Column(nullable = false, length = 20)
     private String nom;
 
+    @Column(nullable = false, length = 10)
+    private String sexe = "MASCULIN";
+
     @Column(name = "annee_min")
     private Integer anneeMin;
 
@@ -45,6 +48,9 @@ public class Categorie {
     public String getNom() { return nom; }
     public void setNom(String nom) { this.nom = nom; }
 
+    public String getSexe() { return sexe; }
+    public void setSexe(String sexe) { this.sexe = sexe; }
+
     public Integer getAnneeMin() { return anneeMin; }
     public void setAnneeMin(Integer anneeMin) { this.anneeMin = anneeMin; }
 

as-talange-core/src/main/java/com/astalange/core/entity/Dotation.java

@@ -21,6 +21,9 @@ public class Dotation {
     @Column(length = 10)
     private String taille;
 
+    @Column(length = 50)
+    private String couleur;
+
     @Column(length = 50)
     private String flocage;
 
@@ -47,6 +50,9 @@ public class Dotation {
     public String getTaille() { return taille; }
     public void setTaille(String taille) { this.taille = taille; }
 
+    public String getCouleur() { return couleur; }
+    public void setCouleur(String couleur) { this.couleur = couleur; }
+
     public String getFlocage() { return flocage; }
     public void setFlocage(String flocage) { this.flocage = flocage; }
 

as-talange-core/src/main/java/com/astalange/core/entity/Equipement.java

@@ -20,6 +20,18 @@ public class Equipement {
     @Column(columnDefinition = "TEXT")
     private String description;
 
+    @Column(name = "gestion_sexe", nullable = false)
+    private boolean gestionSexe = false;
+
+    @Column(name = "type_public", nullable = false, length = 20)
+    private String typePublic = "TOUS"; // JOUEUR, GARDIEN, TOUS
+
+    @Column(name = "tailles_disponibles", length = 500)
+    private String taillesDisponibles;
+
+    @Column(name = "couleurs_disponibles", length = 500)
+    private String couleursDisponibles;
+
 
     @ManyToOne(optional = false, fetch = FetchType.LAZY)
     @JoinColumn(name = "saison_id", nullable = false)
@@ -39,6 +51,18 @@ public class Equipement {
     public String getDescription() { return description; }
     public void setDescription(String description) { this.description = description; }
 
+    public boolean isGestionSexe() { return gestionSexe; }
+    public void setGestionSexe(boolean gestionSexe) { this.gestionSexe = gestionSexe; }
+
+    public String getTypePublic() { return typePublic; }
+    public void setTypePublic(String typePublic) { this.typePublic = typePublic; }
+
+    public String getTaillesDisponibles() { return taillesDisponibles; }
+    public void setTaillesDisponibles(String taillesDisponibles) { this.taillesDisponibles = taillesDisponibles; }
+
+    public String getCouleursDisponibles() { return couleursDisponibles; }
+    public void setCouleursDisponibles(String couleursDisponibles) { this.couleursDisponibles = couleursDisponibles; }
+
     public Saison getSaison() { return saison; }
     public void setSaison(Saison saison) { this.saison = saison; }
 }

as-talange-core/src/main/java/com/astalange/core/entity/Paiement.java

@@ -29,6 +29,12 @@ public class Paiement {
     @Column(name = "gestionnaire")
     private String gestionnaire;
 
+    @Column(name = "numero_cheque", length = 50)
+    private String numeroCheque;
+
+    @Column(name = "commentaire", columnDefinition = "TEXT")
+    private String commentaire;
+
     // Getters and Setters
 
     public Long getId() { return id; }
@@ -48,4 +54,10 @@ public class Paiement {
 
     public String getGestionnaire() { return gestionnaire; }
     public void setGestionnaire(String gestionnaire) { this.gestionnaire = gestionnaire; }
+
+    public String getNumeroCheque() { return numeroCheque; }
+    public void setNumeroCheque(String numeroCheque) { this.numeroCheque = numeroCheque; }
+
+    public String getCommentaire() { return commentaire; }
+    public void setCommentaire(String commentaire) { this.commentaire = commentaire; }
 }

as-talange-core/src/main/java/com/astalange/core/entity/PreInscription.java

@@ -33,7 +33,7 @@ public class PreInscription {
     @Column(nullable = false, length = 150)
     private String email;
 
-    @Column(length = 20)
+    @Column(nullable = false, length = 20)
     private String telephone;
 
     @Column(name = "representant_legal", length = 150)
@@ -58,6 +58,9 @@ public class PreInscription {
     @Column(name = "ancien_club", length = 150)
     private String ancienClub;
 
+    @Column(name = "ancienne_categorie", length = 50)
+    private String ancienneCategorie = "NA";
+
     // Getters and Setters
     public Long getId() { return id; }
     public void setId(Long id) { this.id = id; }
@@ -106,4 +109,7 @@ public class PreInscription {
 
     public String getAncienClub() { return ancienClub; }
     public void setAncienClub(String ancienClub) { this.ancienClub = ancienClub; }
+
+    public String getAncienneCategorie() { return ancienneCategorie; }
+    public void setAncienneCategorie(String ancienneCategorie) { this.ancienneCategorie = ancienneCategorie; }
 }

as-talange-core/src/main/java/com/astalange/core/service/CategorieService.java

@@ -86,12 +86,21 @@ public class CategorieService {
         List<Dotation> currentDotations = licence.getDotations();
         List<Dotation> toRemove = new ArrayList<>();
 
-        // Remove dotations for equipements no longer in the category
+        // Remove dotations for equipements no longer in the category or not matching public
         for (Dotation d : currentDotations) {
             boolean found = false;
             for (CategorieEquipement ce : categorieEquipements) {
                 if (ce.getEquipement().getId().equals(d.getEquipement().getId())) {
-                    found = true;
+                    String typePublic = ce.getEquipement().getTypePublic();
+                    String typeMaillot = licence.getAdherent() != null ? licence.getAdherent().getTypeMaillot() : "JOUEUR";
+                    
+                    boolean matchPublic = "TOUS".equals(typePublic) ||
+                                          ("GARDIEN".equals(typePublic) && "GARDIEN".equals(typeMaillot)) ||
+                                          ("JOUEUR".equals(typePublic) && "JOUEUR".equals(typeMaillot));
+                    
+                    if (matchPublic) {
+                        found = true;
+                    }
                     break;
                 }
             }
@@ -103,6 +112,17 @@ public class CategorieService {
 
         // Add missing dotations
         for (CategorieEquipement ce : categorieEquipements) {
+            String typePublic = ce.getEquipement().getTypePublic();
+            String typeMaillot = licence.getAdherent() != null ? licence.getAdherent().getTypeMaillot() : "JOUEUR";
+            
+            boolean matchPublic = "TOUS".equals(typePublic) ||
+                                  ("GARDIEN".equals(typePublic) && "GARDIEN".equals(typeMaillot)) ||
+                                  ("JOUEUR".equals(typePublic) && "JOUEUR".equals(typeMaillot));
+                                  
+            if (!matchPublic) {
+                continue;
+            }
+
             boolean found = false;
             for (Dotation d : currentDotations) {
                 if (ce.getEquipement().getId().equals(d.getEquipement().getId())) {

as-talange-core/src/main/java/com/astalange/core/service/PreInscriptionService.java

@@ -46,6 +46,7 @@ public class PreInscriptionService {
         adherent.setRepresentantLegal(pre.getRepresentantLegal());
         adherent.setTypeDemande(pre.getTypeDemande());
         adherent.setAncienClub(pre.getAncienClub());
+        adherent.setAncienneCategorie(pre.getAncienneCategorie());
         // Par défaut
         adherent.setSexe("MASCULIN");
         adherent.setTypeMaillot("JOUEUR");

as-talange-core/src/main/resources/db/migration/V30__add_ancienne_categorie_and_sexe.sql

@@ -0,0 +1,10 @@
+ALTER TABLE adherent ADD COLUMN ancienne_categorie VARCHAR(50);
+ALTER TABLE pre_inscription ADD COLUMN ancienne_categorie VARCHAR(50) DEFAULT 'NA';
+
+ALTER TABLE categorie ADD COLUMN sexe VARCHAR(10) DEFAULT 'MASCULIN' NOT NULL;
+
+UPDATE adherent SET telephone = '0000000000' WHERE telephone IS NULL;
+ALTER TABLE adherent ALTER COLUMN telephone SET NOT NULL;
+
+UPDATE pre_inscription SET telephone = '0000000000' WHERE telephone IS NULL;
+ALTER TABLE pre_inscription ALTER COLUMN telephone SET NOT NULL;

as-talange-core/src/main/resources/db/migration/V31__add_equipment_options.sql

@@ -0,0 +1,5 @@
+ALTER TABLE equipement ADD COLUMN gestion_sexe BOOLEAN DEFAULT FALSE NOT NULL;
+ALTER TABLE equipement ADD COLUMN tailles_disponibles VARCHAR(500);
+ALTER TABLE equipement ADD COLUMN couleurs_disponibles VARCHAR(500);
+
+ALTER TABLE dotation ADD COLUMN couleur VARCHAR(50);

as-talange-core/src/main/resources/db/migration/V32__add_cheque_and_commentaire_to_paiement.sql

@@ -0,0 +1,2 @@
+ALTER TABLE paiement ADD COLUMN numero_cheque VARCHAR(50);
+ALTER TABLE paiement ADD COLUMN commentaire TEXT;

as-talange-core/src/main/resources/db/migration/V33__add_type_public_to_equipement.sql

@@ -0,0 +1 @@
+ALTER TABLE equipement ADD COLUMN type_public VARCHAR(20) DEFAULT 'TOUS' NOT NULL;

as-talange-web/pom.xml

@@ -5,7 +5,7 @@
     <parent>
         <artifactId>as-talange-parent</artifactId>
         <groupId>com.astalange</groupId>
-        <version>1.0-SNAPSHOT</version>
+        <version>1.4-SNAPSHOT</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
 

as-talange-web/src/main/java/com/astalange/web/controller/AdherentController.java

@@ -177,21 +177,29 @@ public class AdherentController {
             Adherent existing = adherentRepository.findById(adherent.getId()).orElse(null);
             if (existing != null) {
                 boolean dateChanged = !existing.getDateNaissance().equals(adherent.getDateNaissance());
+                boolean typeMaillotChanged = !existing.getTypeMaillot().equals(adherent.getTypeMaillot());
                 
-                if (dateChanged) {
+                if (dateChanged || typeMaillotChanged) {
                     int newBirthYear = adherent.getDateNaissance().getYear();
                     List<Licence> licences = licenceRepository.findByAdherentId(adherent.getId());
                     for (Licence licence : licences) {
-                        Saison saison = licence.getSaison();
-                        Categorie newCat = categorieRepository.findBySaison(saison).stream()
-                                .filter(c -> newBirthYear >= c.getAnneeMin() && newBirthYear <= c.getAnneeMax())
-                                .findFirst()
-                                .orElse(null);
-                        if (newCat != null) {
-                            licence.setCategorie(newCat);
-                            licence = licenceRepository.save(licence);
-                            categorieService.syncDotationsForLicence(licence);
+                        if (dateChanged) {
+                            Saison saison = licence.getSaison();
+                            Categorie newCat = categorieRepository.findBySaison(saison).stream()
+                                    .filter(c -> newBirthYear >= c.getAnneeMin() && newBirthYear <= c.getAnneeMax())
+                                    .findFirst()
+                                    .orElse(null);
+                            if (newCat != null) {
+                                licence.setCategorie(newCat);
+                                licence = licenceRepository.save(licence);
+                            }
                         }
+                        
+                        // We need to update the entity's state before syncing dotations so it reads the new typeMaillot.
+                        // We haven't updated 'existing' yet, so let's temporarily set it on the licence's adherent or wait.
+                        // Actually, 'adherent' has the new typeMaillot.
+                        licence.getAdherent().setTypeMaillot(adherent.getTypeMaillot());
+                        categorieService.syncDotationsForLicence(licence);
                     }
                 }
                 

as-talange-web/src/main/java/com/astalange/web/controller/DotationController.java

@@ -168,12 +168,14 @@ public class DotationController {
                     .orElseThrow(() -> new IllegalArgumentException("Invalid Dotation ID: " + id));
 
             String taille = request.getParameter("taille_" + id);
+            String couleur = request.getParameter("couleur_" + id);
             String numero = request.getParameter("numero_" + id);
             String flocage = request.getParameter("flocage_" + id);
             String choisiParam = request.getParameter("choisi_" + id);
             String fourniParam = request.getParameter("fourni_" + id);
 
             if (taille != null) dotation.setTaille(taille);
+            if (couleur != null) dotation.setCouleur(couleur);
             if (numero != null) dotation.setNumero(numero);
             if (flocage != null) dotation.setFlocage(flocage);
 

as-talange-web/src/main/java/com/astalange/web/controller/PaiementController.java

@@ -40,6 +40,8 @@ public class PaiementController {
             @RequestParam BigDecimal montant,
             @RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE) LocalDate datePaiement,
             @RequestParam Long modePaiementId,
+            @RequestParam(required = false) String numeroCheque,
+            @RequestParam(required = false) String commentaire,
             Principal principal) {
 
         Licence licence = licenceRepository.findById(id)
@@ -58,6 +60,8 @@ public class PaiementController {
             paiement.setModePaiement(mode);
             paiement.setMontant(montant);
             paiement.setDatePaiement(datePaiement);
+            paiement.setNumeroCheque(numeroCheque);
+            paiement.setCommentaire(commentaire);
             if (principal != null) {
                 paiement.setGestionnaire(principal.getName());
             }
@@ -82,6 +86,8 @@ public class PaiementController {
             @RequestParam BigDecimal montant,
             @RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE) LocalDate datePaiement,
             @RequestParam Long modePaiementId,
+            @RequestParam(required = false) String numeroCheque,
+            @RequestParam(required = false) String commentaire,
             @RequestParam(required = false) String redirect,
             Principal principal) {
 
@@ -106,6 +112,8 @@ public class PaiementController {
             paiement.setModePaiement(mode);
             paiement.setMontant(montant);
             paiement.setDatePaiement(datePaiement);
+            paiement.setNumeroCheque(numeroCheque);
+            paiement.setCommentaire(commentaire);
             if (principal != null) {
                 paiement.setGestionnaire(principal.getName());
             }

as-talange-web/src/main/resources/templates/adherents/form.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="UTF-8">
     <title>Nouvel Adhérent - AS Talange</title>
     <script src="https://cdn.tailwindcss.com"></script>
@@ -120,8 +121,8 @@
 
                         <!-- Téléphone -->
                         <div>
-                            <label for="telephone" class="block text-sm font-medium text-gray-700 mb-1">Téléphone</label>
-                            <input type="tel" id="telephone" th:field="*{telephone}"
+                            <label for="telephone" class="block text-sm font-medium text-gray-700 mb-1">Téléphone <span class="text-red-500">*</span></label>
+                            <input type="tel" id="telephone" th:field="*{telephone}" required
                                 class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
                                 th:classappend="${#fields.hasErrors('telephone')} ? 'border-red-500' : ''">
                             <p th:if="${#fields.hasErrors('telephone')}" th:errors="*{telephone}" class="mt-1 text-xs text-red-600"></p>
@@ -166,6 +167,29 @@
                         </div>
                     </div>
 
+                    <div id="ancienneCategorieBlock" class="grid grid-cols-1 md:grid-cols-2 gap-6 hidden-block mt-6">
+                        <div>
+                            <label for="ancienneCategorie" class="block text-sm font-medium text-gray-700 mb-1">Ancienne catégorie <span class="text-red-500">*</span></label>
+                            <select id="ancienneCategorie" th:field="*{ancienneCategorie}"
+                                class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors">
+                                <option value="NA">NA (Je ne sais plus)</option>
+                                <option value="U6">U6</option>
+                                <option value="U7">U7</option>
+                                <option value="U8">U8</option>
+                                <option value="U9">U9</option>
+                                <option value="U10">U10</option>
+                                <option value="U11">U11</option>
+                                <option value="U12">U12</option>
+                                <option value="U13">U13</option>
+                                <option value="U14">U14</option>
+                                <option value="U15">U15</option>
+                                <option value="U16">U16</option>
+                                <option value="U17">U17</option>
+                                <option value="Senior">Senior</option>
+                            </select>
+                        </div>
+                    </div>
+
                     <!-- Removed Adresse -->
 
                     <div class="pt-4 flex justify-end space-x-3 border-t border-gray-100">
@@ -255,6 +279,7 @@
                                                 <tr class="bg-gray-50 text-gray-500 uppercase font-medium">
                                                     <th class="py-2 px-3 text-left">Date</th>
                                                     <th class="py-2 px-3 text-left">Mode</th>
+                                                    <th class="py-2 px-3 text-left">Infos</th>
                                                     <th class="py-2 px-3 text-left">Géré par</th>
                                                     <th class="py-2 px-3 text-right font-medium">Montant</th>
                                                     <th class="py-2 px-3 text-right font-medium pr-4">Actions</th>
@@ -266,6 +291,14 @@
                                                     <td class="py-2 px-3 text-gray-600">
                                                         <span class="px-2 py-0.5 rounded bg-gray-100 text-gray-700 font-mono text-[10px]" th:text="${paiement.modePaiement.nom}">Chèque</span>
                                                     </td>
+                                                    <td class="py-2 px-3 text-gray-500 text-xs">
+                                                        <div th:if="${paiement.numeroCheque != null and !paiement.numeroCheque.isEmpty()}" class="text-[10px]">
+                                                            <span class="font-semibold text-gray-600">N°:</span> <span th:text="${paiement.numeroCheque}">123</span>
+                                                        </div>
+                                                        <div th:if="${paiement.commentaire != null and !paiement.commentaire.isEmpty()}" class="text-[10px] italic mt-0.5 text-gray-400 truncate max-w-[120px]" th:title="${paiement.commentaire}" th:text="${paiement.commentaire}">
+                                                            Commentaire
+                                                        </div>
+                                                    </td>
                                                     <td class="py-2 px-3 text-gray-500 text-xs italic" th:text="${paiement.gestionnaire != null ? paiement.gestionnaire : '-'}">-</td>
                                                     <td class="py-2 px-3 text-right font-semibold text-green-600" th:text="${paiement.montant + ' €'}">50.00 €</td>
                                                     <td class="py-2 px-3 text-right pr-4">
@@ -277,7 +310,9 @@
                                                                     th:data-mode-id="${paiement.modePaiement.id}"
                                                                     th:data-licence-id="${lic.id}"
                                                                     th:data-max-amount="${lic.getResteAPayer().add(paiement.montant)}"
-                                                                    onclick="openEditPaiementModal(this.getAttribute('data-paiement-id'), this.getAttribute('data-montant'), this.getAttribute('data-date'), this.getAttribute('data-mode-id'), this.getAttribute('data-licence-id'), this.getAttribute('data-max-amount'))"
+                                                                    th:data-cheque="${paiement.numeroCheque}"
+                                                                    th:data-commentaire="${paiement.commentaire}"
+                                                                    onclick="openEditPaiementModal(this.getAttribute('data-paiement-id'), this.getAttribute('data-montant'), this.getAttribute('data-date'), this.getAttribute('data-mode-id'), this.getAttribute('data-licence-id'), this.getAttribute('data-max-amount'), this.getAttribute('data-cheque'), this.getAttribute('data-commentaire'))"
                                                                     class="text-blue-600 hover:text-blue-900 bg-blue-50 hover:bg-blue-100 p-1.5 rounded transition-colors inline-flex items-center"
                                                                     title="Modifier">
                                                                 <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -331,17 +366,10 @@
                                                     </div>
                                                     <div class="text-[10px] text-gray-400 mb-2 truncate" th:title="${dot.equipement.description}" th:text="${dot.equipement.description != null and !dot.equipement.description.isEmpty() ? dot.equipement.description : 'Pas de description'}">Description</div>
                                                     <!-- Special dynamic label for equipment style -->
-                                                    <div class="mb-2" th:if="${dot.equipement.nom == 'Maillot' or dot.equipement.nom == 'Short' or dot.equipement.nom == 'Chaussettes'}">
+                                                    <div class="mb-2" th:if="${dot.equipement.gestionSexe}">
                                                         <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold bg-blue-50 text-blue-700 border border-blue-100 dotation-style-label"
                                                               th:data-equipement="${dot.equipement.nom}"
-                                                              th:text="${adherent.sexe == 'FEMININ' ? 'Modèle Femme' : 'Modèle Homme'} + ' - ' + ${adherent.typeMaillot == 'GARDIEN' ? 'Gardien' : 'Joueur'}">
-                                                            Modèle Homme - Joueur
-                                                        </span>
-                                                    </div>
-                                                    <div class="mb-2" th:if="${dot.equipement.nom == 'Survêtement'}">
-                                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold bg-indigo-50 text-indigo-700 border border-indigo-100 dotation-style-label"
-                                                              th:data-equipement="${dot.equipement.nom}"
-                                                              th:text="${adherent.sexe == 'FEMININ' ? 'Modèle Femme' : 'Modèle Homme'}">
+                                                              th:text="${adherent.sexe == 'FEMININ' ? 'Modèle Femme' : 'Modèle Homme'} + (${dot.equipement.nom == 'Maillot' or dot.equipement.nom == 'Short' or dot.equipement.nom == 'Chaussettes'} ? ' - ' + (${adherent.typeMaillot == 'GARDIEN' ? 'Gardien' : 'Joueur'}) : '')">
                                                             Modèle Homme
                                                         </span>
                                                     </div>
@@ -358,17 +386,43 @@
                                                     </div>
 
                                                     <div class="grid grid-cols-2 gap-1.5 mb-1.5">
-                                                        <div>
+                                                        <div th:if="${dot.equipement.taillesDisponibles != null and !dot.equipement.taillesDisponibles.trim().isEmpty()}">
                                                             <label class="block text-[9px] uppercase font-bold text-gray-400">Taille</label>
-                                                            <input type="text" th:name="'taille_' + ${dot.id}" th:value="${dot.taille}" placeholder="S, M, L..." 
-                                                                   class="w-full text-xs border border-gray-300 rounded px-1 py-0.5 focus:ring-1 focus:ring-blue-500 outline-none">
+                                                            <select th:name="'taille_' + ${dot.id}" class="w-full text-xs border border-gray-300 rounded px-1 py-0.5 focus:ring-1 focus:ring-blue-500 outline-none">
+                                                                <option value="">Choisir...</option>
+                                                                <option th:each="t : ${#strings.arraySplit(dot.equipement.taillesDisponibles, ',')}" 
+                                                                        th:value="${#strings.trim(t)}" 
+                                                                        th:text="${#strings.trim(t)}"
+                                                                        th:selected="${dot.taille == #strings.trim(t)}"></option>
+                                                            </select>
                                                         </div>
+                                                        <div th:if="${(dot.equipement.taillesDisponibles == null or dot.equipement.taillesDisponibles.trim().isEmpty()) and (dot.taille != null and !dot.taille.isEmpty())}">
+                                                            <label class="block text-[9px] uppercase font-bold text-gray-400">Taille</label>
+                                                            <input type="text" th:name="'taille_' + ${dot.id}" th:value="${dot.taille}" class="w-full text-xs border border-gray-300 rounded px-1 py-0.5 outline-none bg-gray-50 text-gray-500" readonly>
+                                                        </div>
+
+                                                        <div th:if="${dot.equipement.couleursDisponibles != null and !dot.equipement.couleursDisponibles.trim().isEmpty()}">
+                                                            <label class="block text-[9px] uppercase font-bold text-gray-400">Couleur</label>
+                                                            <select th:name="'couleur_' + ${dot.id}" class="w-full text-xs border border-gray-300 rounded px-1 py-0.5 focus:ring-1 focus:ring-blue-500 outline-none">
+                                                                <option value="">Choisir...</option>
+                                                                <option th:each="c : ${#strings.arraySplit(dot.equipement.couleursDisponibles, ',')}" 
+                                                                        th:value="${#strings.trim(c)}" 
+                                                                        th:text="${#strings.trim(c)}"
+                                                                        th:selected="${dot.couleur == #strings.trim(c)}"></option>
+                                                            </select>
+                                                        </div>
+                                                        <div th:if="${(dot.equipement.couleursDisponibles == null or dot.equipement.couleursDisponibles.trim().isEmpty()) and (dot.couleur != null and !dot.couleur.isEmpty())}">
+                                                            <label class="block text-[9px] uppercase font-bold text-gray-400">Couleur</label>
+                                                            <input type="text" th:name="'couleur_' + ${dot.id}" th:value="${dot.couleur}" class="w-full text-xs border border-gray-300 rounded px-1 py-0.5 outline-none bg-gray-50 text-gray-500" readonly>
+                                                        </div>
+                                                    </div>
+
+                                                    <div class="grid grid-cols-2 gap-1.5 mb-1.5">
                                                         <div>
                                                             <label class="block text-[9px] uppercase font-bold text-gray-400">Numéro</label>
                                                             <input type="text" th:name="'numero_' + ${dot.id}" th:value="${dot.numero}" placeholder="Ex: 10" 
                                                                    class="w-full text-xs border border-gray-300 rounded px-1 py-0.5 focus:ring-1 focus:ring-blue-500 outline-none">
                                                         </div>
-                                                    </div>
                                                     <div>
                                                         <label class="block text-[9px] uppercase font-bold text-gray-400">Flocage</label>
                                                         <input type="text" th:name="'flocage_' + ${dot.id}" th:value="${dot.flocage}" placeholder="Nom du joueur"
@@ -408,6 +462,7 @@
                                     th:data-nom="${cat.nom}"
                                     th:data-annee-min="${cat.anneeMin}" 
                                     th:data-annee-max="${cat.anneeMax}" 
+                                    th:data-sexe="${cat.sexe}"
                                     th:data-tarif-base="${cat.tarifBase}"
                                     th:data-tarif-exterieur="${cat.tarifExterieur}"
                                     th:text="${cat.nom} + ' (Talange: ' + ${cat.tarifBase} + ' € / Ext: ' + ${cat.tarifExterieur} + ' €)'"></option>
@@ -486,11 +541,19 @@
                     </div>
                     <div>
                         <label class="block text-sm font-medium text-gray-700 mb-1">Mode de paiement</label>
-                        <select name="modePaiementId" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                        <select id="addPaiementMode" name="modePaiementId" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none" onchange="toggleChequeVisibility(this, 'addChequeBlock', 'addNumeroCheque')">
                             <option value="">Sélectionnez un mode...</option>
-                            <option th:each="mode : ${modesPaiement}" th:value="${mode.id}" th:text="${mode.nom}"></option>
+                            <option th:each="mode : ${modesPaiement}" th:value="${mode.id}" th:data-nom="${#strings.toLowerCase(mode.nom)}" th:text="${mode.nom}"></option>
                         </select>
                     </div>
+                    <div id="addChequeBlock" class="hidden">
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Numéro du chèque <span class="text-red-500">*</span></label>
+                        <input type="text" id="addNumeroCheque" name="numeroCheque" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Commentaire (facultatif)</label>
+                        <textarea id="addCommentaire" name="commentaire" rows="2" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none"></textarea>
+                    </div>
                     <div class="items-center px-4 py-3 flex justify-end space-x-2">
                         <button type="button" onclick="closePaiementModal()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">Annuler</button>
                         <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700">Payer</button>
@@ -518,11 +581,19 @@
                     </div>
                     <div>
                         <label class="block text-sm font-medium text-gray-700 mb-1">Mode de paiement</label>
-                        <select id="editPaiementMode" name="modePaiementId" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                        <select id="editPaiementMode" name="modePaiementId" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none" onchange="toggleChequeVisibility(this, 'editChequeBlock', 'editNumeroCheque')">
                             <option value="">Sélectionnez un mode...</option>
-                            <option th:each="mode : ${modesPaiement}" th:value="${mode.id}" th:text="${mode.nom}"></option>
+                            <option th:each="mode : ${modesPaiement}" th:value="${mode.id}" th:data-nom="${#strings.toLowerCase(mode.nom)}" th:text="${mode.nom}"></option>
                         </select>
                     </div>
+                    <div id="editChequeBlock" class="hidden">
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Numéro du chèque <span class="text-red-500">*</span></label>
+                        <input type="text" id="editNumeroCheque" name="numeroCheque" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Commentaire (facultatif)</label>
+                        <textarea id="editCommentaire" name="commentaire" rows="2" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none"></textarea>
+                    </div>
                     <div class="items-center px-4 py-3 flex justify-end space-x-2">
                         <button type="button" onclick="closeEditPaiementModal()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">Annuler</button>
                         <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700">Enregistrer</button>
@@ -581,25 +652,41 @@
                 
                 document.getElementById('typeLicenceSelect').value = '';
                 
-                // Pré-sélection de la catégorie selon l'année de naissance
+                // Pré-sélection de la catégorie selon l'année de naissance et le sexe
                 const dateNaissanceStr = document.getElementById('dateNaissance').value;
+                const adherentSexe = document.getElementById('sexe') ? document.getElementById('sexe').value : 'MASCULIN';
                 let foundCat = false;
+                let fallbackCatId = '';
                 let preSelectedCatId = '';
                 
                 if (dateNaissanceStr) {
                     const birthYear = new Date(dateNaissanceStr).getFullYear();
                     
                     Array.from(catSelect.options).forEach(opt => {
+                        if (!opt.value) return;
                         const min = parseInt(opt.getAttribute('data-annee-min'));
                         const max = parseInt(opt.getAttribute('data-annee-max'));
+                        const catSexe = opt.getAttribute('data-sexe') || 'MASCULIN';
+                        
                         if (!isNaN(min) && !isNaN(max) && birthYear >= min && birthYear <= max) {
-                            catSelect.value = opt.value;
-                            preSelectedCatId = opt.value;
-                            foundCat = true;
+                            if (catSexe === adherentSexe) {
+                                catSelect.value = opt.value;
+                                preSelectedCatId = opt.value;
+                                foundCat = true;
+                            }
+                            if (catSexe === 'MASCULIN') {
+                                fallbackCatId = opt.value;
+                            }
                         }
                     });
                 }
                 
+                if (!foundCat && fallbackCatId) {
+                    catSelect.value = fallbackCatId;
+                    preSelectedCatId = fallbackCatId;
+                    foundCat = true;
+                }
+                
                 if (!foundCat) {
                     catSelect.value = '';
                 }
@@ -629,17 +716,35 @@
             document.getElementById('paiementModal').classList.add('hidden');
         }
 
-        function openEditPaiementModal(paiementId, montant, date, modePaiementId, licenceId, maxAmount) {
+        function openEditPaiementModal(paiementId, montant, date, modePaiementId, licenceId, maxAmount, numeroCheque, commentaire) {
             document.getElementById('editPaiementModal').classList.remove('hidden');
             document.getElementById('editPaiementForm').action = '/paiements/' + paiementId + '/update';
             document.getElementById('editPaiementMontant').value = montant;
             document.getElementById('editPaiementMontant').max = maxAmount;
             document.getElementById('editPaiementDate').value = date;
             document.getElementById('editPaiementMode').value = modePaiementId;
+            document.getElementById('editNumeroCheque').value = numeroCheque || '';
+            document.getElementById('editCommentaire').value = commentaire || '';
+            toggleChequeVisibility(document.getElementById('editPaiementMode'), 'editChequeBlock', 'editNumeroCheque');
         }
         function closeEditPaiementModal() {
             document.getElementById('editPaiementModal').classList.add('hidden');
         }
+
+        function toggleChequeVisibility(selectElement, blockId, inputId) {
+            const block = document.getElementById(blockId);
+            const input = document.getElementById(inputId);
+            const selectedOption = selectElement.options[selectElement.selectedIndex];
+            
+            if (selectedOption && selectedOption.getAttribute('data-nom') && selectedOption.getAttribute('data-nom').includes('chèque')) {
+                block.classList.remove('hidden');
+                input.required = true;
+            } else {
+                block.classList.add('hidden');
+                input.required = false;
+                input.value = '';
+            }
+        }
         document.addEventListener("DOMContentLoaded", function() {
             const dateInput = document.getElementById('dateNaissance');
             const repBlock = document.getElementById('representantBlock');
@@ -681,11 +786,33 @@
                 }
             }
 
+            const ancienClubInput = document.getElementById('ancienClub');
+            const ancienneCategorieBlock = document.getElementById('ancienneCategorieBlock');
+            const ancienneCategorieSelect = document.getElementById('ancienneCategorie');
+
+            if (ancienClubInput) {
+                ancienClubInput.addEventListener('input', function() {
+                    if (this.value.trim().length > 0) {
+                        ancienneCategorieBlock.classList.remove('hidden-block');
+                        ancienneCategorieSelect.required = true;
+                    } else {
+                        ancienneCategorieBlock.classList.add('hidden-block');
+                        ancienneCategorieSelect.required = false;
+                    }
+                });
+                
+                if (ancienClubInput.value.trim().length > 0) {
+                    ancienneCategorieBlock.classList.remove('hidden-block');
+                    ancienneCategorieSelect.required = true;
+                }
+            }
+
             function updateLicencesCategoryAndPrices() {
                 if (!dateInput.value) return;
                 const dob = new Date(dateInput.value);
                 const birthYear = dob.getFullYear();
                 const isResident = residentCheckbox ? residentCheckbox.checked : true;
+                const adherentSexe = document.getElementById('sexe') ? document.getElementById('sexe').value : 'MASCULIN';
                 
                 const categories = [];
                 const catSelect = document.getElementById('categorieSelect');
@@ -695,17 +822,21 @@
                         const nom = opt.getAttribute('data-nom');
                         const min = parseInt(opt.getAttribute('data-annee-min'));
                         const max = parseInt(opt.getAttribute('data-annee-max'));
+                        const sexe = opt.getAttribute('data-sexe') || 'MASCULIN';
                         const tarifBase = parseFloat(opt.getAttribute('data-tarif-base') || '0');
                         const tarifExterieur = parseFloat(opt.getAttribute('data-tarif-exterieur') || '0');
                         if (id) {
-                            categories.push({ id, nom, min, max, tarifBase, tarifExterieur });
+                            categories.push({ id, nom, min, max, sexe, tarifBase, tarifExterieur });
                         }
                     });
                 }
                 
                 if (categories.length === 0) return;
                 
-                const matchingCat = categories.find(c => birthYear >= c.min && birthYear <= c.max);
+                let matchingCat = categories.find(c => birthYear >= c.min && birthYear <= c.max && c.sexe === adherentSexe);
+                if (!matchingCat) {
+                    matchingCat = categories.find(c => birthYear >= c.min && birthYear <= c.max && c.sexe === 'MASCULIN');
+                }
                 if (!matchingCat) return;
                 
                 document.querySelectorAll('.licence-row').forEach(row => {
@@ -853,7 +984,10 @@
             }
 
             if (sexeSelect) {
-                sexeSelect.addEventListener('change', updateEquipmentStyleLabels);
+                sexeSelect.addEventListener('change', function() {
+                    updateEquipmentStyleLabels();
+                    updateLicencesCategoryAndPrices();
+                });
             }
             if (typeMaillotSelect) {
                 typeMaillotSelect.addEventListener('change', updateEquipmentStyleLabels);

as-talange-web/src/main/resources/templates/adherents/list.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="UTF-8">
     <title>Adhérents - AS Talange</title>
     <script src="https://cdn.tailwindcss.com"></script>

as-talange-web/src/main/resources/templates/audit/paiements_logs.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="UTF-8">
     <title>Logs Paiements - AS Talange</title>
     <script src="https://cdn.tailwindcss.com"></script>

as-talange-web/src/main/resources/templates/change-password.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Changement de mot de passe - AS Talange</title>

as-talange-web/src/main/resources/templates/fragments/sidebar.html

@@ -1,11 +1,12 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
 </head>
 <body>
-    <aside th:fragment="sidebar" class="w-64 bg-white border-r border-gray-200 flex flex-col hidden md:flex">
+    <aside id="app-sidebar" th:fragment="sidebar" class="w-64 bg-white border-r border-gray-200 flex flex-col hidden md:flex">
         <div class="h-16 flex items-center px-6 border-b border-gray-200">
             <img src="/images/logo.png" alt="Logo AS Talange" class="h-8 w-8 mr-3 object-contain">
             <h1 class="text-xl font-bold text-blue-600">AS Talange</h1>
@@ -53,6 +54,63 @@
             </form>
             <div class="mt-2 text-[10px] text-gray-400">v<span th:text="${appVersion}">1.0-SNAPSHOT</span></div>
         </div>
+        <script>
+            (function() {
+                function initMobileMenu() {
+                    const sidebar = document.getElementById('app-sidebar');
+                    if (!sidebar) return;
+
+                    const header = document.querySelector('header');
+                    if (header) {
+                        let mobileBtn = header.querySelector('button.md\\:hidden');
+                        if (!mobileBtn) {
+                            mobileBtn = document.createElement('button');
+                            mobileBtn.className = 'md:hidden text-gray-500 hover:text-gray-700 ml-auto';
+                            mobileBtn.innerHTML = '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>';
+                            header.appendChild(mobileBtn);
+                        }
+
+                        const newBtn = mobileBtn.cloneNode(true);
+                        mobileBtn.parentNode.replaceChild(newBtn, mobileBtn);
+                        
+                        newBtn.addEventListener('click', (e) => {
+                            e.stopPropagation();
+                            if (sidebar.classList.contains('hidden')) {
+                                sidebar.classList.remove('hidden');
+                                sidebar.classList.add('absolute', 'z-50', 'h-full', 'shadow-2xl', 'left-0', 'top-0');
+                            } else {
+                                sidebar.classList.add('hidden');
+                                sidebar.classList.remove('absolute', 'z-50', 'h-full', 'shadow-2xl', 'left-0', 'top-0');
+                            }
+                        });
+                    }
+
+                    if (!window.mobileMenuListenerAdded) {
+                        document.addEventListener('click', (e) => {
+                            if (window.innerWidth < 768 && !sidebar.classList.contains('hidden')) {
+                                if (!sidebar.contains(e.target)) {
+                                    sidebar.classList.add('hidden');
+                                    sidebar.classList.remove('absolute', 'z-50', 'h-full', 'shadow-2xl', 'left-0', 'top-0');
+                                }
+                            }
+                        });
+                        window.addEventListener('resize', () => {
+                            if (window.innerWidth >= 768) {
+                                sidebar.classList.add('hidden');
+                                sidebar.classList.remove('absolute', 'z-50', 'h-full', 'shadow-2xl', 'left-0', 'top-0');
+                            }
+                        });
+                        window.mobileMenuListenerAdded = true;
+                    }
+                }
+
+                if (document.readyState === 'loading') {
+                    document.addEventListener('DOMContentLoaded', initMobileMenu);
+                } else {
+                    initMobileMenu();
+                }
+            })();
+        </script>
     </aside>
 </body>
 </html>

as-talange-web/src/main/resources/templates/index.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="UTF-8">
     <title>Tableau de bord - AS Talange</title>
     <script src="https://cdn.tailwindcss.com"></script>

as-talange-web/src/main/resources/templates/login.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Connexion - AS Talange</title>

as-talange-web/src/main/resources/templates/paiements/list.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="UTF-8">
     <title>Paiements - AS Talange</title>
     <script src="https://cdn.tailwindcss.com"></script>

as-talange-web/src/main/resources/templates/parametrage/categories_form.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Catégorie - AS Talange</title>
@@ -22,9 +23,18 @@
                 <form th:action="@{/categories}" th:object="${categorie}" method="post" class="space-y-6">
                     <input type="hidden" th:field="*{id}" />
 
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Nom (ex: U15)</label>
-                        <input type="text" th:field="*{nom}" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Nom (ex: U15)</label>
+                            <input type="text" th:field="*{nom}" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Catégorie</label>
+                            <select th:field="*{sexe}" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                                <option value="MASCULIN">Masculine</option>
+                                <option value="FEMININ">Féminine</option>
+                            </select>
+                        </div>
                     </div>
 
                     <div class="grid grid-cols-2 gap-4">
@@ -53,30 +63,95 @@
 
                     <div class="pt-4 border-t border-gray-100">
                         <label class="block text-sm font-medium text-gray-700 mb-2">Équipements liés à la catégorie</label>
-                        <div class="space-y-3 max-h-64 overflow-y-auto">
-                            <th:block th:each="equi : ${allEquipements}">
-                                <div class="flex items-center space-x-4 bg-gray-50 p-2 rounded-lg border border-gray-100">
-                                    <div class="w-1/3">
+                        
+                        <div class="flex space-x-2 mb-4">
+                            <select id="equipementToAdd" class="flex-1 border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                                <option value="">Sélectionner un équipement à ajouter...</option>
+                                <th:block th:each="equi : ${allEquipements}">
+                                    <option th:value="${equi.id}" th:text="${equi.nom}"></option>
+                                </th:block>
+                            </select>
+                            <button type="button" onclick="addEquipement()" class="px-4 py-1.5 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors">Ajouter</button>
+                        </div>
+
+                        <div id="equipementsContainer" class="space-y-3 max-h-64 overflow-y-auto">
+                            <th:block th:each="equi : ${allEquipements}" th:if="${categorie.hasEquipement(equi.id)}">
+                                <div class="flex items-center space-x-4 bg-gray-50 p-2 rounded-lg border border-gray-100 equipement-row" th:id="'eq-row-' + ${equi.id}">
+                                    <div class="w-1/4">
                                         <span class="block text-sm font-medium text-gray-900" th:text="${equi.nom}"></span>
                                     </div>
                                     <div class="w-1/3">
                                         <select th:name="'etatEquipement_' + ${equi.id}" class="w-full border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
-                                            <option value="NON_LIE" th:selected="${!categorie.hasEquipement(equi.id)}">Non lié</option>
-                                            <option value="OBLIGATOIRE" th:selected="${categorie.hasEquipement(equi.id) and categorie.isEquipementObligatoire(equi.id)}">Obligatoire (inclus)</option>
-                                            <option value="OPTIONNEL" th:selected="${categorie.hasEquipement(equi.id) and !categorie.isEquipementObligatoire(equi.id)}">Optionnel (payant)</option>
+                                            <option value="OBLIGATOIRE" th:selected="${categorie.isEquipementObligatoire(equi.id)}">Obligatoire (inclus)</option>
+                                            <option value="OPTIONNEL" th:selected="${!categorie.isEquipementObligatoire(equi.id)}">Optionnel (payant)</option>
                                         </select>
                                     </div>
-                                    <div class="w-1/3 flex items-center space-x-2">
+                                    <div class="w-1/4 flex items-center space-x-2">
                                         <label class="text-xs text-gray-500">Prix (€)</label>
                                         <input type="number" step="0.01" th:name="'prixEquipement_' + ${equi.id}" 
                                                th:value="${categorie.getEquipementPrix(equi.id)}"
                                                class="w-full border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                                     </div>
+                                    <div class="w-auto">
+                                        <button type="button" th:onclick="'removeEquipement(' + ${equi.id} + ')'" class="text-red-600 hover:text-red-800 text-sm font-medium">Retirer</button>
+                                    </div>
                                 </div>
                             </th:block>
                         </div>
                     </div>
 
+                    <script>
+                        function addEquipement() {
+                            const select = document.getElementById('equipementToAdd');
+                            const selectedOption = select.options[select.selectedIndex];
+                            
+                            if (!selectedOption.value) return;
+                            
+                            const id = selectedOption.value;
+                            const nom = selectedOption.text;
+                            
+                            if (document.getElementById('eq-row-' + id)) {
+                                alert("Cet équipement est déjà lié à la catégorie.");
+                                return;
+                            }
+                            
+                            const container = document.getElementById('equipementsContainer');
+                            
+                            const row = document.createElement('div');
+                            row.className = 'flex items-center space-x-4 bg-gray-50 p-2 rounded-lg border border-gray-100 equipement-row';
+                            row.id = 'eq-row-' + id;
+                            
+                            row.innerHTML = `
+                                <div class="w-1/4">
+                                    <span class="block text-sm font-medium text-gray-900">${nom}</span>
+                                </div>
+                                <div class="w-1/3">
+                                    <select name="etatEquipement_${id}" class="w-full border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                                        <option value="OBLIGATOIRE">Obligatoire (inclus)</option>
+                                        <option value="OPTIONNEL">Optionnel (payant)</option>
+                                    </select>
+                                </div>
+                                <div class="w-1/4 flex items-center space-x-2">
+                                    <label class="text-xs text-gray-500">Prix (€)</label>
+                                    <input type="number" step="0.01" name="prixEquipement_${id}" value="0.00" class="w-full border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                                </div>
+                                <div class="w-auto">
+                                    <button type="button" onclick="removeEquipement(${id})" class="text-red-600 hover:text-red-800 text-sm font-medium">Retirer</button>
+                                </div>
+                            `;
+                            
+                            container.appendChild(row);
+                            select.value = '';
+                        }
+                        
+                        function removeEquipement(id) {
+                            const row = document.getElementById('eq-row-' + id);
+                            if (row) {
+                                row.remove();
+                            }
+                        }
+                    </script>
+
                     <div class="pt-4 flex justify-end space-x-3 border-t border-gray-100">
                         <a th:href="@{/categories}" class="px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50">Annuler</a>
                         <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700">Enregistrer</button>

as-talange-web/src/main/resources/templates/parametrage/categories_list.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Paramétrage - Catégories</title>
@@ -43,7 +44,10 @@
                             <td colspan="6" class="py-8 text-center text-gray-500">Aucune catégorie n'est paramétrée.</td>
                         </tr>
                         <tr th:each="cat : ${categories}" class="hover:bg-gray-50 transition-colors">
-                            <td class="py-4 px-6 font-medium text-gray-900" th:text="${cat.nom}">U15</td>
+                            <td class="py-4 px-6">
+                                <div class="font-medium text-gray-900" th:text="${cat.nom}">U15</div>
+                                <div class="text-xs text-gray-500" th:text="${cat.sexe == 'FEMININ' ? 'Féminine' : 'Masculine'}">Masculine</div>
+                            </td>
                             <td class="py-4 px-6 text-center text-gray-600" th:text="${cat.anneeMin}">2010</td>
                             <td class="py-4 px-6 text-center text-gray-600" th:text="${cat.anneeMax}">2011</td>
                             <td class="py-4 px-6 text-right font-medium text-blue-600" th:text="${cat.tarifBase + ' €'}">100.00 €</td>

as-talange-web/src/main/resources/templates/parametrage/educateurs_form.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Éducateur - AS Talange</title>

as-talange-web/src/main/resources/templates/parametrage/educateurs_list.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Paramétrage - Éducateurs</title>

as-talange-web/src/main/resources/templates/parametrage/equipements_form.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Équipement - AS Talange</title>
@@ -36,10 +37,37 @@
                         <label class="block text-sm font-medium text-gray-700 mb-1">Description (ex: Maillot domicile officiel)</label>
                         <textarea th:field="*{description}" rows="3" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none"></textarea>
                     </div>
+                    <div class="pt-4 border-t border-gray-100">
+                        <h3 class="text-sm font-medium text-gray-900 mb-4">Options de déclinaison (facultatif)</h3>
                         
+                        <div class="space-y-4">
+                            <div class="flex items-center">
+                                <input type="checkbox" th:field="*{gestionSexe}" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
+                                <label class="ml-2 block text-sm text-gray-700">Gérer les coupes Homme/Femme</label>
+                            </div>
 
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Type de public (Poste)</label>
+                                <select th:field="*{typePublic}" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                                    <option value="TOUS">Tous (Joueurs et Gardiens)</option>
+                                    <option value="JOUEUR">Joueurs de champ uniquement</option>
+                                    <option value="GARDIEN">Gardiens de but uniquement</option>
+                                </select>
+                            </div>
 
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Tailles disponibles</label>
+                                <input type="text" th:field="*{taillesDisponibles}" placeholder="ex: XS, S, M, L, XL ou 5/6 ANS, 7/8 ANS..." class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                                <p class="text-xs text-gray-500 mt-1">Séparez les tailles par des virgules. Laissez vide si taille unique ou standard.</p>
+                            </div>
 
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Couleurs disponibles</label>
+                                <input type="text" th:field="*{couleursDisponibles}" placeholder="ex: Bleu, Rouge, Blanc..." class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                                <p class="text-xs text-gray-500 mt-1">Séparez les couleurs par des virgules. Laissez vide si couleur unique.</p>
+                            </div>
+                        </div>
+                    </div>
                     <div class="pt-4 flex justify-end space-x-3 border-t border-gray-100">
                         <a th:href="@{/equipements}" class="px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50">Annuler</a>
                         <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700">Enregistrer</button>

as-talange-web/src/main/resources/templates/parametrage/equipements_list.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Paramétrage - Équipements</title>

as-talange-web/src/main/resources/templates/parametrage/equipements_recherche.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Paramétrage - Recherche Équipements</title>

as-talange-web/src/main/resources/templates/parametrage/equipes_list.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Paramétrage - Équipes</title>

as-talange-web/src/main/resources/templates/parametrage/licences_recherche.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="UTF-8">
     <title>Recherche Licences - AS Talange</title>
     <script src="https://cdn.tailwindcss.com"></script>

as-talange-web/src/main/resources/templates/parametrage/modespaiement_form.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Mode de Paiement - AS Talange</title>

as-talange-web/src/main/resources/templates/parametrage/modespaiement_list.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Paramétrage - Modes de Paiement</title>

as-talange-web/src/main/resources/templates/parametrage/saison_form.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Nouvelle Saison - AS Talange</title>

as-talange-web/src/main/resources/templates/parametrage/saisons_list.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Paramétrage - Saisons</title>

as-talange-web/src/main/resources/templates/planning/form.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Créneau d'Entraînement - AS Talange</title>

as-talange-web/src/main/resources/templates/planning/planning.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Planning des Entraînements - AS Talange</title>

as-talange-web/src/main/resources/templates/preinscriptions/list.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="UTF-8">
     <title>Pré-inscriptions - AS Talange</title>
     <script src="https://cdn.tailwindcss.com"></script>

as-talange-web/src/main/resources/templates/public/demarrer.html

@@ -2,6 +2,7 @@
 <html xmlns:th="http://www.thymeleaf.org">
 
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>AS Talange - Pré-inscription</title>

as-talange-web/src/main/resources/templates/public/formulaire.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>AS Talange - Formulaire d'inscription</title>
@@ -52,7 +53,27 @@
             <div id="nouvelleLicenceBlock" class="hidden space-y-4">
                 <div>
                     <label class="block text-sm font-medium text-gray-700 mb-1">Ancien club</label>
-                    <input type="text" th:field="*{ancienClub}" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none" placeholder="Nom du club (laisser vide si aucun)">
+                    <input type="text" id="ancienClub" th:field="*{ancienClub}" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none" placeholder="Nom du club (laisser vide si aucun)">
+                </div>
+                
+                <div id="ancienneCategorieBlock" class="hidden">
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Ancienne catégorie <span class="text-red-500">*</span></label>
+                    <select id="ancienneCategorie" th:field="*{ancienneCategorie}" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                        <option value="NA">NA (Je ne sais plus)</option>
+                        <option value="U6">U6</option>
+                        <option value="U7">U7</option>
+                        <option value="U8">U8</option>
+                        <option value="U9">U9</option>
+                        <option value="U10">U10</option>
+                        <option value="U11">U11</option>
+                        <option value="U12">U12</option>
+                        <option value="U13">U13</option>
+                        <option value="U14">U14</option>
+                        <option value="U15">U15</option>
+                        <option value="U16">U16</option>
+                        <option value="U17">U17</option>
+                        <option value="Senior">Senior</option>
+                    </select>
                 </div>
                 
                 <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-lg">
@@ -113,8 +134,8 @@
                     <input type="email" th:field="*{email}" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                 </div>
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Téléphone</label>
-                    <input type="tel" th:field="*{telephone}" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Téléphone <span class="text-red-500">*</span></label>
+                    <input type="tel" th:field="*{telephone}" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                 </div>
             </div>
 
@@ -184,6 +205,27 @@
             nouvelleLicenceBlock.classList.remove('hidden');
         }
 
+        const ancienClubInput = document.getElementById('ancienClub');
+        const ancienneCategorieBlock = document.getElementById('ancienneCategorieBlock');
+        const ancienneCategorieSelect = document.getElementById('ancienneCategorie');
+
+        if (ancienClubInput) {
+            ancienClubInput.addEventListener('input', function() {
+                if (this.value.trim().length > 0) {
+                    ancienneCategorieBlock.classList.remove('hidden');
+                    ancienneCategorieSelect.required = true;
+                } else {
+                    ancienneCategorieBlock.classList.add('hidden');
+                    ancienneCategorieSelect.required = false;
+                }
+            });
+            // Initial check
+            if (ancienClubInput.value.trim().length > 0) {
+                ancienneCategorieBlock.classList.remove('hidden');
+                ancienneCategorieSelect.required = true;
+            }
+        }
+
         document.getElementById('dateNaissance').addEventListener('change', function() {
             const dateInput = this.value;
             const repBlock = document.getElementById('representantBlock');

as-talange-web/src/main/resources/templates/public/lien-expire.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Lien expiré</title>

as-talange-web/src/main/resources/templates/public/succes.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">

as-talange-web/src/main/resources/templates/utilisateurs/form.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Ajouter un Utilisateur - AS Talange</title>

as-talange-web/src/main/resources/templates/utilisateurs/list.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <meta charset="UTF-8">
     <title>Gestion des Utilisateurs - AS Talange</title>

pom.xml

@@ -13,7 +13,7 @@
 
     <groupId>com.astalange</groupId>
     <artifactId>as-talange-parent</artifactId>
-    <version>1.0-SNAPSHOT</version>
+    <version>1.4-SNAPSHOT</version>
     <packaging>pom</packaging>
 
     <name>as-talange-parent</name>