Consolidate language-toggle CSS cascade, restore bio slide animation, and prioritize home hero LCP image

[Copilot]

The PR resolves CSS cascade regressions introduced by duplicated language-toggle selectors and duplicated keyframes in assets/css/style.css, which were overriding intended behavior. It also aligns resource loading by prioritizing the home hero LCP image and verifies lazy-loading consistency in shop.html.

• CSS cascade cleanup (language toggle)

  • Merged duplicated definitions of .language-btn, .language-selector, .lang-content, and .lang-content.active into single canonical blocks.
  • Kept the final visual system (black/neon-green theme) while preserving required interaction/layout properties:
    • font-size: 0.9rem
    • min-height/min-width: 44px
    • border-radius: 20px
    • cursor: pointer
    • transition: all 0.3s
    • default opacity: 0.8, hover/active opacity: 1
    • hover/active colors: background: #00ff00; color: #000
  • Removed conflicting early global override targeting .language-btn, .lang-content.

• Animation keyframes de-duplication

  • Renamed translate+opacity animation to @keyframes fadeInSlide.
  • Updated .bio-message.active to use fadeInSlide so the translateY entrance effect is preserved.
  • Kept @keyframes fadeIn for opacity-only usage.
  • Removed duplicate @keyframes fadeOut definition.

• LCP optimization (index.html)

  • Added fetchpriority="high" to the above-the-fold hero image (david_krk_owl.jpg) to improve fetch prioritization.

• shop.html lazy-loading consistency

  • Confirmed all language sections (fr, en, es, eu, ar, uk) already apply loading="lazy" to both product and QR images; no content changes required.

<!-- index.html -->
<img
  src="assets/images/david_krk_owl.jpg"
  alt="David KRK Owl"
  class="responsive-image"
  width="1366"
  height="768"
  fetchpriority="high"
/>

Original prompt

Contexte

Suite à la review de la PR #260, plusieurs problèmes ont été identifiés dans assets/css/style.css, index.html et shop.html. Cette PR applique les corrections suivantes.

---

1. Fusionner les 3 blocs .language-btn en un seul (problème critique de cascade CSS)

Dans assets/css/style.css, .language-btn est défini 3 fois :

• Bloc 1 (ligne ~527) : style blanc/transparent, padding, min-height/width 44px, font-size 0.9rem
• Bloc 2 (ligne ~767) : opacity 0.7, transition
• Bloc 3 (ligne ~788, section "Langues toggle") : style noir/vert néon, border verte, padding, min-height/width 44px — écrase tout le reste

De même .language-selector, .lang-content, .lang-content.active et .language-btn:hover/.language-btn.active sont tous définis en double.

Action requise : Consolider en un seul bloc par sélecteur, en gardant le style visuel final (bloc 3 = fond noir, border verte #00ff00, couleur verte) tout en préservant :

• font-size: 0.9rem
• min-height: 44px et min-width: 44px
• border-radius: 20px
• cursor: pointer
• transition: all 0.3s
• opacity: 0.8 par défaut, opacity: 1 au hover/active
• hover/active : background: #00ff00; color: #000;

Pour .language-selector, garder : display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 1rem;

Pour .lang-content : display: none; background: rgba(0,0,0,0.9); padding: 20px; border-radius: 10px; margin-top: 20px;
Pour .lang-content.active : display: block;

---

2. Corriger les doublons de @Keyframes

@keyframes fadeIn est défini deux fois dans le fichier :

• Première définition (~ligne 559) : inclut translateY(10px) → translateY(0) + opacity (utilisée par .bio-message.active)
• Deuxième définition (~ligne 750) : opacity seulement (utilisée par .fadein) — écrase la première

Résultat : l'animation .bio-message.active perd son effet translateY.

Action : Renommer la première en @keyframes fadeInSlide (avec translateY) et mettre à jour .bio-message.active { animation: fadeInSlide 0.8s ease-out; }. Garder @keyframes fadeIn pour l'usage opacity seul.

De même, @keyframes fadeOut est dupliqué (~ligne 569 et ~ligne 758) : supprimer le doublon et garder une seule définition.

---

3. Optimiser l'image hero LCP dans index.html

Dans index.html ligne ~114 :

<img src="assets/images/david_krk_owl.jpg" alt="David KRK Owl" class="responsive-image" width="1366" height="768">

Cette image est le LCP (Largest Contentful Paint) de la page. Ajouter fetchpriority="high" pour indiquer au navigateur de la charger en priorité :

<img src="assets/images/david_krk_owl.jpg" alt="David KRK Owl" class="responsive-image" width="1366" height="768" fetchpriority="high">

Ne pas ajouter loading="lazy" sur cette image (elle est above-the-fold).

---

4. Vérification shop.html — lazy loading cohérent

Dans shop.html, vérifier que tous les blocs de langue (fr, en, es, eu, ar, uk) ont bien loading="lazy" sur les deux images (tshirt-davidkrk.png et qr-tshirt-boutique.png). Si certains blocs en manquent, les ajouter.

---

Résumé des fichiers à modifier

• assets/css/style.css : consolidation des sélecteurs dupliqués, renommage fadeInSlide
• index.html : ajout fetchpriority="high" sur l'image hero
• shop.html : vérification et ajout loading="lazy" manquants

Travailler sur la branche gh-pages.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: Help me review this pull request.

Assistant: Voici ma revue complète de ta PR !

---

📋 1. Résumé de la PR

Info	Détail
Objectif	Améliorer l'accessibilité (tap targets 44×44px) et les performances Lighthouse (lazy-loading)
Fichiers modifiés	3 (assets/css/style.css, index.html, shop.html)
Lignes	+14 / -5
État reviews	✅ Approuvée par toi (DavidKRK) + commentaires du bot Copilot
Risque	🟡 Moyen — un problème de cascade CSS à régler

---

🔍 2. Changements principaux — style.css

C'est le cœur du diff que tu m'as partagé. Voici les 4 blocs modifiés :

.hero-header a — Liens de navigation desktop

- margin: 0 1rem;
- padding: 0.4rem 0.35rem;
+ justify-content: center;   /* ✅ centre le contenu dans le flex */
+ margin: 0 0.5rem;          /* espace réduit entre liens */
+ min-width: 44px;           /* ✅ nouveau : largeur minimale tap target */
+ padding: 0.6rem 0.75rem;   /* padding augmenté pour atteindre 44px */

👍 Bon : min-height: 44px existait déjà, ajouter min-width: 44px complète bien la conformité WCAG 2.5.5.
ℹ️ Note : réduire le margin de 1rem → 0.5rem peut tasser les liens en desktop selon la taille du header.

---

`.he...

This pull request was created from Copilot chat.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[Copilot]

Copilot wasn't able to review any files in this pull request.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.

[DavidKRK]

Ok

[DavidKRK]

@copilot resolve the merge conflicts in this pull request

[Copilot]

@copilot resolve the merge conflicts in this pull request

Merge conflict resolved in index.html. The conflict was between our fetchpriority="high" addition and a decoding="async" attribute added on gh-pages. I kept both attributes in the final resolution (0415a7c).

[DavidKRK]

J’approuve
Le refactor CSS est propre, les doublons sont supprimés, et le renommage de l’animation est cohérent.

Petit point de vigilance avant d’approuver à 100 % :

vérifier que les boutons de langue ont toujours le bon rendu ;
vérifier que .lang-content.active s’affiche bien ;
vérifier que l’animation bio fonctionne toujours ;
vérifier mobile/desktop rapidement.