dev en cours

src/app/app.component.html

@@ -1,25 +1,25 @@
 <div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" id="sidenav">
   <ul class="nav nav-pills nav-flush flex-column text-center">
-	 	<li><a href="#" class="nav-link rounded-0" #menu_home title="Accueil" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-home" aria-label="Accueil"></i></a></li>
+	 	<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_home title="Accueil" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-home" aria-label="Accueil"></i></a></li>
 
-		<li><a href="/login" class="nav-link rounded-0" #menu_login title="Login" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-right-to-bracket" aria-label="Login"></i></a></li>
-		<li><a href="#" class="nav-link rounded-0" #menu_account title="Compte" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-user" aria-label="Compte"></i></a></li>
-		<li><a href="/logout" class="nav-link rounded-0" #menu_logout title="Logout" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-right-from-bracket" aria-label="Logout"></i></a></li>
+		<li><a href="/login" class="nav-link rounded-0 bg-gradient" #menu_login title="Login" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-right-to-bracket" aria-label="Login"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_account title="Compte" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-user" aria-label="Compte"></i></a></li>
+		<li><a href="/logout" class="nav-link rounded-0 bg-gradient" #menu_logout title="Logout" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-right-from-bracket" aria-label="Logout"></i></a></li>
 
-		<li><a href="#" class="nav-link rounded-0" #menu_agenda title="Planning" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-clock" aria-label="Planning"></i></a></li>
-		<li><a href="#" class="nav-link rounded-0" #menu_webcams title="Caméras" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-eye" aria-label="Caméras"></i></a></li>
-		<li><a href="#" class="nav-link rounded-0" #menu_chat title="Messagerie" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-comments" aria-label="Messagerie"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_agenda title="Planning" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-clock" aria-label="Planning"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_webcams title="Caméras" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-eye" aria-label="Caméras"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_chat title="Messagerie" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-comments" aria-label="Messagerie"></i></a></li>
 
-		<li><a href="/participant-list" class="nav-link rounded-0" #menu_users title="Participants" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-users" aria-label="Participants"></i></a></li>
+		<li><a href="/participant-list" class="nav-link rounded-0 bg-gradient" #menu_users title="Participants" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-users" aria-label="Participants"></i></a></li>
 
-		<li><a href="/categorie-list" class="nav-link rounded-0" #menu_compos title="Catégories" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-layer-group" aria-label="Catégories"></i></a></li>
-		<li><a href="/production-list" class="nav-link rounded-0" #menu_prods title="Productions" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-save" aria-label="Productions"></i></a></li>
+		<li><a href="/categorie-list" class="nav-link rounded-0 bg-gradient" #menu_compos title="Catégories" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-layer-group" aria-label="Catégories"></i></a></li>
+		<li><a href="/production-list" class="nav-link rounded-0 bg-gradient" #menu_prods title="Productions" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-save" aria-label="Productions"></i></a></li>
 
-		<li><a href="#" class="nav-link rounded-0" #menu_shows title="Présentations" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-display" aria-label="Présentations"></i></a></li>
-		<li><a href="#" class="nav-link rounded-0" #menu_votes title="Voter" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-vote-yea" aria-label="Voter"></i></a></li>
-		<li><a href="#" class="nav-link rounded-0" #menu_results title="Résultats" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-trophy" aria-label="Résultats"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_shows title="Présentations" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-display" aria-label="Présentations"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_votes title="Voter" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-vote-yea" aria-label="Voter"></i></a></li>
+		<li><a href="#" class="nav-link rounded-0 bg-gradient" #menu_results title="Résultats" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-trophy" aria-label="Résultats"></i></a></li>
 
-		<li><a href="/variable-list" class="nav-link rounded-0" #menu_params title="Paramétrages" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-sliders-h" aria-label="Paramétrages"></i></a></li>
+		<li><a href="/variable-list" class="nav-link rounded-0 bg-gradient" #menu_params title="Paramétrages" data-bs-toggle="tooltip" data-bs-placement="right"> <i class="fa-solid fa-sliders-h" aria-label="Paramétrages"></i></a></li>
 	</ul>
 </div>
 <div id="main">

