/* ========================================================================== Responsive — Mobile-first, 4 breakpoints (480, 768, 1024, 1280px) ========================================================================== GUIDE COMPLET DU RESPONSIVE DESIGN — Pour débutants ==================================================== Qu'est-ce que le responsive design ? ------------------------------------- Le responsive design permet à un site web de s'adapter automatiquement à toutes les tailles d'écran : téléphone, tablette, ordinateur portable et grand écran de bureau. L'APPROCHE "MOBILE-FIRST" (le mobile d'abord) ----------------------------------------------- Dans ce projet, on utilise la stratégie "mobile-first". Cela signifie que : 1. Les styles de BASE (définis dans les autres fichiers CSS comme style.css) sont conçus pour les PETITS écrans (téléphones). 2. On utilise ensuite des @media queries avec "min-width" pour AJOUTER de la complexité au fur et à mesure que l'écran s'agrandit. C'est comme construire une maison : on pose d'abord les fondations (mobile), puis on ajoute des étages (tablette, desktop). Pourquoi mobile-first ? - La majorité du trafic web vient des mobiles. - C'est plus facile d'ajouter de la complexité que d'en retirer. - Les styles de base restent simples et légers. @media (min-width) vs @media (max-width) — QUAND UTILISER CHACUN ? ------------------------------------------------------------------- @media (min-width: 768px) → "À PARTIR DE 768px et au-dessus" ➜ Utilisé pour AJOUTER des fonctionnalités aux grands écrans. ➜ C'est l'approche mobile-first : on part du petit et on monte. @media (max-width: 767px) → "JUSQU'À 767px et en dessous" ➜ Utilisé pour cibler UNIQUEMENT les petits écrans (mobiles). ➜ Parfait quand on doit appliquer un style spécifique au mobile qui n'a pas de sens sur les grands écrans (ex : menu hamburger). ATTENTION au piège des 1px de chevauchement ! On utilise max-width: 767px (et non 768px) pour COMPLÉTER le min-width: 768px. Ainsi, il n'y a aucun chevauchement : - 0px → 767px = max-width: 767px (mobile) - 768px → ∞ = min-width: 768px (tablette et plus) Si on mettait max-width: 768px, les styles des deux blocs s'appliqueraient en même temps à exactement 768px = conflit ! STRATÉGIE DES BREAKPOINTS (points de rupture) ----------------------------------------------- Un breakpoint est la largeur d'écran à laquelle le design change. | Breakpoint | Cible | Utilisation ici | |-------------|-------------------------------|--------------------------| | 480px | Grand téléphone / Petit tablet| Photo hero plus grande | | 768px | Tablette (iPad portrait) | Menu desktop, grille 2col| | 1024px | Petit desktop / iPad paysage | Grille 3col, padding | | 1280px | Grand écran de bureau | Padding plus large | Ces valeurs ne sont pas arbitraires : elles correspondent aux tailles d'écran les plus courantes dans le marché actuel. ========================================================================== */ /* ============================================================================ BREAKPOINT 1 : GRAND MOBILE / PETIT TABLETTE (480px et plus) ============================================================================ @media (min-width: 480px) signifie : "Applique ces styles UNIQUEMENT si l'écran fait 480px de large OU PLUS." À cette taille, on a un peu plus de place, donc on peut agrandir certains éléments comme la photo du héros (section d'accueil). ============================================================================ */ @media (min-width: 480px) { /* * TAILLE DE LA PHOTO RESPONSIVE * ------------------------------ * Sur très petit écran (< 480px), la photo fait 200px (défini plus bas * dans le bloc max-width: 767px). * * À partir de 480px, on l'agrandit à 250px car on a plus de place. * C'est un bon exemple de responsive design progressif : * petit écran = petite image, grand écran = plus grande image. * * "width" et "height" sont identiques pour garder un cercle parfait * (avec border-radius: 50% défini dans le fichier CSS principal). */ .hero__photo-wrapper { width: 250px; height: 250px; } } /* ============================================================================ BREAKPOINT 2 : TABLETTE (768px et plus) ============================================================================ C'est le breakpoint le plus important du projet. À 768px, on bascule du mode "mobile" au mode "desktop" pour la navigation et les grilles. 768px correspond à la largeur d'un iPad en mode portrait — c'est le standard de l'industrie pour séparer mobile et tablette. ============================================================================ */ @media (min-width: 768px) { /* * LE PATTERN DU MENU HAMBURGER — Partie Desktop * ----------------------------------------------- * Sur desktop (768px+), on AFFICHE le menu classique horizontal * et on CACHE le bouton hamburger (les 3 barres ☰). * * Comment ça marche ensemble : * * Mobile (< 768px) : * .navbar__menu → display: none (caché par défaut) * .navbar__hamburger → display: flex (visible, bouton ☰) * Quand on clique le hamburger, JavaScript ajoute la classe * .is-open au menu, ce qui le passe en display: flex. * * Desktop (768px+) : * .navbar__menu → display: flex (toujours visible) * .navbar__hamburger → display: none (caché, inutile) * * C'est un pattern très courant en web design moderne. * "display: flex" permet d'aligner les liens du menu en ligne. * "display: none" retire complètement l'élément de la page * (il ne prend plus aucune place, comme s'il n'existait pas). */ .navbar__menu { display: flex; } .navbar__hamburger { display: none; } /* * GRILLE DES COMPÉTENCES — 2 COLONNES sur tablette * ------------------------------------------------- * Sur mobile, la grille est en 1 colonne (1fr, défini plus bas). * À partir de 768px, on passe à 2 colonnes. * * "repeat(2, 1fr)" signifie : crée 2 colonnes de taille égale. * "1fr" = 1 fraction de l'espace disponible. * Donc 2 x 1fr = chaque colonne prend 50% de la largeur. * * POURQUOI on a besoin de CE breakpoint ET du suivant (1024px) ? * Parce que la progression est : * Mobile (< 768px) → 1 colonne (les cartes s'empilent) * Tablette (768px+) → 2 colonnes (côte à côte par paires) * Desktop (1024px+) → 3 colonnes (affichage optimal) * * Sans le breakpoint 768px, on passerait directement de 1 à 3 colonnes, * ce qui laisserait un rendu bizarre entre 768px et 1023px : des cartes * trop étirées en une seule colonne sur un grand écran de tablette. */ .competences__grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================================ BREAKPOINT 3 : PETIT DESKTOP (1024px et plus) ============================================================================ 1024px correspond à un iPad en mode paysage ou un petit ordinateur portable. À cette taille, on a assez de place pour afficher 3 colonnes et on augmente les marges intérieures (padding). ============================================================================ */ @media (min-width: 1024px) { /* * PADDING-INLINE : LES MARGES HORIZONTALES DU CONTENEUR * ------------------------------------------------------ * "padding-inline" est un raccourci moderne CSS qui applique un padding * à gauche ET à droite (les côtés "inline" = horizontaux en français). * * C'est équivalent à écrire : * padding-left: 2rem; * padding-right: 2rem; * * Pourquoi on l'augmente par breakpoint ? * Sur mobile, on veut maximiser l'espace de contenu (peu de marge). * Sur desktop, on a beaucoup de place, donc on ajoute des marges * pour que le contenu ne colle pas aux bords — c'est plus lisible * et plus esthétique. * * 2rem = 32px (car 1rem = 16px par défaut dans la plupart des navigateurs). */ .container { padding-inline: 2rem; } /* * GRILLE DES COMPÉTENCES — 3 COLONNES sur desktop * ------------------------------------------------ * On restaure les 3 colonnes maintenant qu'on a assez de place. * * "repeat(3, 1fr)" = 3 colonnes de largeur égale (chacune ≈ 33.3%). * * RÉCAPITULATIF de la progression des compétences : * < 768px → 1 colonne (mobile, défini dans max-width: 767px) * ≥ 768px → 2 colonnes (tablette, défini au breakpoint précédent) * ≥ 1024px → 3 colonnes (desktop, défini ICI) * * Ce breakpoint ÉCRASE la règle du 768px grâce à la cascade CSS : * quand deux règles ont la même spécificité, c'est la DERNIÈRE * dans le code qui gagne. Et comme min-width: 1024px est aussi * vrai quand min-width: 768px est vrai, la règle de 1024px * prend le dessus sur les écrans ≥ 1024px. */ .competences__grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================================================ BREAKPOINT 4 : GRAND DESKTOP (1280px et plus) ============================================================================ 1280px et au-delà, c'est pour les grands écrans de bureau (Full HD, écrans larges). On continue d'augmenter les marges pour garder le contenu centré et aéré. ============================================================================ */ @media (min-width: 1280px) { /* * AJUSTEMENT DU PADDING-INLINE POUR GRANDS ÉCRANS * ------------------------------------------------ * On passe de 2rem (1024px) à 2.5rem (40px) ici. * Sur un écran de 1920px de large, sans ce padding supplémentaire, * le contenu irait jusqu'aux bords — pas très agréable à lire. * * Progression complète du padding-inline : * Mobile → valeur par défaut (définie dans style.css) * ≥ 1024px → 2rem (32px) * ≥ 1280px → 2.5rem (40px) */ .container { padding-inline: 2.5rem; } } /* ============================================================================ STYLES SPÉCIFIQUES AU MOBILE (en dessous de 768px) ============================================================================ POURQUOI max-width: 767px et pas max-width: 768px ? ---------------------------------------------------- Parce qu'on a déjà un breakpoint @media (min-width: 768px) plus haut. Si on mettait max-width: 768px ici, à exactement 768px de largeur, les DEUX blocs s'appliqueraient en même temps : - min-width: 768px → VRAI (768 ≥ 768) - max-width: 768px → VRAI (768 ≤ 768) Résultat : conflit ! Le menu serait à la fois affiché ET caché. En utilisant max-width: 767px, on crée une séparation nette : - 0 à 767px → Ce bloc s'applique (mobile) - 768px et plus → Le bloc min-width: 768px s'applique (tablette/desktop) POURQUOI utiliser max-width ici au lieu de rester en mobile-first ? ------------------------------------------------------------------- Certains styles mobiles sont très spécifiques (menu déroulant en position absolue, empilement vertical, etc.) et n'ont AUCUN sens sur desktop. Plutôt que de les définir par défaut et de les annuler à 768px, il est plus propre de les isoler dans un bloc max-width. C'est une exception pragmatique à la règle mobile-first. ============================================================================ */ @media (max-width: 767px) { /* * LE MENU HAMBURGER — Partie Mobile (le menu déroulant) * ----------------------------------------------------- * Sur mobile, le menu de navigation est CACHÉ par défaut (display: none). * Il apparaît uniquement quand l'utilisateur clique sur le bouton hamburger, * grâce à la classe .is-open ajoutée par JavaScript (voir plus bas). * * POSITION: ABSOLUTE — Pourquoi ? * -------------------------------- * "position: absolute" retire le menu du flux normal de la page. * Le menu se positionne par rapport à son parent positionné (la navbar). * * "top: 100%" place le menu JUSTE EN DESSOUS de la navbar. * (100% = toute la hauteur du parent, donc juste après) * * "left: 0" et "width: 100%" font que le menu prend toute la largeur. * * Sans position: absolute, le menu pousserait tout le contenu vers le bas * quand il s'ouvre. Avec absolute, il se SUPERPOSE au contenu, comme * un menu déroulant flottant — bien plus élégant sur mobile. * * FLEX-DIRECTION: COLUMN — L'EMPILEMENT VERTICAL * ------------------------------------------------ * Sur desktop, les liens du menu sont en LIGNE (row = horizontal). * Sur mobile, on les empile en COLONNE (column = vertical) car * l'écran n'est pas assez large pour tout mettre côte à côte. * * flex-direction: column transforme : * [Accueil] [Projets] [Contact] ← desktop (row) * en : * [Accueil] ← mobile (column) * [Projets] * [Contact] * * Le "gap: 0.5rem" ajoute un espacement de 8px entre chaque lien. * * BOX-SHADOW : l'ombre portée donne un effet de "carte flottante" * au menu, ce qui aide visuellement à le distinguer du contenu dessous. */ .navbar__menu { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--bg-elevated); flex-direction: column; padding: 1rem; gap: 0.5rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } /* * OUVERTURE DU MENU — La classe .is-open * ---------------------------------------- * Quand l'utilisateur clique sur le bouton hamburger (☰), un script * JavaScript ajoute la classe "is-open" au menu. * * Cette classe passe le menu de display: none à display: flex, * ce qui le rend visible avec une disposition en colonne * (grâce au flex-direction: column défini juste au-dessus). * * C'est un pattern classique en développement web : * CSS définit les STYLES (caché / visible) * JavaScript contrôle le COMPORTEMENT (ajouter/retirer la classe) */ .navbar__menu.is-open { display: flex; } /* * LE BOUTON HAMBURGER — Visible sur mobile * ------------------------------------------ * Le bouton hamburger (☰ = trois barres horizontales) est AFFICHÉ * sur mobile avec display: flex. * * Rappel : sur desktop (≥ 768px), ce même bouton a display: none. * * "display: flex" (et non "display: block") permet de centrer * facilement l'icône à l'intérieur du bouton. */ .navbar__hamburger { display: flex; } /* * SECTION HERO — Empilement vertical sur mobile * ----------------------------------------------- * FLEX-DIRECTION: COLUMN est la clé du responsive ici. * * Sur desktop, le hero affiche le texte et la photo CÔTE À CÔTE * (flex-direction: row, par défaut). * * Sur mobile, on empile le texte AU-DESSUS de la photo * (flex-direction: column) car l'écran est trop étroit pour * les mettre côte à côte. * * text-align: center centre le texte pour un meilleur rendu * quand tout est empilé verticalement. */ .hero__container { flex-direction: column; text-align: center; } /* * Le contenu du hero (titre, sous-titre, boutons) est centré * horizontalement avec align-items: center. * Sur desktop, il est aligné à gauche (flex-start) par défaut. */ .hero__content { align-items: center; } /* * TAILLE DE LA PHOTO SUR MOBILE * ------------------------------ * Sur le plus petit écran (< 480px), la photo fait 200x200px. * À 480px+, elle passe à 250px (voir le breakpoint plus haut). * Sur desktop, elle est encore plus grande (défini dans style.css). * * Cette progression de taille est un excellent exemple de * "responsive images" : adapter la taille de l'image à l'écran * pour ne pas gaspiller d'espace sur mobile. */ .hero__photo-wrapper { width: 200px; height: 200px; } /* * GRILLES EN COLONNE UNIQUE (1fr) SUR MOBILE * ============================================ * Toutes les grilles ci-dessous utilisent le même principe : * grid-template-columns: 1fr * * Qu'est-ce que "1fr" ? * "fr" = fraction. "1fr" = 1 fraction = 100% de la largeur disponible. * En d'autres termes : UNE SEULE COLONNE qui prend toute la largeur. * * Sur desktop, ces mêmes grilles ont 2 ou 3 colonnes (repeat(2, 1fr) * ou repeat(3, 1fr)), défini dans leurs fichiers CSS respectifs. * * Pourquoi une seule colonne sur mobile ? * Parce que sur un écran de 375px de large, mettre 2 colonnes * donnerait des colonnes de ~187px chacune — beaucoup trop étroit * pour du contenu lisible. Une seule colonne = contenu pleine largeur. */ /* Section Profil : les détails (lieu, âge, etc.) s'empilent */ .profil__details { grid-template-columns: 1fr; } /* Section Parcours : les étapes s'empilent verticalement */ .parcours__grid { grid-template-columns: 1fr; } /* Section Contact : formulaire et infos s'empilent */ .contact__grid { grid-template-columns: 1fr; } /* Les champs du formulaire de contact passent aussi en 1 colonne */ .contact__form { grid-template-columns: 1fr; } /* * FOOTER — Empilement vertical * ----------------------------- * Même logique que le hero : flex-direction: column empile les * éléments du footer (logo, liens, copyright) les uns sous les autres. * text-align: center assure un alignement propre. * gap: 1rem ajoute 16px d'espace entre chaque élément empilé. */ .footer__container { flex-direction: column; gap: 1rem; text-align: center; } /* * GRILLE DES COMPÉTENCES — 1 COLONNE sur mobile * ----------------------------------------------- * C'est ici que la grille des compétences est définie à 1 colonne. * Rappel de la progression complète : * < 768px → 1 colonne (ICI, dans ce bloc max-width: 767px) * ≥ 768px → 2 colonnes (dans le bloc min-width: 768px) * ≥ 1024px → 3 colonnes (dans le bloc min-width: 1024px) */ .competences__grid { grid-template-columns: 1fr; } /* * UTILITAIRES DE GRILLE — Forcer 1 colonne sur mobile * ---------------------------------------------------- * Les classes .grid--2 et .grid--3 sont des utilitaires réutilisables * qui créent des grilles à 2 ou 3 colonnes par défaut. * Sur mobile, on les force toutes en 1 colonne. * * La virgule entre les sélecteurs signifie "OU" : * cette règle s'applique à .grid--2 ET à .grid--3. */ .grid--2, .grid--3 { grid-template-columns: 1fr; } /* * MODALE DE DÉTAIL DE PROJET — Adaptations mobiles * -------------------------------------------------- * La modale (fenêtre pop-up) qui affiche les détails d'un projet * doit aussi s'adapter au mobile : * * - padding réduit (1.5rem au lieu de plus) pour maximiser l'espace * - la galerie d'images a une hauteur max de 300px pour ne pas * prendre tout l'écran * - flex-direction: column empile la galerie et le texte verticalement * au lieu de les mettre côte à côte */ .project-detail__content { padding: 1.5rem; } .project-detail__gallery-col { max-height: 300px; } .project-detail__layout { flex-direction: column; } }