[{"data":1,"prerenderedAt":4558},["ShallowReactive",2],{"blog-apprendre-css-complet":3},{"id":4,"title":5,"body":6,"coverImage":4546,"description":4547,"extension":4548,"meta":4549,"navigation":573,"path":4550,"published":573,"publishedAt":4551,"readTime":3372,"seo":4552,"stem":4553,"tags":4554,"__hash__":4557},"blog\u002Fblog\u002Fapprendre-css-complet.md","Apprendre CSS : guide complet pour mettre en forme une page web",{"type":7,"value":8,"toc":4403},"minimark",[9,14,19,23,26,29,32,36,39,73,77,80,85,88,92,95,99,102,106,109,132,135,139,142,150,153,197,200,235,238,242,245,248,262,266,274,278,311,315,513,596,600,603,606,619,623,626,631,635,640,700,704,709,734,737,741,747,773,776,780,783,794,797,839,843,846,852,856,859,862,890,894,897,906,910,914,941,944,948,975,978,1005,1008,1012,1043,1045,1072,1075,1079,1116,1119,1123,1153,1159,1163,1166,1170,1196,1200,1226,1230,1271,1275,1317,1320,1324,1327,1331,1334,1338,1366,1369,1378,1406,1409,1421,1425,1456,1459,1463,1494,1499,1503,1506,1509,1523,1527,1600,1604,1607,1610,1613,1617,1620,1623,1626,1631,1634,1662,1665,1669,1672,1676,1703,1707,1736,1740,1764,1768,1795,1799,1826,1830,1858,1862,1865,1869,1873,1901,1905,1972,1976,2008,2012,2041,2045,2048,2054,2057,2063,2066,2072,2075,2081,2084,2087,2091,2094,2098,2149,2153,2172,2176,2226,2230,2233,2247,2251,2254,2258,2321,2325,2344,2348,2405,2408,2412,2418,2421,2427,2430,2436,2439,2445,2448,2451,2454,2458,2465,2494,2497,2503,2532,2535,2542,2570,2576,2603,2606,2610,2614,2648,2651,2655,2784,2787,2791,2794,2798,2801,2805,2899,2903,3067,3071,3088,3092,3095,3098,3417,3420,3874,3877,3881,3885,3888,3892,3920,3923,3927,3939,3943,3946,3950,3953,3957,3980,3984,3987,4010,4013,4017,4021,4024,4028,4031,4035,4038,4042,4045,4049,4052,4056,4060,4107,4111,4176,4180,4224,4228,4285,4289,4393,4397,4400],[10,11,13],"h1",{"id":12},"apprendre-css","Apprendre CSS",[15,16,18],"h2",{"id":17},"introduction","Introduction",[20,21,22],"p",{},"CSS est le langage qui permet de mettre en forme une page web.",[20,24,25],{},"Si HTML décrit la structure et le contenu, CSS s'occupe de l'apparence : couleurs, tailles, espacements, positions, alignements, animations et adaptabilité à différents écrans.",[20,27,28],{},"Sans CSS, une page reste lisible, mais elle est souvent très brute. Avec CSS, elle devient claire, agréable à lire et plus professionnelle.",[20,30,31],{},"Dans ce tutoriel, nous allons apprendre CSS progressivement : d'abord la logique générale, puis les sélecteurs, les propriétés essentielles, le modèle de boîte, Flexbox, Grid, le responsive design et enfin quelques bonnes pratiques utiles en projet réel.",[15,33,35],{"id":34},"ce-que-vous-allez-apprendre","Ce que vous allez apprendre",[20,37,38],{},"À la fin de ce chapitre, vous saurez :",[40,41,42,46,49,52,55,58,61,64,67,70],"ul",{},[43,44,45],"li",{},"comprendre le rôle exact de CSS ;",[43,47,48],{},"écrire une feuille de style simple ;",[43,50,51],{},"relier un fichier CSS à une page HTML ;",[43,53,54],{},"utiliser les sélecteurs les plus courants ;",[43,56,57],{},"modifier les couleurs, les polices et les espacements ;",[43,59,60],{},"comprendre le modèle de boîte ;",[43,62,63],{},"utiliser Flexbox et Grid pour organiser une mise en page ;",[43,65,66],{},"adapter un site à différents écrans ;",[43,68,69],{},"éviter les erreurs fréquentes ;",[43,71,72],{},"construire une page propre et cohérente.",[15,74,76],{"id":75},"_1-css-cest-quoi-exactement","1. CSS, c'est quoi exactement ?",[20,78,79],{},"CSS signifie Cascading Style Sheets.",[81,82,84],"h3",{"id":83},"cascading","Cascading",[20,86,87],{},"Le mot cascading fait référence à la manière dont les règles CSS sont appliquées et priorisées.",[81,89,91],{"id":90},"style","Style",[20,93,94],{},"CSS définit le style visuel d'une page.",[81,96,98],{"id":97},"sheets","Sheets",[20,100,101],{},"Le code CSS est souvent regroupé dans une feuille de style.",[81,103,105],{"id":104},"ce-que-css-fait-vraiment","Ce que CSS fait vraiment",[20,107,108],{},"CSS permet par exemple de :",[40,110,111,114,117,120,123,126,129],{},[43,112,113],{},"changer la couleur d'un texte ;",[43,115,116],{},"définir la taille d'un titre ;",[43,118,119],{},"ajouter de l'espace entre deux éléments ;",[43,121,122],{},"aligner des blocs ;",[43,124,125],{},"créer une grille ;",[43,127,128],{},"rendre une page responsive ;",[43,130,131],{},"animer un bouton au survol.",[20,133,134],{},"CSS ne sert pas à décrire le contenu. Il sert à présenter ce contenu de manière claire et cohérente.",[15,136,138],{"id":137},"_2-comment-css-fonctionne-avec-html","2. Comment CSS fonctionne avec HTML",[20,140,141],{},"HTML et CSS travaillent ensemble.",[40,143,144,147],{},[43,145,146],{},"HTML structure le document.",[43,148,149],{},"CSS décide de l'apparence.",[20,151,152],{},"Exemple HTML :",[154,155,160],"pre",{"className":156,"code":157,"language":158,"meta":159,"style":159},"language-html shiki shiki-themes github-light github-dark","\u003Ch1>Bienvenue\u003C\u002Fh1>\n\u003Cp>Voici ma première page.\u003C\u002Fp>\n","html","",[161,162,163,183],"code",{"__ignoreMap":159},[164,165,168,172,175,178,180],"span",{"class":166,"line":167},"line",1,[164,169,171],{"class":170},"sVt8B","\u003C",[164,173,10],{"class":174},"s9eBZ",[164,176,177],{"class":170},">Bienvenue\u003C\u002F",[164,179,10],{"class":174},[164,181,182],{"class":170},">\n",[164,184,186,188,190,193,195],{"class":166,"line":185},2,[164,187,171],{"class":170},[164,189,20],{"class":174},[164,191,192],{"class":170},">Voici ma première page.\u003C\u002F",[164,194,20],{"class":174},[164,196,182],{"class":170},[20,198,199],{},"Exemple CSS :",[154,201,205],{"className":202,"code":203,"language":204,"meta":159,"style":159},"language-css shiki shiki-themes github-light github-dark","h1 {\n  color: blue;\n}\n","css",[161,206,207,214,229],{"__ignoreMap":159},[164,208,209,211],{"class":166,"line":167},[164,210,10],{"class":174},[164,212,213],{"class":170}," {\n",[164,215,216,220,223,226],{"class":166,"line":185},[164,217,219],{"class":218},"sj4cs","  color",[164,221,222],{"class":170},": ",[164,224,225],{"class":218},"blue",[164,227,228],{"class":170},";\n",[164,230,232],{"class":166,"line":231},3,[164,233,234],{"class":170},"}\n",[20,236,237],{},"Le HTML dit qu'il y a un titre et un paragraphe. Le CSS dit que le titre doit être bleu.",[15,239,241],{"id":240},"préparer-votre-projet-avant-décrire-du-css","Préparer votre projet avant d'écrire du CSS",[20,243,244],{},"Avant de modifier la couleur d'un texte, il faut savoir où écrire le code.",[20,246,247],{},"La méthode la plus simple consiste à créer un petit dossier de projet avec deux fichiers :",[40,249,250,256],{},[43,251,252,255],{},[161,253,254],{},"index.html"," pour le contenu HTML ;",[43,257,258,261],{},[161,259,260],{},"style.css"," pour la mise en forme.",[81,263,265],{"id":264},"structure-de-départ","Structure de départ",[154,267,272],{"className":268,"code":270,"language":271,"meta":159},[269],"language-text","mon-projet\u002F\n├── index.html\n└── style.css\n","text",[161,273,270],{"__ignoreMap":159},[81,275,277],{"id":276},"ce-quil-faut-faire-dans-votre-éditeur","Ce qu'il faut faire dans votre éditeur",[279,280,281,284,290,296,303],"ol",{},[43,282,283],{},"Ouvrez le dossier du projet dans votre éditeur.",[43,285,286,287,289],{},"Ouvrez le fichier ",[161,288,254],{},".",[43,291,292,293,295],{},"Créez le fichier ",[161,294,260],{}," s'il n'existe pas encore.",[43,297,298,299,302],{},"Ajoutez la liaison CSS dans le ",[161,300,301],{},"\u003Chead>"," du fichier HTML.",[43,304,305,306,308,309,289],{},"Écrivez le HTML dans ",[161,307,254],{}," et le CSS dans ",[161,310,260],{},[81,312,314],{"id":313},"exemple-minimal-complet","Exemple minimal complet",[154,316,318],{"className":156,"code":317,"language":158,"meta":159,"style":159},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"fr\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Ctitle>Mon projet CSS\u003C\u002Ftitle>\n    \u003Clink rel=\"stylesheet\" href=\"style.css\">\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Ch1>Bienvenue\u003C\u002Fh1>\n    \u003Cp>Voici ma page HTML.\u003C\u002Fp>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[161,319,320,334,352,362,381,406,421,447,457,467,480,494,503],{"__ignoreMap":159},[164,321,322,325,328,332],{"class":166,"line":167},[164,323,324],{"class":170},"\u003C!",[164,326,327],{"class":174},"DOCTYPE",[164,329,331],{"class":330},"sScJk"," html",[164,333,182],{"class":170},[164,335,336,338,340,343,346,350],{"class":166,"line":185},[164,337,171],{"class":170},[164,339,158],{"class":174},[164,341,342],{"class":330}," lang",[164,344,345],{"class":170},"=",[164,347,349],{"class":348},"sZZnC","\"fr\"",[164,351,182],{"class":170},[164,353,354,357,360],{"class":166,"line":231},[164,355,356],{"class":170},"  \u003C",[164,358,359],{"class":174},"head",[164,361,182],{"class":170},[164,363,365,368,371,374,376,379],{"class":166,"line":364},4,[164,366,367],{"class":170},"    \u003C",[164,369,370],{"class":174},"meta",[164,372,373],{"class":330}," charset",[164,375,345],{"class":170},[164,377,378],{"class":348},"\"UTF-8\"",[164,380,182],{"class":170},[164,382,384,386,388,391,393,396,399,401,404],{"class":166,"line":383},5,[164,385,367],{"class":170},[164,387,370],{"class":174},[164,389,390],{"class":330}," name",[164,392,345],{"class":170},[164,394,395],{"class":348},"\"viewport\"",[164,397,398],{"class":330}," content",[164,400,345],{"class":170},[164,402,403],{"class":348},"\"width=device-width, initial-scale=1.0\"",[164,405,182],{"class":170},[164,407,409,411,414,417,419],{"class":166,"line":408},6,[164,410,367],{"class":170},[164,412,413],{"class":174},"title",[164,415,416],{"class":170},">Mon projet CSS\u003C\u002F",[164,418,413],{"class":174},[164,420,182],{"class":170},[164,422,424,426,429,432,434,437,440,442,445],{"class":166,"line":423},7,[164,425,367],{"class":170},[164,427,428],{"class":174},"link",[164,430,431],{"class":330}," rel",[164,433,345],{"class":170},[164,435,436],{"class":348},"\"stylesheet\"",[164,438,439],{"class":330}," href",[164,441,345],{"class":170},[164,443,444],{"class":348},"\"style.css\"",[164,446,182],{"class":170},[164,448,450,453,455],{"class":166,"line":449},8,[164,451,452],{"class":170},"  \u003C\u002F",[164,454,359],{"class":174},[164,456,182],{"class":170},[164,458,460,462,465],{"class":166,"line":459},9,[164,461,356],{"class":170},[164,463,464],{"class":174},"body",[164,466,182],{"class":170},[164,468,470,472,474,476,478],{"class":166,"line":469},10,[164,471,367],{"class":170},[164,473,10],{"class":174},[164,475,177],{"class":170},[164,477,10],{"class":174},[164,479,182],{"class":170},[164,481,483,485,487,490,492],{"class":166,"line":482},11,[164,484,367],{"class":170},[164,486,20],{"class":174},[164,488,489],{"class":170},">Voici ma page HTML.\u003C\u002F",[164,491,20],{"class":174},[164,493,182],{"class":170},[164,495,497,499,501],{"class":166,"line":496},12,[164,498,452],{"class":170},[164,500,464],{"class":174},[164,502,182],{"class":170},[164,504,506,509,511],{"class":166,"line":505},13,[164,507,508],{"class":170},"\u003C\u002F",[164,510,158],{"class":174},[164,512,182],{"class":170},[154,514,516],{"className":202,"code":515,"language":204,"meta":159,"style":159},"body {\n  font-family: Arial, sans-serif;\n  background: #f7f7f7;\n  color: #222;\n}\n\nh1 {\n  color: #1d4ed8;\n}\n",[161,517,518,524,542,554,565,569,575,581,592],{"__ignoreMap":159},[164,519,520,522],{"class":166,"line":167},[164,521,464],{"class":174},[164,523,213],{"class":170},[164,525,526,529,531,534,537,540],{"class":166,"line":185},[164,527,528],{"class":218},"  font-family",[164,530,222],{"class":170},[164,532,533],{"class":218},"Arial",[164,535,536],{"class":170},", ",[164,538,539],{"class":218},"sans-serif",[164,541,228],{"class":170},[164,543,544,547,549,552],{"class":166,"line":231},[164,545,546],{"class":218},"  background",[164,548,222],{"class":170},[164,550,551],{"class":218},"#f7f7f7",[164,553,228],{"class":170},[164,555,556,558,560,563],{"class":166,"line":364},[164,557,219],{"class":218},[164,559,222],{"class":170},[164,561,562],{"class":218},"#222",[164,564,228],{"class":170},[164,566,567],{"class":166,"line":383},[164,568,234],{"class":170},[164,570,571],{"class":166,"line":408},[164,572,574],{"emptyLinePlaceholder":573},true,"\n",[164,576,577,579],{"class":166,"line":423},[164,578,10],{"class":174},[164,580,213],{"class":170},[164,582,583,585,587,590],{"class":166,"line":449},[164,584,219],{"class":218},[164,586,222],{"class":170},[164,588,589],{"class":218},"#1d4ed8",[164,591,228],{"class":170},[164,593,594],{"class":166,"line":459},[164,595,234],{"class":170},[81,597,599],{"id":598},"pourquoi-cette-étape-est-importante","Pourquoi cette étape est importante",[20,601,602],{},"Beaucoup de personnes savent écrire une règle CSS, mais ne savent pas encore dans quel fichier la mettre.",[20,604,605],{},"Le bon réflexe est simple :",[40,607,608,611,614],{},[43,609,610],{},"le contenu dans le fichier HTML ;",[43,612,613],{},"le style dans le fichier CSS ;",[43,615,616,617,289],{},"la liaison entre les deux dans la balise ",[161,618,428],{},[15,620,622],{"id":621},"_3-comment-relier-css-à-une-page-html","3. Comment relier CSS à une page HTML",[20,624,625],{},"Il existe trois façons principales d'utiliser CSS.",[20,627,628,629,289],{},"Dans un vrai projet, on ouvre d'abord le fichier HTML principal, puis on ajoute la feuille de style CSS avec une balise ",[161,630,428],{},[81,632,634],{"id":633},"_1-le-css-interne","1. Le CSS interne",[20,636,637,638,302],{},"On écrit les styles dans la balise ",[161,639,90],{},[154,641,643],{"className":156,"code":642,"language":158,"meta":159,"style":159},"\u003Chead>\n  \u003Cstyle>\n    h1 {\n      color: blue;\n    }\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n",[161,644,645,653,661,668,679,684,692],{"__ignoreMap":159},[164,646,647,649,651],{"class":166,"line":167},[164,648,171],{"class":170},[164,650,359],{"class":174},[164,652,182],{"class":170},[164,654,655,657,659],{"class":166,"line":185},[164,656,356],{"class":170},[164,658,90],{"class":174},[164,660,182],{"class":170},[164,662,663,666],{"class":166,"line":231},[164,664,665],{"class":174},"    h1",[164,667,213],{"class":170},[164,669,670,673,675,677],{"class":166,"line":364},[164,671,672],{"class":218},"      color",[164,674,222],{"class":170},[164,676,225],{"class":218},[164,678,228],{"class":170},[164,680,681],{"class":166,"line":383},[164,682,683],{"class":170},"    }\n",[164,685,686,688,690],{"class":166,"line":408},[164,687,452],{"class":170},[164,689,90],{"class":174},[164,691,182],{"class":170},[164,693,694,696,698],{"class":166,"line":423},[164,695,508],{"class":170},[164,697,359],{"class":174},[164,699,182],{"class":170},[81,701,703],{"id":702},"_2-le-css-externe","2. Le CSS externe",[20,705,706,707,289],{},"On écrit les styles dans un fichier séparé, par exemple ",[161,708,260],{},[154,710,712],{"className":156,"code":711,"language":158,"meta":159,"style":159},"\u003Clink rel=\"stylesheet\" href=\"style.css\">\n",[161,713,714],{"__ignoreMap":159},[164,715,716,718,720,722,724,726,728,730,732],{"class":166,"line":167},[164,717,171],{"class":170},[164,719,428],{"class":174},[164,721,431],{"class":330},[164,723,345],{"class":170},[164,725,436],{"class":348},[164,727,439],{"class":330},[164,729,345],{"class":170},[164,731,444],{"class":348},[164,733,182],{"class":170},[20,735,736],{},"C'est la méthode la plus utilisée dans les vrais projets, car elle garde le code mieux organisé.",[81,738,740],{"id":739},"_3-le-style-en-ligne","3. Le style en ligne",[20,742,743,744,746],{},"On écrit le style directement dans l'attribut ",[161,745,90],{}," de la balise.",[154,748,750],{"className":156,"code":749,"language":158,"meta":159,"style":159},"\u003Cp style=\"color: red;\">Texte rouge\u003C\u002Fp>\n",[161,751,752],{"__ignoreMap":159},[164,753,754,756,758,761,763,766,769,771],{"class":166,"line":167},[164,755,171],{"class":170},[164,757,20],{"class":174},[164,759,760],{"class":330}," style",[164,762,345],{"class":170},[164,764,765],{"class":348},"\"color: red;\"",[164,767,768],{"class":170},">Texte rouge\u003C\u002F",[164,770,20],{"class":174},[164,772,182],{"class":170},[20,774,775],{},"Cette méthode existe, mais elle est peu recommandée pour un vrai projet car elle mélange contenu et présentation.",[15,777,779],{"id":778},"_4-la-syntaxe-de-base-de-css","4. La syntaxe de base de CSS",[20,781,782],{},"Une règle CSS est composée de trois éléments :",[40,784,785,788,791],{},[43,786,787],{},"un sélecteur ;",[43,789,790],{},"des propriétés ;",[43,792,793],{},"des valeurs.",[20,795,796],{},"Exemple :",[154,798,800],{"className":202,"code":799,"language":204,"meta":159,"style":159},"p {\n  color: #333;\n  font-size: 16px;\n}\n",[161,801,802,808,819,835],{"__ignoreMap":159},[164,803,804,806],{"class":166,"line":167},[164,805,20],{"class":174},[164,807,213],{"class":170},[164,809,810,812,814,817],{"class":166,"line":185},[164,811,219],{"class":218},[164,813,222],{"class":170},[164,815,816],{"class":218},"#333",[164,818,228],{"class":170},[164,820,821,824,826,829,833],{"class":166,"line":231},[164,822,823],{"class":218},"  font-size",[164,825,222],{"class":170},[164,827,828],{"class":218},"16",[164,830,832],{"class":831},"szBVR","px",[164,834,228],{"class":170},[164,836,837],{"class":166,"line":364},[164,838,234],{"class":170},[81,840,842],{"id":841},"le-sélecteur","Le sélecteur",[20,844,845],{},"Le sélecteur indique quels éléments HTML sont ciblés.",[20,847,848,849,851],{},"Ici, ",[161,850,20],{}," cible tous les paragraphes.",[81,853,855],{"id":854},"la-propriété","La propriété",[20,857,858],{},"La propriété indique ce que vous voulez modifier.",[20,860,861],{},"Exemples :",[40,863,864,870,875,880,885],{},[43,865,866,869],{},[161,867,868],{},"color"," ;",[43,871,872,869],{},[161,873,874],{},"font-size",[43,876,877,869],{},[161,878,879],{},"margin",[43,881,882,869],{},[161,883,884],{},"padding",[43,886,887,289],{},[161,888,889],{},"background-color",[81,891,893],{"id":892},"la-valeur","La valeur",[20,895,896],{},"La valeur précise le réglage appliqué à la propriété.",[20,898,899,900,903,904,289],{},"Par exemple, ",[161,901,902],{},"16px"," ou ",[161,905,816],{},[15,907,909],{"id":908},"_5-les-sélecteurs-les-plus-utiles","5. Les sélecteurs les plus utiles",[81,911,913],{"id":912},"le-sélecteur-de-balise","Le sélecteur de balise",[154,915,917],{"className":202,"code":916,"language":204,"meta":159,"style":159},"p {\n  line-height: 1.6;\n}\n",[161,918,919,925,937],{"__ignoreMap":159},[164,920,921,923],{"class":166,"line":167},[164,922,20],{"class":174},[164,924,213],{"class":170},[164,926,927,930,932,935],{"class":166,"line":185},[164,928,929],{"class":218},"  line-height",[164,931,222],{"class":170},[164,933,934],{"class":218},"1.6",[164,936,228],{"class":170},[164,938,939],{"class":166,"line":231},[164,940,234],{"class":170},[20,942,943],{},"Il cible tous les paragraphes.",[81,945,947],{"id":946},"le-sélecteur-de-classe","Le sélecteur de classe",[154,949,951],{"className":202,"code":950,"language":204,"meta":159,"style":159},".card {\n  background: white;\n}\n",[161,952,953,960,971],{"__ignoreMap":159},[164,954,955,958],{"class":166,"line":167},[164,956,957],{"class":330},".card",[164,959,213],{"class":170},[164,961,962,964,966,969],{"class":166,"line":185},[164,963,546],{"class":218},[164,965,222],{"class":170},[164,967,968],{"class":218},"white",[164,970,228],{"class":170},[164,972,973],{"class":166,"line":231},[164,974,234],{"class":170},[20,976,977],{},"En HTML :",[154,979,981],{"className":156,"code":980,"language":158,"meta":159,"style":159},"\u003Cdiv class=\"card\">Contenu\u003C\u002Fdiv>\n",[161,982,983],{"__ignoreMap":159},[164,984,985,987,990,993,995,998,1001,1003],{"class":166,"line":167},[164,986,171],{"class":170},[164,988,989],{"class":174},"div",[164,991,992],{"class":330}," class",[164,994,345],{"class":170},[164,996,997],{"class":348},"\"card\"",[164,999,1000],{"class":170},">Contenu\u003C\u002F",[164,1002,989],{"class":174},[164,1004,182],{"class":170},[20,1006,1007],{},"La classe permet de réutiliser un style sur plusieurs éléments.",[81,1009,1011],{"id":1010},"le-sélecteur-didentifiant","Le sélecteur d'identifiant",[154,1013,1015],{"className":202,"code":1014,"language":204,"meta":159,"style":159},"#contact {\n  padding: 2rem;\n}\n",[161,1016,1017,1024,1039],{"__ignoreMap":159},[164,1018,1019,1022],{"class":166,"line":167},[164,1020,1021],{"class":330},"#contact",[164,1023,213],{"class":170},[164,1025,1026,1029,1031,1034,1037],{"class":166,"line":185},[164,1027,1028],{"class":218},"  padding",[164,1030,222],{"class":170},[164,1032,1033],{"class":218},"2",[164,1035,1036],{"class":831},"rem",[164,1038,228],{"class":170},[164,1040,1041],{"class":166,"line":231},[164,1042,234],{"class":170},[20,1044,977],{},[154,1046,1048],{"className":156,"code":1047,"language":158,"meta":159,"style":159},"\u003Csection id=\"contact\">\u003C\u002Fsection>\n",[161,1049,1050],{"__ignoreMap":159},[164,1051,1052,1054,1057,1060,1062,1065,1068,1070],{"class":166,"line":167},[164,1053,171],{"class":170},[164,1055,1056],{"class":174},"section",[164,1058,1059],{"class":330}," id",[164,1061,345],{"class":170},[164,1063,1064],{"class":348},"\"contact\"",[164,1066,1067],{"class":170},">\u003C\u002F",[164,1069,1056],{"class":174},[164,1071,182],{"class":170},[20,1073,1074],{},"Un identifiant doit rester unique dans la page.",[81,1076,1078],{"id":1077},"le-sélecteur-multiple","Le sélecteur multiple",[154,1080,1082],{"className":202,"code":1081,"language":204,"meta":159,"style":159},"h1, h2, h3 {\n  font-family: Arial, sans-serif;\n}\n",[161,1083,1084,1098,1112],{"__ignoreMap":159},[164,1085,1086,1088,1090,1092,1094,1096],{"class":166,"line":167},[164,1087,10],{"class":174},[164,1089,536],{"class":170},[164,1091,15],{"class":174},[164,1093,536],{"class":170},[164,1095,81],{"class":174},[164,1097,213],{"class":170},[164,1099,1100,1102,1104,1106,1108,1110],{"class":166,"line":185},[164,1101,528],{"class":218},[164,1103,222],{"class":170},[164,1105,533],{"class":218},[164,1107,536],{"class":170},[164,1109,539],{"class":218},[164,1111,228],{"class":170},[164,1113,1114],{"class":166,"line":231},[164,1115,234],{"class":170},[20,1117,1118],{},"Il permet de cibler plusieurs éléments à la fois.",[81,1120,1122],{"id":1121},"le-sélecteur-descendant","Le sélecteur descendant",[154,1124,1126],{"className":202,"code":1125,"language":204,"meta":159,"style":159},"article p {\n  color: #444;\n}\n",[161,1127,1128,1138,1149],{"__ignoreMap":159},[164,1129,1130,1133,1136],{"class":166,"line":167},[164,1131,1132],{"class":174},"article",[164,1134,1135],{"class":174}," p",[164,1137,213],{"class":170},[164,1139,1140,1142,1144,1147],{"class":166,"line":185},[164,1141,219],{"class":218},[164,1143,222],{"class":170},[164,1145,1146],{"class":218},"#444",[164,1148,228],{"class":170},[164,1150,1151],{"class":166,"line":231},[164,1152,234],{"class":170},[20,1154,1155,1156,1158],{},"Ici, seuls les paragraphes situés dans un ",[161,1157,1132],{}," sont concernés.",[15,1160,1162],{"id":1161},"_6-les-couleurs","6. Les couleurs",[20,1164,1165],{},"Les couleurs font partie des premiers réglages qu'on apprend en CSS.",[81,1167,1169],{"id":1168},"nom-de-couleur","Nom de couleur",[154,1171,1173],{"className":202,"code":1172,"language":204,"meta":159,"style":159},"h1 {\n  color: red;\n}\n",[161,1174,1175,1181,1192],{"__ignoreMap":159},[164,1176,1177,1179],{"class":166,"line":167},[164,1178,10],{"class":174},[164,1180,213],{"class":170},[164,1182,1183,1185,1187,1190],{"class":166,"line":185},[164,1184,219],{"class":218},[164,1186,222],{"class":170},[164,1188,1189],{"class":218},"red",[164,1191,228],{"class":170},[164,1193,1194],{"class":166,"line":231},[164,1195,234],{"class":170},[81,1197,1199],{"id":1198},"hexadécimal","Hexadécimal",[154,1201,1203],{"className":202,"code":1202,"language":204,"meta":159,"style":159},"h1 {\n  color: #ff0000;\n}\n",[161,1204,1205,1211,1222],{"__ignoreMap":159},[164,1206,1207,1209],{"class":166,"line":167},[164,1208,10],{"class":174},[164,1210,213],{"class":170},[164,1212,1213,1215,1217,1220],{"class":166,"line":185},[164,1214,219],{"class":218},[164,1216,222],{"class":170},[164,1218,1219],{"class":218},"#ff0000",[164,1221,228],{"class":170},[164,1223,1224],{"class":166,"line":231},[164,1225,234],{"class":170},[81,1227,1229],{"id":1228},"rgb","RGB",[154,1231,1233],{"className":202,"code":1232,"language":204,"meta":159,"style":159},"h1 {\n  color: rgb(255, 0, 0);\n}\n",[161,1234,1235,1241,1267],{"__ignoreMap":159},[164,1236,1237,1239],{"class":166,"line":167},[164,1238,10],{"class":174},[164,1240,213],{"class":170},[164,1242,1243,1245,1247,1249,1252,1255,1257,1260,1262,1264],{"class":166,"line":185},[164,1244,219],{"class":218},[164,1246,222],{"class":170},[164,1248,1228],{"class":218},[164,1250,1251],{"class":170},"(",[164,1253,1254],{"class":218},"255",[164,1256,536],{"class":170},[164,1258,1259],{"class":218},"0",[164,1261,536],{"class":170},[164,1263,1259],{"class":218},[164,1265,1266],{"class":170},");\n",[164,1268,1269],{"class":166,"line":231},[164,1270,234],{"class":170},[81,1272,1274],{"id":1273},"rgba","RGBA",[154,1276,1278],{"className":202,"code":1277,"language":204,"meta":159,"style":159},"h1 {\n  color: rgba(255, 0, 0, 0.7);\n}\n",[161,1279,1280,1286,1313],{"__ignoreMap":159},[164,1281,1282,1284],{"class":166,"line":167},[164,1283,10],{"class":174},[164,1285,213],{"class":170},[164,1287,1288,1290,1292,1294,1296,1298,1300,1302,1304,1306,1308,1311],{"class":166,"line":185},[164,1289,219],{"class":218},[164,1291,222],{"class":170},[164,1293,1273],{"class":218},[164,1295,1251],{"class":170},[164,1297,1254],{"class":218},[164,1299,536],{"class":170},[164,1301,1259],{"class":218},[164,1303,536],{"class":170},[164,1305,1259],{"class":218},[164,1307,536],{"class":170},[164,1309,1310],{"class":218},"0.7",[164,1312,1266],{"class":170},[164,1314,1315],{"class":166,"line":231},[164,1316,234],{"class":170},[20,1318,1319],{},"Le dernier paramètre correspond à la transparence.",[81,1321,1323],{"id":1322},"bon-réflexe","Bon réflexe",[20,1325,1326],{},"Privilégiez des couleurs cohérentes et accessibles. Le contraste entre le texte et le fond doit rester suffisant pour une bonne lisibilité.",[15,1328,1330],{"id":1329},"_7-les-unités-de-mesure","7. Les unités de mesure",[20,1332,1333],{},"CSS utilise plusieurs types d'unités.",[81,1335,1337],{"id":1336},"pixels","Pixels",[154,1339,1341],{"className":202,"code":1340,"language":204,"meta":159,"style":159},"h1 {\n  font-size: 32px;\n}\n",[161,1342,1343,1349,1362],{"__ignoreMap":159},[164,1344,1345,1347],{"class":166,"line":167},[164,1346,10],{"class":174},[164,1348,213],{"class":170},[164,1350,1351,1353,1355,1358,1360],{"class":166,"line":185},[164,1352,823],{"class":218},[164,1354,222],{"class":170},[164,1356,1357],{"class":218},"32",[164,1359,832],{"class":831},[164,1361,228],{"class":170},[164,1363,1364],{"class":166,"line":231},[164,1365,234],{"class":170},[20,1367,1368],{},"Le pixel est une unité simple à comprendre, mais pas toujours la plus flexible.",[81,1370,1372,1375,1376],{"id":1371},"em-et-rem",[161,1373,1374],{},"em"," et ",[161,1377,1036],{},[154,1379,1381],{"className":202,"code":1380,"language":204,"meta":159,"style":159},"p {\n  font-size: 1rem;\n}\n",[161,1382,1383,1389,1402],{"__ignoreMap":159},[164,1384,1385,1387],{"class":166,"line":167},[164,1386,20],{"class":174},[164,1388,213],{"class":170},[164,1390,1391,1393,1395,1398,1400],{"class":166,"line":185},[164,1392,823],{"class":218},[164,1394,222],{"class":170},[164,1396,1397],{"class":218},"1",[164,1399,1036],{"class":831},[164,1401,228],{"class":170},[164,1403,1404],{"class":166,"line":231},[164,1405,234],{"class":170},[20,1407,1408],{},"Ces unités sont très utiles pour construire des interfaces plus adaptables.",[40,1410,1411,1416],{},[43,1412,1413,1415],{},[161,1414,1374],{}," dépend souvent de l'élément parent ;",[43,1417,1418,1420],{},[161,1419,1036],{}," dépend de la taille de base du document.",[81,1422,1424],{"id":1423},"pourcentage","Pourcentage",[154,1426,1428],{"className":202,"code":1427,"language":204,"meta":159,"style":159},".container {\n  width: 80%;\n}\n",[161,1429,1430,1437,1452],{"__ignoreMap":159},[164,1431,1432,1435],{"class":166,"line":167},[164,1433,1434],{"class":330},".container",[164,1436,213],{"class":170},[164,1438,1439,1442,1444,1447,1450],{"class":166,"line":185},[164,1440,1441],{"class":218},"  width",[164,1443,222],{"class":170},[164,1445,1446],{"class":218},"80",[164,1448,1449],{"class":831},"%",[164,1451,228],{"class":170},[164,1453,1454],{"class":166,"line":231},[164,1455,234],{"class":170},[20,1457,1458],{},"Le pourcentage dépend de la taille de l'élément parent.",[81,1460,1462],{"id":1461},"unités-de-viewport","Unités de viewport",[154,1464,1466],{"className":202,"code":1465,"language":204,"meta":159,"style":159},".hero {\n  min-height: 100vh;\n}\n",[161,1467,1468,1475,1490],{"__ignoreMap":159},[164,1469,1470,1473],{"class":166,"line":167},[164,1471,1472],{"class":330},".hero",[164,1474,213],{"class":170},[164,1476,1477,1480,1482,1485,1488],{"class":166,"line":185},[164,1478,1479],{"class":218},"  min-height",[164,1481,222],{"class":170},[164,1483,1484],{"class":218},"100",[164,1486,1487],{"class":831},"vh",[164,1489,228],{"class":170},[164,1491,1492],{"class":166,"line":231},[164,1493,234],{"class":170},[20,1495,1496,1498],{},[161,1497,1487],{}," correspond à la hauteur visible de l'écran.",[15,1500,1502],{"id":1501},"_8-le-modèle-de-boîte","8. Le modèle de boîte",[20,1504,1505],{},"Le modèle de boîte est l'un des concepts les plus importants en CSS.",[20,1507,1508],{},"Chaque élément peut être vu comme une boîte composée de :",[40,1510,1511,1514,1517,1520],{},[43,1512,1513],{},"contenu ;",[43,1515,1516],{},"padding ;",[43,1518,1519],{},"border ;",[43,1521,1522],{},"margin.",[81,1524,1526],{"id":1525},"exemple-visuel","Exemple visuel",[154,1528,1530],{"className":202,"code":1529,"language":204,"meta":159,"style":159},".card {\n  width: 300px;\n  padding: 20px;\n  border: 1px solid #ddd;\n  margin: 16px;\n}\n",[161,1531,1532,1538,1551,1564,1583,1596],{"__ignoreMap":159},[164,1533,1534,1536],{"class":166,"line":167},[164,1535,957],{"class":330},[164,1537,213],{"class":170},[164,1539,1540,1542,1544,1547,1549],{"class":166,"line":185},[164,1541,1441],{"class":218},[164,1543,222],{"class":170},[164,1545,1546],{"class":218},"300",[164,1548,832],{"class":831},[164,1550,228],{"class":170},[164,1552,1553,1555,1557,1560,1562],{"class":166,"line":231},[164,1554,1028],{"class":218},[164,1556,222],{"class":170},[164,1558,1559],{"class":218},"20",[164,1561,832],{"class":831},[164,1563,228],{"class":170},[164,1565,1566,1569,1571,1573,1575,1578,1581],{"class":166,"line":364},[164,1567,1568],{"class":218},"  border",[164,1570,222],{"class":170},[164,1572,1397],{"class":218},[164,1574,832],{"class":831},[164,1576,1577],{"class":218}," solid",[164,1579,1580],{"class":218}," #ddd",[164,1582,228],{"class":170},[164,1584,1585,1588,1590,1592,1594],{"class":166,"line":383},[164,1586,1587],{"class":218},"  margin",[164,1589,222],{"class":170},[164,1591,828],{"class":218},[164,1593,832],{"class":831},[164,1595,228],{"class":170},[164,1597,1598],{"class":166,"line":408},[164,1599,234],{"class":170},[81,1601,1603],{"id":1602},"contenu","Contenu",[20,1605,1606],{},"C'est la partie principale : texte, image ou autre élément.",[81,1608,1609],{"id":884},"Padding",[20,1611,1612],{},"L'espace entre le contenu et la bordure.",[81,1614,1616],{"id":1615},"border","Border",[20,1618,1619],{},"La bordure autour de l'élément.",[81,1621,1622],{"id":879},"Margin",[20,1624,1625],{},"L'espace extérieur entre cet élément et les autres.",[81,1627,1629],{"id":1628},"box-sizing",[161,1630,1628],{},[20,1632,1633],{},"Très souvent, on ajoute cette règle :",[154,1635,1637],{"className":202,"code":1636,"language":204,"meta":159,"style":159},"* {\n  box-sizing: border-box;\n}\n",[161,1638,1639,1646,1658],{"__ignoreMap":159},[164,1640,1641,1644],{"class":166,"line":167},[164,1642,1643],{"class":174},"*",[164,1645,213],{"class":170},[164,1647,1648,1651,1653,1656],{"class":166,"line":185},[164,1649,1650],{"class":218},"  box-sizing",[164,1652,222],{"class":170},[164,1654,1655],{"class":218},"border-box",[164,1657,228],{"class":170},[164,1659,1660],{"class":166,"line":231},[164,1661,234],{"class":170},[20,1663,1664],{},"Cela rend le calcul de la largeur plus simple et plus prévisible.",[15,1666,1668],{"id":1667},"_9-le-texte-et-la-typographie","9. Le texte et la typographie",[20,1670,1671],{},"La typographie joue un rôle essentiel dans la lisibilité.",[81,1673,1675],{"id":1674},"taille-du-texte","Taille du texte",[154,1677,1679],{"className":202,"code":1678,"language":204,"meta":159,"style":159},"body {\n  font-size: 16px;\n}\n",[161,1680,1681,1687,1699],{"__ignoreMap":159},[164,1682,1683,1685],{"class":166,"line":167},[164,1684,464],{"class":174},[164,1686,213],{"class":170},[164,1688,1689,1691,1693,1695,1697],{"class":166,"line":185},[164,1690,823],{"class":218},[164,1692,222],{"class":170},[164,1694,828],{"class":218},[164,1696,832],{"class":831},[164,1698,228],{"class":170},[164,1700,1701],{"class":166,"line":231},[164,1702,234],{"class":170},[81,1704,1706],{"id":1705},"police","Police",[154,1708,1710],{"className":202,"code":1709,"language":204,"meta":159,"style":159},"body {\n  font-family: Arial, sans-serif;\n}\n",[161,1711,1712,1718,1732],{"__ignoreMap":159},[164,1713,1714,1716],{"class":166,"line":167},[164,1715,464],{"class":174},[164,1717,213],{"class":170},[164,1719,1720,1722,1724,1726,1728,1730],{"class":166,"line":185},[164,1721,528],{"class":218},[164,1723,222],{"class":170},[164,1725,533],{"class":218},[164,1727,536],{"class":170},[164,1729,539],{"class":218},[164,1731,228],{"class":170},[164,1733,1734],{"class":166,"line":231},[164,1735,234],{"class":170},[81,1737,1739],{"id":1738},"hauteur-de-ligne","Hauteur de ligne",[154,1741,1742],{"className":202,"code":916,"language":204,"meta":159,"style":159},[161,1743,1744,1750,1760],{"__ignoreMap":159},[164,1745,1746,1748],{"class":166,"line":167},[164,1747,20],{"class":174},[164,1749,213],{"class":170},[164,1751,1752,1754,1756,1758],{"class":166,"line":185},[164,1753,929],{"class":218},[164,1755,222],{"class":170},[164,1757,934],{"class":218},[164,1759,228],{"class":170},[164,1761,1762],{"class":166,"line":231},[164,1763,234],{"class":170},[81,1765,1767],{"id":1766},"poids-du-texte","Poids du texte",[154,1769,1771],{"className":202,"code":1770,"language":204,"meta":159,"style":159},"h1 {\n  font-weight: 700;\n}\n",[161,1772,1773,1779,1791],{"__ignoreMap":159},[164,1774,1775,1777],{"class":166,"line":167},[164,1776,10],{"class":174},[164,1778,213],{"class":170},[164,1780,1781,1784,1786,1789],{"class":166,"line":185},[164,1782,1783],{"class":218},"  font-weight",[164,1785,222],{"class":170},[164,1787,1788],{"class":218},"700",[164,1790,228],{"class":170},[164,1792,1793],{"class":166,"line":231},[164,1794,234],{"class":170},[81,1796,1798],{"id":1797},"alignement","Alignement",[154,1800,1802],{"className":202,"code":1801,"language":204,"meta":159,"style":159},"h1 {\n  text-align: center;\n}\n",[161,1803,1804,1810,1822],{"__ignoreMap":159},[164,1805,1806,1808],{"class":166,"line":167},[164,1807,10],{"class":174},[164,1809,213],{"class":170},[164,1811,1812,1815,1817,1820],{"class":166,"line":185},[164,1813,1814],{"class":218},"  text-align",[164,1816,222],{"class":170},[164,1818,1819],{"class":218},"center",[164,1821,228],{"class":170},[164,1823,1824],{"class":166,"line":231},[164,1825,234],{"class":170},[81,1827,1829],{"id":1828},"espacement-des-lettres","Espacement des lettres",[154,1831,1833],{"className":202,"code":1832,"language":204,"meta":159,"style":159},"h1 {\n  letter-spacing: 1px;\n}\n",[161,1834,1835,1841,1854],{"__ignoreMap":159},[164,1836,1837,1839],{"class":166,"line":167},[164,1838,10],{"class":174},[164,1840,213],{"class":170},[164,1842,1843,1846,1848,1850,1852],{"class":166,"line":185},[164,1844,1845],{"class":218},"  letter-spacing",[164,1847,222],{"class":170},[164,1849,1397],{"class":218},[164,1851,832],{"class":831},[164,1853,228],{"class":170},[164,1855,1856],{"class":166,"line":231},[164,1857,234],{"class":170},[81,1859,1861],{"id":1860},"bon-réflexe-typographique","Bon réflexe typographique",[20,1863,1864],{},"Ne multipliez pas les polices et les tailles sans raison. Une hiérarchie simple est souvent plus élégante et plus claire.",[15,1866,1868],{"id":1867},"_10-les-backgrounds-et-les-bordures","10. Les backgrounds et les bordures",[81,1870,1872],{"id":1871},"couleur-de-fond","Couleur de fond",[154,1874,1876],{"className":202,"code":1875,"language":204,"meta":159,"style":159},".section {\n  background-color: #f5f5f5;\n}\n",[161,1877,1878,1885,1897],{"__ignoreMap":159},[164,1879,1880,1883],{"class":166,"line":167},[164,1881,1882],{"class":330},".section",[164,1884,213],{"class":170},[164,1886,1887,1890,1892,1895],{"class":166,"line":185},[164,1888,1889],{"class":218},"  background-color",[164,1891,222],{"class":170},[164,1893,1894],{"class":218},"#f5f5f5",[164,1896,228],{"class":170},[164,1898,1899],{"class":166,"line":231},[164,1900,234],{"class":170},[81,1902,1904],{"id":1903},"image-de-fond","Image de fond",[154,1906,1908],{"className":202,"code":1907,"language":204,"meta":159,"style":159},".hero {\n  background-image: linear-gradient(135deg, #1d4ed8, #60a5fa);\n  background-size: cover;\n  background-position: center;\n}\n",[161,1909,1910,1916,1945,1957,1968],{"__ignoreMap":159},[164,1911,1912,1914],{"class":166,"line":167},[164,1913,1472],{"class":330},[164,1915,213],{"class":170},[164,1917,1918,1921,1923,1926,1928,1931,1934,1936,1938,1940,1943],{"class":166,"line":185},[164,1919,1920],{"class":218},"  background-image",[164,1922,222],{"class":170},[164,1924,1925],{"class":218},"linear-gradient",[164,1927,1251],{"class":170},[164,1929,1930],{"class":218},"135",[164,1932,1933],{"class":831},"deg",[164,1935,536],{"class":170},[164,1937,589],{"class":218},[164,1939,536],{"class":170},[164,1941,1942],{"class":218},"#60a5fa",[164,1944,1266],{"class":170},[164,1946,1947,1950,1952,1955],{"class":166,"line":231},[164,1948,1949],{"class":218},"  background-size",[164,1951,222],{"class":170},[164,1953,1954],{"class":218},"cover",[164,1956,228],{"class":170},[164,1958,1959,1962,1964,1966],{"class":166,"line":364},[164,1960,1961],{"class":218},"  background-position",[164,1963,222],{"class":170},[164,1965,1819],{"class":218},[164,1967,228],{"class":170},[164,1969,1970],{"class":166,"line":383},[164,1971,234],{"class":170},[81,1973,1975],{"id":1974},"bordure","Bordure",[154,1977,1979],{"className":202,"code":1978,"language":204,"meta":159,"style":159},".card {\n  border: 1px solid #e5e5e5;\n}\n",[161,1980,1981,1987,2004],{"__ignoreMap":159},[164,1982,1983,1985],{"class":166,"line":167},[164,1984,957],{"class":330},[164,1986,213],{"class":170},[164,1988,1989,1991,1993,1995,1997,1999,2002],{"class":166,"line":185},[164,1990,1568],{"class":218},[164,1992,222],{"class":170},[164,1994,1397],{"class":218},[164,1996,832],{"class":831},[164,1998,1577],{"class":218},[164,2000,2001],{"class":218}," #e5e5e5",[164,2003,228],{"class":170},[164,2005,2006],{"class":166,"line":231},[164,2007,234],{"class":170},[81,2009,2011],{"id":2010},"coins-arrondis","Coins arrondis",[154,2013,2015],{"className":202,"code":2014,"language":204,"meta":159,"style":159},".card {\n  border-radius: 12px;\n}\n",[161,2016,2017,2023,2037],{"__ignoreMap":159},[164,2018,2019,2021],{"class":166,"line":167},[164,2020,957],{"class":330},[164,2022,213],{"class":170},[164,2024,2025,2028,2030,2033,2035],{"class":166,"line":185},[164,2026,2027],{"class":218},"  border-radius",[164,2029,222],{"class":170},[164,2031,2032],{"class":218},"12",[164,2034,832],{"class":831},[164,2036,228],{"class":170},[164,2038,2039],{"class":166,"line":231},[164,2040,234],{"class":170},[15,2042,2044],{"id":2043},"_11-laffichage-et-lorganisation-des-éléments","11. L'affichage et l'organisation des éléments",[20,2046,2047],{},"CSS permet de contrôler la manière dont les éléments se disposent sur la page.",[81,2049,2051],{"id":2050},"display-block",[161,2052,2053],{},"display: block",[20,2055,2056],{},"Un élément bloc prend généralement toute la largeur disponible.",[81,2058,2060],{"id":2059},"display-inline",[161,2061,2062],{},"display: inline",[20,2064,2065],{},"Un élément en ligne se place dans le flux du texte.",[81,2067,2069],{"id":2068},"display-flex",[161,2070,2071],{},"display: flex",[20,2073,2074],{},"Flexbox sert à aligner des éléments sur un axe.",[81,2076,2078],{"id":2077},"display-grid",[161,2079,2080],{},"display: grid",[20,2082,2083],{},"Grid sert à construire des mises en page en deux dimensions.",[20,2085,2086],{},"Nous y reviendrons plus loin.",[15,2088,2090],{"id":2089},"_12-flexbox","12. Flexbox",[20,2092,2093],{},"Flexbox est très utile pour aligner les éléments simplement.",[81,2095,2097],{"id":2096},"exemple-de-base","Exemple de base",[154,2099,2101],{"className":202,"code":2100,"language":204,"meta":159,"style":159},".nav {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n",[161,2102,2103,2110,2122,2134,2145],{"__ignoreMap":159},[164,2104,2105,2108],{"class":166,"line":167},[164,2106,2107],{"class":330},".nav",[164,2109,213],{"class":170},[164,2111,2112,2115,2117,2120],{"class":166,"line":185},[164,2113,2114],{"class":218},"  display",[164,2116,222],{"class":170},[164,2118,2119],{"class":218},"flex",[164,2121,228],{"class":170},[164,2123,2124,2127,2129,2132],{"class":166,"line":231},[164,2125,2126],{"class":218},"  justify-content",[164,2128,222],{"class":170},[164,2130,2131],{"class":218},"space-between",[164,2133,228],{"class":170},[164,2135,2136,2139,2141,2143],{"class":166,"line":364},[164,2137,2138],{"class":218},"  align-items",[164,2140,222],{"class":170},[164,2142,1819],{"class":218},[164,2144,228],{"class":170},[164,2146,2147],{"class":166,"line":383},[164,2148,234],{"class":170},[81,2150,2152],{"id":2151},"ce-que-cela-signifie","Ce que cela signifie",[40,2154,2155,2160,2166],{},[43,2156,2157,2159],{},[161,2158,2071],{}," active le mode flexbox ;",[43,2161,2162,2165],{},[161,2163,2164],{},"justify-content"," gère l'alignement horizontal ;",[43,2167,2168,2171],{},[161,2169,2170],{},"align-items"," gère l'alignement vertical.",[81,2173,2175],{"id":2174},"quelques-propriétés-utiles","Quelques propriétés utiles",[154,2177,2179],{"className":202,"code":2178,"language":204,"meta":159,"style":159},".container {\n  display: flex;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n",[161,2180,2181,2187,2197,2210,2222],{"__ignoreMap":159},[164,2182,2183,2185],{"class":166,"line":167},[164,2184,1434],{"class":330},[164,2186,213],{"class":170},[164,2188,2189,2191,2193,2195],{"class":166,"line":185},[164,2190,2114],{"class":218},[164,2192,222],{"class":170},[164,2194,2119],{"class":218},[164,2196,228],{"class":170},[164,2198,2199,2202,2204,2206,2208],{"class":166,"line":231},[164,2200,2201],{"class":218},"  gap",[164,2203,222],{"class":170},[164,2205,828],{"class":218},[164,2207,832],{"class":831},[164,2209,228],{"class":170},[164,2211,2212,2215,2217,2220],{"class":166,"line":364},[164,2213,2214],{"class":218},"  flex-wrap",[164,2216,222],{"class":170},[164,2218,2219],{"class":218},"wrap",[164,2221,228],{"class":170},[164,2223,2224],{"class":166,"line":383},[164,2225,234],{"class":170},[81,2227,2229],{"id":2228},"quand-utiliser-flexbox","Quand utiliser Flexbox",[20,2231,2232],{},"Flexbox est particulièrement pratique pour :",[40,2234,2235,2238,2241,2244],{},[43,2236,2237],{},"une barre de navigation ;",[43,2239,2240],{},"des cartes alignées ;",[43,2242,2243],{},"un bouton avec une icône et du texte ;",[43,2245,2246],{},"des éléments alignés sur une ligne ou une colonne.",[15,2248,2250],{"id":2249},"_13-grid","13. Grid",[20,2252,2253],{},"Grid est idéal pour organiser des mises en page plus complexes.",[81,2255,2257],{"id":2256},"exemple-simple","Exemple simple",[154,2259,2261],{"className":202,"code":2260,"language":204,"meta":159,"style":159},".grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n}\n",[161,2262,2263,2270,2281,2305,2317],{"__ignoreMap":159},[164,2264,2265,2268],{"class":166,"line":167},[164,2266,2267],{"class":330},".grid",[164,2269,213],{"class":170},[164,2271,2272,2274,2276,2279],{"class":166,"line":185},[164,2273,2114],{"class":218},[164,2275,222],{"class":170},[164,2277,2278],{"class":218},"grid",[164,2280,228],{"class":170},[164,2282,2283,2286,2288,2291,2293,2296,2298,2300,2303],{"class":166,"line":231},[164,2284,2285],{"class":218},"  grid-template-columns",[164,2287,222],{"class":170},[164,2289,2290],{"class":218},"repeat",[164,2292,1251],{"class":170},[164,2294,2295],{"class":218},"3",[164,2297,536],{"class":170},[164,2299,1397],{"class":218},[164,2301,2302],{"class":831},"fr",[164,2304,1266],{"class":170},[164,2306,2307,2309,2311,2313,2315],{"class":166,"line":364},[164,2308,2201],{"class":218},[164,2310,222],{"class":170},[164,2312,1559],{"class":218},[164,2314,832],{"class":831},[164,2316,228],{"class":170},[164,2318,2319],{"class":166,"line":383},[164,2320,234],{"class":170},[81,2322,2324],{"id":2323},"explication","Explication",[40,2326,2327,2332,2338],{},[43,2328,2329,2331],{},[161,2330,2080],{}," active la grille ;",[43,2333,2334,2337],{},[161,2335,2336],{},"grid-template-columns"," définit les colonnes ;",[43,2339,2340,2343],{},[161,2341,2342],{},"1fr"," signifie une fraction de l'espace disponible.",[81,2345,2347],{"id":2346},"exemple-avec-une-mise-en-page-classique","Exemple avec une mise en page classique",[154,2349,2351],{"className":202,"code":2350,"language":204,"meta":159,"style":159},".layout {\n  display: grid;\n  grid-template-columns: 250px 1fr;\n  gap: 24px;\n}\n",[161,2352,2353,2360,2370,2388,2401],{"__ignoreMap":159},[164,2354,2355,2358],{"class":166,"line":167},[164,2356,2357],{"class":330},".layout",[164,2359,213],{"class":170},[164,2361,2362,2364,2366,2368],{"class":166,"line":185},[164,2363,2114],{"class":218},[164,2365,222],{"class":170},[164,2367,2278],{"class":218},[164,2369,228],{"class":170},[164,2371,2372,2374,2376,2379,2381,2384,2386],{"class":166,"line":231},[164,2373,2285],{"class":218},[164,2375,222],{"class":170},[164,2377,2378],{"class":218},"250",[164,2380,832],{"class":831},[164,2382,2383],{"class":218}," 1",[164,2385,2302],{"class":831},[164,2387,228],{"class":170},[164,2389,2390,2392,2394,2397,2399],{"class":166,"line":364},[164,2391,2201],{"class":218},[164,2393,222],{"class":170},[164,2395,2396],{"class":218},"24",[164,2398,832],{"class":831},[164,2400,228],{"class":170},[164,2402,2403],{"class":166,"line":383},[164,2404,234],{"class":170},[20,2406,2407],{},"Cette structure est très utile pour une page avec une barre latérale et un contenu principal.",[15,2409,2411],{"id":2410},"_14-les-positions","14. Les positions",[81,2413,2415],{"id":2414},"position-relative",[161,2416,2417],{},"position: relative",[20,2419,2420],{},"Permet de positionner un élément par rapport à sa place normale.",[81,2422,2424],{"id":2423},"position-absolute",[161,2425,2426],{},"position: absolute",[20,2428,2429],{},"Permet de sortir l'élément du flux et de le positionner relativement à un parent positionné.",[81,2431,2433],{"id":2432},"position-fixed",[161,2434,2435],{},"position: fixed",[20,2437,2438],{},"Permet de garder un élément fixé à l'écran, même quand on fait défiler la page.",[81,2440,2442],{"id":2441},"position-sticky",[161,2443,2444],{},"position: sticky",[20,2446,2447],{},"Permet à un élément de rester collé à un certain point pendant le scroll.",[81,2449,1323],{"id":2450},"bon-réflexe-1",[20,2452,2453],{},"Utilisez les positions avec parcimonie. Beaucoup de mises en page peuvent être faites plus proprement avec Flexbox ou Grid.",[15,2455,2457],{"id":2456},"_15-les-pseudo-classes-et-pseudo-éléments","15. Les pseudo-classes et pseudo-éléments",[81,2459,2461,2462],{"id":2460},"pseudo-classe-hover","Pseudo-classe ",[161,2463,2464],{},":hover",[154,2466,2468],{"className":202,"code":2467,"language":204,"meta":159,"style":159},"button:hover {\n  background-color: #111;\n}\n",[161,2469,2470,2479,2490],{"__ignoreMap":159},[164,2471,2472,2475,2477],{"class":166,"line":167},[164,2473,2474],{"class":174},"button",[164,2476,2464],{"class":330},[164,2478,213],{"class":170},[164,2480,2481,2483,2485,2488],{"class":166,"line":185},[164,2482,1889],{"class":218},[164,2484,222],{"class":170},[164,2486,2487],{"class":218},"#111",[164,2489,228],{"class":170},[164,2491,2492],{"class":166,"line":231},[164,2493,234],{"class":170},[20,2495,2496],{},"Le style change quand la souris passe sur l'élément.",[81,2498,2461,2500],{"id":2499},"pseudo-classe-focus",[161,2501,2502],{},":focus",[154,2504,2506],{"className":202,"code":2505,"language":204,"meta":159,"style":159},"input:focus {\n  border-color: blue;\n}\n",[161,2507,2508,2517,2528],{"__ignoreMap":159},[164,2509,2510,2513,2515],{"class":166,"line":167},[164,2511,2512],{"class":174},"input",[164,2514,2502],{"class":330},[164,2516,213],{"class":170},[164,2518,2519,2522,2524,2526],{"class":166,"line":185},[164,2520,2521],{"class":218},"  border-color",[164,2523,222],{"class":170},[164,2525,225],{"class":218},[164,2527,228],{"class":170},[164,2529,2530],{"class":166,"line":231},[164,2531,234],{"class":170},[20,2533,2534],{},"Très utile pour l'accessibilité.",[81,2536,2538,2539],{"id":2537},"pseudo-élément-before","Pseudo-élément ",[161,2540,2541],{},"::before",[154,2543,2545],{"className":202,"code":2544,"language":204,"meta":159,"style":159},".badge::before {\n  content: \"• \";\n}\n",[161,2546,2547,2554,2566],{"__ignoreMap":159},[164,2548,2549,2552],{"class":166,"line":167},[164,2550,2551],{"class":330},".badge::before",[164,2553,213],{"class":170},[164,2555,2556,2559,2561,2564],{"class":166,"line":185},[164,2557,2558],{"class":218},"  content",[164,2560,222],{"class":170},[164,2562,2563],{"class":348},"\"• \"",[164,2565,228],{"class":170},[164,2567,2568],{"class":166,"line":231},[164,2569,234],{"class":170},[81,2571,2538,2573],{"id":2572},"pseudo-élément-after",[161,2574,2575],{},"::after",[154,2577,2579],{"className":202,"code":2578,"language":204,"meta":159,"style":159},".link::after {\n  content: \" ↗\";\n}\n",[161,2580,2581,2588,2599],{"__ignoreMap":159},[164,2582,2583,2586],{"class":166,"line":167},[164,2584,2585],{"class":330},".link::after",[164,2587,213],{"class":170},[164,2589,2590,2592,2594,2597],{"class":166,"line":185},[164,2591,2558],{"class":218},[164,2593,222],{"class":170},[164,2595,2596],{"class":348},"\" ↗\"",[164,2598,228],{"class":170},[164,2600,2601],{"class":166,"line":231},[164,2602,234],{"class":170},[20,2604,2605],{},"Les pseudo-classes et pseudo-éléments permettent de styliser des états ou des parties précises d'un élément.",[15,2607,2609],{"id":2608},"_16-les-transitions-et-les-animations","16. Les transitions et les animations",[81,2611,2613],{"id":2612},"transition","Transition",[154,2615,2617],{"className":202,"code":2616,"language":204,"meta":159,"style":159},"button {\n  transition: background-color 0.3s ease;\n}\n",[161,2618,2619,2625,2644],{"__ignoreMap":159},[164,2620,2621,2623],{"class":166,"line":167},[164,2622,2474],{"class":174},[164,2624,213],{"class":170},[164,2626,2627,2630,2633,2636,2639,2642],{"class":166,"line":185},[164,2628,2629],{"class":218},"  transition",[164,2631,2632],{"class":170},": background-color ",[164,2634,2635],{"class":218},"0.3",[164,2637,2638],{"class":831},"s",[164,2640,2641],{"class":218}," ease",[164,2643,228],{"class":170},[164,2645,2646],{"class":166,"line":231},[164,2647,234],{"class":170},[20,2649,2650],{},"Une transition rend un changement de style plus fluide.",[81,2652,2654],{"id":2653},"animation-simple","Animation simple",[154,2656,2658],{"className":202,"code":2657,"language":204,"meta":159,"style":159},"@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.card {\n  animation: fadeIn 0.4s ease;\n}\n",[161,2659,2660,2671,2678,2689,2708,2713,2720,2730,2744,2748,2752,2756,2762,2779],{"__ignoreMap":159},[164,2661,2662,2665,2669],{"class":166,"line":167},[164,2663,2664],{"class":831},"@keyframes",[164,2666,2668],{"class":2667},"s4XuR"," fadeIn",[164,2670,213],{"class":170},[164,2672,2673,2676],{"class":166,"line":185},[164,2674,2675],{"class":330},"  from",[164,2677,213],{"class":170},[164,2679,2680,2683,2685,2687],{"class":166,"line":231},[164,2681,2682],{"class":218},"    opacity",[164,2684,222],{"class":170},[164,2686,1259],{"class":218},[164,2688,228],{"class":170},[164,2690,2691,2694,2696,2699,2701,2704,2706],{"class":166,"line":364},[164,2692,2693],{"class":218},"    transform",[164,2695,222],{"class":170},[164,2697,2698],{"class":218},"translateY",[164,2700,1251],{"class":170},[164,2702,2703],{"class":218},"10",[164,2705,832],{"class":831},[164,2707,1266],{"class":170},[164,2709,2710],{"class":166,"line":383},[164,2711,2712],{"class":170},"  }\n",[164,2714,2715,2718],{"class":166,"line":408},[164,2716,2717],{"class":330},"  to",[164,2719,213],{"class":170},[164,2721,2722,2724,2726,2728],{"class":166,"line":423},[164,2723,2682],{"class":218},[164,2725,222],{"class":170},[164,2727,1397],{"class":218},[164,2729,228],{"class":170},[164,2731,2732,2734,2736,2738,2740,2742],{"class":166,"line":449},[164,2733,2693],{"class":218},[164,2735,222],{"class":170},[164,2737,2698],{"class":218},[164,2739,1251],{"class":170},[164,2741,1259],{"class":218},[164,2743,1266],{"class":170},[164,2745,2746],{"class":166,"line":459},[164,2747,2712],{"class":170},[164,2749,2750],{"class":166,"line":469},[164,2751,234],{"class":170},[164,2753,2754],{"class":166,"line":482},[164,2755,574],{"emptyLinePlaceholder":573},[164,2757,2758,2760],{"class":166,"line":496},[164,2759,957],{"class":330},[164,2761,213],{"class":170},[164,2763,2764,2767,2770,2773,2775,2777],{"class":166,"line":505},[164,2765,2766],{"class":218},"  animation",[164,2768,2769],{"class":170},": fadeIn ",[164,2771,2772],{"class":218},"0.4",[164,2774,2638],{"class":831},[164,2776,2641],{"class":218},[164,2778,228],{"class":170},[164,2780,2782],{"class":166,"line":2781},14,[164,2783,234],{"class":170},[20,2785,2786],{},"Les animations doivent rester utiles et discrètes. Trop d'effets visuels nuisent souvent à la lisibilité.",[15,2788,2790],{"id":2789},"_17-le-responsive-design","17. Le responsive design",[20,2792,2793],{},"Un site moderne doit s'adapter à toutes les tailles d'écran.",[81,2795,2797],{"id":2796},"le-principe","Le principe",[20,2799,2800],{},"Le responsive design consiste à faire en sorte qu'une page reste lisible sur mobile, tablette et ordinateur.",[81,2802,2804],{"id":2803},"media-queries","Media queries",[154,2806,2808],{"className":202,"code":2807,"language":204,"meta":159,"style":159},".container {\n  display: grid;\n  grid-template-columns: 1fr;\n}\n\n@media (min-width: 768px) {\n  .container {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n",[161,2809,2810,2816,2826,2838,2842,2846,2867,2874,2891,2895],{"__ignoreMap":159},[164,2811,2812,2814],{"class":166,"line":167},[164,2813,1434],{"class":330},[164,2815,213],{"class":170},[164,2817,2818,2820,2822,2824],{"class":166,"line":185},[164,2819,2114],{"class":218},[164,2821,222],{"class":170},[164,2823,2278],{"class":218},[164,2825,228],{"class":170},[164,2827,2828,2830,2832,2834,2836],{"class":166,"line":231},[164,2829,2285],{"class":218},[164,2831,222],{"class":170},[164,2833,1397],{"class":218},[164,2835,2302],{"class":831},[164,2837,228],{"class":170},[164,2839,2840],{"class":166,"line":364},[164,2841,234],{"class":170},[164,2843,2844],{"class":166,"line":383},[164,2845,574],{"emptyLinePlaceholder":573},[164,2847,2848,2851,2854,2857,2859,2862,2864],{"class":166,"line":408},[164,2849,2850],{"class":831},"@media",[164,2852,2853],{"class":170}," (",[164,2855,2856],{"class":218},"min-width",[164,2858,222],{"class":170},[164,2860,2861],{"class":218},"768",[164,2863,832],{"class":831},[164,2865,2866],{"class":170},") {\n",[164,2868,2869,2872],{"class":166,"line":423},[164,2870,2871],{"class":330},"  .container",[164,2873,213],{"class":170},[164,2875,2876,2879,2881,2883,2885,2887,2889],{"class":166,"line":449},[164,2877,2878],{"class":218},"    grid-template-columns",[164,2880,222],{"class":170},[164,2882,1397],{"class":218},[164,2884,2302],{"class":831},[164,2886,2383],{"class":218},[164,2888,2302],{"class":831},[164,2890,228],{"class":170},[164,2892,2893],{"class":166,"line":459},[164,2894,2712],{"class":170},[164,2896,2897],{"class":166,"line":469},[164,2898,234],{"class":170},[81,2900,2902],{"id":2901},"exemple-pratique","Exemple pratique",[154,2904,2906],{"className":202,"code":2905,"language":204,"meta":159,"style":159},".card-list {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n}\n\n@media (min-width: 640px) {\n  .card-list {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (min-width: 1024px) {\n  .card-list {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n",[161,2907,2908,2915,2925,2937,2949,2953,2957,2974,2981,3001,3005,3009,3013,3030,3036,3057,3062],{"__ignoreMap":159},[164,2909,2910,2913],{"class":166,"line":167},[164,2911,2912],{"class":330},".card-list",[164,2914,213],{"class":170},[164,2916,2917,2919,2921,2923],{"class":166,"line":185},[164,2918,2114],{"class":218},[164,2920,222],{"class":170},[164,2922,2278],{"class":218},[164,2924,228],{"class":170},[164,2926,2927,2929,2931,2933,2935],{"class":166,"line":231},[164,2928,2285],{"class":218},[164,2930,222],{"class":170},[164,2932,1397],{"class":218},[164,2934,2302],{"class":831},[164,2936,228],{"class":170},[164,2938,2939,2941,2943,2945,2947],{"class":166,"line":364},[164,2940,2201],{"class":218},[164,2942,222],{"class":170},[164,2944,828],{"class":218},[164,2946,832],{"class":831},[164,2948,228],{"class":170},[164,2950,2951],{"class":166,"line":383},[164,2952,234],{"class":170},[164,2954,2955],{"class":166,"line":408},[164,2956,574],{"emptyLinePlaceholder":573},[164,2958,2959,2961,2963,2965,2967,2970,2972],{"class":166,"line":423},[164,2960,2850],{"class":831},[164,2962,2853],{"class":170},[164,2964,2856],{"class":218},[164,2966,222],{"class":170},[164,2968,2969],{"class":218},"640",[164,2971,832],{"class":831},[164,2973,2866],{"class":170},[164,2975,2976,2979],{"class":166,"line":449},[164,2977,2978],{"class":330},"  .card-list",[164,2980,213],{"class":170},[164,2982,2983,2985,2987,2989,2991,2993,2995,2997,2999],{"class":166,"line":459},[164,2984,2878],{"class":218},[164,2986,222],{"class":170},[164,2988,2290],{"class":218},[164,2990,1251],{"class":170},[164,2992,1033],{"class":218},[164,2994,536],{"class":170},[164,2996,1397],{"class":218},[164,2998,2302],{"class":831},[164,3000,1266],{"class":170},[164,3002,3003],{"class":166,"line":469},[164,3004,2712],{"class":170},[164,3006,3007],{"class":166,"line":482},[164,3008,234],{"class":170},[164,3010,3011],{"class":166,"line":496},[164,3012,574],{"emptyLinePlaceholder":573},[164,3014,3015,3017,3019,3021,3023,3026,3028],{"class":166,"line":505},[164,3016,2850],{"class":831},[164,3018,2853],{"class":170},[164,3020,2856],{"class":218},[164,3022,222],{"class":170},[164,3024,3025],{"class":218},"1024",[164,3027,832],{"class":831},[164,3029,2866],{"class":170},[164,3031,3032,3034],{"class":166,"line":2781},[164,3033,2978],{"class":330},[164,3035,213],{"class":170},[164,3037,3039,3041,3043,3045,3047,3049,3051,3053,3055],{"class":166,"line":3038},15,[164,3040,2878],{"class":218},[164,3042,222],{"class":170},[164,3044,2290],{"class":218},[164,3046,1251],{"class":170},[164,3048,2295],{"class":218},[164,3050,536],{"class":170},[164,3052,1397],{"class":218},[164,3054,2302],{"class":831},[164,3056,1266],{"class":170},[164,3058,3060],{"class":166,"line":3059},16,[164,3061,2712],{"class":170},[164,3063,3065],{"class":166,"line":3064},17,[164,3066,234],{"class":170},[81,3068,3070],{"id":3069},"bonnes-pratiques-responsive","Bonnes pratiques responsive",[40,3072,3073,3076,3079,3082,3085],{},[43,3074,3075],{},"pensez d'abord mobile ;",[43,3077,3078],{},"utilisez des unités flexibles ;",[43,3080,3081],{},"évitez les largeurs fixes partout ;",[43,3083,3084],{},"testez sur plusieurs tailles d'écran ;",[43,3086,3087],{},"gardez des espacements raisonnables.",[15,3089,3091],{"id":3090},"_18-exemple-complet-de-page-stylée","18. Exemple complet de page stylée",[20,3093,3094],{},"Voici un exemple simple de structure HTML avec son CSS associé.",[81,3096,3097],{"id":158},"HTML",[154,3099,3101],{"className":156,"code":3100,"language":158,"meta":159,"style":159},"\u003Cbody>\n  \u003Cheader class=\"header\">\n    \u003Ch1 class=\"logo\">Mon portfolio\u003C\u002Fh1>\n    \u003Cnav class=\"nav\">\n      \u003Ca href=\"#apropos\">À propos\u003C\u002Fa>\n      \u003Ca href=\"#projets\">Projets\u003C\u002Fa>\n      \u003Ca href=\"#contact\">Contact\u003C\u002Fa>\n    \u003C\u002Fnav>\n  \u003C\u002Fheader>\n\n  \u003Cmain class=\"main\">\n    \u003Csection class=\"hero\">\n      \u003Ch2>Développeur web\u003C\u002Fh2>\n      \u003Cp>Je crée des interfaces modernes, propres et efficaces.\u003C\u002Fp>\n    \u003C\u002Fsection>\n\n    \u003Csection class=\"cards\">\n      \u003Carticle class=\"card\">Projet 1\u003C\u002Farticle>\n      \u003Carticle class=\"card\">Projet 2\u003C\u002Farticle>\n      \u003Carticle class=\"card\">Projet 3\u003C\u002Farticle>\n    \u003C\u002Fsection>\n  \u003C\u002Fmain>\n\u003C\u002Fbody>\n",[161,3102,3103,3111,3127,3147,3163,3185,3205,3225,3234,3242,3246,3262,3277,3290,3303,3311,3315,3330,3350,3370,3390,3399,3408],{"__ignoreMap":159},[164,3104,3105,3107,3109],{"class":166,"line":167},[164,3106,171],{"class":170},[164,3108,464],{"class":174},[164,3110,182],{"class":170},[164,3112,3113,3115,3118,3120,3122,3125],{"class":166,"line":185},[164,3114,356],{"class":170},[164,3116,3117],{"class":174},"header",[164,3119,992],{"class":330},[164,3121,345],{"class":170},[164,3123,3124],{"class":348},"\"header\"",[164,3126,182],{"class":170},[164,3128,3129,3131,3133,3135,3137,3140,3143,3145],{"class":166,"line":231},[164,3130,367],{"class":170},[164,3132,10],{"class":174},[164,3134,992],{"class":330},[164,3136,345],{"class":170},[164,3138,3139],{"class":348},"\"logo\"",[164,3141,3142],{"class":170},">Mon portfolio\u003C\u002F",[164,3144,10],{"class":174},[164,3146,182],{"class":170},[164,3148,3149,3151,3154,3156,3158,3161],{"class":166,"line":364},[164,3150,367],{"class":170},[164,3152,3153],{"class":174},"nav",[164,3155,992],{"class":330},[164,3157,345],{"class":170},[164,3159,3160],{"class":348},"\"nav\"",[164,3162,182],{"class":170},[164,3164,3165,3168,3171,3173,3175,3178,3181,3183],{"class":166,"line":383},[164,3166,3167],{"class":170},"      \u003C",[164,3169,3170],{"class":174},"a",[164,3172,439],{"class":330},[164,3174,345],{"class":170},[164,3176,3177],{"class":348},"\"#apropos\"",[164,3179,3180],{"class":170},">À propos\u003C\u002F",[164,3182,3170],{"class":174},[164,3184,182],{"class":170},[164,3186,3187,3189,3191,3193,3195,3198,3201,3203],{"class":166,"line":408},[164,3188,3167],{"class":170},[164,3190,3170],{"class":174},[164,3192,439],{"class":330},[164,3194,345],{"class":170},[164,3196,3197],{"class":348},"\"#projets\"",[164,3199,3200],{"class":170},">Projets\u003C\u002F",[164,3202,3170],{"class":174},[164,3204,182],{"class":170},[164,3206,3207,3209,3211,3213,3215,3218,3221,3223],{"class":166,"line":423},[164,3208,3167],{"class":170},[164,3210,3170],{"class":174},[164,3212,439],{"class":330},[164,3214,345],{"class":170},[164,3216,3217],{"class":348},"\"#contact\"",[164,3219,3220],{"class":170},">Contact\u003C\u002F",[164,3222,3170],{"class":174},[164,3224,182],{"class":170},[164,3226,3227,3230,3232],{"class":166,"line":449},[164,3228,3229],{"class":170},"    \u003C\u002F",[164,3231,3153],{"class":174},[164,3233,182],{"class":170},[164,3235,3236,3238,3240],{"class":166,"line":459},[164,3237,452],{"class":170},[164,3239,3117],{"class":174},[164,3241,182],{"class":170},[164,3243,3244],{"class":166,"line":469},[164,3245,574],{"emptyLinePlaceholder":573},[164,3247,3248,3250,3253,3255,3257,3260],{"class":166,"line":482},[164,3249,356],{"class":170},[164,3251,3252],{"class":174},"main",[164,3254,992],{"class":330},[164,3256,345],{"class":170},[164,3258,3259],{"class":348},"\"main\"",[164,3261,182],{"class":170},[164,3263,3264,3266,3268,3270,3272,3275],{"class":166,"line":496},[164,3265,367],{"class":170},[164,3267,1056],{"class":174},[164,3269,992],{"class":330},[164,3271,345],{"class":170},[164,3273,3274],{"class":348},"\"hero\"",[164,3276,182],{"class":170},[164,3278,3279,3281,3283,3286,3288],{"class":166,"line":505},[164,3280,3167],{"class":170},[164,3282,15],{"class":174},[164,3284,3285],{"class":170},">Développeur web\u003C\u002F",[164,3287,15],{"class":174},[164,3289,182],{"class":170},[164,3291,3292,3294,3296,3299,3301],{"class":166,"line":2781},[164,3293,3167],{"class":170},[164,3295,20],{"class":174},[164,3297,3298],{"class":170},">Je crée des interfaces modernes, propres et efficaces.\u003C\u002F",[164,3300,20],{"class":174},[164,3302,182],{"class":170},[164,3304,3305,3307,3309],{"class":166,"line":3038},[164,3306,3229],{"class":170},[164,3308,1056],{"class":174},[164,3310,182],{"class":170},[164,3312,3313],{"class":166,"line":3059},[164,3314,574],{"emptyLinePlaceholder":573},[164,3316,3317,3319,3321,3323,3325,3328],{"class":166,"line":3064},[164,3318,367],{"class":170},[164,3320,1056],{"class":174},[164,3322,992],{"class":330},[164,3324,345],{"class":170},[164,3326,3327],{"class":348},"\"cards\"",[164,3329,182],{"class":170},[164,3331,3333,3335,3337,3339,3341,3343,3346,3348],{"class":166,"line":3332},18,[164,3334,3167],{"class":170},[164,3336,1132],{"class":174},[164,3338,992],{"class":330},[164,3340,345],{"class":170},[164,3342,997],{"class":348},[164,3344,3345],{"class":170},">Projet 1\u003C\u002F",[164,3347,1132],{"class":174},[164,3349,182],{"class":170},[164,3351,3353,3355,3357,3359,3361,3363,3366,3368],{"class":166,"line":3352},19,[164,3354,3167],{"class":170},[164,3356,1132],{"class":174},[164,3358,992],{"class":330},[164,3360,345],{"class":170},[164,3362,997],{"class":348},[164,3364,3365],{"class":170},">Projet 2\u003C\u002F",[164,3367,1132],{"class":174},[164,3369,182],{"class":170},[164,3371,3373,3375,3377,3379,3381,3383,3386,3388],{"class":166,"line":3372},20,[164,3374,3167],{"class":170},[164,3376,1132],{"class":174},[164,3378,992],{"class":330},[164,3380,345],{"class":170},[164,3382,997],{"class":348},[164,3384,3385],{"class":170},">Projet 3\u003C\u002F",[164,3387,1132],{"class":174},[164,3389,182],{"class":170},[164,3391,3393,3395,3397],{"class":166,"line":3392},21,[164,3394,3229],{"class":170},[164,3396,1056],{"class":174},[164,3398,182],{"class":170},[164,3400,3402,3404,3406],{"class":166,"line":3401},22,[164,3403,452],{"class":170},[164,3405,3252],{"class":174},[164,3407,182],{"class":170},[164,3409,3411,3413,3415],{"class":166,"line":3410},23,[164,3412,508],{"class":170},[164,3414,464],{"class":174},[164,3416,182],{"class":170},[81,3418,3419],{"id":204},"CSS",[154,3421,3423],{"className":202,"code":3422,"language":204,"meta":159,"style":159},"* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  font-family: Arial, sans-serif;\n  color: #222;\n  background: #f7f7f7;\n}\n\n.header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 20px 32px;\n  background: white;\n  border-bottom: 1px solid #e5e5e5;\n}\n\n.nav {\n  display: flex;\n  gap: 16px;\n}\n\n.main {\n  max-width: 1100px;\n  margin: 0 auto;\n  padding: 40px 24px;\n}\n\n.hero {\n  margin-bottom: 32px;\n}\n\n.cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 16px;\n}\n\n.card {\n  background: white;\n  padding: 24px;\n  border-radius: 12px;\n  border: 1px solid #e5e5e5;\n}\n",[161,3424,3425,3431,3441,3445,3449,3455,3465,3479,3489,3499,3503,3507,3514,3524,3534,3544,3561,3571,3588,3592,3596,3602,3612,3624,3629,3634,3642,3657,3671,3690,3695,3700,3707,3721,3726,3731,3739,3750,3785,3798,3803,3808,3815,3826,3839,3852,3869],{"__ignoreMap":159},[164,3426,3427,3429],{"class":166,"line":167},[164,3428,1643],{"class":174},[164,3430,213],{"class":170},[164,3432,3433,3435,3437,3439],{"class":166,"line":185},[164,3434,1650],{"class":218},[164,3436,222],{"class":170},[164,3438,1655],{"class":218},[164,3440,228],{"class":170},[164,3442,3443],{"class":166,"line":231},[164,3444,234],{"class":170},[164,3446,3447],{"class":166,"line":364},[164,3448,574],{"emptyLinePlaceholder":573},[164,3450,3451,3453],{"class":166,"line":383},[164,3452,464],{"class":174},[164,3454,213],{"class":170},[164,3456,3457,3459,3461,3463],{"class":166,"line":408},[164,3458,1587],{"class":218},[164,3460,222],{"class":170},[164,3462,1259],{"class":218},[164,3464,228],{"class":170},[164,3466,3467,3469,3471,3473,3475,3477],{"class":166,"line":423},[164,3468,528],{"class":218},[164,3470,222],{"class":170},[164,3472,533],{"class":218},[164,3474,536],{"class":170},[164,3476,539],{"class":218},[164,3478,228],{"class":170},[164,3480,3481,3483,3485,3487],{"class":166,"line":449},[164,3482,219],{"class":218},[164,3484,222],{"class":170},[164,3486,562],{"class":218},[164,3488,228],{"class":170},[164,3490,3491,3493,3495,3497],{"class":166,"line":459},[164,3492,546],{"class":218},[164,3494,222],{"class":170},[164,3496,551],{"class":218},[164,3498,228],{"class":170},[164,3500,3501],{"class":166,"line":469},[164,3502,234],{"class":170},[164,3504,3505],{"class":166,"line":482},[164,3506,574],{"emptyLinePlaceholder":573},[164,3508,3509,3512],{"class":166,"line":496},[164,3510,3511],{"class":330},".header",[164,3513,213],{"class":170},[164,3515,3516,3518,3520,3522],{"class":166,"line":505},[164,3517,2114],{"class":218},[164,3519,222],{"class":170},[164,3521,2119],{"class":218},[164,3523,228],{"class":170},[164,3525,3526,3528,3530,3532],{"class":166,"line":2781},[164,3527,2126],{"class":218},[164,3529,222],{"class":170},[164,3531,2131],{"class":218},[164,3533,228],{"class":170},[164,3535,3536,3538,3540,3542],{"class":166,"line":3038},[164,3537,2138],{"class":218},[164,3539,222],{"class":170},[164,3541,1819],{"class":218},[164,3543,228],{"class":170},[164,3545,3546,3548,3550,3552,3554,3557,3559],{"class":166,"line":3059},[164,3547,1028],{"class":218},[164,3549,222],{"class":170},[164,3551,1559],{"class":218},[164,3553,832],{"class":831},[164,3555,3556],{"class":218}," 32",[164,3558,832],{"class":831},[164,3560,228],{"class":170},[164,3562,3563,3565,3567,3569],{"class":166,"line":3064},[164,3564,546],{"class":218},[164,3566,222],{"class":170},[164,3568,968],{"class":218},[164,3570,228],{"class":170},[164,3572,3573,3576,3578,3580,3582,3584,3586],{"class":166,"line":3332},[164,3574,3575],{"class":218},"  border-bottom",[164,3577,222],{"class":170},[164,3579,1397],{"class":218},[164,3581,832],{"class":831},[164,3583,1577],{"class":218},[164,3585,2001],{"class":218},[164,3587,228],{"class":170},[164,3589,3590],{"class":166,"line":3352},[164,3591,234],{"class":170},[164,3593,3594],{"class":166,"line":3372},[164,3595,574],{"emptyLinePlaceholder":573},[164,3597,3598,3600],{"class":166,"line":3392},[164,3599,2107],{"class":330},[164,3601,213],{"class":170},[164,3603,3604,3606,3608,3610],{"class":166,"line":3401},[164,3605,2114],{"class":218},[164,3607,222],{"class":170},[164,3609,2119],{"class":218},[164,3611,228],{"class":170},[164,3613,3614,3616,3618,3620,3622],{"class":166,"line":3410},[164,3615,2201],{"class":218},[164,3617,222],{"class":170},[164,3619,828],{"class":218},[164,3621,832],{"class":831},[164,3623,228],{"class":170},[164,3625,3627],{"class":166,"line":3626},24,[164,3628,234],{"class":170},[164,3630,3632],{"class":166,"line":3631},25,[164,3633,574],{"emptyLinePlaceholder":573},[164,3635,3637,3640],{"class":166,"line":3636},26,[164,3638,3639],{"class":330},".main",[164,3641,213],{"class":170},[164,3643,3645,3648,3650,3653,3655],{"class":166,"line":3644},27,[164,3646,3647],{"class":218},"  max-width",[164,3649,222],{"class":170},[164,3651,3652],{"class":218},"1100",[164,3654,832],{"class":831},[164,3656,228],{"class":170},[164,3658,3660,3662,3664,3666,3669],{"class":166,"line":3659},28,[164,3661,1587],{"class":218},[164,3663,222],{"class":170},[164,3665,1259],{"class":218},[164,3667,3668],{"class":218}," auto",[164,3670,228],{"class":170},[164,3672,3674,3676,3678,3681,3683,3686,3688],{"class":166,"line":3673},29,[164,3675,1028],{"class":218},[164,3677,222],{"class":170},[164,3679,3680],{"class":218},"40",[164,3682,832],{"class":831},[164,3684,3685],{"class":218}," 24",[164,3687,832],{"class":831},[164,3689,228],{"class":170},[164,3691,3693],{"class":166,"line":3692},30,[164,3694,234],{"class":170},[164,3696,3698],{"class":166,"line":3697},31,[164,3699,574],{"emptyLinePlaceholder":573},[164,3701,3703,3705],{"class":166,"line":3702},32,[164,3704,1472],{"class":330},[164,3706,213],{"class":170},[164,3708,3710,3713,3715,3717,3719],{"class":166,"line":3709},33,[164,3711,3712],{"class":218},"  margin-bottom",[164,3714,222],{"class":170},[164,3716,1357],{"class":218},[164,3718,832],{"class":831},[164,3720,228],{"class":170},[164,3722,3724],{"class":166,"line":3723},34,[164,3725,234],{"class":170},[164,3727,3729],{"class":166,"line":3728},35,[164,3730,574],{"emptyLinePlaceholder":573},[164,3732,3734,3737],{"class":166,"line":3733},36,[164,3735,3736],{"class":330},".cards",[164,3738,213],{"class":170},[164,3740,3742,3744,3746,3748],{"class":166,"line":3741},37,[164,3743,2114],{"class":218},[164,3745,222],{"class":170},[164,3747,2278],{"class":218},[164,3749,228],{"class":170},[164,3751,3753,3755,3757,3759,3761,3764,3766,3769,3771,3774,3776,3778,3780,3782],{"class":166,"line":3752},38,[164,3754,2285],{"class":218},[164,3756,222],{"class":170},[164,3758,2290],{"class":218},[164,3760,1251],{"class":170},[164,3762,3763],{"class":218},"auto-fit",[164,3765,536],{"class":170},[164,3767,3768],{"class":218},"minmax",[164,3770,1251],{"class":170},[164,3772,3773],{"class":218},"220",[164,3775,832],{"class":831},[164,3777,536],{"class":170},[164,3779,1397],{"class":218},[164,3781,2302],{"class":831},[164,3783,3784],{"class":170},"));\n",[164,3786,3788,3790,3792,3794,3796],{"class":166,"line":3787},39,[164,3789,2201],{"class":218},[164,3791,222],{"class":170},[164,3793,828],{"class":218},[164,3795,832],{"class":831},[164,3797,228],{"class":170},[164,3799,3801],{"class":166,"line":3800},40,[164,3802,234],{"class":170},[164,3804,3806],{"class":166,"line":3805},41,[164,3807,574],{"emptyLinePlaceholder":573},[164,3809,3811,3813],{"class":166,"line":3810},42,[164,3812,957],{"class":330},[164,3814,213],{"class":170},[164,3816,3818,3820,3822,3824],{"class":166,"line":3817},43,[164,3819,546],{"class":218},[164,3821,222],{"class":170},[164,3823,968],{"class":218},[164,3825,228],{"class":170},[164,3827,3829,3831,3833,3835,3837],{"class":166,"line":3828},44,[164,3830,1028],{"class":218},[164,3832,222],{"class":170},[164,3834,2396],{"class":218},[164,3836,832],{"class":831},[164,3838,228],{"class":170},[164,3840,3842,3844,3846,3848,3850],{"class":166,"line":3841},45,[164,3843,2027],{"class":218},[164,3845,222],{"class":170},[164,3847,2032],{"class":218},[164,3849,832],{"class":831},[164,3851,228],{"class":170},[164,3853,3855,3857,3859,3861,3863,3865,3867],{"class":166,"line":3854},46,[164,3856,1568],{"class":218},[164,3858,222],{"class":170},[164,3860,1397],{"class":218},[164,3862,832],{"class":831},[164,3864,1577],{"class":218},[164,3866,2001],{"class":218},[164,3868,228],{"class":170},[164,3870,3872],{"class":166,"line":3871},47,[164,3873,234],{"class":170},[20,3875,3876],{},"Cet exemple rassemble plusieurs notions vues dans le chapitre : structure, typographie, espace, flexbox et grid.",[15,3878,3880],{"id":3879},"_19-les-erreurs-fréquentes","19. Les erreurs fréquentes",[81,3882,3884],{"id":3883},"oublier-le-point-virgule-nest-pas-toujours-grave-mais-rester-cohérent-est-important","Oublier le point-virgule n'est pas toujours grave, mais rester cohérent est important",[20,3886,3887],{},"La syntaxe CSS est assez souple, mais il faut garder un code propre et régulier.",[81,3889,3891],{"id":3890},"mal-écrire-un-sélecteur","Mal écrire un sélecteur",[154,3893,3895],{"className":202,"code":3894,"language":204,"meta":159,"style":159},".card title {\n  color: red;\n}\n",[161,3896,3897,3906,3916],{"__ignoreMap":159},[164,3898,3899,3901,3904],{"class":166,"line":167},[164,3900,957],{"class":330},[164,3902,3903],{"class":174}," title",[164,3905,213],{"class":170},[164,3907,3908,3910,3912,3914],{"class":166,"line":185},[164,3909,219],{"class":218},[164,3911,222],{"class":170},[164,3913,1189],{"class":218},[164,3915,228],{"class":170},[164,3917,3918],{"class":166,"line":231},[164,3919,234],{"class":170},[20,3921,3922],{},"Ici, le sélecteur ne cible pas ce qu'on veut réellement.",[81,3924,3926],{"id":3925},"confondre-marge-et-padding","Confondre marge et padding",[40,3928,3929,3934],{},[43,3930,3931,3933],{},[161,3932,879],{}," = espace à l'extérieur ;",[43,3935,3936,3938],{},[161,3937,884],{}," = espace à l'intérieur.",[81,3940,3942],{"id":3941},"utiliser-trop-de-styles-inline","Utiliser trop de styles inline",[20,3944,3945],{},"Le style en ligne rend le code plus difficile à maintenir.",[81,3947,3949],{"id":3948},"oublier-le-responsive","Oublier le responsive",[20,3951,3952],{},"Un design beau sur ordinateur peut devenir inutilisable sur mobile si on n'y pense pas dès le départ.",[15,3954,3956],{"id":3955},"_20-bonnes-pratiques-à-retenir","20. Bonnes pratiques à retenir",[40,3958,3959,3962,3965,3968,3971,3974,3977],{},[43,3960,3961],{},"garder des sélecteurs simples ;",[43,3963,3964],{},"éviter de surcharger les styles ;",[43,3966,3967],{},"utiliser des noms de classes clairs ;",[43,3969,3970],{},"penser à l'accessibilité ;",[43,3972,3973],{},"réutiliser les valeurs cohérentes ;",[43,3975,3976],{},"travailler mobile-first quand c'est possible ;",[43,3978,3979],{},"tester le rendu sur plusieurs écrans.",[15,3981,3983],{"id":3982},"_21-résumé","21. Résumé",[20,3985,3986],{},"Dans ce tutoriel, nous avons vu :",[40,3988,3989,3992,3995,3998,4001,4004,4007],{},[43,3990,3991],{},"ce qu'est CSS ;",[43,3993,3994],{},"comment CSS fonctionne avec HTML ;",[43,3996,3997],{},"les sélecteurs, les propriétés et les valeurs ;",[43,3999,4000],{},"les couleurs, les unités, la typographie et le modèle de boîte ;",[43,4002,4003],{},"Flexbox et Grid ;",[43,4005,4006],{},"les positions, les pseudo-classes, les animations et le responsive design ;",[43,4008,4009],{},"les bonnes pratiques pour écrire du CSS propre.",[20,4011,4012],{},"CSS est un outil essentiel pour construire des interfaces web modernes. Plus vous maîtrisez ses bases, plus vous pourrez créer des pages lisibles, agréables et adaptables.",[15,4014,4016],{"id":4015},"exercices","Exercices",[81,4018,4020],{"id":4019},"exercice-1","Exercice 1",[20,4022,4023],{},"Créez un style pour un titre principal avec une couleur, une taille et un alignement.",[81,4025,4027],{"id":4026},"exercice-2","Exercice 2",[20,4029,4030],{},"Créez une carte avec une bordure, du padding, une couleur de fond et des coins arrondis.",[81,4032,4034],{"id":4033},"exercice-3","Exercice 3",[20,4036,4037],{},"Créez une barre de navigation avec Flexbox.",[81,4039,4041],{"id":4040},"exercice-4","Exercice 4",[20,4043,4044],{},"Créez une grille de trois colonnes avec Grid.",[81,4046,4048],{"id":4047},"exercice-5","Exercice 5",[20,4050,4051],{},"Ajoutez une media query pour modifier votre grille sur les petits écrans.",[15,4053,4055],{"id":4054},"corrigés","Corrigés",[81,4057,4059],{"id":4058},"correction-exercice-1","Correction exercice 1",[154,4061,4063],{"className":202,"code":4062,"language":204,"meta":159,"style":159},"h1 {\n  color: #1d4ed8;\n  font-size: 32px;\n  text-align: center;\n}\n",[161,4064,4065,4071,4081,4093,4103],{"__ignoreMap":159},[164,4066,4067,4069],{"class":166,"line":167},[164,4068,10],{"class":174},[164,4070,213],{"class":170},[164,4072,4073,4075,4077,4079],{"class":166,"line":185},[164,4074,219],{"class":218},[164,4076,222],{"class":170},[164,4078,589],{"class":218},[164,4080,228],{"class":170},[164,4082,4083,4085,4087,4089,4091],{"class":166,"line":231},[164,4084,823],{"class":218},[164,4086,222],{"class":170},[164,4088,1357],{"class":218},[164,4090,832],{"class":831},[164,4092,228],{"class":170},[164,4094,4095,4097,4099,4101],{"class":166,"line":364},[164,4096,1814],{"class":218},[164,4098,222],{"class":170},[164,4100,1819],{"class":218},[164,4102,228],{"class":170},[164,4104,4105],{"class":166,"line":383},[164,4106,234],{"class":170},[81,4108,4110],{"id":4109},"correction-exercice-2","Correction exercice 2",[154,4112,4114],{"className":202,"code":4113,"language":204,"meta":159,"style":159},".card {\n  background: white;\n  padding: 24px;\n  border: 1px solid #e5e5e5;\n  border-radius: 12px;\n}\n",[161,4115,4116,4122,4132,4144,4160,4172],{"__ignoreMap":159},[164,4117,4118,4120],{"class":166,"line":167},[164,4119,957],{"class":330},[164,4121,213],{"class":170},[164,4123,4124,4126,4128,4130],{"class":166,"line":185},[164,4125,546],{"class":218},[164,4127,222],{"class":170},[164,4129,968],{"class":218},[164,4131,228],{"class":170},[164,4133,4134,4136,4138,4140,4142],{"class":166,"line":231},[164,4135,1028],{"class":218},[164,4137,222],{"class":170},[164,4139,2396],{"class":218},[164,4141,832],{"class":831},[164,4143,228],{"class":170},[164,4145,4146,4148,4150,4152,4154,4156,4158],{"class":166,"line":364},[164,4147,1568],{"class":218},[164,4149,222],{"class":170},[164,4151,1397],{"class":218},[164,4153,832],{"class":831},[164,4155,1577],{"class":218},[164,4157,2001],{"class":218},[164,4159,228],{"class":170},[164,4161,4162,4164,4166,4168,4170],{"class":166,"line":383},[164,4163,2027],{"class":218},[164,4165,222],{"class":170},[164,4167,2032],{"class":218},[164,4169,832],{"class":831},[164,4171,228],{"class":170},[164,4173,4174],{"class":166,"line":408},[164,4175,234],{"class":170},[81,4177,4179],{"id":4178},"correction-exercice-3","Correction exercice 3",[154,4181,4182],{"className":202,"code":2100,"language":204,"meta":159,"style":159},[161,4183,4184,4190,4200,4210,4220],{"__ignoreMap":159},[164,4185,4186,4188],{"class":166,"line":167},[164,4187,2107],{"class":330},[164,4189,213],{"class":170},[164,4191,4192,4194,4196,4198],{"class":166,"line":185},[164,4193,2114],{"class":218},[164,4195,222],{"class":170},[164,4197,2119],{"class":218},[164,4199,228],{"class":170},[164,4201,4202,4204,4206,4208],{"class":166,"line":231},[164,4203,2126],{"class":218},[164,4205,222],{"class":170},[164,4207,2131],{"class":218},[164,4209,228],{"class":170},[164,4211,4212,4214,4216,4218],{"class":166,"line":364},[164,4213,2138],{"class":218},[164,4215,222],{"class":170},[164,4217,1819],{"class":218},[164,4219,228],{"class":170},[164,4221,4222],{"class":166,"line":383},[164,4223,234],{"class":170},[81,4225,4227],{"id":4226},"correction-exercice-4","Correction exercice 4",[154,4229,4231],{"className":202,"code":4230,"language":204,"meta":159,"style":159},".grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 16px;\n}\n",[161,4232,4233,4239,4249,4269,4281],{"__ignoreMap":159},[164,4234,4235,4237],{"class":166,"line":167},[164,4236,2267],{"class":330},[164,4238,213],{"class":170},[164,4240,4241,4243,4245,4247],{"class":166,"line":185},[164,4242,2114],{"class":218},[164,4244,222],{"class":170},[164,4246,2278],{"class":218},[164,4248,228],{"class":170},[164,4250,4251,4253,4255,4257,4259,4261,4263,4265,4267],{"class":166,"line":231},[164,4252,2285],{"class":218},[164,4254,222],{"class":170},[164,4256,2290],{"class":218},[164,4258,1251],{"class":170},[164,4260,2295],{"class":218},[164,4262,536],{"class":170},[164,4264,1397],{"class":218},[164,4266,2302],{"class":831},[164,4268,1266],{"class":170},[164,4270,4271,4273,4275,4277,4279],{"class":166,"line":364},[164,4272,2201],{"class":218},[164,4274,222],{"class":170},[164,4276,828],{"class":218},[164,4278,832],{"class":831},[164,4280,228],{"class":170},[164,4282,4283],{"class":166,"line":383},[164,4284,234],{"class":170},[81,4286,4288],{"id":4287},"correction-exercice-5","Correction exercice 5",[154,4290,4292],{"className":202,"code":4291,"language":204,"meta":159,"style":159},".grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n}\n\n@media (min-width: 768px) {\n  .grid {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n",[161,4293,4294,4300,4310,4322,4334,4338,4342,4358,4365,4385,4389],{"__ignoreMap":159},[164,4295,4296,4298],{"class":166,"line":167},[164,4297,2267],{"class":330},[164,4299,213],{"class":170},[164,4301,4302,4304,4306,4308],{"class":166,"line":185},[164,4303,2114],{"class":218},[164,4305,222],{"class":170},[164,4307,2278],{"class":218},[164,4309,228],{"class":170},[164,4311,4312,4314,4316,4318,4320],{"class":166,"line":231},[164,4313,2285],{"class":218},[164,4315,222],{"class":170},[164,4317,1397],{"class":218},[164,4319,2302],{"class":831},[164,4321,228],{"class":170},[164,4323,4324,4326,4328,4330,4332],{"class":166,"line":364},[164,4325,2201],{"class":218},[164,4327,222],{"class":170},[164,4329,828],{"class":218},[164,4331,832],{"class":831},[164,4333,228],{"class":170},[164,4335,4336],{"class":166,"line":383},[164,4337,234],{"class":170},[164,4339,4340],{"class":166,"line":408},[164,4341,574],{"emptyLinePlaceholder":573},[164,4343,4344,4346,4348,4350,4352,4354,4356],{"class":166,"line":423},[164,4345,2850],{"class":831},[164,4347,2853],{"class":170},[164,4349,2856],{"class":218},[164,4351,222],{"class":170},[164,4353,2861],{"class":218},[164,4355,832],{"class":831},[164,4357,2866],{"class":170},[164,4359,4360,4363],{"class":166,"line":449},[164,4361,4362],{"class":330},"  .grid",[164,4364,213],{"class":170},[164,4366,4367,4369,4371,4373,4375,4377,4379,4381,4383],{"class":166,"line":459},[164,4368,2878],{"class":218},[164,4370,222],{"class":170},[164,4372,2290],{"class":218},[164,4374,1251],{"class":170},[164,4376,2295],{"class":218},[164,4378,536],{"class":170},[164,4380,1397],{"class":218},[164,4382,2302],{"class":831},[164,4384,1266],{"class":170},[164,4386,4387],{"class":166,"line":469},[164,4388,2712],{"class":170},[164,4390,4391],{"class":166,"line":482},[164,4392,234],{"class":170},[15,4394,4396],{"id":4395},"prochaine-étape","Prochaine étape",[20,4398,4399],{},"Une fois CSS bien compris, vous pouvez aller plus loin avec les préprocesseurs, les systèmes de design ou les frameworks CSS. Mais avant cela, le plus important est de bien maîtriser les bases vues dans ce chapitre.",[90,4401,4402],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":159,"searchDepth":185,"depth":185,"links":4404},[4405,4406,4407,4413,4414,4420,4425,4430,4437,4444,4451,4459,4468,4474,4480,4486,4491,4498,4508,4512,4518,4522,4529,4530,4531,4538,4545],{"id":17,"depth":185,"text":18},{"id":34,"depth":185,"text":35},{"id":75,"depth":185,"text":76,"children":4408},[4409,4410,4411,4412],{"id":83,"depth":231,"text":84},{"id":90,"depth":231,"text":91},{"id":97,"depth":231,"text":98},{"id":104,"depth":231,"text":105},{"id":137,"depth":185,"text":138},{"id":240,"depth":185,"text":241,"children":4415},[4416,4417,4418,4419],{"id":264,"depth":231,"text":265},{"id":276,"depth":231,"text":277},{"id":313,"depth":231,"text":314},{"id":598,"depth":231,"text":599},{"id":621,"depth":185,"text":622,"children":4421},[4422,4423,4424],{"id":633,"depth":231,"text":634},{"id":702,"depth":231,"text":703},{"id":739,"depth":231,"text":740},{"id":778,"depth":185,"text":779,"children":4426},[4427,4428,4429],{"id":841,"depth":231,"text":842},{"id":854,"depth":231,"text":855},{"id":892,"depth":231,"text":893},{"id":908,"depth":185,"text":909,"children":4431},[4432,4433,4434,4435,4436],{"id":912,"depth":231,"text":913},{"id":946,"depth":231,"text":947},{"id":1010,"depth":231,"text":1011},{"id":1077,"depth":231,"text":1078},{"id":1121,"depth":231,"text":1122},{"id":1161,"depth":185,"text":1162,"children":4438},[4439,4440,4441,4442,4443],{"id":1168,"depth":231,"text":1169},{"id":1198,"depth":231,"text":1199},{"id":1228,"depth":231,"text":1229},{"id":1273,"depth":231,"text":1274},{"id":1322,"depth":231,"text":1323},{"id":1329,"depth":185,"text":1330,"children":4445},[4446,4447,4449,4450],{"id":1336,"depth":231,"text":1337},{"id":1371,"depth":231,"text":4448},"em et rem",{"id":1423,"depth":231,"text":1424},{"id":1461,"depth":231,"text":1462},{"id":1501,"depth":185,"text":1502,"children":4452},[4453,4454,4455,4456,4457,4458],{"id":1525,"depth":231,"text":1526},{"id":1602,"depth":231,"text":1603},{"id":884,"depth":231,"text":1609},{"id":1615,"depth":231,"text":1616},{"id":879,"depth":231,"text":1622},{"id":1628,"depth":231,"text":1628},{"id":1667,"depth":185,"text":1668,"children":4460},[4461,4462,4463,4464,4465,4466,4467],{"id":1674,"depth":231,"text":1675},{"id":1705,"depth":231,"text":1706},{"id":1738,"depth":231,"text":1739},{"id":1766,"depth":231,"text":1767},{"id":1797,"depth":231,"text":1798},{"id":1828,"depth":231,"text":1829},{"id":1860,"depth":231,"text":1861},{"id":1867,"depth":185,"text":1868,"children":4469},[4470,4471,4472,4473],{"id":1871,"depth":231,"text":1872},{"id":1903,"depth":231,"text":1904},{"id":1974,"depth":231,"text":1975},{"id":2010,"depth":231,"text":2011},{"id":2043,"depth":185,"text":2044,"children":4475},[4476,4477,4478,4479],{"id":2050,"depth":231,"text":2053},{"id":2059,"depth":231,"text":2062},{"id":2068,"depth":231,"text":2071},{"id":2077,"depth":231,"text":2080},{"id":2089,"depth":185,"text":2090,"children":4481},[4482,4483,4484,4485],{"id":2096,"depth":231,"text":2097},{"id":2151,"depth":231,"text":2152},{"id":2174,"depth":231,"text":2175},{"id":2228,"depth":231,"text":2229},{"id":2249,"depth":185,"text":2250,"children":4487},[4488,4489,4490],{"id":2256,"depth":231,"text":2257},{"id":2323,"depth":231,"text":2324},{"id":2346,"depth":231,"text":2347},{"id":2410,"depth":185,"text":2411,"children":4492},[4493,4494,4495,4496,4497],{"id":2414,"depth":231,"text":2417},{"id":2423,"depth":231,"text":2426},{"id":2432,"depth":231,"text":2435},{"id":2441,"depth":231,"text":2444},{"id":2450,"depth":231,"text":1323},{"id":2456,"depth":185,"text":2457,"children":4499},[4500,4502,4504,4506],{"id":2460,"depth":231,"text":4501},"Pseudo-classe :hover",{"id":2499,"depth":231,"text":4503},"Pseudo-classe :focus",{"id":2537,"depth":231,"text":4505},"Pseudo-élément ::before",{"id":2572,"depth":231,"text":4507},"Pseudo-élément ::after",{"id":2608,"depth":185,"text":2609,"children":4509},[4510,4511],{"id":2612,"depth":231,"text":2613},{"id":2653,"depth":231,"text":2654},{"id":2789,"depth":185,"text":2790,"children":4513},[4514,4515,4516,4517],{"id":2796,"depth":231,"text":2797},{"id":2803,"depth":231,"text":2804},{"id":2901,"depth":231,"text":2902},{"id":3069,"depth":231,"text":3070},{"id":3090,"depth":185,"text":3091,"children":4519},[4520,4521],{"id":158,"depth":231,"text":3097},{"id":204,"depth":231,"text":3419},{"id":3879,"depth":185,"text":3880,"children":4523},[4524,4525,4526,4527,4528],{"id":3883,"depth":231,"text":3884},{"id":3890,"depth":231,"text":3891},{"id":3925,"depth":231,"text":3926},{"id":3941,"depth":231,"text":3942},{"id":3948,"depth":231,"text":3949},{"id":3955,"depth":185,"text":3956},{"id":3982,"depth":185,"text":3983},{"id":4015,"depth":185,"text":4016,"children":4532},[4533,4534,4535,4536,4537],{"id":4019,"depth":231,"text":4020},{"id":4026,"depth":231,"text":4027},{"id":4033,"depth":231,"text":4034},{"id":4040,"depth":231,"text":4041},{"id":4047,"depth":231,"text":4048},{"id":4054,"depth":185,"text":4055,"children":4539},[4540,4541,4542,4543,4544],{"id":4058,"depth":231,"text":4059},{"id":4109,"depth":231,"text":4110},{"id":4178,"depth":231,"text":4179},{"id":4226,"depth":231,"text":4227},{"id":4287,"depth":231,"text":4288},{"id":4395,"depth":185,"text":4396},null,"Un tutoriel complet pour comprendre CSS, apprendre à styliser une page, maîtriser les sélecteurs, le modèle de boîte, Flexbox, Grid, le responsive et les bonnes pratiques.","md",{},"\u002Fblog\u002Fapprendre-css-complet","2026-06-09",{"title":5,"description":4547},"blog\u002Fapprendre-css-complet",[3419,4555,4556],"Débutant","Frontend","AXk_UD-ngXycSI-QKEFvyill5g1K_McFtB2HKBqPeVw",1788219651037]