src/app/composants/categorie-create/categorie-create.component.html

@@ -1,8 +1,8 @@
 <form  #formRef="ngForm" (ngSubmit)="addCategorie()" class="needs-validation">
-	<div class="card shadow center" style="min-width:40rem;">
+	<div class="card shadow center">
 	<div class="card-header">Fiche d'une catégorie</div>
 		<div class="card-header shadow-sm">
-			<button (click)="goToListCategorie()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
+			<button (click)="goToListCategorie()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
 		</div>
 		<div class="card-body">
 
@@ -15,7 +15,7 @@
 
 			<div class="form-group row">
 				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Numéro d'ordre</label>
-				<div class="col-sm-8">
+				<div class="col-sm-2">
 					<input type="number" min="0" class="form-control form-control-sm field-separate" id="numeroOrdre" name="numeroOrdre" [(ngModel)]="categorie.numeroOrdre">
 				</div>
 			</div>
@@ -72,7 +72,7 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
+			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
 		</div>
 	</div>
 </form>

src/app/composants/categorie-details/categorie-details.component.html

@@ -1,7 +1,7 @@
-<div class="card shadow center" style="min-width:40rem;">
+<div class="card shadow center">
 	<div class="card-header">Fiche d'une catégorie</div>
 	<div class="card-header shadow-sm">
-		<button (click)="goToListCategorie()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
+		<button (click)="goToListCategorie()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
 	</div>
 	<div class="card-body">
 
@@ -29,7 +29,7 @@
 
 		<div class="form-group row">
 			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Numéro d'ordre</label>
-			<div class="col-sm-8">
+			<div class="col-sm-2">
 				<input type="text" class="form-control form-control-sm field-separate" id="numeroOrdre" name="numeroOrdre" [(ngModel)]="categorie.numeroOrdre" disabled>
 			</div>
 		</div>
@@ -86,7 +86,7 @@
 
 	</div>
 	<div class="card-footer">
-		<button type="button" (click)="updateCategorie(categorie.numeroCategorie)" class="btn btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;Editer</button>
+		<button type="button" (click)="updateCategorie(categorie.numeroCategorie)" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;Editer</button>
 	</div>
 </div>
 

src/app/composants/categorie-list/categorie-list.component.html

@@ -3,8 +3,8 @@
 	<div class="card-header shadow-sm">
 		<div class="row">
 			<div class="form-group col-sm-4 label-nobr">
-				<button type="button" (click)="goToRefreshListCategorie()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;Actualiser</button>
-				<button type="button" (click)="goToNewCategorie()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
+				<button type="button" (click)="goToRefreshListCategorie()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;Actualiser</button>
+				<button type="button" (click)="goToNewCategorie()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
 			</div>
 		</div>
 	</div>

src/app/composants/categorie-update/categorie-update.component.html

@@ -1,8 +1,8 @@
 <form id="formVariable" #formRef="ngForm" class="needs-validation">
-<div class="card shadow center" style="min-width:40rem;">
+<div class="card shadow center">
 	<div class="card-header">Fiche d'une catégorie</div>
 	<div class="card-header shadow-sm">
-		<button (click)="goToListCategorie()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
+		<button (click)="goToListCategorie()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
 	</div>
 	<div class="card-body">
 
@@ -29,7 +29,7 @@
 
 		<div class="form-group row">
 			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Numéro d'ordre</label>
-			<div class="col-sm-8">
+			<div class="col-sm-2">
 				<input type="number" min="0" class="form-control form-control-sm field-separate" id="numeroOrdre" name="numeroOrdre" [(ngModel)]="categorie.numeroOrdre">
 			</div>
 		</div>
@@ -86,8 +86,8 @@
 
 	</div>
 	<div class="card-footer">
-			<button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;Modifier</button>
-			<button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="fa-solid fa-trash"></i>&nbsp;Effacer</button>
+			<button type="button" class="btn bg-gradient btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;Modifier</button>
+			<button type="button" class="btn bg-gradient btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="fa-solid fa-trash"></i>&nbsp;Effacer</button>
 	</div>
 </div>
 </form>
