Chapitres, TP et corrigés consultables ; les TP sont principalement à réaliser hors de la page. Trois questions d’entraînement interactif facultatif sont proposées dans ce module, sans note ni validation automatique. Le manuel de formation est également consultable depuis le lien en haut de page. Les durées sont des repères pour organiser le parcours ; les lectures, activités, travaux pratiques et évaluations ne doivent pas être additionnés deux fois.
Dans ce module — Accès rapide
MODULE 4 — CSS3 et responsive design
14 heures • Niveau débutant • Continuité directe du fichier index.html du module 3
1. Objectifs et critères de réussite
À la fin de ce module, l’apprenant sait relier un fichier CSS à une page HTML, expliquer sélecteur/propriété/valeur, distinguer marge intérieure et extérieure, réaliser une mise en page Flexbox et Grid, puis tester trois tailles d’écran. Il doit pouvoir reproduire et dépanner une modification simple sans IA.
2. Organisation des 14 heures
Séquence 1 (2 h) : CSS et liaison au HTML ; cascade, sélecteurs et commentaires.
Séquence 3 (2 h) : modèle de boîte, margin, padding, border et box-sizing.
Séquence 4 (2 h) : Flexbox pour la navigation et l’alignement.
Séquence 5 (2 h) : CSS Grid pour organiser les sections.
Séquence 6 (2 h) : responsive mobile-first et media queries.
Séquence 7 (2 h) : tests, débogage, autonomie et évaluation.
Comprendre et essayer — exemple guidé
Je vois : La mise en forme suit une boucle : observer, modifier une règle, tester, puis ajuster.
J’essaie : Répartissez les tâches de style entre observation, écriture, test et correction.
Je vérifie : Les quatre phases sont présentes et un temps ou livrable est affecté à chacune.
Autre façon de faire : Répartissez les quatre phases dans un tableau avec une durée et un résultat attendu.
Pour reprendre plus tard : Gardez le tableau de classement avec les éléments qui vous ont fait hésiter et la distinction à revoir.
3. Le projet fil rouge : conserver la page du module 3
Le fichier index.html du module 3 est conservé à l’identique, à une seule ligne près : dans head, juste après la balise viewport, ajouter :
Exemple de code
<link rel="stylesheet" href="style.css">
Faire défiler horizontalement pour voir les lignes longues.
Créer style.css dans le même dossier que index.html. Le navigateur charge le HTML puis applique les règles CSS. Sans CSS, le contenu reste lisible : c’est une séparation volontaire entre structure et présentation.
Comprendre et essayer — exemple guidé
Je vois : Réutiliser une page réelle permet de vérifier que le style sert un contenu déjà structuré.
J’essaie : Réutilisez la page HTML précédente plutôt que de repartir d’une page fictive.
Je vérifie : Le contenu et les liens de la page du M03 restent présents après l’ajout du style.
Autre façon de faire : Copiez la page du M03, ajoutez une feuille CSS locale et vérifiez que contenu et liens sont conservés.
Pour reprendre plus tard : Enregistrez une copie datée du fichier ou une capture du résultat, puis notez le contrôle technique restant à exécuter.
4. Lire une règle CSS, ligne par ligne
h1 {
color: #183153;
font-size: 2rem;
Exemple de code
}
Faire défiler horizontalement pour voir les lignes longues.
h1 est le sélecteur : il cible les titres h1. Les accolades encadrent les déclarations. color règle la couleur du texte. #183153 est une couleur hexadécimale. font-size règle la taille ; rem dépend de la taille de police racine. Chaque déclaration se termine par un point-virgule.
La cascade détermine quelle règle s’applique en cas de conflit : origine, importance, spécificité et ordre interviennent. Pour débuter, éviter les styles en ligne et !important ; utiliser des sélecteurs simples.
Comprendre et essayer — exemple guidé
Je vois : Une règle CSS relie un sélecteur à une ou plusieurs déclarations propriété-valeur.
J’essaie : Dans une règle CSS, identifiez sélecteur, propriété, valeur et point-virgule.
Je vérifie : Le sélecteur cible l’élément voulu et chaque déclaration distingue propriété, deux-points et valeur.
Autre façon de faire : Partez d’un résultat souhaité, par exemple un titre bleu, puis écrivez la règle CSS qui pourrait le produire et annotez ses éléments.
Pour reprendre plus tard : Enregistrez une copie datée du fichier ou une capture du résultat, puis notez le contrôle technique restant à exécuter.
5. Couleurs, typographie et unités
Une palette sobre améliore la cohérence : fond clair, texte foncé, couleur d’accent. Tester le contraste texte/fond ; ne pas transmettre une information par la couleur seule. px correspond à une unité CSS, rem s’adapte à la taille de référence, % dépend du contexte, vw dépend de la largeur du viewport.
:root {
--fond: #f6f7fa;
--texte: #18283c;
--accent: #235c9f;
Exemple de code
}
Faire défiler horizontalement pour voir les lignes longues.
body { color: var(--texte); background: var(--fond); }
Comprendre et essayer — exemple guidé
Je vois : La lisibilité dépend de la taille relative du texte et du contraste, pas d'une valeur unique universelle.
J’essaie : Choisissez une taille de texte lisible et comparez rem, px et contraste sur votre page.
Je vérifie : La taille de texte reste utilisable lors d’un zoom et les choix de rem et px sont expliqués. Contrôlez les contrastes avec un outil de mesure gratuit ; une simple impression visuelle ne suffit pas.
Autre façon de faire : Comparez deux tailles de texte sur une page locale et contrôlez le contraste avec un outil gratuit.
Pour reprendre plus tard : Enregistrez une copie datée du fichier ou une capture du résultat, puis notez le contrôle technique restant à exécuter.
6. Le modèle de boîte : content, padding, border, margin
Le contenu occupe l’espace central. padding ajoute un espace intérieur ; border trace une bordure ; margin ajoute un espace extérieur. Avec box-sizing: border-box, largeur et hauteur déclarées incluent padding et bordure, ce qui simplifie les calculs.
Je vois — exemple concret : Imaginez une carte : le texte est le contenu, le padding est l’espace intérieur, la bordure dessine son contour et la marge sépare la carte des voisines.
J’essaie — petit geste : Dans une copie de votre CSS, augmentez padding de 8px à 20px et comparez l’espace intérieur avant/après.
Je vérifie — si cela ne fonctionne pas : Si rien ne change, vérifiez le nom du fichier CSS et le lien <link> dans le HTML.
Comprendre et essayer — exemple guidé
Je vois : Le modèle de boîte sépare contenu, espacement intérieur, bordure et marge extérieure.
J’essaie : Tracez content, padding, border et margin autour d’un même bloc.
Je vérifie : Le schéma place padding à l’intérieur de border et margin à l’extérieur.
Autre façon de faire : Dessinez les quatre couches de la boîte CSS, de content jusqu’à margin.
Pour reprendre plus tard : Conservez votre production de l’activité 5, le point précis du critère non encore satisfait et la prochaine vérification à effectuer.
7. Flexbox : organiser une navigation
display:flex aligne les éléments sur un axe principal. flex-wrap:wrap autorise le retour à la ligne. gap espace les éléments sans multiplier les marges. Les liens restent des liens HTML, et non des boutons fictifs.
nav { display: flex; flex-wrap: wrap; gap: .75rem; }
nav a { padding: .5rem .75rem; }
Dans la page initiale, les caractères « | » séparant les liens restent du texte : dans l’exercice guidé, les supprimer afin que gap gère seul les espaces. Le fichier de départ livré conserve toutefois la version HTML initiale, sauf la liaison CSS.
Comprendre et essayer — exemple guidé
Je vois : Flexbox répartit les éléments et leur retour à la ligne dépend de l'espace disponible.
J’essaie : Alignez trois liens avec display:flex et observez leur retour sur petit écran.
Je vérifie : Les trois liens sont alignés et restent visibles sans débordement à largeur mobile.
Autre façon de faire : Dans un navigateur local, activez flex-wrap et réduisez la largeur pour observer le retour des liens.
Pour reprendre plus tard : Enregistrez une copie datée du fichier ou une capture du résultat, puis notez le contrôle technique restant à exécuter.
8. CSS Grid : composer plusieurs zones
Grid répartit les éléments en lignes et colonnes. Pour ce projet, main devient une grille à une colonne sur mobile ; à partir de 768 px, la présentation et les compétences passent côte à côte, tandis que Contact occupe toute la largeur.
Exemple de code
@media (min-width: 768px) {
Faire défiler horizontalement pour voir les lignes longues.
main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
Exemple de code
#contact { grid-column: 1 / -1; }
}
Faire défiler horizontalement pour voir les lignes longues.
Comprendre et essayer — exemple guidé
Je vois : Une grille à deux colonnes peut devenir une seule colonne lorsque la largeur manque.
J’essaie : Dessinez une grille à deux zones puis prévoyez son empilement sur téléphone.
Je vérifie : Les deux zones se réorganisent en une colonne sur petit écran sans masquer le contenu.
Autre façon de faire : Dessinez les deux colonnes et leur empilement mobile ; vérifiez ensuite le rendu dans le navigateur.
Pour reprendre plus tard : Conservez le schéma annoté et indiquez quel lien ou quelle étape doit encore être confirmé lors d’un essai.
9. Responsive design : mobile-first
Concevoir d’abord pour les petits écrans : largeur fluide, textes lisibles, éléments qui passent à la ligne. Les media queries enrichissent la présentation quand l’espace augmente. Le meta viewport du module 3 est déjà présent ; il ne suffit pas, à lui seul, à rendre une page responsive.
Repères de test : 375 px (mobile), 768 px (tablette) et 1280 px (ordinateur). Ce sont des largeurs de test, pas des catégories universelles d’appareils. Vérifier également le zoom à 200 % et la navigation clavier.
Comprendre et essayer — exemple guidé
Je vois : Un débordement horizontal signale souvent une largeur fixe ou un élément non adaptable.
J’essaie : Réduisez la fenêtre à une largeur mobile et repérez tout débordement horizontal.
Je vérifie : Aucun défilement horizontal involontaire ; les liens et textes restent accessibles.
Autre façon de faire : Réduisez la fenêtre du navigateur et notez le premier élément qui déborde.
Pour reprendre plus tard : Enregistrez une copie datée du fichier ou une capture du résultat, puis notez le contrôle technique restant à exécuter.
10. Feuille style.css complète et commentée
Exemple de code
/* Module 4 — CSS de départ, sans bibliothèque */
Faire défiler horizontalement pour voir les lignes longues.
:root {
--fond: #f6f7fa;
--surface: #ffffff;
--texte: #18283c;
--accent: #235c9f;
--bordure: #d7dfeb;
Exemple de code
}
Faire défiler horizontalement pour voir les lignes longues.
1. Copier index.html du module 3 dans un nouveau dossier « module-4 ». Ne pas réécrire son contenu.
2. Ajouter uniquement la balise link dans head et créer style.css dans ce dossier.
3. Coller la feuille CSS ci-dessus. Ouvrir index.html dans un navigateur.
4. Supprimer les deux séparateurs « | » de nav pour laisser Flexbox gérer les espaces.
5. Modifier --accent et expliquer ce qui change ; restaurer la valeur initiale.
6. Passer de padding: 1.5rem à 2rem dans section et décrire la différence avec margin.
7. Tester 375, 768 et 1280 px avec les outils de développement du navigateur.
8. Désactiver temporairement le lien CSS : constater que le contenu et les liens HTML restent disponibles.
9. Réactiver le CSS et vérifier au clavier Tab que chaque lien est identifiable.
Comprendre et essayer — exemple guidé
Je vois : Une comparaison avant/après permet d'attribuer un changement à une modification identifiée.
J’essaie : Effectuez le TP en conservant une copie avant/après de la page.
Je vérifie : La copie avant/après montre le changement prévu et la navigation fonctionne toujours.
Autre façon de faire : Conservez deux copies locales avant/après ; ouvrez-les pour comparer les effets visuels.
Pour reprendre plus tard : Enregistrez une copie datée du fichier ou une capture du résultat, puis notez le contrôle technique restant à exécuter.
11 bis. Ateliers progressifs et corrigés commentés
Ces ateliers complètent le TP guidé initial. Ils peuvent réutiliser les mêmes fichiers : il n’est pas nécessaire de recommencer le projet. Chaque activité peut être faite sans compte ni abonnement IA.
Atelier A — Liaison HTML/CSS et cascade (25–40 min)
Consigne : Partir du fichier index.html du module 3. Créer style.css dans le même dossier, ajouter la balise link dans head et modifier la couleur du titre. Désactiver temporairement le lien, puis le rétablir. Ajouter ensuite deux règles h1 contradictoires et observer laquelle s’applique.
Preuve attendue : Deux fichiers, une capture ou note « avant/après », et deux phrases expliquant le résultat.
Afficher le corrigé commenté
Le navigateur charge style.css seulement si le chemin est exact. À spécificité égale, la dernière déclaration applicable l’emporte. Le HTML reste lisible lorsque la feuille est désactivée. Vérifier le nom du fichier, la casse et le dossier avant de modifier d’autres règles.
Atelier B — Modèle de boîte et navigation Flexbox (30–45 min)
Consigne : Sur une section, comparer padding: 1rem et padding: 2rem sans toucher à margin. Appliquer ensuite display:flex; flex-wrap:wrap; gap:.75rem aux liens de navigation. Réduire la fenêtre jusqu’au retour à la ligne.
Preuve attendue : Un tableau de deux observations sur la boîte, une navigation utilisable à faible largeur et une explication de gap.
Afficher le corrigé commenté
padding agrandit l’espace entre contenu et bordure ; margin éloigne la boîte de ses voisines. gap espace les éléments flex ; flex-wrap autorise plusieurs lignes. Supprimer les caractères « | » hérités du HTML pour ne pas ajouter de séparateurs parasites.
Atelier C — Grid et trois largeurs (35–55 min)
Consigne : Garder une colonne sur petit écran ; à partir de 768px, placer deux sections côte à côte avec Grid, puis faire occuper toute la largeur à Contact. Tester 375px, 768px et 1280px, ainsi que le zoom à 200%. Si la largeur de l’appareil ne peut pas être simulée, redimensionner la fenêtre et noter la limite du test.
Preuve attendue : Grille de vérification pour les trois largeurs : nombre de colonnes, débordement horizontal, lisibilité et accès aux liens.
Afficher le corrigé commenté
À 375px : une colonne. À 768px et 1280px : deux colonnes si la media query s’applique et si la largeur CSS effective atteint le seuil. Contact occupe toute la grille. À 200% de zoom, vérifier que le contenu ne se masque pas ; la largeur CSS effective peut changer.
Atelier D — Diagnostic et autonomie sans IA (30–45 min)
Consigne : Provoquer volontairement trois pannes, une à la fois : href erroné, accolade CSS manquante, largeur fixe provoquant un débordement. Pour chaque panne, noter symptôme, hypothèse, test, correction minimale et résultat. Restaurer le fichier fonctionnel après chaque essai.
Preuve attendue : Journal de diagnostic de trois lignes et fichiers HTML/CSS corrigés.
Afficher le corrigé commenté
href incorrect : vérifier chemin et nom ; accolade manquante : inspecter la règle dans les outils développeur et corriger la syntaxe ; largeur fixe : remplacer par une largeur fluide et vérifier le débordement. Une IA peut suggérer une piste, mais la correction est confirmée dans le navigateur, jamais sur sa seule affirmation.
12. Diagnostic : comprendre les erreurs fréquentes
Aucun style visible → vérifier le nom style.css, son emplacement, le href et l’enregistrement du fichier.
Une règle ne s’applique pas → vérifier l’orthographe, les accolades, le point-virgule et une éventuelle règle plus prioritaire.
Un élément déborde → inspecter width, padding, min-width et les contenus trop longs.
Les colonnes ne changent pas → vérifier la largeur réelle de la fenêtre et la media query.
Les liens de navigation sont trop espacés → retirer les séparateurs « | » du HTML de départ.
Le texte est difficile à lire → vérifier contraste, taille, line-height et zoom.
13. ChatGPT : assistance contrôlée
Demande conseillée : « Je débute en CSS. Voici mon HTML et mon CSS. Mon lien de feuille de style ne fonctionne pas. Pose-moi d’abord trois questions de diagnostic ; ne réécris pas tout mon projet. Explique ensuite la correction minimale. »
Règle de méthode : observer → formuler une hypothèse → tester → expliquer. Ne jamais remplacer l’ensemble du code sans avoir compris le problème.
Comprendre et essayer — exemple guidé
Je vois : Une proposition CSS générée n'est utile que si l'on comprend son effet et ses limites.
J’essaie : Demandez deux propositions CSS à une IA et retenez seulement celle que vous savez expliquer.
Je vérifie : La règle retenue fonctionne dans la page ; l’apprenant peut expliquer son sélecteur et son effet.
Autre façon de faire : Sans IA, comparez deux règles CSS documentées et testez celle que vous comprenez sur une copie locale.
Pour reprendre plus tard : Enregistrez une copie datée du fichier ou une capture du résultat, puis notez le contrôle technique restant à exécuter.
Entraînement interactif facultatif — V0.6.0
Ces questions complémentaires ne constituent ni une note ni une validation de compétence. Aucune réponse n’est enregistrée.
14. Autoévaluation : dix questions
1. À quoi sert la balise link rel="stylesheet" ?
2. Que ciblent h1 et nav a ?
3. Différence entre margin et padding ?
4. Pourquoi utiliser box-sizing: border-box ?
5. Quel est le rôle de gap dans Flexbox ?
6. Quand préférer Grid à Flexbox ?
7. Que signifie mobile-first ?
8. À quoi sert @media (min-width: 768px) ?
9. Pourquoi vérifier le zoom et le clavier ?
10. Comment vérifier que le CSS est bien chargé ?
Afficher le corrigé
15. Corrigé et critères d’autonomie
1. Elle relie le document HTML à une feuille CSS externe.
2. h1 cible tous les titres h1 ; nav a cible les liens contenus dans nav.
3. margin est extérieur à la bordure ; padding est intérieur.
4. Pour inclure bordure et padding dans les dimensions déclarées.
5. Il crée des espaces entre les éléments flex.
6. Grid pour une organisation en lignes et colonnes ; Flexbox pour un axe principal.
7. Concevoir les styles de base pour les petits écrans, puis enrichir.
8. Elle active des règles lorsque le viewport atteint au moins 768 px.
9. Pour vérifier la lisibilité et l’accessibilité de l’interface.
10. Inspecter le href, le fichier, les outils développeur et désactiver/réactiver la feuille.
Exercice autonome (45 min) : sans IA, changer la palette, augmenter l’espace intérieur d’une section, modifier le seuil de passage en colonnes, puis résoudre volontairement un mauvais nom de fichier CSS. Rédiger quatre phrases expliquant les changements. Réussite : page fonctionnelle sur trois largeurs, navigation clavier utilisable, absence de débordement horizontal et explications exactes.
16. Étude de cas et transition
Dans une page de découverte des Récits Vivants, HTML porte le sens du contenu, CSS organise sa présentation et le responsive permet une lecture sur différents écrans. Le module 5 ajoutera JavaScript à ce même projet : une interaction simple, compréhensible et testable, sans perturber l’accès au contenu.
Comprendre et essayer — exemple guidé
Je vois : Une adaptation mobile exige parfois de modifier l'ordre ou la disposition sans perdre l'information.
J’essaie : Comparez une page de découverte avant et après adaptation mobile, puis notez le compromis choisi.
Je vérifie : Le texte et les liens restent accessibles sur les deux formats ; le compromis est explicitement nommé.
Autre façon de faire : Comparez la page à deux largeurs dans le navigateur ; notez un gain et une concession de lisibilité.
Pour reprendre plus tard : Enregistrez une copie datée du fichier ou une capture du résultat, puis notez le contrôle technique restant à exécuter.
Ce parcours complète les travaux pratiques du module. Il peut être réalisé sans abonnement payant et ne constitue pas une évaluation certifiante.
Ce que vous allez apprendre — Associer une feuille CSS à une page et contrôler la lisibilité sur petit écran.
Matériel nécessaire — Ordinateur, navigateur et deux fichiers HTML/CSS dans le même dossier.
Organisation sur deux écrans — Vous pouvez lire ce cours sur téléphone et effectuer les manipulations sur ordinateur. Gardez les deux appareils à portée de vue ; aucun transfert de données entre eux n’est obligatoire.
Mettre en forme sans casser le mobile
Comment procéder concrètement
Reprenez le dossier atelier-html du module 3.
Créez style.css à côté de index.html et copiez uniquement les règles CSS de l’exemple.
Dans head de index.html, ajoutez la balise link fournie dans le corrigé.
Actualisez la page ; réduisez progressivement la fenêtre pour observer le retour à la ligne.
Testez ensuite le zoom du navigateur à 200 %, puis à 400 % ; notez tout élément masqué.
Si vous n’avez qu’un téléphone — Sur téléphone, consultez la page HTML locale si votre navigateur le permet ; la modification des deux fichiers est plus simple sur ordinateur.
Repères pratiques — Deux fichiers, deux rôles
À réaliser concrètement : Reprenez le dossier « projet-fil-rouge » du M03. Dans index.html, insérez <link rel="stylesheet" href="style.css"> entre <head> et </head>. Créez séparément style.css au même niveau que index.html ; copiez-y uniquement les règles CSS, sans balises HTML. Rechargez la page.
Si vous êtes bloqué : Si les couleurs et espacements ne changent pas, vérifiez le nom style.css, l’emplacement du fichier et la valeur href.
Essai autonome, sans recopier le modèle : Modifiez la marge intérieure du contenu et observez la différence sur un écran étroit.
Étape 1 — Relier le CSS
À faire : Ajoutez <link rel="stylesheet" href="style.css"> dans head et créez style.css.
Exemple ou résultat modèle : body { font-family: system-ui, sans-serif; line-height: 1.6; margin: 0; } main { max-width: 65ch; margin: auto; padding: 1rem; }
Vérification : La feuille CSS se charge et la lecture reste confortable.
Étape 2 — Observer le rendu
À faire : Placez le contenu de la page dans main, puis réduisez la largeur de la fenêtre.
Exemple ou résultat modèle : Le texte revient à la ligne ; aucune colonne ne déborde.
Vérification : Aucun défilement horizontal n’est nécessaire pour lire les paragraphes.
Étape 3 — Tester les agrandissements
À faire : Zoomez à 200 % puis à 400 % et parcourez la page.
Exemple ou résultat modèle : Le contenu reste présent et les liens utilisables.
Vérification : Aucune information n’est masquée ni superposée.
Si cela ne fonctionne pas : pistes de dépannage
Le style ne change pas : contrôlez le nom style.css et le chemin href. Un bloc déborde : cherchez une largeur fixe et remplacez-la par une largeur adaptable.
Afficher le corrigé commenté
Corrigé modèle : max-width limite la longueur des lignes ; padding préserve une marge sur écran étroit ; une largeur fixe de 900px sur main serait inadaptée.
Exemple complet à reproduire
Fichier : À insérer dans index.html
<!-- Dans le <head> du fichier HTML -->
<link rel="stylesheet" href="style.css">
<!-- Entourez le contenu principal de <main>...</main> -->
Fichier ou livrable modèle : index.html + style.css. Copiez ou adaptez ce contenu dans votre propre dossier de travail.
Pourquoi ce corrigé est valable
La largeur maximale évite les lignes trop longues sans imposer une largeur fixe sur mobile. Le padding garde une marge intérieure ; les images ne dépassent pas leur conteneur. Vérifiez réellement à 320 px, 200 % et 400 % de zoom.
Preuve de vérification attendue
Après réalisation, conservez le fichier produit et une note indiquant la manipulation testée, le résultat réellement observé et les éventuelles limites. Ne cochez pas un test non effectué.
Bilan personnel : notez ce qui fonctionne, ce qui reste à vérifier et une amélioration possible. Aucun résultat de cet atelier n’est envoyé au site.
Complément de corrigé TP — exemple de vérification et diagnostic
Mise en forme CSS — Vérifier que index.html charge bien style.css ; modifier une seule propriété à la fois, enregistrer et recharger. Si rien ne change, vérifier le chemin du fichier CSS.
Variante autonome : changer un seul élément de votre réalisation, prévoir le résultat, effectuer le test et consigner ce qui a réellement été observé. Plusieurs solutions sont acceptables si elles satisfont les critères du TP.
Laboratoire ludique facultatif — Une page, trois écrans
Comparer les effets d’une disposition rigide et d’une disposition adaptable.
J’observe, j’essaie, je comprends. Aucune note ni classement. Cette activité facultative n’est pas nécessaire pour poursuivre le parcours et ne valide pas, à elle seule, une compétence. Tu peux recommencer autant de fois que tu le souhaites.
L’activité s’ouvre dans une page dédiée, adaptée au téléphone et utilisable au clavier. Le retour au module est prévu. Aucune donnée n’est envoyée à un serveur.