{
  "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.",
    "prerequisites": [],
    "references": []
  },
  "questions": [
    {
      "id": "q01",
      "difficulty": 1,
      "skills": [
        "definition"
      ],
      "title": "Que signifie CSS ?",
      "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",
      "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",
      "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",
      "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",
      "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",
      "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",
      "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": "Existe (CSS-in-JS) mais hors programme NSI\net peu adapté à des projets simples.\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",
      "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`rem` (relatif à la racine), `%`.\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": "Bonnes pratiques : utiliser des unités\nrelatives (`em`, `rem`) pour la\nresponsivité ; `px` pour les éléments\nd'interface précis."
    },
    {
      "id": "q09",
      "difficulty": 1,
      "skills": [
        "commentaire"
      ],
      "title": "Commentaires CSS",
      "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",
      "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",
      "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é",
      "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. `!important` outrepasse\ntout (à éviter).\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": "Calcul de spécificité : (a, b, c) où a =\nnombre d'id, b = nombre de classes, c =\nnombre d'éléments. Comparaison\nlexicographique."
    },
    {
      "id": "q13",
      "difficulty": 2,
      "skills": [
        "heritage"
      ],
      "title": "Héritage",
      "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",
      "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": "`rem`",
          "correct": false,
          "feedback": "Erreur : `rem` est relatif à la\n**racine** (`<html>`), pas au 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": "Deux unités relatives à connaître : `em`\n(relative au parent) et `rem` (relative à la\nracine). Bonne pratique d'accessibilité :\nutiliser ces unités pour le texte, ainsi\nl'utilisateur peut ajuster la taille de base\n(préférences navigateur) et tout le site\ns'adapte proportionnellement."
    },
    {
      "id": "q15",
      "difficulty": 2,
      "skills": [
        "combinaison-selecteurs"
      ],
      "title": "Sélecteurs combinés",
      "statement": "Que cible le sélecteur `nav a` (avec un\nespace) ?",
      "options": [
        {
          "text": "Le premier `<a>` après un `<nav>`",
          "correct": false,
          "feedback": "Erreur : ce serait `nav + a` (frère adjacent).\n"
        },
        {
          "text": "Tous les `<a>` descendants d'un `<nav>`",
          "correct": true,
          "feedback": "Bonne réponse : l'**espace** est le\ncombinateur de descendance. Pour les\nenfants directs : `nav > a`.\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": "Combinateurs : ` ` (descendant), `>` (enfant\ndirect), `+` (frère adjacent), `~` (frère).\nEt `,` pour grouper plusieurs sélecteurs."
    },
    {
      "id": "q17",
      "difficulty": 2,
      "skills": [
        "color-format"
      ],
      "title": "Couleurs en CSS",
      "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é",
      "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",
      "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": "Multi-classes = principe de **composition**.\nTrès utilisé par les frameworks (Bootstrap,\nTailwind) : combiner de petits utilitaires\npour bâtir une mise en forme."
    },
    {
      "id": "q21",
      "difficulty": 3,
      "skills": [
        "debogage"
      ],
      "title": "Style ne s'applique pas",
      "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",
      "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",
      "statement": "On applique le style suivant à un paragraphe\n(modèle par défaut, `box-sizing: content-box`) :\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 : avec le modèle par défaut\n(`content-box`), `width` ne désigne que la\nlargeur du **contenu**. Padding, bordure et\nmarge s'ajoutent autour.\n"
        }
      ],
      "explanation": "Avec `box-sizing: content-box` (défaut), la\nlargeur rendue vaut `width` + padding + bordures.\nLa propriété `box-sizing: border-box` change la\nconvention : `width` inclut alors padding et\nbordure (l'élément ferait 200 px de large, soit\n230 px avec ses marges), ce qui simplifie les\ncalculs de mise en page."
    },
    {
      "id": "q22",
      "difficulty": 3,
      "skills": [
        "synthese",
        "cascade",
        "specificite"
      ],
      "title": "Quelle règle l'emporte",
      "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": [
        "synthese",
        "box-model",
        "calcul"
      ],
      "title": "Calcul d'une largeur rendue",
      "statement": "Une boîte CSS reçoit les propriétés suivantes :\n\n`width: 200px; padding: 20px; border: 2px solid black; margin: 10px;`\n\nAvec `box-sizing: border-box`, quelle est la\n**largeur rendue** de la boîte (zone occupée à\nl'écran par le contenu, le padding et la bordure,\nsans inclure la marge externe) ?",
      "options": [
        {
          "text": "$200$ px, car `width` fixe directement la largeur rendue",
          "correct": true,
          "feedback": "Bonne réponse : en `border-box`, la largeur\nrendue vaut exactement $\\text{width}$, padding et\nbordure compris. Le contenu se réduit alors à\n$200 - 2 \\times 20 - 2 \\times 2 = 156$ px. La\nmarge reste à l'extérieur de la boîte.\n"
        },
        {
          "text": "$244$ px ($200 + 2 \\times 20 + 2 \\times 2$)",
          "correct": false,
          "feedback": "Erreur : ce calcul applique la formule du modèle\npar défaut `content-box`, où padding et bordure\ns'ajoutent à `width`. En `border-box`, ils sont\ndéjà **inclus** dans les $200$ px annoncés.\n"
        },
        {
          "text": "$156$ px ($200 - 2 \\times 20 - 2 \\times 2$)",
          "correct": false,
          "feedback": "Erreur : $156$ px est la largeur du **contenu**\nseul, une fois padding et bordure retranchés.\nL'énoncé demande la largeur rendue de la boîte,\nqui vaut ici directement `width`.\n"
        },
        {
          "text": "$220$ px, en incluant la marge des deux côtés",
          "correct": false,
          "feedback": "Erreur : la marge externe représente l'espace que\nla boîte revendique autour d'elle, pas la largeur\nde la boîte. L'énoncé demande explicitement de\nl'exclure du calcul.\n"
        }
      ],
      "explanation": "En `border-box`, la largeur rendue est directement\n$\\text{width}$ ; en `content-box` (défaut), elle vaut\n$\\text{width} + 2 \\times \\text{padding} + 2 \\times\n\\text{bordure}$, soit ici $244$ px. C'est pourquoi de\nnombreux projets définissent `*, *::before, *::after\n{ box-sizing: border-box; }` dans leur feuille de\nstyle globale : les dimensions annoncées sont alors\ncelles réellement occupées."
    }
  ]
}