@@ -100,8 +100,8 @@
 			</div>
 			<div class="modal-body">Actualiser cet enregistrement ?</div>
 			<div class="modal-footer">
-				<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
-				<button type="button" class="btn btn-warning btn-sm" (click)="updateConfirmed()" data-bs-dismiss="modal">Confirmer</button>
+				<button type="button" class="btn bg-gradient btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
+				<button type="button" class="btn bg-gradient btn-warning btn-sm" (click)="updateConfirmed()" data-bs-dismiss="modal">Confirmer</button>
 			</div>
 		</div>
 	</div>
@@ -115,8 +115,8 @@
 			</div>
 			<div class="modal-body">Effacer cet enregistrement ?</div>
 			<div class="modal-footer">
-				<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
-				<button type="button" class="btn btn-danger btn-sm" (click)="deleteConfirmed()" data-bs-dismiss="modal">Confirmer</button>
+				<button type="button" class="btn bg-gradient btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
+				<button type="button" class="btn bg-gradient btn-danger btn-sm" (click)="deleteConfirmed()" data-bs-dismiss="modal">Confirmer</button>
 			</div>
 		</div>
 	</div>

src/app/composants/login/login.component.html

@@ -20,7 +20,7 @@
 
 		</div>
 		<div class="card-footer" #menu_login>
-			<button type="button" class="btn btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-right-to-bracket"></i>&nbsp;Login</button>
+			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-right-to-bracket"></i>&nbsp;Login</button>
 		</div>
 	</div>
 </form>

src/app/composants/participant-create/participant-create.component.html

@@ -2,7 +2,7 @@
 	<div class="card shadow center">
 		<div class="card-header">Fiche d'un participant</div>
 		<div class="card-header shadow-sm">
-			<button (click)="goToListParticipant()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
+			<button (click)="goToListParticipant()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
 		</div>
 		<div class="card-body scrollable">
 
@@ -198,7 +198,7 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
+			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
 		</div>
 	</div>
 </form>

src/app/composants/participant-details/participant-details.component.html

@@ -1,7 +1,7 @@
-<div class="card shadow center" style="min-width:40rem;">
+<div class="card shadow center">
 	<div class="card-header">Fiche d'un participant</div>
 	<div class="card-header shadow-sm">
-		<button (click)="goToListParticipant()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
+		<button (click)="goToListParticipant()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
 	</div>
 	<div class="card-body scrollable">
 
@@ -212,6 +212,6 @@
 
 	</div>
 	<div class="card-footer">
-		<button type="button" (click)="updateParticipant(participant.numeroParticipant)" class="btn btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;Editer</button>
+		<button type="button" (click)="updateParticipant(participant.numeroParticipant)" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;Editer</button>
 	</div>
 </div>

src/app/composants/participant-list/participant-list.component.html

@@ -3,8 +3,8 @@
 	<div class="card-header shadow-sm">
 		<div class="row">
 			<div class="form-group col-sm-4 label-nobr">
-				<button type="button" (click)="goToRefreshListParticipant()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;Actualiser</button>
-				<button type="button" (click)="goToNewParticipant()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
+				<button type="button" (click)="goToRefreshListParticipant()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;Actualiser</button>
+				<button type="button" (click)="goToNewParticipant()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
 			</div>
 		</div>
 	</div>

src/app/composants/participant-update/participant-update.component.html

@@ -1,8 +1,8 @@
 <form id="formParticipant" #formRef="ngForm" class="needs-validation">
-<div class="card shadow center" style="min-width:40rem;">
+<div class="card shadow center">
 	<div class="card-header">Fiche d'un participant</div>
 	<div class="card-header shadow-sm">
-		<button (click)="goToListParticipant()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
+		<button (click)="goToListParticipant()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
 	</div>
 	<div class="card-body scrollable">
 
