{
  "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\nd'é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\nfond**, 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": "Mettre tout le CSS dans un fichier `.css` séparé, lié via `<link>` dans `<head>`",
          "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 \"style.css\">\n```\n",
          "correct": false,
          "feedback": "Erreur : balise inexistante. CSS a `@import`\nmais c'est en CSS, pas en HTML.\n"
        },
        {
          "text": "```html\n<style src=\"style.css\">\n```\n",
          "correct": false,
          "feedback": "Erreur : `<style>` n'a pas d'attribut\n`src`. Il sert à inclure du CSS inline.\n"
        },
        {
          "text": "```html\n<css href=\"style.css\" />\n```\n",
          "correct": false,
          "feedback": "Erreur : balise inexistante.\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",
          "correct": false,
          "feedback": "Erreur : la cascade est déterministe.\n"
        },
        {
          "text": "Celle ayant le plus court sélecteur",
          "correct": false,
          "feedback": "Erreur : c'est l'opposé.\n"
        },
        {
          "text": "Celle ayant la plus grande spécificité (id > classe > élément), ou à spécificité égale, 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 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": "Elle est transmise du parent à ses enfants dans l'arbre HTML, sauf surcharge",
          "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é est la plus adaptée pour une\ntaille de texte qui s'**adapte** à la taille\ndu parent ?",
      "options": [
        {
          "text": "`em` ou `rem`",
          "correct": true,
          "feedback": "Bonne réponse : `em` est relatif au\nparent (`1.2em` = 120 % de la taille du\nparent), `rem` est relatif à la racine.\nAdaptatif et accessible.\n"
        },
        {
          "text": "`%`",
          "correct": false,
          "feedback": "Possible mais moins idiomatique pour\n`font-size`.\n"
        },
        {
          "text": "`cm`",
          "correct": false,
          "feedback": "Erreur : unité physique, peu adaptée à\nl'écran.\n"
        },
        {
          "text": "`px` (pixel)",
          "correct": false,
          "feedback": "Erreur : taille fixe, pas adaptative.\n"
        }
      ],
      "explanation": "Bonne pratique d'accessibilité : utiliser\n`rem` pour le texte. L'utilisateur peut\najuster la taille de base (préférences\nnavigateur), tout le site s'adapte\nproportionnellement."
    },
    {
      "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>` (à n'importe quel niveau d'imbrication)",
          "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": "q16",
      "difficulty": 2,
      "skills": [
        "pseudo-class"
      ],
      "title": "Pseudo-classes",
      "statement": "À quoi sert `a:hover { color: red; }` ?",
      "options": [
        {
          "text": "À cacher tous les liens",
          "correct": false,
          "feedback": "Cacher des éléments\nrelèverait plutôt de\n`display: none` ou\n`visibility: hidden`.\nLa pseudo-classe `:hover`\nréagit au survol de la\nsouris ; elle ne masque\nrien.\n"
        },
        {
          "text": "À sélectionner tous les liens visités",
          "correct": false,
          "feedback": "Erreur : ce serait `:visited`.\n"
        },
        {
          "text": "À empêcher le clic sur les liens",
          "correct": false,
          "feedback": "Désactiver un lien se\nferait avec `pointer-events: none`\nou en supprimant l'attribut\n`href`. La pseudo-classe\n`:hover` n'altère en rien\nle comportement du clic.\n"
        },
        {
          "text": "À changer la couleur des liens lorsque la souris passe dessus",
          "correct": true,
          "feedback": "Bonne réponse : `:hover` est une **pseudo-\nclasse** qui réagit à un état (survol\nsouris). Utile pour le retour visuel.\n"
        }
      ],
      "explanation": "Pseudo-classes courantes : `:hover` (survol),\n`:active` (clic), `:focus` (focus clavier),\n`:visited` (lien visité), `:nth-child(n)`\n(n-ième enfant)."
    },
    {
      "id": "q17",
      "difficulty": 2,
      "skills": [
        "color-format"
      ],
      "title": "Couleurs en CSS",
      "statement": "Lesquels de ces formats désignent **la même\ncouleur** (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`",
          "correct": false,
          "feedback": "Erreur : les quatre sont équivalents.\n"
        },
        {
          "text": "Aucun",
          "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 `rgb(255, 0, 0)`",
          "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 (147\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": "Trace CSS",
      "statement": "```css\np { color: blue; }\n.important { color: red; }\n```\n```html\n<p class=\"important\">Texte</p>\n```\nQuelle est la couleur du texte ?",
      "options": [
        {
          "text": "Bleu (la première règle gagne)",
          "correct": false,
          "feedback": "Erreur : `.important` a une plus grande\nspécificité.\n"
        },
        {
          "text": "Rouge (le sélecteur de classe l'emporte sur le sélecteur d'élément)",
          "correct": true,
          "feedback": "Bonne réponse : spécificité (0,1,0) pour\n`.important` > spécificité (0,0,1) pour\n`p`. Donc rouge.\n"
        },
        {
          "text": "Aucune (conflit, le texte reste noir)",
          "correct": false,
          "feedback": "Erreur : la cascade résout les conflits.\n"
        },
        {
          "text": "Violet (mélange)",
          "correct": false,
          "feedback": "Le moteur CSS ne réalise\naucun mélange de couleurs\nen cas de règles concurrentes.\nC'est la règle la plus\nspécifique qui s'applique\ntelle quelle.\n"
        }
      ],
      "explanation": "Calcul de spécificité (a,b,c) : a = id, b =\nclasse/attribut/pseudo-classe, c = élément/\npseudo-élément. Comparaison\nlexicographique : (0,1,0) > (0,0,1)."
    },
    {
      "id": "q19",
      "difficulty": 2,
      "skills": [
        "responsive"
      ],
      "title": "Design responsive",
      "statement": "Qu'est-ce qu'un design **responsive** ?",
      "options": [
        {
          "text": "Un design qui change de couleur selon l'humeur",
          "correct": false,
          "feedback": "Le terme *responsive*\nrenvoie strictement à\nl'adaptation à la taille\nde l'écran, pas à un\ncomportement émotionnel.\nLa détection d'humeur\nn'a aucune réalité dans\nce cadre.\n"
        },
        {
          "text": "Un site qui répond rapidement",
          "correct": false,
          "feedback": "C'est lié à la **performance**, pas au\nresponsive.\n"
        },
        {
          "text": "Un design qui s'adapte automatiquement à différentes tailles d'écran (mobile, tablette, ordinateur)",
          "correct": true,
          "feedback": "Bonne réponse : utilise `@media`,\nunités relatives, mises en page flexibles\n(Flexbox, Grid). Essentiel à l'ère du\nmobile.\n"
        },
        {
          "text": "Un design avec animations",
          "correct": false,
          "feedback": "Erreur : sans rapport (animations =\n`transition`, `animation`).\n"
        }
      ],
      "explanation": "Trois piliers du responsive : grilles\nflexibles (% au lieu de px), images\nflexibles (`max-width: 100%`), media\nqueries (`@media (max-width: 600px)`)."
    },
    {
      "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",
          "correct": false,
          "feedback": "Erreur : virgule produirait une classe\nunique nommée « bouton, primaire, grand ».\n"
        },
        {
          "text": "Non, une seule par élément",
          "correct": false,
          "feedback": "Erreur : on peut en mettre plusieurs.\n"
        },
        {
          "text": "Oui : `class=\"bouton primaire grand\"` (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 pas CSS",
          "correct": false,
          "feedback": "Erreur : c'est l'inverse.\n"
        },
        {
          "text": "Faute de frappe dans le sélecteur (ex. `.bouton` au lieu de `.button`), ou règle plus spécifique qui surcharge, ou fichier CSS non chargé (vérifier la console).",
          "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",
          "correct": false,
          "feedback": "Possiblement (cache navigateur), mais\nrarement la cause profonde.\n"
        },
        {
          "text": "Le CSS est lent",
          "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": "q22",
      "difficulty": 3,
      "skills": [
        "flex"
      ],
      "title": "Flexbox",
      "statement": "À quoi sert `display: flex;` sur un parent ?",
      "options": [
        {
          "text": "À cacher l'élément",
          "correct": false,
          "feedback": "Erreur : `display: none;` cache.\n"
        },
        {
          "text": "À forcer une bordure",
          "correct": false,
          "feedback": "Erreur : sans rapport.\n"
        },
        {
          "text": "À empêcher le clic",
          "correct": false,
          "feedback": "Erreur : sans rapport.\n"
        },
        {
          "text": "À transformer le parent en conteneur flexible, dont les enfants se disposent en ligne (par défaut) et peuvent être alignés/distribués facilement",
          "correct": true,
          "feedback": "Bonne réponse : Flexbox est devenu le\nstandard pour les mises en page 1D (en ligne ou\nen colonne). Propriétés clés :\n`justify-content`, `align-items`, `gap`.\n"
        }
      ],
      "explanation": "Flexbox (1D) et Grid (2D) sont les deux\nsystèmes modernes de mise en page. Avant\neux, on faisait des mises en page à coups de\n`float` ou de `<table>`."
    },
    {
      "id": "q23",
      "difficulty": 3,
      "skills": [
        "media-queries"
      ],
      "title": "Media queries",
      "statement": "Que fait `@media (max-width: 600px) { ... }` ?",
      "options": [
        {
          "text": "Empêche l'affichage sur mobile",
          "correct": false,
          "feedback": "Erreur : c'est l'inverse.\n"
        },
        {
          "text": "Charge un autre fichier CSS",
          "correct": false,
          "feedback": "Erreur : ne charge rien.\n"
        },
        {
          "text": "S'applique uniquement à l'impression",
          "correct": false,
          "feedback": "Erreur : ce serait `@media print`.\n"
        },
        {
          "text": "Applique les règles sur les écrans de 600 pixels de large ou moins (typiquement les téléphones)",
          "correct": true,
          "feedback": "Bonne réponse : c'est la base du\nresponsive. Permet d'avoir une mise en\npage spécifique aux petits écrans (police\nplus grande, menu hamburger, colonnes\nempilées...).\n"
        }
      ],
      "explanation": "Stratégie « mobile-first » moderne :\nécrire d'abord les styles pour mobile, puis\najouter `@media (min-width: ...)` pour les\nécrans plus grands."
    },
    {
      "id": "q24",
      "difficulty": 3,
      "skills": [
        "important"
      ],
      "title": "Le mot-clé !important",
      "statement": "Pourquoi faut-il **éviter** d'utiliser\n`!important` en CSS ?",
      "options": [
        {
          "text": "Parce qu'il rend les sites lents",
          "correct": false,
          "feedback": "Erreur : pas d'impact significatif sur la\nperformance.\n"
        },
        {
          "text": "Parce qu'il outrepasse la cascade normale et rend le code difficile à maintenir et à déboguer (on doit alors mettre `!important` partout pour gagner)",
          "correct": true,
          "feedback": "Bonne réponse : `!important` est l'arme\nnucléaire de CSS. À réserver à des cas\nprécis (surcharger une bibliothèque\ntierce qu'on ne peut pas modifier).\n"
        },
        {
          "text": "Parce que c'est invalide",
          "correct": false,
          "feedback": "Erreur : c'est valide.\n"
        },
        {
          "text": "Parce qu'il ne fonctionne pas en HTML5",
          "correct": false,
          "feedback": "Erreur : fonctionne.\n"
        }
      ],
      "explanation": "Maxime CSS : « Spécificité bien pensée >\n`!important` ». Si on a besoin de\n`!important`, c'est souvent qu'il y a un\nproblème de structure plus en amont."
    },
    {
      "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 (préfixé par `.`) cible un seul élément à la fois",
          "correct": true,
          "feedback": "Faux (donc bonne réponse) : une classe\npeut être appliquée à plusieurs\néléments. C'est le **id** qui est unique\npar 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": "Modèle de boîte",
      "statement": "Dans le modèle de boîte CSS, quel est l'ordre des\nespaces autour du contenu, en partant du contenu\nvers l'extérieur ?",
      "options": [
        {
          "text": "Bordure, marge, padding",
          "correct": false,
          "feedback": "Erreur : la marge se trouve toujours à\nl'extérieur. La bordure est entre le padding\net la marge, pas avant le padding.\n"
        },
        {
          "text": "Marge, padding, bordure",
          "correct": false,
          "feedback": "Erreur : l'ordre est inversé. Le padding est\nle plus proche du contenu, la marge la plus\néloignée.\n"
        },
        {
          "text": "Padding, bordure, marge",
          "correct": true,
          "feedback": "Bonne réponse : autour du contenu, on trouve\nd'abord le **padding** (espace intérieur entre\nle contenu et la bordure), puis la **bordure**\nelle-même, puis la **marge** (espace extérieur\nséparant l'élément des autres).\n"
        },
        {
          "text": "Bordure, padding, marge",
          "correct": false,
          "feedback": "Erreur : le padding est à l'intérieur de la\nbordure, pas à l'extérieur. La séquence\ncorrecte commence par le padding.\n"
        }
      ],
      "explanation": "Le modèle de boîte CSS est central pour\ncomprendre la mise en page. La propriété\n`box-sizing: border-box` modifie la convention\nde mesure : la largeur et la hauteur incluent\nalors la bordure et le padding, ce qui simplifie\nles calculs de dimensions."
    },
    {
      "id": "q27",
      "difficulty": 2,
      "skills": [
        "unite",
        "em",
        "rem"
      ],
      "title": "Unités relatives em et rem",
      "statement": "Quelle est la différence entre les unités CSS `em`\net `rem` ?",
      "options": [
        {
          "text": "`em` est en pixels, `rem` est en pourcentage",
          "correct": false,
          "feedback": "Erreur : ce sont toutes deux des unités\n**relatives** sans dimension fixe en pixels.\nElles dépendent toujours d'une taille de\nréférence.\n"
        },
        {
          "text": "`em` ne fonctionne que sur les polices, `rem` que sur les marges",
          "correct": false,
          "feedback": "Erreur : les deux unités s'appliquent à\nn'importe quelle propriété de longueur (taille\nde texte, marges, paddings, etc.). Aucune\nn'est restreinte à un type particulier.\n"
        },
        {
          "text": "Aucune, ce sont deux noms équivalents",
          "correct": false,
          "feedback": "Erreur : ces deux unités existent toutes les\ndeux et ne se réfèrent pas à la même grandeur.\nConfondre les deux peut conduire à des tailles\nimprévisibles.\n"
        },
        {
          "text": "`em` est relatif à la taille du parent ; `rem` est relatif à la taille de la racine (élément `<html>`)",
          "correct": true,
          "feedback": "Bonne réponse : un même `1em` peut donner des\ntailles différentes selon le parent et\ns'amplifier en cas d'imbrication ; `rem` reste\nstable en se référant toujours à\n`<html>`. C'est pourquoi `rem` est privilégié\npour la typographie globale.\n"
        }
      ],
      "explanation": "Bonne pratique : utiliser `rem` pour les tailles\nglobales (texte, marges principales) et `em` pour\nles ajustements relatifs à un composant\nparticulier. Les deux respectent la taille de\nbase définie par l'utilisateur dans son\nnavigateur, ce qui aide l'accessibilité."
    },
    {
      "id": "q28",
      "difficulty": 3,
      "skills": [
        "specificite",
        "cascade"
      ],
      "title": "Spécificité d'un sélecteur",
      "statement": "Parmi les sélecteurs suivants, lequel a la **plus\ngrande spécificité** ?",
      "options": [
        {
          "text": "`#header`",
          "correct": true,
          "feedback": "Bonne réponse : un identifiant a la\nspécificité $(1, 0, 0)$, supérieure à toute\ncombinaison ne comportant pas d'identifiant.\nC'est pourquoi il faut utiliser les `id` avec\nparcimonie : ils sont difficiles à surcharger\nensuite.\n"
        },
        {
          "text": "`p`",
          "correct": false,
          "feedback": "Erreur : un sélecteur d'élément seul a la plus\nfaible spécificité, à savoir $(0, 0, 1)$. Tout\nautre sélecteur listé ici le surclasse.\n"
        },
        {
          "text": "`.menu`",
          "correct": false,
          "feedback": "Erreur : un sélecteur de classe a la\nspécificité $(0, 1, 0)$, supérieure à un\nélément, mais inférieure à un identifiant.\n"
        },
        {
          "text": "`p.menu`",
          "correct": false,
          "feedback": "Erreur : ce sélecteur combine un élément et\nune classe, soit la spécificité $(0, 1, 1)$.\nC'est plus fort qu'une simple classe ou un\nsimple élément, mais cela reste inférieur à\nun identifiant.\n"
        }
      ],
      "explanation": "Le calcul de spécificité s'écrit en triplet\n$(a, b, c)$ : $a$ = nombre d'`id`, $b$ = nombre de\nclasses, attributs et pseudo-classes, $c$ =\nnombre d'éléments et pseudo-éléments. La\ncomparaison est lexicographique. Le mot-clé\n`!important` court-circuite ce calcul, mais il\nest à éviter car il rend les styles difficiles à\nmaintenir."
    }
  ]
}