Développement web module 2 : le CSS, l'art de la mise en forme

Jour 15 — Brancher une feuille de style

Objectif : créer un fichier CSS, le relier à votre page, et comprendre ce qu'est une règle CSS.

Théorie (20 min)

Le CSS (Cascading Style Sheets, feuilles de style en cascade) est le langage qui décrit l'apparence : couleurs, tailles, espacements, mise en page. Le HTML dit ce qu'est le contenu, le CSS dit à quoi il ressemble. Cette séparation est le principe le plus important du métier : on change toute l'allure d'un site sans toucher à son HTML.

Le CSS vit dans son propre fichier, par convention style.css, relié à la page par une balise <link> dans le <head> :

<link rel="stylesheet" href="style.css">

Le CSS est fait de règles. Une règle a trois morceaux : un sélecteur (qui viser), et entre accolades des déclarations de la forme propriété: valeur; :

h1 {
  color: darkblue;
  text-align: center;
}

Cette règle dit : « tous les <h1> : texte bleu foncé, centré ». Le point-virgule termine chaque déclaration — l'oublier casse la déclaration suivante, c'est la faute de frappe n° 1 du débutant CSS.

Le « C » de CSS veut dire cascade : quand plusieurs règles visent le même élément, le navigateur les départage par priorité (demain) et, à priorité égale, la dernière écrite gagne.

Pratique (30 min)