@@ -213,8 +213,8 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;Modifier</button>
-			<button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="fa-solid fa-trash"></i>&nbsp;Effacer</button>
+			<button type="button" class="btn bg-gradient btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;Modifier</button>
+			<button type="button" class="btn bg-gradient btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="fa-solid fa-trash"></i>&nbsp;Effacer</button>
 		</div>
 	</div>
 </form>
@@ -227,8 +227,8 @@
 			</div>
 			<div class="modal-body">Actualiser cet enregistrement ?</div>
 			<div class="modal-footer">
-				<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
-				<button type="button" class="btn btn-warning btn-sm" (click)="updateConfirmed()" data-bs-dismiss="modal">Confirmer</button>
+				<button type="button" class="btn bg-gradient btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
+				<button type="button" class="btn bg-gradient btn-warning btn-sm" (click)="updateConfirmed()" data-bs-dismiss="modal">Confirmer</button>
 			</div>
 		</div>
 	</div>
@@ -242,8 +242,8 @@
 			</div>
 			<div class="modal-body">Effacer cet enregistrement ?</div>
 			<div class="modal-footer">
-				<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
-				<button type="button" class="btn btn-danger btn-sm" (click)="deleteConfirmed()" data-bs-dismiss="modal">Confirmer</button>
+				<button type="button" class="btn bg-gradient btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
+				<button type="button" class="btn bg-gradient btn-danger btn-sm" (click)="deleteConfirmed()" data-bs-dismiss="modal">Confirmer</button>
 			</div>
 		</div>
 	</div>

src/app/composants/production-create/production-create.component.html

@@ -1,8 +1,8 @@
 <form #formRef="ngForm" (ngSubmit)="addProduction()" class="needs-validation">
-	<div class="card shadow center" style="min-width:40rem;">
+	<div class="card shadow center">
 		<div class="card-header">Fiche d'une production</div>
 		<div class="card-header shadow-sm">
-			<button (click)="goToListProduction()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
+			<button (click)="goToListProduction()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
 		</div>
 		<div class="card-body">
 
@@ -88,7 +88,7 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
+			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
 		</div>
 	</div>
 </form>

src/app/composants/production-details/production-details.component.html

@@ -1,11 +1,11 @@
-<div class="card shadow center" style="min-width:40rem;">
+<div class="card shadow center">
 	<div class="card-header">Fiche d'une production</div>
 	<div class="card-header shadow-sm">
-		<button (click)="goToListProduction()" class="btn btn-primary btn-sm">
+		<button (click)="goToListProduction()" class="btn bg-gradient btn-primary btn-sm">
 			<i class="fa-solid fa-xmark"></i>&nbsp;Retour
 		</button>
 	</div>
-	<div class="card-body">
+	<div class="card-body scrollable">
 
 		<div class="form-group row">
 			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Créé le</label>
@@ -84,7 +84,7 @@
 		<div class="form-group row">
 			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Archive</label>
 			<div class="col-sm-8">
-				<button type="button" (click)="updateArchive(production.numeroProduction)" class="btn btn-primary btn-sm field-separate"><i class="fa-solid fa-upload"></i>&nbsp;Téléverser</button>
+				<button type="button" (click)="updateArchive(production.numeroProduction)" class="btn bg-gradient btn-primary btn-sm field-separate"><i class="fa-solid fa-upload"></i>&nbsp;Téléverser</button>
 				<small class="text-muted">&nbsp;&nbsp;déjà enregistré : {{ production.nomArchive }} (v{{ production.numeroVersion }})</small>
 			</div>
 		</div>
@@ -98,6 +98,6 @@
 
 	</div>
 	<div class="card-footer">
-		<button type="button" (click)="updateProduction(production.numeroProduction)" class="btn btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;Editer</button>
+		<button type="button" (click)="updateProduction(production.numeroProduction)" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;Editer</button>
 	</div>
 </div>

src/app/composants/production-list/production-list.component.html

@@ -1,33 +1,32 @@
-<div class="card shadow">
+<div class="card shadow rounded-bottom-0">
 	<div class="card-header">Liste des productions</div>
