1. Contexte
• Entreprise: Booki, plateforme de recherche d’hébergements et d’activités par ville.
• Équipe: Artdantech, Sarah (CTO), Loïc (UI designer).
• Livrables: une page index.html responsive conforme à la maquette, CSS complété dans css/style.css, images correctement intégrées, respect des specs de la note de synthèse, dossier final livré avec la structure fournie.
• Point de départ: maquette Figma, base de code (index.html + css/style.css + images/), note de synthèse. Ne pas réutiliser directement le code Figma (snippets) sans compréhension, privilégier une intégration propre.
2. Besoin
• Intégrer l’interface du site Booki (HTML + CSS uniquement) à partir de la maquette fournie, en version desktop d’abord puis responsive (tablette, mobile).
• Construire l’en-tête, le formulaire de recherche, les filtres, les sections “Hébergements à Marseille”, “Les plus populaires”, “Activités à Marseille” et le footer, en respectant la grille, les espacements et les styles définis.
• Garantir l’accessibilité de base (structure sémantique, textes alternatifs, navigation clavier) et la validité W3C (HTML/CSS).
3. Client
• Utilisateurs finaux cherchant des hébergements/activités par ville sur desktop ou mobile.
• Équipe produit (Sarah) pour la conformité technique et de structure des fichiers.
• Design (Loïc) pour la fidélité visuelle et l’alignement avec la maquette.
4 Objectifs
4.1 Fonctionnels
• Afficher la page d’accueil avec tous les blocs: header, recherche, filtres, hébergements, populaires, activités, footer.
• Permettre la saisie d’une recherche (UI statique), afficher les filtres et leurs états visuels (normal/survol).
• Présenter des cartes d’hébergements et d’activités conformes (image, titre, texte, note/icônes si prévu).
4.2 Techniques
• Intégration 100% HTML/CSS: pas de JS requis; conserver la structure des dossiers fournie (index.html, css/, images/).
• Mise en page avec Flexbox (et Grid si nécessaire), unités adaptées (px pour margins/paddings selon note), responsive via media queries (<=1024px, <768px).
• Typo Raleway (Google Fonts), icônes Font Awesome déjà importées; méta viewport et largeur max 1440px, min 320px.
5. Contraintes / défis
• Ne pas copier le code Figma “tel quel”: risque de mauvais positionnements/mesures. Repartir du HTML/CSS fournis et compléter proprement.
• Respect strict de la maquette: alignements, espacements, bordures au survol, inversion de certaines couleurs de fond selon les breakpoints.
• Accessibilité: attributs alt, hiérarchie des titres, focus visibles, contrastes suffisants.
• Valider W3C, gérer le responsive dans l’ordre prévu (desktop → tablette → mobile) sans casser la structure.
6. Processus / méthodologie
6.1 Analyse
• Découper la maquette en zones: header (logo + nav), barre de recherche (icône de localisation, input, bouton), filtres (icônes + labels), section “Hébergements” (grille de 6 cartes), “Les plus populaires” (liste de cartes horizontales), “Activités” (4 colonnes), footer (3 colonnes).
• Identifier la sémantique: header/nav, main/section/article, h1/h2, ul/li pour listes de cartes, figure/figcaption pour images, footer.
• Recenser les composants réutilisables (cards, tags/filters, boutons) et leurs variantes desktop/mobile.
6.2 Découpage en issues (GitHub)
• Initialisation environnement (VS Code, Live Server), vérification imports Google Fonts/Font Awesome, meta viewport.
• Header desktop (logo + nav + hover border top).
• Formulaire de recherche desktop (icône localisation, input, bouton texte “Rechercher”).
• Filtres (structure + style + hover).
• Première “card” hébergement (verticale), puis duplication x6 + mise en page du conteneur.
• Section “Les plus populaires” (cards horizontales) + lien “Afficher plus”.
• Section “Activités” (4 colonnes, images contraintes en hauteur, object-fit).
• Footer (3 colonnes).
• Responsive: tablette (<=1024px), mobile (<768px) avec changements d’ordre/couleurs/texte-bouton → icône loupe.
• Validation W3C + a11y + finitions (espacements, hover, focus).
6.3 Architecture et logique
• Arborescence: /index.html, /css/style.css, /images/\* (conservée).
• Structure HTML: body > header + main (sections) + footer; un seul h1, h2 par section, listes pour groupes de cartes.
• Cartes: wrapper lien > image (width:% + height:px + object-fit:cover) + contenu (titre, texte, icônes). Border-radius et ombre selon style.
• Barre de recherche: 3 parties (icône localisation, input, CTA). Sur mobile, masquer “Rechercher” et afficher la loupe via CSS.
• Filtres: groupe horizontal en desktop, empilé en mobile; chaque filtre = icône + libellé avec hover/active.
6.4 Choix techniques (justification)
• Flexbox pour la majorité des mises en page (alignements/espacements) afin d’éviter les positionnements absolus fragiles des snippets Figma.
• Unités: px pour margins/paddings (conformément à la note) et %/fr/rem pour largeurs/typos si besoin; conteneur central avec max-width 1440px.
• Images en HTML + object-fit:cover pour éviter les déformations et garantir un rendu cohérent des vignettes.
• Media queries ordonnées: base (desktop) → tablette (<=1024px) → mobile (<768px) pour garder la lisibilité et éviter les collisions CSS.
6.5 Flux principaux
• Header desktop: logo + nav avec bordure bleue au survol (top en desktop, bottom en mobile).
• Recherche desktop: icône localisation + input + bouton “Rechercher”. Mobile: remplacer texte par icône loupe via CSS.
• Filtres: empilement horizontal desktop, gestion hover (changement de couleur de fond) puis adaptation responsive.
• Hébergements: créer une card modèle, dupliquer x6, appliquer la grille responsive; ajouter titre/icone/lien “Afficher plus”.
• Activités: 4 colonnes uniformes en hauteur; construire une carte modèle puis décliner les 3 autres.
• Footer: 3 colonnes égales (listes de liens), suppression du padding-left par défaut des ul si utilisés.
6.6 Tests et qualité
• Validation HTML/CSS via W3C Validators; correction des erreurs éventuelles.
• A11y: attributs alt, ordre des titres, navigation clavier, focus visibles; audit rapide (Lighthouse/aXe).
• Responsive: contrôles aux largeurs clés (320, 360, 768, 1024, 1280, 1440 px); vérification des inversions de couleurs de fond.
• Vérifs UI: bordures hover header, états survol des filtres, intégrité des images (object-fit), cohérence des espacements.
7. Analyse
• En s’appuyant sur Flexbox, une sémantique propre et des media queries progressives, on obtient une intégration fidèle, robuste et responsive. L’abandon des snippets Figma non contrôlés évite les pièges de positionnements absolus et de dimensions rigides, tout en respectant la note de synthèse (px pour marges/paddings).
8. Choix techniques
• HTML5 sémantique, CSS3 structuré (sections, composants, utilitaires légers si besoin).
• Raleway (Google Fonts) et Font Awesome déjà importés; conservation stricte des balises link et de la meta viewport.
• Approche “desktop-first” puis media queries tablette et mobile, avec max-width 1440px et min-width 320px.
9. Logique de résolution
• Construire d’abord la version desktop (structure + styles de base), factoriser une card réutilisable, décliner les sections, puis traiter le responsive avec les deux breakpoints. Finaliser par la validation W3C, l’a11y, et une passe de pixel‑perfect par rapport à la maquette.
10. Stack utilisée
• HTML5, CSS3 (Flexbox, object-fit, media queries).
• Outils: VS Code, Live Server, DevTools (layout/responsive), Validators W3C, Lighthouse/aXe (rapide).
• Assets: dossier images fourni; typographies/icônes via link existants; aucune dépendance JS requise.
11. Résultat final
• Page Booki conforme à la maquette: header, recherche, filtres, “Hébergements à Marseille”, “Les plus populaires”, “Activités à Marseille”, footer.
• Responsive complet (desktop → tablette → mobile), y compris inversions de couleurs de fond et variations bouton texte/icône.
• Qualité: HTML/CSS validés, accessibilité de base respectée, structure de fichiers conservée, prêt pour livraison à Sarah (dossier complet).