Affichage correct des boutons et des étoiels sur fiche film

assets/vue/controllers/SwitchEtat.vue

@@ -34,6 +34,8 @@ const props = defineProps({
     tag: { type: String, default: 'a' },
     // Classes CSS additionnelles pour la balise (ex: 'btn text-primary')
     classe: { type: String, default: '' },
+    // Taille Font Awesome de l'icône (fa-lg, fa-sm, ... — vide : taille du texte courant)
+    taille: { type: String, default: '' },
     // Animation Font Awesome appliquée à l'icône cible pendant la requête
     // (fa-beat-fade, fa-beat, fa-flip, ... — vide pour désactiver)
     animationChargement: { type: String, default: 'fa-beat-fade' },
@@ -45,19 +47,15 @@ const enChargement = ref(false);
 // L'icône cible est celle qui sera affichée si la requête réussit
 const iconeCible = computed(() => (estActif.value ? props.iconeInactif : props.iconeActif));
 
-// Préserve les classes de taille (fa-lg, fa-2xl, ...) pendant le chargement
-const classesTaille = computed(() => {
-    const icone = enChargement.value ? iconeCible.value : (estActif.value ? props.iconeActif : props.iconeInactif);
-    return icone.split(' ').filter((c) => /^fa-(2?xs|sm|lg|2?xl|[0-9]x|fw)$/.test(c));
-});
-
 const iconeCourante = computed(() => {
     if (enChargement.value) {
-        return [iconeCible.value, props.animationChargement, ...classesTaille.value]
+        return [iconeCible.value, props.animationChargement, props.taille]
             .filter(Boolean)
             .join(' ');
     }
-    return estActif.value ? props.iconeActif : props.iconeInactif;
+    return [estActif.value ? props.iconeActif : props.iconeInactif, props.taille]
+        .filter(Boolean)
+        .join(' ');
 });
 
 async function switchEtat() {

src/Bascule/BasculeAVoir.php

@@ -15,8 +15,8 @@ final class BasculeAVoir extends AbstractBasculeFilm
     {
         parent::__construct(
             routeName: 'maliste_modifier_a_voir',
-            iconeActif: 'fa-solid fa-bookmark fa-lg',
-            iconeInactif: 'fa-regular fa-bookmark text-secondary fa-lg',
+            iconeActif: 'fa-solid fa-bookmark',
+            iconeInactif: 'fa-regular fa-bookmark text-secondary',
             texteActif: 'Supprimer ce film de votre liste à voir',
             texteInactif: 'Ajouter ce film à votre liste à voir',
             avecInfoBulle: true,

src/Bascule/BasculeVu.php

@@ -15,8 +15,8 @@ final class BasculeVu extends AbstractBasculeFilm
     {
         parent::__construct(
             routeName: 'maliste_modifier_vus',
-            iconeActif: 'fa-solid fa-eye fa-lg text-success',
-            iconeInactif: 'fa-solid fa-eye-slash fa-lg text-secondary',
+            iconeActif: 'fa-solid fa-eye text-success',
+            iconeInactif: 'fa-solid fa-eye-slash text-secondary',
             texteActif: 'Supprimer ce film de votre liste des films vus',
             texteInactif: 'Marquer ce film comme vu',
         );

templates/videotheque/_bascule_film.html.twig

@@ -6,6 +6,7 @@
 {#   - film: le film concerné #}
 {#   - tag: balise racine du composant, 'a' (défaut) ou 'button' #}
 {#   - classe: classes CSS de la balise (ex: 'btn text-primary') #}
+{#   - taille: taille des icônes (défaut 'fa-lg') #}
 {% set actif = bascule.estActifPour(app.user, film) %}
 <span {{ vue_component('SwitchEtat', {
     path: path(bascule.routeName()),
@@ -16,5 +17,6 @@
     titre: actif ? bascule.texteActif() : bascule.texteInactif(),
     tooltip: bascule.avecInfoBulle(),
     tag: tag|default('a'),
-    classe: classe|default('')
+    classe: classe|default(''),
+    taille: taille|default('fa-lg')
 }) }}></span>

templates/videotheque/voirfilm.html.twig

@@ -3,21 +3,23 @@
 {% block title %}{{ parent() }} - Fiche film - {{ film.titre }}{% endblock %}
 {% block titre %}
     {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
-        {{ include('videotheque/_bascule_film.html.twig', { bascule: bascule_film('a_voir'), film: film }) }}
-        {{ include('videotheque/_bascule_film.html.twig', { bascule: bascule_film('vu'), film: film }) }}
+        <span class="fs-5 d-inline-flex align-items-center gap-2 align-middle">
+            {{ include('videotheque/_bascule_film.html.twig', { bascule: bascule_film('a_voir'), film: film, taille: 'fa-lg' }) }}
+            {{ include('videotheque/_bascule_film.html.twig', { bascule: bascule_film('vu'), film: film, taille: 'fa-lg' }) }}
+        </span>
     {% endif %}
     {{ film.titre }}
-    
+
     {% if film.averageNote > 0 %}
-        <p>
+        <span class="fs-5 d-inline-flex align-items-center ms-2 align-middle">
             {{ include('videotheque/_star_rating.html.twig', {
                 value: film.averageNote,
                 max: 5,
                 step: 0.5,
                 disabled: true,
-                size: 'xs'
+                size: 'md'
             }) }}
-        </p>
+        </span>
     {% endif %}
 {% endblock %}