-	<div class="card-header shadow-sm">
+	<div class="card-header">
 		<div class="row">
 			<div class="form-group col-sm-4 label-nobr">
-				<button type="button" (click)="goToRefreshListProduction()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;Actualiser</button>
-				<button type="button" (click)="goToNewProduction()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
+				<button type="button" (click)="goToRefreshListProduction()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;Actualiser</button>
+				<button type="button" (click)="goToNewProduction()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
 			</div>
 		</div>
 	</div>
-	<div class="card-body"><div class="d-flex flex-wrap">
-		@for (production of productions; track production.numeroProduction) {
-
-			<div class="card" style="max-width:15rem;margin:2px;">
-				<img src="{{ production.vignette }}" class="img-fluid card-img-top pointeur-souris" (click)="formProduction(production.numeroProduction)">
-				<div class="card-header">
-  				<span class="card-title">@if (production.type === types[0].key) { <i class="fa-solid fa-square-binary"></i> } @else if (production.type === types[1].key) { <i class="fa-solid fa-image"></i> } @else if (production.type === types[2].key) { <i class="fa-solid fa-music"></i> } @else if (production.type === types[3].key) { <i class="fa-solid fa-video"></i> } @else if (production.type === types[4].key) { <i class="fa-solid fa-comment"></i> } @else { <i class="fa-solid fa-question"></i> }
-	  			<a (click)="formProduction(production.numeroProduction)" class="text-primary pointeur-souris" style="margin-left:7px;">{{ production.titre }}</a></span><br/>
-				  <small><span class="text-muted">par</span> {{ production.auteurs }} @if (production.groupes) { @if (production.groupes.length > 0) { &nbsp;/&nbsp;{{ production.groupes }} } }</small>
-				</div>
-				<div class="card-body">
-				  <small><span class="text-muted">sur</span> {{ production.plateforme }}</small><br/>
-			  	<small>{{ production.commentaire }}</small><br/>
-				  <small class="text-warning">{{ production.informationsPrivees }}</small>
-        </div>
-				<div class="card-footer d-flex justify-content-between">
-				  <i class="fa-solid fa-download text-primary pointeur-souris" title="{{ production.nomArchive }} (v{{ production.numeroVersion }})" (click)="getFile(production.numeroProduction, production.nomArchive)"></i>
-					<i class="fa-solid fa-user-tie pointeur-souris" title="géré par {{ production.nomGestionnaire }}" style="margin-left:7px;"></i>
-				</div>
+</div>
+<div class="d-flex flex-wrap">
+	@for (production of productions; track production.numeroProduction) {
+  	<div class="card shadow" style="max-width:17rem;">
+			<img src="{{ production.vignette }}" class="img-fluid card-img-top pointeur-souris" (click)="formProduction(production.numeroProduction)">
+			<div class="card-header">
+  			<span class="card-title">@if (production.type === types[0].key) { <i class="fa-solid fa-square-binary"></i> } @else if (production.type === types[1].key) { <i class="fa-solid fa-image"></i> } @else if (production.type === types[2].key) { <i class="fa-solid fa-music"></i> } @else if (production.type === types[3].key) { <i class="fa-solid fa-video"></i> } @else if (production.type === types[4].key) { <i class="fa-solid fa-comment"></i> } @else { <i class="fa-solid fa-question"></i> }
+	  		<a (click)="formProduction(production.numeroProduction)" class="text-primary pointeur-souris" style="margin-left:7px;">{{ production.titre }}</a></span><br/>
+				<small><span class="text-muted">par</span> {{ production.auteurs }} @if (production.groupes) { @if (production.groupes.length > 0) { &nbsp;/&nbsp;{{ production.groupes }} } }</small>
+			</div>
+			<div class="card-body">
+			  <small><span class="text-muted">sur</span> {{ production.plateforme }}</small><br/>
+			 	<small>{{ production.commentaire }}</small><br/>
+				 <small class="text-warning">{{ production.informationsPrivees }}</small>
+       </div>
+			<div class="card-footer d-flex justify-content-between">
+			  <i class="fa-solid fa-download text-primary pointeur-souris" title="{{ production.nomArchive }} (v{{ production.numeroVersion }})" (click)="getFile(production.numeroProduction, production.nomArchive)"></i>
+				<i class="fa-solid fa-user-tie pointeur-souris" title="géré par {{ production.nomGestionnaire }}" style="margin-left:7px;"></i>
 			</div>
-		}
-	</div></div>
+		</div>
+	}
 </div>

