Le responsive sur tous les écrans

Ta page « Qui suis-je » de l'étape 2 va devenir un portfolio d'une page. Dans le <header>, ton nom passe en <p class="logo"> : le <h1> ira dans l'accroche. Puis ajoute ces deux sections dans <main> :

<section class="hero">
  <h1>Salut, moi c'est Alex</h1>
  <p>J'apprends à construire des sites qui marchent sur tous les écrans.</p>
  <a class="bouton" href="#projets">Voir mes projets</a>
</section>

<section id="projets">
  <h2>Mes projets</h2>
  <div class="projets">
    <article class="carte">
      <img src="images/projet-1.jpg" alt="Capture de ma page Qui suis-je, sans style">
      <h3>Ma page « Qui suis-je »</h3>
      <p>Ma toute première page, en HTML pur.</p>
      <a href="#">Voir le projet</a>
    </article>
    <article class="carte">
      <img src="images/projet-2.jpg" alt="Capture de ma page avec ses couleurs et sa galerie">
      <h3>La même, en mieux</h3>
      <p>Le CSS, flexbox et grid sont passés par là.</p>
      <a href="#">Voir le projet</a>
    </article>
    <article class="carte">
      <img src="images/projet-3.jpg" alt="Capture de mon portfolio sur un téléphone">
      <h3>Ce portfolio</h3>
      <p>Il s'adapte à tous les écrans.</p>
      <a href="#">Voir le projet</a>
    </article>
  </div>
</section>

Pour les images, fais des captures de tes pages des étapes 1 et 2. Puis regarde ta page sur téléphone :

1. Ouvre-la avec Live Server, puis F12.
2. Active le mode appareil : Ctrl + Maj + M (⌘ + Maj + M sur Mac).
3. Choisis « Responsive » et tape 320 en largeur, celle des plus petits téléphones.

Tu l'as tapée à l'étape 1. Sans elle, un téléphone affiche la page sur environ 980 px puis la rétrécit : illisible sans zoomer, et tes media queries ne se déclenchent jamais.

<meta name="viewport" content="width=device-width, initial-scale=1">

• width=device-width : la largeur de la page = la largeur réelle de l'écran.
• initial-scale=1 : pas de zoom au chargement.

Un px ne s'adapte à rien. Les unités relatives dépendent du parent, de l'écran ou de la taille de texte choisie par l'utilisateur.

html {
  font-size: 100%; /* 16px par défaut, ou ce que l'utilisateur a réglé */
}

body {
  font-size: 1rem;
  line-height: 1.6;
}

h2 {
  font-size: 1.75rem;
  margin-bottom: 0.5em;
}

p {
  max-width: 65ch;
}

.carte {
  width: 100%;
  padding: 1.5rem;
}

.hero {
  min-height: 80vh;
}

• rem : relatif au texte de la page (16 px par défaut). Ton choix par défaut.
• em : relatif au texte de l'élément lui-même. La marge du h2 grandit avec lui.
• % : relatif au parent. vw et vh : 1 % de la largeur ou de la hauteur de l'écran.
• ch : la largeur d'un caractère. 65ch évite les lignes interminables.

Une photo de 1200 px dans un écran de 320 px, ça dépasse. Ajoute ça en haut de ton CSS :

img {
  max-width: 100%;
  height: auto;
  display: block;
}

L'image ne dépasse plus son conteneur et garde ses proportions.

Une media query, c'est du CSS appliqué sous condition. En mobile first, tu écris d'abord pour le téléphone, puis ce qui change en grand avec min-width.

/* Base : téléphone */
body {
  padding: 1rem;
}

.apropos {
  display: grid;
  gap: 1.5rem;
}

/* À partir de 600px : tablette */
@media (min-width: 600px) {
  body {
    padding: 2rem;
  }
}

/* À partir de 1024px : ordinateur */
@media (min-width: 1024px) {
  main {
    max-width: 1100px;
    margin: 0 auto;
  }

  .apropos {
    grid-template-columns: 1fr 2fr;
    align-items: center;
  }
}

Ajoute class="apropos" à ta section à propos, avec ta photo et ton texte dedans.

• @media (min-width: 600px) : « si l'écran fait au moins 600 px ». En dessous, le bloc est ignoré.
• max-width + margin: 0 auto : sur grand écran, le contenu reste centré.
• Les media queries vont après les styles qu'elles modifient. Sinon, une règle plus bas les écrase.

Pour tes cartes de projets, pas besoin d'une media query par écran. Grid sait le faire tout seul :

.projets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

• minmax(250px, 1fr) : une colonne fait au moins 250 px, au plus une part de la place restante.
• auto-fit : autant de colonnes que possible. Une sur téléphone, trois sur ordinateur.

Ton titre de 4rem tient sur cinq lignes sur téléphone. Avec clamp(), sa taille glisse toute seule selon l'écran :

h1 {
  font-size: clamp(2rem, 1.25rem + 4vw, 4rem);
  line-height: 1.1;
}

.hero {
  padding-block: clamp(2rem, 8vw, 6rem);
}

• clamp(minimum, idéal, maximum) : jamais sous 2rem, jamais au-dessus de 4rem.
• 1.25rem + 4vw : la taille idéale, qui grandit avec l'écran.
• padding-block : le padding en haut et en bas. clamp() marche aussi pour les espacements.

À 320 px, ton menu déborde. Le menu « hamburger », c'est du JavaScript, pour l'étape 4. Pour l'instant : empiler sur mobile, aligner sur ordinateur.

/* Base : téléphone */
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

nav a {
  display: block;
  padding: 0.75rem 1rem;
}

/* À partir de 600px */
@media (min-width: 600px) {
  header {
    flex-direction: row;
    justify-content: space-between;
  }
}

• flex-direction: column : ton nom au-dessus, le menu en dessous.
• flex-wrap: wrap : trop de liens ? Ils passent à la ligne au lieu de déborder.
• nav a en block avec du padding : environ 48 px de haut, assez pour un doigt.

Teste ta page à 320, 375, 768, 1024 et 1440 px, puis zoomée à 200 %. Si elle défile sur le côté, quelque chose dépasse. Pour le trouver, ajoute ça à la fin de ton CSS :

/* Debug : à supprimer après */
* {
  outline: 1px solid red;
}

• Chaque élément a un contour rouge. Celui qui sort de l'écran saute aux yeux.
• outline plutôt que border : le contour ne prend pas de place.
• Les suspects habituels : une largeur en px, une image sans max-width, une longue URL, un minmax() trop grand.