{
  "chapter": {
    "id": "css",
    "level": "premiere",
    "theme": "IHM Web",
    "title": "CSS : mise en forme",
    "description": "Feuilles de style en cascade (CSS), syntaxe d'une règle,\nsélecteurs (élément, classe, identifiant), propriétés\ncourantes (couleur, taille, marges), modèle de boîte,\ncascade et héritage, intégration au HTML.",
    "parties": [
      {
        "id": "syntaxe",
        "title": "Syntaxe et intégration"
      },
      {
        "id": "selecteurs",
        "title": "Sélecteurs, cascade et héritage"
      },
      {
        "id": "mise-en-forme",
        "title": "Propriétés et boîte"
      }
    ],
    "prerequisites": [],
    "references": []
  },
  "questions": [
    {
      "id": "q01",
      "difficulty": 1,
      "skills": [
        "definition"
      ],
      "title": "Que signifie CSS ?",
      "partie": "syntaxe",
      "statement": "Que signifie l'acronyme **CSS** ?",
      "options": [
        {
          "text": "Color and Style System",
          "correct": false,
          "feedback": "Cette appellation n'a\npas d'existence officielle.\nLe standard porte le nom\n*Cascading Style Sheets*,\nmis au point par le W$3$C.\n"
        },
        {
          "text": "Cascading Style Sheets",
          "correct": true,
          "feedback": "Bonne réponse : feuilles de style en\ncascade. La cascade décrit comment les\nrègles s'appliquent et se combinent quand\nplusieurs s'opposent.\n"
        },
        {
          "text": "Computer Style Sheet",
          "correct": false,
          "feedback": "Le sigle officiel est\n*Cascading Style Sheets*.\nLa notion de « cascade »\nest essentielle, car elle\ndécrit comment les règles\nse combinent ou se\nsurchargent.\n"
        },
        {
          "text": "Centralized Style Standard",
          "correct": false,
          "feedback": "Cette dénomination est\ninventée. Le sigle CSS\nrenvoie aux *Cascading\nStyle Sheets*, défini par\nle W$3$C dès $1996$.\n"
        }
      ],
      "explanation": "CSS sépare la **structure** (HTML) de la\n**présentation** (CSS). Bonne pratique pour la\nmaintenabilité."
    },
    {
      "id": "q02",
      "difficulty": 1,
      "skills": [
        "syntaxe-regle"
      ],
      "title": "Syntaxe d'une règle",
      "partie": "syntaxe",
      "statement": "Quelle est la structure d'une règle CSS ?",
      "options": [
        {
          "text": "```css\nsélecteur { propriété: valeur; ... }\n```\n",
          "correct": true,
          "feedback": "Bonne réponse : sélecteur (qui ?), accolades,\npaires propriété : valeur séparées par des\npoints-virgules.\n"
        },
        {
          "text": "```css\n<sélecteur propriété=\"valeur\">\n```\n",
          "correct": false,
          "feedback": "Erreur : c'est plutôt une syntaxe HTML.\n"
        },
        {
          "text": "```css\nsélecteur (propriété = valeur)\n```\n",
          "correct": false,
          "feedback": "Erreur : pas de parenthèses ni de signe\négal.\n"
        },
        {
          "text": "```css\nsélecteur -> propriété -> valeur\n```\n",
          "correct": false,
          "feedback": "Erreur : syntaxe inventée.\n"
        }
      ],
      "explanation": "Exemple : `p { color: red; font-size: 16px; }`.\nLe `;` final est facultatif sur la dernière\ndéclaration mais recommandé."
    },
    {
      "id": "q03",
      "difficulty": 1,
      "skills": [
        "selecteur-element"
      ],
      "title": "Sélecteur d'élément",
      "partie": "selecteurs",
      "statement": "Comment écrire une règle qui s'applique à\n**tous** les paragraphes `<p>` ?",
      "options": [
        {
          "text": "`p { ... }`",
          "correct": true,
          "feedback": "Bonne réponse : on désigne le **type d'élément** par son nom (sans `<>`).\n"
        },
        {
          "text": "`<p> { ... }`",
          "correct": false,
          "feedback": "Erreur : pas de chevrons en CSS.\n"
        },
        {
          "text": "`#p { ... }`",
          "correct": false,
          "feedback": "Erreur : `#` désigne un id, pas un\nélément.\n"
        },
        {
          "text": "`.p { ... }`",
          "correct": false,
          "feedback": "Erreur : `.` désigne une classe.\n"
        }
      ],
      "explanation": "Sélecteur d'élément : nom seul (`h1`, `p`,\n`div`...). Il sélectionne tous les éléments\nde ce type dans la page."
    },
    {
      "id": "q04",
      "difficulty": 1,
      "skills": [
        "selecteur-classe"
      ],
      "title": "Sélecteur de classe",
      "partie": "selecteurs",
      "statement": "Comment cibler les éléments ayant\n`class=\"bouton\"` ?",
      "options": [
        {
          "text": "`bouton { ... }`",
          "correct": false,
          "feedback": "Erreur : sans préfixe, ce serait un\nsélecteur d'élément (qui n'existerait pas).\n"
        },
        {
          "text": "`@bouton { ... }`",
          "correct": false,
          "feedback": "Erreur : `@` introduit des règles\nspéciales (`@media`, `@import`...).\n"
        },
        {
          "text": "`#bouton { ... }`",
          "correct": false,
          "feedback": "Erreur : `#` désigne un id (élément\nunique).\n"
        },
        {
          "text": "`.bouton { ... }`",
          "correct": true,
          "feedback": "Bonne réponse : le **point** désigne une\nclasse. Très utilisé pour réutiliser un\nstyle sur plusieurs éléments.\n"
        }
      ],
      "explanation": "Mnémonique : **.** = **c**lass (commencent\ntous deux par 'c' à l'oreille). Une classe peut\nêtre appliquée à plusieurs éléments."
    },
    {
      "id": "q05",
      "difficulty": 1,
      "skills": [
        "selecteur-id"
      ],
      "title": "Sélecteur d'id",
      "partie": "selecteurs",
      "statement": "Comment cibler l'élément ayant `id=\"navigation\"` ?",
      "options": [
        {
          "text": "`navigation { ... }`",
          "correct": false,
          "feedback": "Erreur : sans préfixe, ce serait un\nsélecteur d'élément.\n"
        },
        {
          "text": "`.navigation { ... }`",
          "correct": false,
          "feedback": "Erreur : `.` désigne une classe.\n"
        },
        {
          "text": "`*navigation { ... }`",
          "correct": false,
          "feedback": "Erreur : `*` est le sélecteur universel\n(tous les éléments).\n"
        },
        {
          "text": "`#navigation { ... }`",
          "correct": true,
          "feedback": "Bonne réponse : le **dièse** (`#`) désigne\nun id. Comme un id doit être unique, ce\nsélecteur cible un seul élément.\n"
        }
      ],
      "explanation": "Trois sélecteurs de base : élément (sans\npréfixe), classe (`.`), id (`#`). On peut les\ncombiner : `p.important` (paragraphes ayant\nla classe « important »)."
    },
    {
      "id": "q06",
      "difficulty": 1,
      "skills": [
        "propriete-couleur"
      ],
      "title": "Couleur du texte",
      "partie": "mise-en-forme",
      "statement": "Quelle propriété change la **couleur du texte** ?",
      "options": [
        {
          "text": "`background`",
          "correct": false,
          "feedback": "Erreur : `background` (ou\n`background-color`) change la couleur **de fond**, pas du texte.\n"
        },
        {
          "text": "`color`",
          "correct": true,
          "feedback": "Bonne réponse : `color: red;`,\n`color: #ff0000;`, `color: rgb(255, 0, 0);`.\n"
        },
        {
          "text": "`font-color`",
          "correct": false,
          "feedback": "Erreur : propriété inexistante.\n"
        },
        {
          "text": "`text-color`",
          "correct": false,
          "feedback": "Erreur : propriété inexistante.\n"
        }
      ],
      "explanation": "Distinguer `color` (texte) et\n`background-color` (fond). Plusieurs syntaxes\npour les couleurs : nommée (`red`),\nhexadécimale (`#ff0000`), rgb, rgba, hsl."
    },
    {
      "id": "q07",
      "difficulty": 1,
      "skills": [
        "integration"
      ],
      "title": "Intégrer du CSS",
      "partie": "syntaxe",
      "statement": "Quelle est la **meilleure pratique** pour\nintégrer du CSS dans un projet HTML ?",
      "options": [
        {
          "text": "Un fichier `.css` séparé, lié via `<link>`",
          "correct": true,
          "feedback": "Bonne réponse : séparation des\npréoccupations, mise en cache par le\nnavigateur, partage entre pages, code\nmaintenable.\n"
        },
        {
          "text": "Mettre du CSS dans chaque attribut `style=\"...\"`",
          "correct": false,
          "feedback": "Pratique courante mais à éviter :\nrépétitions, difficile à maintenir, ne\npermet pas la réutilisation.\n"
        },
        {
          "text": "Mettre tout le CSS dans une balise `<style>` à la fin du `<body>`",
          "correct": false,
          "feedback": "Acceptable pour un prototype, mais le\nfichier séparé est meilleur pour les\nprojets.\n"
        },
        {
          "text": "Écrire le CSS dans le code JavaScript",
          "correct": false,
          "feedback": "Erreur : c'est possible, mais cela mélange le\nstyle et le comportement de la page. Dans un\nprojet, le CSS reste dans sa propre feuille.\n"
        }
      ],
      "explanation": "Trois façons d'intégrer CSS : externe\n(`<link>`), interne (`<style>`), inline\n(`style=\"...\"`). L'externe est la meilleure\npratique."
    },
    {
      "id": "q08",
      "difficulty": 1,
      "skills": [
        "taille-texte"
      ],
      "title": "Taille de texte",
      "partie": "mise-en-forme",
      "statement": "Quelle propriété change la **taille du texte** ?",
      "options": [
        {
          "text": "`font-size`",
          "correct": true,
          "feedback": "Bonne réponse : `font-size: 16px;`,\n`font-size: 1.2em;`. Unités courantes :\n`px` (pixel), `em` (relatif au parent), `%`.\n"
        },
        {
          "text": "`large`",
          "correct": false,
          "feedback": "Erreur : `large` est une **valeur**, pas\nune propriété (`font-size: large;`).\n"
        },
        {
          "text": "`size`",
          "correct": false,
          "feedback": "Erreur : propriété inexistante en CSS.\n"
        },
        {
          "text": "`text-size`",
          "correct": false,
          "feedback": "Erreur : propriété inexistante.\n"
        }
      ],
      "explanation": "Une taille en `px` est fixe ; une taille en\n`em` ou en `%` dépend de la taille du texte\nde l'élément parent."
    },
    {
      "id": "q09",
      "difficulty": 1,
      "skills": [
        "commentaire"
      ],
      "title": "Commentaires CSS",
      "partie": "syntaxe",
      "statement": "Comment écrire un **commentaire** en CSS ?",
      "options": [
        {
          "text": "`/* commentaire */`",
          "correct": true,
          "feedback": "Bonne réponse : seule syntaxe valide en\nCSS, peut s'étendre sur plusieurs lignes.\n"
        },
        {
          "text": "`// commentaire`",
          "correct": false,
          "feedback": "Erreur : c'est la syntaxe JavaScript, C++,\nJava. CSS ne reconnaît pas `//`.\n"
        },
        {
          "text": "`-- commentaire`",
          "correct": false,
          "feedback": "Erreur : c'est la syntaxe SQL.\n"
        },
        {
          "text": "`# commentaire`",
          "correct": false,
          "feedback": "Erreur : c'est la syntaxe Python.\n"
        }
      ],
      "explanation": "Bonne pratique : commenter les sections\nprincipales et les valeurs non triviales\n(couleurs spécifiques, hacks de\ncompatibilité)."
    },
    {
      "id": "q10",
      "difficulty": 1,
      "skills": [
        "link"
      ],
      "title": "Lien vers fichier CSS",
      "partie": "syntaxe",
      "statement": "Comment lier un fichier `style.css` à une page\nHTML ?",
      "options": [
        {
          "text": "```html\n<import rel=\"stylesheet\" href=\"style.css\">\n```\n",
          "correct": false,
          "feedback": "Erreur : balise inexistante en HTML. CSS a\n`@import` mais c'est en CSS, pas en HTML.\n"
        },
        {
          "text": "```html\n<style src=\"style.css\" type=\"text/css\">\n```\n",
          "correct": false,
          "feedback": "Erreur : `<style>` n'a pas d'attribut\n`src`. Il sert à inclure du CSS interne.\n"
        },
        {
          "text": "```html\n<css rel=\"stylesheet\" href=\"style.css\" />\n```\n",
          "correct": false,
          "feedback": "Erreur : la balise `<css>` n'existe pas.\n"
        },
        {
          "text": "```html\n<link rel=\"stylesheet\" href=\"style.css\">\n```\n",
          "correct": true,
          "feedback": "Bonne réponse : balise `<link>` avec\n`rel=\"stylesheet\"` (relation = feuille de\nstyle) et `href` (chemin). À placer dans\n`<head>`.\n"
        }
      ],
      "explanation": "Convention : nommer la feuille `style.css` ou\n`main.css`. Pour des styles spécifiques à\ncertaines pages, plusieurs feuilles peuvent\ncoexister."
    },
    {
      "id": "q11",
      "difficulty": 2,
      "skills": [
        "box-model"
      ],
      "title": "Modèle de boîte",
      "partie": "mise-en-forme",
      "statement": "Dans le **modèle de boîte** CSS, quels sont les\nquatre composants concentriques d'un élément\n(de l'intérieur vers l'extérieur) ?",
      "options": [
        {
          "text": "bordure, marge, padding, contenu",
          "correct": false,
          "feedback": "Erreur : ordre incorrect.\n"
        },
        {
          "text": "padding, contenu, marge, bordure",
          "correct": false,
          "feedback": "Erreur : ordre incorrect.\n"
        },
        {
          "text": "contenu, padding, bordure, marge",
          "correct": true,
          "feedback": "Bonne réponse : **content** (contenu),\n**padding** (rembourrage interne),\n**border** (bordure), **margin** (marge\nexterne).\n"
        },
        {
          "text": "marge, contenu, bordure, padding",
          "correct": false,
          "feedback": "Erreur : ordre incorrect.\n"
        }
      ],
      "explanation": "Comme une carte postale dans une enveloppe :\ncontenu (la carte), padding (le matelas\nautour), border (l'enveloppe), margin\n(l'espace entre l'enveloppe et la suivante)."
    },
    {
      "id": "q12",
      "difficulty": 2,
      "skills": [
        "cascade"
      ],
      "title": "Cascade et priorité",
      "partie": "selecteurs",
      "statement": "Si deux règles s'appliquent au même élément,\nlaquelle l'emporte ?",
      "options": [
        {
          "text": "Au hasard, selon le choix interne du navigateur",
          "correct": false,
          "feedback": "Erreur : la cascade est déterministe,\nrien n'est laissé au choix du navigateur.\n"
        },
        {
          "text": "Celle dont le sélecteur est le plus court, donc le plus général",
          "correct": false,
          "feedback": "Erreur : c'est l'opposé, le sélecteur le\nplus **spécifique** l'emporte.\n"
        },
        {
          "text": "La plus spécifique, sinon la dernière écrite",
          "correct": true,
          "feedback": "Bonne réponse : la cascade hiérarchise par\nspécificité, puis par ordre de\ndéclaration.\n"
        },
        {
          "text": "La toute première écrite dans le fichier",
          "correct": false,
          "feedback": "Erreur : c'est l'inverse pour la même\nspécificité (la dernière écrite l'emporte).\n"
        }
      ],
      "explanation": "Un sélecteur d'id est plus spécifique qu'un\nsélecteur de classe, lui-même plus spécifique\nqu'un sélecteur d'élément. À spécificité égale,\nla règle écrite en dernier l'emporte."
    },
    {
      "id": "q13",
      "difficulty": 2,
      "skills": [
        "heritage"
      ],
      "title": "Héritage",
      "partie": "selecteurs",
      "statement": "Que signifie qu'une propriété CSS est\n**héritée** ?",
      "options": [
        {
          "text": "Elle ne fonctionne que sur le premier élément",
          "correct": false,
          "feedback": "L'héritage en CSS n'est\npas restreint au premier\nélément ; il se propage\ndans toute la sous-arborescence,\ndu parent vers ses\ndescendants.\n"
        },
        {
          "text": "Elle s'applique à tous les éléments de la page",
          "correct": false,
          "feedback": "Erreur : pas global, mais hiérarchique.\n"
        },
        {
          "text": "Transmise du parent aux enfants",
          "correct": true,
          "feedback": "Bonne réponse : par exemple, `color` est\nhéritée : `body { color: blue; }` rend\ntout le texte de la page bleu, sauf si\nun descendant la redéfinit.\n"
        },
        {
          "text": "Elle est interdite par CSS3",
          "correct": false,
          "feedback": "Erreur : très utilisée.\n"
        }
      ],
      "explanation": "Toutes les propriétés ne sont pas héritées :\n`color`, `font-family` oui ; `border`,\n`padding`, `margin` non. Forcer\nl'héritage : `inherit`."
    },
    {
      "id": "q14",
      "difficulty": 2,
      "skills": [
        "unite"
      ],
      "title": "Unités CSS",
      "partie": "mise-en-forme",
      "statement": "Quelle unité exprime une taille de texte\n**relative à la taille de police de\nl'élément parent** ?",
      "options": [
        {
          "text": "`em`",
          "correct": true,
          "feedback": "Bonne réponse : `1.2em` vaut 120 % de la\ntaille de police du parent. Adaptatif et\naccessible.\n"
        },
        {
          "text": "`pt`",
          "correct": false,
          "feedback": "Erreur : le point (`pt`) est une unité absolue,\nhéritée de l'imprimerie : sa taille ne dépend\npas du parent.\n"
        },
        {
          "text": "`cm`",
          "correct": false,
          "feedback": "Erreur : unité physique absolue, peu\nadaptée à l'écran.\n"
        },
        {
          "text": "`px` (pixel)",
          "correct": false,
          "feedback": "Erreur : taille fixe, indépendante du\nparent.\n"
        }
      ],
      "explanation": "Une unité relative comme `em` s'adapte au\nparent : `1.2em` dans un parent de `20px`\ndonne `24px`. Les unités `px`, `pt` et `cm`,\nelles, fixent une taille indépendante du\nparent."
    },
    {
      "id": "q15",
      "difficulty": 2,
      "skills": [
        "combinaison-selecteurs"
      ],
      "title": "Sélecteurs combinés",
      "partie": "selecteurs",
      "statement": "Que cible le sélecteur `nav a` (avec un\nespace) ?",
      "options": [
        {
          "text": "Le premier `<a>` après un `<nav>`",
          "correct": false,
          "feedback": "Erreur : l'espace ne désigne pas « le\nsuivant ». `nav a` cible les liens situés à\nl'intérieur d'un `<nav>`, à n'importe quelle\nprofondeur.\n"
        },
        {
          "text": "Tous les `<a>` descendants d'un `<nav>`",
          "correct": true,
          "feedback": "Bonne réponse : l'**espace** entre deux\nsélecteurs signifie « à l'intérieur de ».\nTous les liens contenus dans un `<nav>` sont\nciblés, même imbriqués dans d'autres balises.\n"
        },
        {
          "text": "Aucun élément",
          "correct": false,
          "feedback": "Le sélecteur `nav a`\nest parfaitement valide\net cible bien des éléments :\ntous les liens situés à\nl'intérieur d'une zone\nde navigation.\n"
        },
        {
          "text": "Les éléments qui sont à la fois `<nav>` et `<a>`",
          "correct": false,
          "feedback": "Erreur : c'est `nav,a` (virgule) qui ciblerait\nles deux. Et un élément ne peut être à\nla fois `nav` et `a`.\n"
        }
      ],
      "explanation": "Deux écritures à ne pas confondre : `nav a`\n(avec un espace) cible les `<a>` placés dans\nun `<nav>` ; `nav, a` (avec une virgule)\napplique la même règle à tous les `<nav>` et\nà tous les `<a>`."
    },
    {
      "id": "q17",
      "difficulty": 2,
      "skills": [
        "color-format"
      ],
      "title": "Couleurs en CSS",
      "partie": "mise-en-forme",
      "statement": "Lesquels de ces formats désignent **la même couleur** (rouge pur) ?",
      "options": [
        {
          "text": "`red`, `#ff0000`, `rgb(255, 0, 0)`, `hsl(0, 100%, 50%)`",
          "correct": true,
          "feedback": "Bonne réponse : tous ces formats\nreprésentent le rouge pur. Choisir selon\nce qui est plus lisible/calculable.\n"
        },
        {
          "text": "Seulement `red` et `#ff0000`, pas les deux autres",
          "correct": false,
          "feedback": "Erreur : les quatre sont équivalents.\n"
        },
        {
          "text": "Aucun, chacun donne une nuance de rouge différente",
          "correct": false,
          "feedback": "Au moins l'un de ces\nformats représente bien\ndu rouge ; en réalité,\ntous les quatre désignent\nexactement la même couleur.\n"
        },
        {
          "text": "Seulement la notation `rgb(255, 0, 0)`, la plus précise",
          "correct": false,
          "feedback": "La notation `rgb(255, 0, 0)`\nn'est pas la seule à\ndésigner du rouge pur.\nLe mot-clé `red`, le code\nhexadécimal `#ff0000` et\nla notation HSL produisent\nle même résultat.\n"
        }
      ],
      "explanation": "Quatre formats principaux : nommés (148\nnoms), hex (`#rrggbb`), rgb/rgba (transparence\nvia le 4ᵉ canal), hsl/hsla (teinte/saturation/\nluminosité, plus intuitif)."
    },
    {
      "id": "q18",
      "difficulty": 2,
      "skills": [
        "trace-css"
      ],
      "title": "Deux règles de même spécificité",
      "partie": "syntaxe",
      "statement": "```css\np { color: blue; }\np { color: red; }\n```\n```html\n<p>Texte</p>\n```\nQuelle est la couleur du texte ?",
      "options": [
        {
          "text": "Rouge, car la dernière règle écrite l'emporte",
          "correct": true,
          "feedback": "Bonne réponse : les deux sélecteurs `p`\nont exactement la même spécificité\n(0,0,1). À égalité, c'est l'ordre\nd'écriture qui départage, à savoir la\ndernière règle déclarée.\n"
        },
        {
          "text": "Bleu, car la première règle rencontrée est prioritaire",
          "correct": false,
          "feedback": "Erreur classique : croire que la première\ndéclaration « verrouille » la propriété.\nC'est l'inverse, à spécificité égale la\ndernière règle écrite écrase la\nprécédente.\n"
        },
        {
          "text": "Noir, car les deux règles s'annulent mutuellement",
          "correct": false,
          "feedback": "Erreur : un conflit CSS n'annule jamais\nles règles en jeu. La cascade est faite\nprécisément pour trancher, ici en faveur\nde la dernière règle écrite.\n"
        },
        {
          "text": "Cela dépend du navigateur qui affiche la page",
          "correct": false,
          "feedback": "Erreur : la résolution de la cascade est\nnormalisée et identique dans tous les\nnavigateurs. À spécificité égale, la\ndernière règle écrite l'emporte partout.\n"
        }
      ],
      "explanation": "La cascade compare d'abord la spécificité ;\nen cas d'égalité (ici deux sélecteurs\nd'élément), c'est l'ordre d'apparition qui\ndécide : la dernière règle écrite l'emporte."
    },
    {
      "id": "q20",
      "difficulty": 2,
      "skills": [
        "class-multiple"
      ],
      "title": "Plusieurs classes",
      "partie": "selecteurs",
      "statement": "Un élément peut-il avoir **plusieurs classes** ?",
      "options": [
        {
          "text": "Oui, séparées par des virgules simples",
          "correct": false,
          "feedback": "Erreur : l'attribut `class` est découpé\nsur les espaces, la virgule n'est pas un\nséparateur. `class=\"bouton,primaire\"`\ndéfinirait une seule classe nommée\n« bouton,primaire ».\n"
        },
        {
          "text": "Non, une seule par élément",
          "correct": false,
          "feedback": "Erreur : on peut en mettre plusieurs.\n"
        },
        {
          "text": "Oui, séparées par des espaces",
          "correct": true,
          "feedback": "Bonne réponse : pratique pour combiner\ndes styles modulaires. Chaque classe est\nappliquée indépendamment.\n"
        },
        {
          "text": "Non, il faut utiliser un id",
          "correct": false,
          "feedback": "Erreur : id et class sont indépendants.\n"
        }
      ],
      "explanation": "Plusieurs classes sur un même élément\npermettent de **composer** la mise en forme :\nchaque classe apporte ses propriétés, par\nexemple `class=\"bouton important\"`."
    },
    {
      "id": "q21",
      "difficulty": 3,
      "skills": [
        "debogage"
      ],
      "title": "Style ne s'applique pas",
      "partie": "syntaxe",
      "statement": "Mon CSS ne semble pas s'appliquer à un élément.\nQuelles sont les **causes les plus probables** ?",
      "options": [
        {
          "text": "HTML5 ne supporte tout simplement pas du tout CSS",
          "correct": false,
          "feedback": "Erreur : c'est l'inverse.\n"
        },
        {
          "text": "Faute de frappe, surcharge, ou fichier non chargé",
          "correct": true,
          "feedback": "Bonne réponse : trois pistes classiques.\nOutils de débogage : inspecteur du\nnavigateur (F12), onglet « Computed »\nmontre les styles appliqués réellement et\nd'où ils viennent.\n"
        },
        {
          "text": "Il faut redémarrer le serveur web après chaque modification",
          "correct": false,
          "feedback": "Possiblement (cache navigateur), mais\nrarement la cause profonde.\n"
        },
        {
          "text": "Le CSS est trop lent et n'a pas fini de s'appliquer",
          "correct": false,
          "feedback": "Le moteur de rendu CSS\napplique les règles\nquasi instantanément.\nSi un style ne s'affiche\npas, la cause est presque\ntoujours un sélecteur\nerroné, une règle plus\nspécifique ou un fichier\nmal chargé.\n"
        }
      ],
      "explanation": "Réflexe : ouvrir l'inspecteur (F12),\nsélectionner l'élément, regarder l'onglet\n« Styles » pour voir quelles règles\ns'appliquent et lesquelles sont surchargées."
    },
    {
      "id": "q25",
      "difficulty": 3,
      "skills": [
        "synthese"
      ],
      "title": "Synthèse",
      "partie": "syntaxe",
      "statement": "Parmi les affirmations suivantes sur CSS,\nlaquelle est **fausse** ?",
      "options": [
        {
          "text": "Le modèle de boîte CSS comprend contenu, padding, bordure, marge",
          "correct": false,
          "feedback": "Vrai : modèle fondamental.\n"
        },
        {
          "text": "CSS sépare la présentation de la structure (HTML)",
          "correct": false,
          "feedback": "Vrai : principe fondamental.\n"
        },
        {
          "text": "La spécificité hiérarchise les sélecteurs : id > classe > élément",
          "correct": false,
          "feedback": "Vrai : règle de la cascade.\n"
        },
        {
          "text": "Un sélecteur de classe cible un seul élément à la fois",
          "correct": true,
          "feedback": "Faux (donc bonne réponse) : une classe\n(sélecteur préfixé par `.`) peut être\nappliquée à plusieurs éléments. C'est le\n**id** qui est unique par convention.\n"
        }
      ],
      "explanation": "Mnémonique : `.classe` = catégorie (peut\nregrouper N éléments) ; `#id` = identifiant\n(un seul). À ne pas confondre."
    },
    {
      "id": "q26",
      "difficulty": 2,
      "skills": [
        "box-model",
        "padding",
        "marge"
      ],
      "title": "Largeur totale d'une boîte",
      "partie": "mise-en-forme",
      "statement": "On applique le style suivant à un paragraphe :\n\n```css\np {\n  width: 200px;\n  padding: 10px;\n  border: 2px solid black;\n  margin: 15px;\n}\n```\n\nQuelle largeur totale ce paragraphe occupe-t-il\nhorizontalement, marges comprises ?",
      "options": [
        {
          "text": "227 px",
          "correct": false,
          "feedback": "Erreur : ce calcul (200 + 10 + 2 + 15) ne\ncompte chaque épaisseur qu'une fois. Padding,\nbordure et marge s'appliquent **des deux\ncôtés** de la boîte, il faut donc les\ncompter deux fois chacun.\n"
        },
        {
          "text": "254 px",
          "correct": true,
          "feedback": "Bonne réponse : de part et d'autre du contenu,\nchaque couche compte deux fois, soit\n200 + 2 × 10 + 2 × 2 + 2 × 15 = 254 px.\n"
        },
        {
          "text": "224 px",
          "correct": false,
          "feedback": "Erreur : ce calcul (200 + 2 × 10 + 2 × 2)\noublie la **marge**. Même extérieure à la\nbordure, elle fait partie de la place occupée\npar l'élément dans la page.\n"
        },
        {
          "text": "200 px",
          "correct": false,
          "feedback": "Erreur : `width` ne désigne que la largeur du\n**contenu**. Padding, bordure et marge\ns'ajoutent autour.\n"
        }
      ],
      "explanation": "La propriété `width` fixe la largeur du contenu.\nPadding, bordure et marge s'ajoutent de chaque\ncôté : la boîte occupe\n$200 + 2 \\times 10 + 2 \\times 2 + 2 \\times 15 = 254$ px."
    },
    {
      "id": "q22",
      "difficulty": 3,
      "skills": [
        "synthese",
        "cascade",
        "specificite"
      ],
      "title": "Quelle règle l'emporte",
      "partie": "syntaxe",
      "statement": "Considérez le code HTML suivant :\n\n`<p class=\"alerte\" id=\"principal\">Texte</p>`\n\nTrois règles CSS sont définies dans la même feuille de style :\n\n- `p { color: blue; }`\n- `.alerte { color: orange; }`\n- `#principal { color: red; }`\n\nDe quelle couleur le mot « Texte » s'affichera-t-il ?",
      "options": [
        {
          "text": "Rouge, car le sélecteur d'identifiant a la spécificité la plus élevée",
          "correct": true,
          "feedback": "Bonne réponse : lorsqu'aucune règle n'est marquée\n`!important` et qu'il n'y a pas de style en ligne,\nc'est la **spécificité** qui départage. L'identifiant\n(`#principal`) l'emporte sur la classe (`.alerte`),\nqui l'emporte elle-même sur le sélecteur d'élément\n(`p`).\n"
        },
        {
          "text": "Bleu, car le sélecteur d'élément `p` est le plus général donc le plus prioritaire",
          "correct": false,
          "feedback": "Erreur : c'est exactement l'inverse. En CSS, plus\nun sélecteur est précis, plus il est prioritaire.\nLe sélecteur d'élément est le moins spécifique.\n"
        },
        {
          "text": "Orange, car la règle de la classe est la deuxième dans la feuille",
          "correct": false,
          "feedback": "Erreur : l'ordre des règles n'intervient qu'en cas\nd'égalité de spécificité. Ici, l'identifiant est\nplus spécifique que la classe, donc l'ordre n'a\npas d'effet.\n"
        },
        {
          "text": "La couleur est indéterminée car trois règles différentes s'appliquent en même temps",
          "correct": false,
          "feedback": "Erreur : la cascade CSS définit précisément un\nordre de priorité (spécificité, puis ordre\nd'apparition) qui rend la résolution toujours\ndéterministe.\n"
        }
      ],
      "explanation": "La spécificité d'un sélecteur se calcule à partir\ndu nombre d'identifiants, de classes et d'éléments\nqu'il contient. Un identifiant pèse plus qu'une\nclasse, qui pèse plus qu'un sélecteur d'élément.\nLe style en ligne (`style=\"...\"`) est encore\nau-dessus, et `!important` permet d'outrepasser\nla cascade naturelle (à utiliser avec parcimonie)."
    },
    {
      "id": "q23",
      "difficulty": 3,
      "skills": [
        "box-model",
        "background",
        "padding"
      ],
      "title": "La zone couverte par la couleur de fond",
      "partie": "mise-en-forme",
      "statement": "Un paragraphe reçoit le style suivant :\n\n```css\np {\n  background-color: lightblue;\n  padding: 20px;\n  border: 2px solid black;\n  margin: 30px;\n}\n```\n\nQuelle partie de la boîte apparaît en bleu clair à l'écran ?",
      "options": [
        {
          "text": "Le contenu et le padding, à l'intérieur de la bordure",
          "correct": true,
          "feedback": "Bonne réponse : la couleur de fond remplit la\nboîte jusqu'à sa bordure, padding compris. La\nmarge, à l'extérieur de la bordure, reste\ntransparente.\n"
        },
        {
          "text": "Le contenu seul, derrière le texte",
          "correct": false,
          "feedback": "Erreur : le padding fait partie de la boîte et\nprend la couleur de fond. C'est justement lui qui\nécarte le texte de la bordure sur un fond coloré.\n"
        },
        {
          "text": "Le contenu, le padding et la marge",
          "correct": false,
          "feedback": "Erreur : la marge est un espace extérieur à la\nbordure ; elle reste transparente et laisse voir\nle fond de l'élément parent.\n"
        },
        {
          "text": "Toute la largeur de la page, sur la hauteur du paragraphe",
          "correct": false,
          "feedback": "Erreur : la couleur de fond s'arrête à la bordure\nde la boîte ; la marge de $30$ px qui l'entoure\nreste transparente.\n"
        }
      ],
      "explanation": "La couleur de fond couvre le contenu et le padding,\njusqu'à la bordure ; la marge, extérieure, reste\ntransparente. Pour écarter le texte du bord d'un fond\ncoloré, on utilise donc `padding`, et pour écarter deux\nboîtes, `margin`."
    },
    {
      "id": "q27",
      "difficulty": 1,
      "skills": [
        "proprietes",
        "couleur-de-fond"
      ],
      "title": "La couleur de fond d'un élément",
      "partie": "mise-en-forme",
      "statement": "Quelle propriété CSS donne un fond jaune à un paragraphe ?",
      "options": [
        {
          "text": "`background-color: yellow;`",
          "correct": true,
          "feedback": "Bonne réponse : `background-color` colore l'arrière-plan de la\nboîte, par opposition à `color`, qui colore le texte.\n"
        },
        {
          "text": "`color: yellow;`",
          "correct": false,
          "feedback": "Erreur : `color` change la couleur des caractères, pas du fond.\n"
        },
        {
          "text": "`fond: jaune;`",
          "correct": false,
          "feedback": "Erreur : les propriétés et les noms de couleurs CSS sont en\nanglais.\n"
        },
        {
          "text": "`background: text yellow;`",
          "correct": false,
          "feedback": "Erreur : cette valeur n'existe pas.\n"
        }
      ],
      "explanation": "`color` pour le texte, `background-color` pour le fond : deux\npropriétés distinctes."
    },
    {
      "id": "q28",
      "difficulty": 2,
      "skills": [
        "proprietes",
        "alignement"
      ],
      "title": "Centrer un titre",
      "partie": "mise-en-forme",
      "statement": "Quelle règle centre horizontalement le texte de tous les titres de\nniveau 1 ?",
      "options": [
        {
          "text": "`h1 { text-align: center; }`",
          "correct": true,
          "feedback": "Bonne réponse : `text-align` règle l'alignement horizontal du\ntexte à l'intérieur de sa boîte.\n"
        },
        {
          "text": "`h1 { align: center; }`",
          "correct": false,
          "feedback": "Erreur : `align` n'est pas une propriété CSS.\n"
        },
        {
          "text": "`h1 { position: center; }`",
          "correct": false,
          "feedback": "Erreur : `position` gère le mode de placement d'une boîte, et\n`center` n'en est pas une valeur.\n"
        },
        {
          "text": "`center { h1 }`",
          "correct": false,
          "feedback": "Erreur : la syntaxe est inversée ; le sélecteur précède les\naccolades, qui contiennent des déclarations.\n"
        }
      ],
      "explanation": "`text-align` accepte `left`, `right`, `center` et `justify`."
    },
    {
      "id": "q29",
      "difficulty": 2,
      "skills": [
        "boite",
        "margin",
        "padding"
      ],
      "title": "Marge intérieure ou marge extérieure",
      "partie": "mise-en-forme",
      "statement": "Quelle différence entre `padding` et `margin` ?",
      "options": [
        {
          "text": "`padding` est à l'intérieur de la bordure, `margin` à l'extérieur",
          "correct": true,
          "feedback": "Bonne réponse : de l'intérieur vers l'extérieur, une boîte\nempile le contenu, le `padding`, la bordure puis la `margin`,\nqui écarte les boîtes voisines.\n"
        },
        {
          "text": "`padding` concerne le texte, `margin` les images et les tableaux",
          "correct": false,
          "feedback": "Erreur : les deux propriétés s'appliquent à toute boîte, quel\nque soit son contenu.\n"
        },
        {
          "text": "`padding` se mesure en pixels, `margin` en pourcentages seulement",
          "correct": false,
          "feedback": "Erreur : les deux acceptent les mêmes unités.\n"
        },
        {
          "text": "Aucune, les deux propriétés étant synonymes et interchangeables",
          "correct": false,
          "feedback": "Erreur : l'une est à l'intérieur de la bordure, l'autre à\nl'extérieur ; le fond coloré couvre le `padding`, pas la\n`margin`.\n"
        }
      ],
      "explanation": "Le modèle de boîte distingue quatre zones : contenu, `padding`,\nbordure, `margin`."
    },
    {
      "id": "q30",
      "difficulty": 2,
      "skills": [
        "proprietes",
        "police",
        "font-family"
      ],
      "title": "Une police avec solution de repli",
      "partie": "mise-en-forme",
      "statement": "Que signifie la déclaration `font-family: Garamond, serif;` ?",
      "options": [
        {
          "text": "Garamond si elle est installée, sinon une police à empattements",
          "correct": true,
          "feedback": "Bonne réponse : la liste est lue de gauche à droite ; `serif`\nest une famille générique que tout navigateur sait fournir.\n"
        },
        {
          "text": "Garamond pour les titres et une police serif pour le reste",
          "correct": false,
          "feedback": "Erreur : la déclaration ne distingue pas les éléments ; elle\ndonne un ordre de préférence.\n"
        },
        {
          "text": "Mélanger les deux polices dans le texte, un mot sur deux",
          "correct": false,
          "feedback": "Erreur : une seule police est utilisée, la première disponible.\n"
        },
        {
          "text": "Une police unique nommée « Garamond, serif »",
          "correct": false,
          "feedback": "Erreur : la virgule sépare des choix successifs.\n"
        }
      ],
      "explanation": "Terminer `font-family` par une famille générique, `serif`,\n`sans-serif` ou `monospace`, garantit un rendu acceptable partout."
    },
    {
      "id": "q31",
      "difficulty": 3,
      "skills": [
        "proprietes",
        "display",
        "affichage"
      ],
      "title": "Faire disparaître un élément",
      "partie": "mise-en-forme",
      "statement": "Quel effet a la déclaration `display: none;` sur un élément ?",
      "options": [
        {
          "text": "L'élément disparaît et n'occupe plus de place",
          "correct": true,
          "feedback": "Bonne réponse : l'élément est retiré du flux, comme s'il\nn'existait pas ; les éléments suivants remontent.\n"
        },
        {
          "text": "L'élément devient transparent mais garde sa place",
          "correct": false,
          "feedback": "Erreur : garder la place est le comportement de\n`visibility: hidden`, pas de `display: none`.\n"
        },
        {
          "text": "L'élément est supprimé du code HTML de la page",
          "correct": false,
          "feedback": "Erreur : le HTML n'est pas modifié ; seul l'affichage change,\net une autre règle peut le faire réapparaître.\n"
        },
        {
          "text": "L'élément est affiché sans bordure ni fond",
          "correct": false,
          "feedback": "Erreur : `display: none` n'est pas une mise en forme allégée,\nc'est une disparition complète.\n"
        }
      ],
      "explanation": "`display` décide comment une boîte participe à la page : `block`,\n`inline`, ou `none` pour la retirer."
    },
    {
      "id": "q32",
      "difficulty": 1,
      "skills": [
        "selecteurs",
        "liste"
      ],
      "title": "Une règle pour plusieurs balises",
      "partie": "selecteurs",
      "statement": "Comment appliquer la même couleur aux titres `h1` et `h2` avec une\nseule règle ?",
      "options": [
        {
          "text": "`h1, h2 { color: navy; }`",
          "correct": true,
          "feedback": "Bonne réponse : la virgule regroupe plusieurs sélecteurs qui\npartagent les mêmes déclarations.\n"
        },
        {
          "text": "`h1 h2 { color: navy; }`",
          "correct": false,
          "feedback": "Erreur : sans virgule, ce sélecteur vise les `h2` situés à\nl'intérieur d'un `h1`, ce qui n'existe pas.\n"
        },
        {
          "text": "`h1 + h2 { color: navy; }`",
          "correct": false,
          "feedback": "Erreur : `+` vise un `h2` placé juste après un `h1`, pas les\ndeux.\n"
        },
        {
          "text": "`h1 & h2 { color: navy; }`",
          "correct": false,
          "feedback": "Erreur : `&` n'est pas un séparateur de sélecteurs.\n"
        }
      ],
      "explanation": "La virgule évite de répéter une règle ; l'espace, lui, exprime une\nrelation de descendance."
    },
    {
      "id": "q33",
      "difficulty": 2,
      "skills": [
        "selecteurs",
        "id",
        "unicite"
      ],
      "title": "Un identifiant unique",
      "partie": "selecteurs",
      "statement": "Pourquoi un même `id` ne doit-il apparaître qu'une fois dans une\npage ?",
      "options": [
        {
          "text": "Parce qu'un `id` désigne un seul élément, en CSS comme en JavaScript",
          "correct": true,
          "feedback": "Bonne réponse : `document.getElementById` ne renvoie qu'un\nélément, et un lien `#id` cible un seul endroit. Deux éléments\nde même `id` rendent la page invalide.\n"
        },
        {
          "text": "Parce que le navigateur refuse d'afficher la page sinon",
          "correct": false,
          "feedback": "Erreur : le navigateur affiche quand même la page, mais son\ncomportement devient imprévisible.\n"
        },
        {
          "text": "Parce qu'un `id` ne peut porter que sur un titre de la page",
          "correct": false,
          "feedback": "Erreur : n'importe quel élément peut recevoir un `id`.\n"
        },
        {
          "text": "Parce que les `id` sont réservés aux champs de formulaire",
          "correct": false,
          "feedback": "Erreur : les `id` servent partout, dans les formulaires comme\nailleurs.\n"
        }
      ],
      "explanation": "Pour un style partagé par plusieurs éléments, on emploie une\nclasse ; l'`id` est réservé à l'élément unique."
    },
    {
      "id": "q34",
      "difficulty": 3,
      "skills": [
        "selecteurs",
        "descendant",
        "classe"
      ],
      "title": "Deux sélecteurs qui se ressemblent",
      "partie": "selecteurs",
      "statement": "Quelle différence entre les sélecteurs `.rouge p` et `p.rouge` ?",
      "options": [
        {
          "text": "Le premier vise les `p` dans un `.rouge`, le second les `p` de classe `rouge`",
          "correct": true,
          "feedback": "Bonne réponse : l'espace exprime la descendance, l'absence\nd'espace cumule les conditions sur un même élément.\n"
        },
        {
          "text": "Aucune, l'ordre des termes et les espaces n'ayant pas d'importance",
          "correct": false,
          "feedback": "Erreur : l'espace change tout ; les deux sélecteurs visent des\néléments différents.\n"
        },
        {
          "text": "`.rouge p` est une erreur de syntaxe, un espace étant interdit",
          "correct": false,
          "feedback": "Erreur : c'est un sélecteur descendant tout à fait valide.\n"
        },
        {
          "text": "`p.rouge` vise les paragraphes dont le texte est affiché en rouge",
          "correct": false,
          "feedback": "Erreur : un sélecteur ne lit pas les couleurs ; il lit les\nclasses de l'élément.\n"
        }
      ],
      "explanation": "`A B` vise les `B` à l'intérieur d'un `A` ; `A.b` vise les `A` qui\nportent la classe `b`. Deux relations différentes."
    },
    {
      "id": "q35",
      "difficulty": 3,
      "skills": [
        "heritage",
        "proprietes"
      ],
      "title": "Une propriété qui s'hérite, une autre non",
      "partie": "selecteurs",
      "statement": "Une règle `div { color: green; border: 1px solid black; }` est\nappliquée à un `div` contenant un paragraphe. Qu'observe-t-on sur\nce paragraphe ?",
      "options": [
        {
          "text": "Son texte est vert, mais il n'a pas de bordure propre",
          "correct": true,
          "feedback": "Bonne réponse : `color` est héritée par les descendants, alors\nque `border` ne s'applique qu'à l'élément visé. Seul le `div` est\nencadré.\n"
        },
        {
          "text": "Son texte est vert et il est entouré d'une bordure",
          "correct": false,
          "feedback": "Erreur : la bordure ne s'hérite pas ; le paragraphe n'en reçoit\naucune.\n"
        },
        {
          "text": "Il n'est pas concerné, la règle ne visant que le `div`",
          "correct": false,
          "feedback": "Erreur : les propriétés de texte comme `color` se transmettent\naux descendants.\n"
        },
        {
          "text": "Il est encadré mais son texte reste noir",
          "correct": false,
          "feedback": "Erreur : c'est l'inverse, la couleur s'hérite et la bordure non.\n"
        }
      ],
      "explanation": "Les propriétés liées au texte s'héritent, celles liées à la boîte,\nbordures, marges, fond, ne s'héritent pas."
    },
    {
      "id": "q36",
      "difficulty": 2,
      "skills": [
        "classe",
        "reutilisation"
      ],
      "title": "Une classe sur des balises différentes",
      "partie": "selecteurs",
      "statement": "Peut-on donner la classe `important` à la fois à un paragraphe et à\nun titre `h2` ?",
      "options": [
        {
          "text": "Oui, une classe s'applique à n'importe quelle balise",
          "correct": true,
          "feedback": "Bonne réponse : la classe est indépendante du type d'élément ;\n`.important { color: red; }` touchera les deux.\n"
        },
        {
          "text": "Non, une classe est liée à une seule balise",
          "correct": false,
          "feedback": "Erreur : rien ne lie une classe à une balise particulière.\n"
        },
        {
          "text": "Oui, mais seul le premier élément sera stylé",
          "correct": false,
          "feedback": "Erreur : tous les éléments portant la classe reçoivent le style.\n"
        },
        {
          "text": "Non, il faut deux classes de noms différents",
          "correct": false,
          "feedback": "Erreur : partager une classe est précisément le moyen d'éviter\nde dupliquer une règle.\n"
        }
      ],
      "explanation": "Une classe regroupe des éléments par rôle, pas par balise : c'est\nce qui la rend réutilisable."
    },
    {
      "id": "q37",
      "difficulty": 1,
      "skills": [
        "syntaxe",
        "point-virgule"
      ],
      "title": "Séparer deux déclarations",
      "partie": "syntaxe",
      "statement": "Dans `p { color: red; font-size: 18px; }`, à quoi servent les\npoints-virgules ?",
      "options": [
        {
          "text": "À séparer les déclarations d'une règle",
          "correct": true,
          "feedback": "Bonne réponse : chaque déclaration, propriété et valeur, se\ntermine par un point-virgule, ce qui permet d'en enchaîner\nplusieurs.\n"
        },
        {
          "text": "À terminer la règle, comme l'accolade",
          "correct": false,
          "feedback": "Erreur : la règle se termine par l'accolade fermante.\n"
        },
        {
          "text": "À séparer la propriété de sa valeur",
          "correct": false,
          "feedback": "Erreur : c'est le rôle des deux-points.\n"
        },
        {
          "text": "Ils sont facultatifs partout dans la feuille",
          "correct": false,
          "feedback": "Erreur : entre deux déclarations, le point-virgule est\nobligatoire ; seul le dernier peut être omis.\n"
        }
      ],
      "explanation": "Une règle CSS : un sélecteur, des accolades, des déclarations\n`propriété: valeur;`."
    },
    {
      "id": "q38",
      "difficulty": 2,
      "skills": [
        "syntaxe",
        "erreur",
        "propriete-inconnue"
      ],
      "title": "Une propriété mal orthographiée",
      "partie": "syntaxe",
      "statement": "Nora écrit `p { colour: red; }` et constate que ses paragraphes\nrestent noirs. Pourquoi ?",
      "options": [
        {
          "text": "La déclaration est ignorée, `colour` n'étant pas une propriété",
          "correct": true,
          "feedback": "Bonne réponse : le CSS ne signale pas les erreurs ; une propriété\ninconnue est simplement ignorée, et le reste de la feuille\ncontinue de s'appliquer.\n"
        },
        {
          "text": "Le navigateur affiche un message d'erreur et s'arrête",
          "correct": false,
          "feedback": "Erreur : aucun message n'apparaît, ce qui rend ce type de faute\ndifficile à repérer.\n"
        },
        {
          "text": "Toute la feuille de style est désactivée par précaution",
          "correct": false,
          "feedback": "Erreur : seule la déclaration fautive est ignorée.\n"
        },
        {
          "text": "La couleur est appliquée en anglais britannique seulement",
          "correct": false,
          "feedback": "Erreur : les propriétés CSS ont une seule orthographe, `color`.\n"
        }
      ],
      "explanation": "L'inspecteur du navigateur signale les propriétés non reconnues :\nc'est le premier outil pour retrouver une faute de frappe."
    },
    {
      "id": "q39",
      "difficulty": 3,
      "skills": [
        "integration",
        "feuille-externe",
        "maintenance"
      ],
      "title": "Changer une couleur sur cinquante pages",
      "partie": "syntaxe",
      "statement": "Le site du lycée compte cinquante pages. La couleur des titres doit\nchanger partout. Quelle organisation du CSS rend ce changement\nimmédiat ?",
      "options": [
        {
          "text": "Une feuille de style externe partagée par toutes les pages",
          "correct": true,
          "feedback": "Bonne réponse : modifier une ligne du fichier CSS commun change\nles cinquante pages. C'est la raison d'être des feuilles\nexternes.\n"
        },
        {
          "text": "Un attribut `style` sur chaque titre de chaque page",
          "correct": false,
          "feedback": "Erreur : il faudrait retrouver et modifier chaque titre, avec le\nrisque d'en oublier.\n"
        },
        {
          "text": "Une balise `style` dans l'en-tête de chacune des cinquante pages",
          "correct": false,
          "feedback": "Erreur : cinquante copies de la même règle, donc cinquante\nmodifications.\n"
        },
        {
          "text": "Un script JavaScript qui change la couleur au chargement",
          "correct": false,
          "feedback": "Erreur : le résultat serait obtenu, mais au prix d'un détour\ninutile ; le CSS externe fait cela directement.\n"
        }
      ],
      "explanation": "Séparer le contenu du style, et centraliser le style dans un fichier\npartagé, c'est ce qui rend un site maintenable."
    }
  ]
}