src/app/composants/production-update/production-update.component.html

@@ -1,8 +1,8 @@
 <form id="formProduction" #formRef="ngForm" class="needs-validation">
-	<div class="card shadow center" style="min-width:40rem;">
+	<div class="card shadow center">
 		<div class="card-header">Fiche d'une production</div>
 		<div class="card-header shadow-sm">
-			<button (click)="goToListProduction()" class="btn btn-primary btn-sm">
+			<button (click)="goToListProduction()" class="btn bg-gradient btn-primary btn-sm">
 				<i class="fa-solid fa-xmark"></i>&nbsp;Retour
 			</button>
 		</div>
@@ -95,8 +95,8 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;Modifier</button>
-			<button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="fa-solid fa-trash"></i>&nbsp;Effacer</button>
+			<button type="button" class="btn bg-gradient btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;Modifier</button>
+			<button type="button" class="btn bg-gradient btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="fa-solid fa-trash"></i>&nbsp;Effacer</button>
 		</div>
 	</div>
 </form>
@@ -109,8 +109,8 @@
 			</div>
 			<div class="modal-body">Actualiser cet enregistrement ?</div>
 			<div class="modal-footer">
-				<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
-				<button type="button" class="btn btn-warning btn-sm" (click)="updateConfirmed()" data-bs-dismiss="modal">Confirmer</button>
+				<button type="button" class="btn bg-gradient btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
+				<button type="button" class="btn bg-gradient btn-warning btn-sm" (click)="updateConfirmed()" data-bs-dismiss="modal">Confirmer</button>
 			</div>
 		</div>
 	</div>
@@ -124,8 +124,8 @@
 			</div>
 			<div class="modal-body">Effacer cet enregistrement ?</div>
 			<div class="modal-footer">
-				<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
-				<button type="button" class="btn btn-danger btn-sm" (click)="deleteConfirmed()" data-bs-dismiss="modal">Confirmer</button>
+				<button type="button" class="btn bg-gradient btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
+				<button type="button" class="btn bg-gradient btn-danger btn-sm" (click)="deleteConfirmed()" data-bs-dismiss="modal">Confirmer</button>
 			</div>
 		</div>
 	</div>

src/app/composants/production-upload/production-upload.component.html

@@ -1,8 +1,8 @@
 <form #formRef="ngForm" (ngSubmit)="addProductionFile()" class="needs-validation">
-	<div class="card shadow center" style="min-width:40rem;"col-sm-4>
+	<div class="card shadow center">
 		<div class="card-header">Changement de l'archive d'une production</div>
 		<div class="card-header shadow-sm">
-			<button (click)="goToListProduction()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
+			<button (click)="goToListProduction()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
 		</div>
 		<div class="card-body">
 
@@ -22,7 +22,7 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;Téléverser</button>
+			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;Téléverser</button>
 		</div>
 	</div>
 </form>

src/app/composants/variable-create/variable-create.component.html

@@ -1,8 +1,8 @@
 <form #formRef="ngForm" (ngSubmit)="addVariable()" class="needs-validation">
-	<div class="card shadow center" style="min-width:40rem;">
+	<div class="card shadow center">
 		<div class="card-header">Fiche d'une variable</div>
 		<div class="card-header shadow-sm">
-			<button (click)="goToListVariable()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
+			<button (click)="goToListVariable()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
 		</div>
 		<div class="card-body">
 
@@ -36,7 +36,7 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
+			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
 		</div>
 	</div>
 </form>

src/app/composants/variable-details/variable-details.component.html

@@ -1,7 +1,7 @@
-<div class="card shadow center" style="min-width:40rem;">
+<div class="card shadow center">
   <div class="card-header">Fiche d'une variable</div>
 	<div class="card-header shadow-sm">