1. Dans votre dossier devweb, créez un dossier module2. Copiez-y votre moi.html du jour 13, et créez un fichier vide style.css à côté.
2. Dans moi.html, ajoutez la balise <link> ci-dessus dans le <head>, sous le <title>.
3. Dans style.css, écrivez la règle h1 ci-dessus. Enregistrez les deux fichiers, rechargez. Critère de réussite : votre titre principal est bleu foncé et centré — votre premier style.
4. Ajoutez p { line-height: 1.6; } (l'interligne, en multiple de la taille du texte) : vos paragraphes respirent.
5. Changez le chemin du href pour un nom faux, rechargez : tout le style disparaît. Ouvrez la console des outils de développement (F12) : une erreur 404 sur style.css y est affichée. C'est ainsi qu'on diagnostique une feuille de style qui « ne marche pas ». Réparez.

Tips agent : « ma page n'a plus aucun style, voici mon head et ma console : [collez] » — le diagnostic est immédiat. Piège : ne collez que le HTML sans l'erreur de la console, et il devinera. Preuve à demander : la cause exacte (chemin, casse, faute de frappe), pas un style réécrit.

Synthèse (10 min)

Trois lignes : les trois morceaux d'une règle CSS, où vit la balise link, ce que veut dire « cascade ». Puis rebranchez une feuille de style de mémoire sur un fichier neuf.

Jour 16 — Les sélecteurs : viser juste

Objectif : utiliser les sélecteurs d'élément, de classe, d'id et descendants, et comprendre la priorité.

Théorie (20 min)

Le sélecteur choisit les éléments que la règle coiffe. Les quatre de base :

• Élément : p vise tous les <p>.
• Classe : .encart vise tout élément portant class="encart". La classe est un attribut réutilisable à volonté, fait pour ça : regrouper ce qui partage un style. C'est le sélecteur que vous écrirez le plus.
• ID : #intro vise l'élément portant id="intro" — unique par page (c'est le même id que pour les ancres).
• Descendant : un espace entre deux sélecteurs — .encart p vise les <p> à l'intérieur d'un élément de classe encart.

.encart { background: #eee; }
.encart p { margin: 0; }
#intro { font-size: 1.2rem; }

Quand deux règles visent le même élément avec des déclarations contradictoires, la spécificité tranche : l'id gagne contre la classe, la classe gagne contre l'élément. À spécificité égale, la dernière règle du fichier gagne. Conséquence pratique : stylez avec des classes, gardez les id pour les ancres et le JavaScript, et vous éviterez 90 % des guerres de priorité.

Pratique (30 min)

1. Dans votre moi.html, ajoutez class="encart" au div (ou créez-en un) autour d'un paragraphe à mettre en avant, et les deux règles ci-dessus dans style.css.
2. Rechargez. Critère de réussite : seul le paragraphe de l'encart a un fond grisé ; vos autres paragraphes sont intacts — preuve que le sélecteur de classe vise juste.
3. Ajoutez #contact { border-top: 2px solid; } en donnant id="contact" à votre section de formulaire : un filet apparaît au-dessus d'elle seulement.
4. Testez la spécificité : écrivez .encart { color: red; } puis p { color: blue; } en dessous. Le paragraphe de l'encart reste rouge — l'ordre ne bat pas la spécificité. Supprimez ce test.
5. Inspectez (F12) le paragraphe de l'encart : le panneau « Styles » liste les règles qui s'appliquent et barre celles qui perdent. Lisez-le : c'est le meilleur professeur de cascade qui existe.

Tips agent : « pourquoi ma règle X ne s'applique pas alors que Y s'applique ? » — collez les deux règles ET le HTML de l'élément. Piège : sans le HTML, il ne peut pas calculer la spécificité et il improvise. Preuve : comparez son explication avec le panneau Styles de l'inspecteur, qui ne ment jamais.

Synthèse (10 min)

Trois lignes : les quatre sélecteurs, la règle de spécificité, pourquoi on préfère les classes. Puis écrivez de mémoire un sélecteur qui vise les liens d'une liste de classe menu.

Jour 17 — Couleurs et unités

Objectif : écrire des couleurs en hexadécimal et rgb, et choisir la bonne unité de taille.

Théorie (20 min)

Trois façons d'écrire une couleur. Les noms (red, darkblue, rebeccapurple…) : lisibles, mais il n'en existe que 148. L'hexadécimal : #1e90ff — six chiffres hexadécimaux (0-9 puis A-F) par paires : rouge, vert, bleu, chacun de 00 à FF (255). #ff0000 est le rouge pur, #000000 le noir, #ffffff le blanc. La notation rgb(30, 144, 255) dit la même chose en décimal, avec une variante rgba(..., 0.5) dont le quatrième nombre est l'opacité de 0 (transparent) à 1 (opaque).

Pour les tailles, quatre unités à connaître :

• px : le pixel, fixe, simple à raisonner — mais il ne suit pas les réglages d'accessibilité de l'utilisateur ;
• rem : la taille de la racine (par défaut 16 px, modifiable par l'utilisateur dans son navigateur) — l'unité recommandée pour le texte, car elle respecte ce réglage ;
• % : un pourcentage de la taille du parent (ou de sa largeur, selon la propriété) ;
• vh/vw : des centièmes de la hauteur/largeur de la fenêtre (viewport) — utile pour les bandeaux plein écran.

Convention simple pour débuter : texte en rem, espacements en rem ou px, largeurs en % ou unités de viewport.

Pratique (30 min)

1. Dans style.css, donnez à body une couleur de fond très claire (background: #faf7f2;) et une couleur de texte presque noire (color: #222;) — le noir pur sur blanc pur fatigue l'œil.
2. Choisissez une couleur d'accent (avec le sélecteur de couleur de l'inspecteur : cliquez sur le carré de couleur dans le panneau Styles) et appliquez-la à vos h2 et à vos liens (a).
3. Passez la taille des paragraphes en rem : p { font-size: 1rem; }, et le h1 à 2.5rem.
4. Critère de réussite : dans les réglages de votre navigateur, augmentez la taille de police par défaut et rechargez : vos textes en rem grandissent. Changez un titre en px, rechargez : lui ne bouge plus. Vous avez vu la différence. Remettez tout en rem.
5. Notez vos trois couleurs (fond, texte, accent) dans le carnet avec leur code hexadécimal : c'est le début de votre charte graphique.

Tips agent : « propose trois palettes fond/texte/accent pour un site personnel sobre, en hexadécimal » est un bon usage créatif. Piège : il ne sait pas si le contraste suffit. Preuve : testez chaque couple texte/fond sur webaim.org/resources/contrastchecker (module 4), ne prenez que ce qui passe.

Synthèse (10 min)

Trois lignes : les trois écritures de couleur, les quatre unités, pourquoi rem pour le texte. Puis convertissez de tête : que vaut FF en décimal ? (255.)

Jour 18 — Typographie

Objectif : composer un texte lisible : police, taille, graisse, interligne, largeur de ligne.

Théorie (20 min)

La typographie est 90 % du design d'un site de contenu. Cinq propriétés font l'essentiel :

• font-family : la police. On en donne plusieurs en cascade — si la première manque sur la machine du visiteur, la suivante est essayée : font-family: Georgia, "Times New Roman", serif;. Les noms avec espaces prennent des guillemets. Les familles génériques serif, sans-serif et monospace en fin de liste sont le filet de sécurité : le navigateur choisit.
• font-size : la taille, en rem (jour 17).
• font-weight : la graisse, normal (400) ou bold (700).
• line-height : l'interligne, sans unité (un multiple de la taille du texte) : 1.5 à 1.7 pour du texte courant.
• max-width sur le conteneur du texte : la règle d'orfèvre veut des lignes de 60 à 75 caractères ; au-delà, l'œil perd le fil en revenant à la ligne. max-width: 65ch; — l'unité ch vaut la largeur d'un caractère.

Les polices « système » (celles déjà installées sur la machine : Arial, Georgia, Courier…) sont gratuites, instantanées, et suffisent largement pour débuter. Les polices téléchargées (Google Fonts et consorts) existent, mais elles coûtent du temps de chargement et posent des questions de vie privée — le module 4 montrera pourquoi on s'en passe volontiers.

Pratique (30 min)

1. Dans style.css, composez votre base : body { font-family: system-ui, sans-serif; font-size: 1rem; line-height: 1.6; }. system-ui est une valeur spéciale : la police d'interface du système du visiteur — toujours présente, jamais à télécharger.
2. Donnez aux titres une police contrastée : h1, h2, h3 { font-family: Georgia, serif; line-height: 1.2; }. Oui, on peut lister plusieurs sélecteurs séparés par des virgules.
3. Limitez la largeur du contenu : main { max-width: 65ch; margin: 0 auto; } — margin: 0 auto centre un bloc dont la largeur est limitée. Rechargez : le texte forme une colonne centrée et lisible.
4. Critère de réussite : relisez votre page entière : aucune ligne ne dépasse ~75 caractères, l'interligne laisse respirer, titres et texte se distinguent d'un coup d'œil.
5. Testez la dégradation : remplacez Georgia par un nom de police qui n'existe pas, rechargez : la page bascule sur la police générique sans casser. Remettez Georgia.

Tips agent : « relis ce CSS et dis-moi pourquoi mes lignes sont trop longues » marche bien. Piège : il peut réécrire tout votre style « au passage ». Preuve : n'acceptez qu'un diff minimal — la ligne fautive citée, pas un fichier réécrit.

Synthèse (10 min)

Trois lignes : les cinq propriétés, la règle des 60-75 caractères, pourquoi les polices système d'abord. Puis récrivez votre bloc body de mémoire.

Jour 19 — Le modèle de boîte

Objectif : décomposer tout élément en contenu, padding, border, margin — et régler ses espacements.

Théorie (20 min)

Pour le navigateur, chaque élément est une boîte à quatre couches emboîtées, du dedans vers le dehors :

• le contenu : le texte, l'image ;
• le padding (remplissage) : l'espace entre le contenu et la bordure, à l'intérieur de la boîte — il prend la couleur de fond ;
• la border (bordure) : le trait autour, qui peut être invisible ;
• la margin (marge) : l'espace à l'extérieur, qui pousse les voisins — toujours transparente.

.encart {
  padding: 1rem;        /* respiration intérieure */
  border: 1px solid #ccc;
  margin-bottom: 2rem;  /* espace avec ce qui suit */
}

Les trois propriétés acceptent une à quatre valeurs : une pour les quatre côtés, ou quatre dans le sens des aiguilles d'une montre en partant du haut (margin: 1rem 0 2rem 0;), et des variantes par côté : margin-top, padding-left…

Une subtilité : deux marges verticales qui se touchent fusionnent — un paragraphe avec 2 rem de marge basse suivi d'un titre avec 1 rem de marge haute sont séparés de 2 rem, pas de 3. Ce n'est pas un bug : la plus grande gagne.

L'inspecteur (F12, panneau « Computed » / « Calculé ») dessine le modèle de boîte de l'élément sélectionné en couleurs : c'est la radiographie de vos espacements.

Pratique (30 min)

1. Donnez à votre .encart les trois propriétés ci-dessus, et un fond léger. Rechargez.
2. Inspectez l'encart, ouvrez le panneau Calculé : identifiez les quatre zones de la boîte et leurs tailles. Critère de réussite : vous savez montrer sur le schéma où sont votre padding, votre bordure et votre marge.
3. Jouez : passez le padding à 0 puis à 3 rem, et regardez le contenu se coller puis respirer. La différence padding/margin est maintenant visible à l'œil.
4. Espacez vos sections : section { margin-bottom: 3rem; }, puis constatez la fusion des marges en ajoutant une marge basse au dernier élément d'une section.
5. Donnez à body un padding: 0 1rem; pour que le texte ne touche jamais les bords de la fenêtre sur mobile.

Tips agent : « pourquoi y a-t-il un espace entre ces deux blocs ? » — collez le CSS des deux. Piège : il peut oublier la fusion des marges dans son explication. Preuve : vérifiez dans le panneau Calculé, qui montre les marges réelles.

Synthèse (10 min)

Trois lignes : les quatre couches, padding vs margin, la fusion des marges verticales. Puis dessinez la boîte de mémoire, de mémoire, avec un exemple chiffré.

Jour 20 — Display et box-sizing

Objectif : changer le comportement d'affichage d'un élément et comprendre comment les tailles se calculent.

Théorie (20 min)

Jour 8, vous avez appris que chaque élément est block ou inline. La propriété display permet de changer ça :

• display: block; force le comportement bloc (un lien <a> qui occupe toute la largeur d'un menu) ;
• display: inline-block; est l'hybride : l'élément reste dans le flux du texte mais accepte largeur, hauteur et marges verticales — pratique pour des boutons alignés ;
• display: none; retire l'élément complètement : invisible ET absent de la mise en page (le JavaScript du module 3 s'en servira pour afficher/masquer).

Deuxième notion, celle qui sauve des heures : box-sizing. Par défaut (content-box), width ne fixe que le contenu : une boîte de width: 200px avec 20 px de padding et 2 px de bordure mesure en réalité 244 px de large. Le mode border-box inclut padding et bordure dans la largeur déclarée : la boîte fait 200 px, point. C'est tellement plus intuitif que presque tous les projets commencent par :

*, *::before, *::after {
  box-sizing: border-box;
}

Le sélecteur * vise tous les éléments. Retenez l'existence de cette règle sans en faire une religion : comprenez surtout qu'il existe deux façons de compter les tailles, et que border-box est celle qui surprend le moins.

Pratique (30 min)

1. Ajoutez la règle box-sizing ci-dessus en tout premier dans style.css.
2. Dans votre nav, passez les liens en display: block; avec un padding : toute la bande devient cliquable, plus seulement le mot. Sur un menu, c'est un vrai gain de confort.
3. Créez deux div côte à côte dans votre main avec la classe demo, donnez-leur display: inline-block; width: 45%; et un fond différent. Critère de réussite : elles tiennent sur la même ligne.
4. Repassez en content-box (commentez la règle universelle) et observez vos boîtes changer de taille réelle sans que le CSS change. Réactivez border-box.
5. Donnez temporairement display: none; à votre footer : il disparaît de la page ET laisse sa place vide se refermer. Retirez la règle.

Tips agent : « ma boîte dépasse de son parent alors que width est à 100 % » — un agent connaît la cause (content-box) par cœur. Piège : il peut répondre avec flexbox quand la cause est box-sizing. Preuve : la correction proposée doit être minimale et vous devez la reproduire à la main.

Synthèse (10 min)

Trois lignes : les trois valeurs de display du jour, content-box vs border-box, à quoi sert le sélecteur *. Puis calculez de tête la largeur réelle d'une boîte dans les deux modes.

Jour 21 — Fonds et bordures

Objectif : habiller les boîtes : couleur de fond, bordures, coins arrondis, ombres discrètes.

Théorie (20 min)

Trois familles de propriétés donnent du relief aux boîtes :

• Fond : background-color (que vous connaissez) et background-image: url("motif.png");. Un dégradé se fait sans image : background: linear-gradient(to right, #1e90ff, #7ec8ff);.
• Bordure : la propriété raccourcie border: 1px solid #ccc; rassemble épaisseur, style (solid, dashed, dotted…), couleur. border-radius arrondit les coins : border-radius: 8px;, et 50% sur un carré donne un cercle — l'astuce classique pour les avatars ronds.
• Ombre : box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); — décalage horizontal, décalage vertical, flou, couleur. Une ombre douce et discrète donne l'impression que l'élément « flotte » ; une ombre forte donne un site 2005.

Assemblées, ces propriétés font une « carte » (card), le composant le plus courant du web :

.carte {
  background: #fff;
  border: 1px solid #e3e0da;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

Retenez la discipline : un style de carte défini UNE fois sur une classe, réutilisé partout. La cohérence visuelle vient de la répétition des mêmes quelques décisions, pas de l'invention à chaque boîte.

Pratique (30 min)

1. Créez la classe .carte ci-dessus et appliquez-la à deux ou trois blocs de votre page (une section, votre encart).
2. Rechargez. Critère de réussite : vos cartes ont fond blanc, coins arrondis et une ombre légère et homogène.
3. Si vous avez une image, essayez l'avatar rond : .avatar { border-radius: 50%; width: 96px; height: 96px; object-fit: cover; } — object-fit: cover remplit le cadre sans déformer la photo.
4. Essayez un dégradé sur le header : header { background: linear-gradient(135deg, #1e3a5f, #1e90ff); color: white; }. Jugez à l'œil : si le texte devient dur à lire, gardez le dégradé ou revenez à un fond uni — les deux sont des choix.
5. Testez le zéro : border: none; sur un élément, pour voir comment « enlever » s'écrit.

Tips agent : « écris un style de carte sobre avec ombre discrète » donne un bon point de départ. Piège : les ombres générées sont souvent trop marquées. Preuve : imposez le critère « ombre visible seulement si on la cherche » et ajustez le flou vous-même.

Synthèse (10 min)

Trois lignes : les trois familles de propriétés, l'astuce du cercle, pourquoi une seule classe .carte. Puis réécrivez le style de carte de mémoire.

Jour 22 — Flexbox : aligner sur un axe

Objectif : aligner et répartir des éléments sur une ligne (ou une colonne) avec flexbox.

Théorie (20 min)

Flexbox règle un problème simple : disposer des éléments les uns à côté des autres (ou les uns sous les autres) en contrôlant alignement et espacement. On déclare un conteneur flexible, et ce sont ses enfants directs qui deviennent flexibles :

.rangee {
  display: flex;
  gap: 1rem;               /* espace entre les enfants */
  justify-content: center; /* répartition sur l'axe principal */
  align-items: center;     /* alignement sur l'axe traversant */
}

Trois idées à retenir :

• L'axe principal est horizontal par défaut (flex-direction: row) ; flex-direction: column le rend vertical. Les propriétés se raisonnent toujours par rapport à cet axe.
• justify-content répartit sur l'axe principal : flex-start, center, flex-end, et surtout space-between (les extrémités collées aux bords, l'espace réparti entre) — l'outil des barres de navigation.
• align-items aligne sur l'axe traversant : center centre verticalement dans une rangée — la réponse à « comment je centre verticalement ? », la question qui a bloqué une génération de développeurs avant flexbox.

Sur les enfants, une propriété : flex: 1; dit « prends ta part égale de l'espace restant ». Trois enfants avec flex: 1 se partagent la largeur en tiers égaux.

Pratique (30 min)

1. Dans votre page, prenez le div qui contient vos deux ou trois cartes (ou créez-le : <div class="rangee"> autour d'elles) et appliquez-lui les règles ci-dessus.
2. Rechargez. Critère de réussite : vos cartes sont côte à côte, alignées, avec un espace régulier entre elles.
3. Essayez tour à tour les valeurs de justify-content (flex-start, center, space-between, space-around) et regardez la répartition changer. Gardez celle qui vous plaît.
4. Donnez flex: 1; aux cartes : elles s'étirent pour remplir la largeur en parts égales.
5. Passez le conteneur en flex-direction: column;, observez, revenez à row. Vous savez maintenant ce que chaque propriété contrôle.

Tips agent : « voici mon HTML et mon CSS, mes cartes ne s'alignent pas, pourquoi ? » — collez les deux. Piège classique : la règle display: flex sur les cartes au lieu du conteneur, l'agent la repère d'un coup. Preuve : déplacez la règle vous-même et rechargez.

Synthèse (10 min)

Trois lignes : conteneur vs enfants, justify-content vs align-items, ce que fait flex: 1. Puis reproduisez une rangée de trois boîtes égales de mémoire.

Jour 23 — Flexbox en pratique : barre de navigation

Objectif : construire la barre de navigation classique : titre à gauche, liens à droite.

Théorie (20 min)

La barre de navigation d'en-tête est l'exercice flexbox par excellence : le nom du site collé à gauche, les liens groupés à droite. La structure HTML est une liste de liens dans le <nav> :

<header class="site-header">
  <p class="logo">Mon site</p>
  <nav>
    <ul class="menu">
      <li><a href="index.html">Accueil</a></li>
      <li><a href="moi.html">À propos</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

Et le CSS : deux conteneurs flex imbriqués — le header pousse logo et nav aux extrémités, le menu aligne ses liens :

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}
.menu {
  display: flex;
  gap: 1.5rem;
  list-style: none;   /* enlève les puces */
  margin: 0;
  padding: 0;
}

list-style: none retire les puces : la liste reste une liste pour le sens (un lecteur d'écran annonce « liste de trois éléments »), seule la puce visuelle disparaît.

Choisir une liste pour un menu n'est pas un caprice : un menu EST une liste de liens. Le HTML dit le sens, le CSS décide qu'il s'affiche en ligne.

Pratique (30 min)

1. Restructurez le header de votre page selon le modèle ci-dessus, avec vos vrais liens.
2. Appliquez le CSS, rechargez. Critère de réussite : le nom du site est à gauche, les liens alignés à droite, sans puces, et tout reste cliquable.
3. Ajoutez un effet de survol : .menu a:hover { text-decoration: underline; }. :hover est une pseudo-classe : elle vise l'élément seulement quand la souris le survole.
4. Réduisez la largeur de la fenêtre au minimum : la barre se tasse. N'arrangez rien encore — demain, grid, et jour 25, les media queries régleront ça proprement. Notez juste le problème au carnet.
5. Vérifiez au clavier : la touche Tab doit faire défiler les liens un par un avec un cadre visible. Si le focus est invisible, c'est un défaut à corriger au module 4 — notez-le.

Tips agent : « écris le CSS d'un header flex : logo à gauche, menu à droite, liens sans puces » donne exactement ce code. Piège : il peut oublier list-style: none ou le mettre sur les li au lieu du ul. Preuve : rechargez — les puces doivent être parties et les liens cliquables.

Synthèse (10 min)

Trois lignes : le rôle des deux conteneurs flex, pourquoi une liste pour un menu, ce qu'est une pseudo-classe. Puis refaites la barre de mémoire.

Jour 24 — Grid : poser une grille

Objectif : créer une mise en page en deux dimensions avec CSS Grid.

Théorie (20 min)

Flexbox aligne sur UN axe ; Grid pose une grille en deux dimensions — lignes ET colonnes. C'est l'outil des mises en page entières et des galeries :

.galerie {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* trois colonnes égales */
  gap: 1rem;
}

L'unité fr (fraction) partage l'espace disponible : 1fr 1fr 1fr fait trois colonnes égales, 2fr 1fr une colonne double de l'autre. Les enfants du conteneur se rangent automatiquement dans les cellules, de gauche à droite, en créant des lignes au besoin.

Deux raccourcis précieux : repeat(3, 1fr) vaut 1fr 1fr 1fr ; et surtout repeat(auto-fill, minmax(200px, 1fr)) — la grille calcule elle-même combien de colonnes de 200 px minimum tiennent dans la largeur disponible, et les étire. C'est une galerie responsive sans media query :

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

Règle de choix entre les deux outils : flexbox pour UNE rangée ou UNE colonne de choses (menu, groupe de boutons, centrer) ; grid pour un plan en deux dimensions (page entière, galerie de cartes). Ils se combinent sans problème : une grille dont chaque cellule contient un conteneur flex.

Pratique (30 min)

1. Remplacez le conteneur flex de vos cartes par la grille .galerie à trois colonnes. Rechargez : trois colonnes égales, espacées.
2. Passez à la version auto-fill / minmax et réduisez lentement la largeur de la fenêtre. Critère de réussite : les colonnes passent de trois à deux à une toutes seules, sans que vous écriviez la moindre media query.
3. Jouez sur la taille minimale : 150 px puis 300 px, et regardez le point de bascule bouger. Gardez la valeur qui convient à votre contenu.
4. Bonus structure : essayez une mise en page de page entière — main { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; } avec un <aside> après votre contenu : colonne large + colonne étroite.

Tips agent : « flex ou grid pour ce besoin : [décrivez la mise en page] ? » est une bonne question de conception. Piège : il répond souvent grid par habitude. Preuve à exiger : qu'il justifie en une phrase par le nombre d'axes du besoin — un axe = flex, deux = grid.

Synthèse (10 min)

Trois lignes : l'unité fr, la formule auto-fill/minmax, la règle de choix flex vs grid. Puis écrivez la galerie responsive de mémoire.

Jour 25 — Responsive : les media queries

Objectif : adapter la mise en page à la taille de l'écran, en pensant mobile d'abord.

Théorie (20 min)

Responsive : la page s'adapte à la largeur de l'écran — téléphone, tablette, moniteur. L'outil est la media query : un bloc de CSS qui ne s'applique que si une condition est vraie, le plus souvent une largeur minimale :

/* styles de base : pensés pour un téléphone, une colonne */
.galerie { display: grid; gap: 1rem; }

@media (min-width: 600px) {
  /* à partir de 600 px de large : deux colonnes */
  .galerie { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .galerie { grid-template-columns: 1fr 1fr 1fr; }
}

Cette approche s'appelle mobile first : le style de base vise le petit écran (le plus contraignant), et les media queries ajoutent des colonnes quand la place grandit. L'inverse (partir du grand et retirer) mène à des cascades de correctifs.

Deux points techniques indispensables. D'abord, la balise meta viewport, à avoir dans le <head> de toute page responsive :

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

Sans elle, les navigateurs mobiles simulent un écran de ~980 px puis dézooment : votre site responsive ne s'appliquerait jamais. Ensuite, les points de rupture (breakpoints) : 600 px et 900 px sont des repères courants, mais le bon breakpoint est celui où VOTRE mise en page devient laide — élargissez la fenêtre et regardez.

Les outils de développement ont un mode « appareil » (Ctrl+Shift+M) qui simule un téléphone : il deviendra votre réflexe de vérification.

Pratique (30 min)

1. Ajoutez la meta viewport au <head> de votre page si elle n'y est pas.
2. Remplacez votre grille par la version mobile first ci-dessus : une colonne de base, deux à 600 px, trois à 900 px.
3. Ouvrez le mode appareil (Ctrl+Shift+M), choisissez un téléphone, rechargez. Critère de réussite : sur téléphone simulé, tout se lit sans défilement horizontal ; élargissez la fenêtre et voyez les colonnes apparaître aux deux ruptures.
4. Appliquez le même traitement à votre header : sous 600 px, flex-direction: column; pour empiler logo et menu (le problème noté avant-hier se résout ici).
5. Testez vos images : si l'une dépasse, la règle img { max-width: 100%; height: auto; } les contient toutes dans leur boîte. C'est une des règles qu'on met dans tout projet.

Tips agent : « rends cette page responsive, mobile first, breakpoints 600 et 900 » est un ordre clair. Piège : il peut oublier la meta viewport — sans elle, tout le reste est invisible sur téléphone. Preuve : le mode appareil des outils de dev, pas ses affirmations.

Synthèse (10 min)

Trois lignes : ce qu'est une media query, pourquoi mobile first, le rôle de la meta viewport. Puis récrivez la grille responsive de mémoire.

Jour 26 — Variables CSS et mode sombre

Objectif : centraliser vos couleurs dans des variables CSS et offrir un mode sombre qui suit le système.

Théorie (20 min)

Une variable CSS (custom property) est une valeur nommée, définie une fois et utilisée partout. On les déclare sur :root (la racine du document, visible partout) avec un nom qui commence par deux tirets, et on les lit avec var() :

:root {
  --fond: #faf7f2;
  --texte: #222;
  --accent: #1e5fa8;
}
body {
  background: var(--fond);
  color: var(--texte);
}
a { color: var(--accent); }

Changez la variable, tout le site suit : c'est la fin des « chercher-remplacer » dans la feuille de style.

Le mode sombre est une media query d'un genre nouveau : prefers-color-scheme lit le réglage du système de l'utilisateur (son téléphone ou son ordinateur est en mode sombre ou clair) :

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #17181c;
    --texte: #e8e6e3;
    --accent: #7db4f0;
  }
}

Comme tout le style lit les variables, redéfinir les trois variables suffit : la page entière bascule. Remarquez que l'accent change aussi : un bleu lisible sur fond clair est souvent trop sombre sur fond foncé — le mode sombre n'est pas un simple négatif, les couleurs se re-choisissent.

Pratique (30 min)

1. Reprenez vos trois couleurs du carnet (jour 17) et remplacez-les dans tout style.css par les trois variables ci-dessus. Rechargez : rien ne doit changer visuellement. Critère de réussite n°1 : modifiez --accent et voyez liens et titres changer ensemble.
2. Ajoutez le bloc prefers-color-scheme: dark avec vos couleurs sombres (fond très foncé mais pas noir pur, texte clair mais pas blanc pur).
3. Passez votre système en mode sombre (réglages de l'ordinateur) et rechargez : votre site bascule. Critère de réussite : le site suit le système dans les deux sens.
4. Traquez les oublis : une couleur écrite en dur quelque part (une bordure, le fond d'une carte) restera claire en mode sombre — l'inspecteur vous aide à la retrouver. Remplacez-la par une variable, quitte à créer --fond-carte.

Tips agent : « remplace toutes les couleurs en dur de ce CSS par des variables :root » est une refonte sûre. Piège : il en oubliera une dans un coin. Preuve : basculez en mode sombre et cherchez la tache claire restante — c'est elle.

Synthèse (10 min)

Trois lignes : la syntaxe des variables, ce que lit prefers-color-scheme, pourquoi le mode sombre re-choisit les couleurs. Puis ajoutez une quatrième variable de mémoire.

Jour 27 — Mini-projet : styliser votre page personnelle

Objectif : appliquer tout le module à votre page du jour 13 : charte, cartes, navigation, responsive, mode sombre.

Théorie (20 min)

Pas de notion nouvelle : une consigne et une méthode. La consigne — votre page personnelle moi.html doit avoir :

• une charte en trois variables (fond, texte, accent) dans :root ;
• la typographie du jour 18 (polices système, interligne, colonne de 65 ch) ;
• la barre de navigation flex du jour 23 ;
• le contenu organisé en cartes posées sur une grille responsive ;
• des images contenues (max-width: 100%) ;
• un mode sombre automatique ;
• la meta viewport.

La méthode : une chose à la fois, rechargez entre chaque. Un problème ? Inspectez l'élément : le panneau Styles dit quelles règles s'appliquent et lesquelles perdent. 90 % des « mon CSS ne marche pas » se lisent là.

Pratique (30 min)

1. Travaillez point par point dans l'ordre du cahier des charges, en rechargeant entre chaque.
2. Critère de réussite : les sept points sont visibles, la page se lit confortablement sur le mode appareil en téléphone ET en grand écran, et le basculement sombre ne laisse aucune tache claire.
3. Faites relire : montrez la page à quelqu'un dix secondes, demandez ce qu'il retient. S'il retient l'essentiel, votre hiérarchie visuelle fonctionne.

Tips agent : à la fin seulement : « relis ce CSS comme un relecteur : incohérences, doublons, couleurs en dur ? ». Piège : il proposera des redesigns complets. Preuve : n'acceptez que la liste de défauts cités ligne par ligne — les choix de goût restent les vôtres.

Synthèse (10 min)

Trois lignes : le point le plus long, ce que l'inspecteur vous a appris, ce dont vous êtes fier. Cette page est la base du site du module 4.

Jour 28 — Bilan du module 2

Objectif : vérifier les acquis du CSS avant le JavaScript.

Théorie (20 min)

Testez-vous sans notes :

1. Écrivez une règle CSS complète et nommez ses trois morceaux.
2. Qui gagne : une classe ou un id ? Et à spécificité égale ?
3. Pourquoi rem plutôt que px pour le texte ?
4. Dessinez le modèle de boîte avec ses quatre couches.
5. Quelle est la différence entre justify-content et align-items ?
6. Quand choisir grid plutôt que flex ?
7. Que fait @media (min-width: 600px), et pourquoi mobile first ?
8. Comment votre site sait-il que le système est en mode sombre ?

Pratique (30 min)

1. Faites le test des huit questions à l'écrit, sans notes.
2. Pour chaque question ratée, refaites la pratique de la séance correspondante.
3. Critère de réussite : huit bonnes réponses, ou les séances manquantes refaites.
4. Exercice minute : ouvrez une page blanche, et en quinze minutes, construisez trois cartes sur une grille responsive avec mode sombre. Chronométrez : c'est le geste que le module 3 réutilisera.
5. Rangez : tout le module dans votre dossier module2.

Tips agent : « interroge-moi sur le CSS : sélecteurs, box model, flex, grid, responsive — une question à la fois, attends ma réponse » fonctionne très bien. Piège : il peut poser des questions hors programme (animations, préprocesseurs). Preuve : recadrez — « seulement ce programme : [collez votre sommaire] ».

Synthèse (10 min)

Trois lignes : vos trois acquis, la notion fragile à surveiller. Demain : JavaScript, et vos pages se mettent à réagir.