-		<button type="button" (click)="goToListVariable()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
+		<button type="button" (click)="goToListVariable()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
 	</div>
 	<div class="card-body">
 
@@ -50,6 +50,6 @@
 
 	</div>
 	<div class="card-footer">
-		<button type="button" (click)="updateVariable(variable.numeroVariable)" class="btn btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;Editer</button>
+		<button type="button" (click)="updateVariable(variable.numeroVariable)" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;Editer</button>
 	</div>
 </div>

src/app/composants/variable-list/variable-list.component.html

@@ -3,8 +3,8 @@
 	<div class="card-header shadow-sm">
 		<div class="row">
 			<div class="form-group col-sm-4 label-nobr">
-				<button type="button" (click)="goToRefreshListVariable()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;Actualiser</button>
-				<button type="button" (click)="goToNewVariable()" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
+				<button type="button" (click)="goToRefreshListVariable()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;Actualiser</button>
+				<button type="button" (click)="goToNewVariable()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
 			</div>
 			<div class="form-group col-sm-8">
 				<select class="form-select form-select-sm" (change)="filtrageParType($event)">

src/app/composants/variable-update/variable-update.component.html

@@ -1,8 +1,8 @@
 <form id="formVariable" #formRef="ngForm" class="needs-validation">
-	<div class="card shadow center" style="min-width:40rem;">
+	<div class="card shadow center">
 		<div class="card-header">Fiche d'une variable</div>
 		<div class="card-header shadow-sm">
-			<button type="button" (click)="goToListVariable()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
+			<button type="button" (click)="goToListVariable()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
 		</div>
 		<div class="card-body">
 
@@ -51,8 +51,8 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;Modifier</button>
-			<button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="fa-solid fa-trash"></i>&nbsp;Effacer</button>
+			<button type="button" class="btn bg-gradient btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;Modifier</button>
+			<button type="button" class="btn bg-gradient btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="fa-solid fa-trash"></i>&nbsp;Effacer</button>
 		</div>
 	</div>
 </form>
@@ -65,8 +65,8 @@
 			</div>
 			<div class="modal-body">Actualiser cet enregistrement ?</div>
 			<div class="modal-footer">
-				<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
-				<button type="button" class="btn btn-warning btn-sm" (click)="updateConfirmed()" data-bs-dismiss="modal">Confirmer</button>
+				<button type="button" class="btn bg-gradient btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
+				<button type="button" class="btn bg-gradient btn-warning btn-sm" (click)="updateConfirmed()" data-bs-dismiss="modal">Confirmer</button>
 			</div>
 		</div>
 	</div>
@@ -80,8 +80,8 @@
 			</div>
 			<div class="modal-body">Effacer cet enregistrement ?</div>
 			<div class="modal-footer">
-				<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
-				<button type="button" class="btn btn-danger btn-sm" (click)="deleteConfirmed()" data-bs-dismiss="modal">Confirmer</button>
+				<button type="button" class="btn bg-gradient btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
+				<button type="button" class="btn bg-gradient btn-danger btn-sm" (click)="deleteConfirmed()" data-bs-dismiss="modal">Confirmer</button>
 			</div>
 		</div>
 	</div>

src/styles.css

@@ -6,7 +6,12 @@
 .center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width:50rem; }
 .scrollable { overflow-y: scroll; overflow-x: hidden; max-height: 600px; }
 
-@media screen and (max-width: 900px) {
+@media not (min-width: 900px), not (min-height: 700px) {
   .center { position: unset; left: unset; top: unset; transform: unset; min-width: unset; }
   .scrollable { overflow-y: unset; overflow-x: unset; max-height: unset; }
-}
+}
+
+@media (min-width: 900px) and (max-height: 699px) {
+  .center { position: absolute; left: 50%; top: 0; transform: translate(-50%, 0%); min-width: 50rem; }
+  .scrollable { overflow-y: unset; overflow-x: unset; max-height: unset; }
+}