[{"data":1,"prerenderedAt":926},["ShallowReactive",2],{"page-\u002Fcss\u002Fgrid-et-responsive":3,"pieces-css":883,"autour-\u002Fcss\u002Fgrid-et-responsive":908,"prerequis-\u002Fcss\u002Fgrid-et-responsive":913,"plan-css":915},{"id":4,"title":5,"body":6,"description":856,"extension":857,"ligne":50,"meta":858,"motsCles":859,"navigation":561,"niveau":861,"path":862,"prerequis":863,"ressources":865,"seo":877,"sources":878,"stem":881,"__hash__":882},"docs\u002Fcss\u002F05.grid-et-responsive.md","Grid et responsive",{"type":7,"value":8,"toc":845},"minimark",[9,14,32,36,45,133,139,161,165,168,225,232,235,263,266,270,273,344,350,354,365,402,405,409,416,478,488,498,502,512,693,696,702,706,709,745,787,793,797,841],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,26,29],"ul",{},[18,19,20,21,25],"li",{},"Construire une grille en colonnes avec ",[22,23,24],"code",{},"display: grid",".",[18,27,28],{},"Adapter la disposition à la largeur de l'écran avec une media query.",[18,30,31],{},"Concevoir d'abord pour le mobile, puis élargir.",[10,33,35],{"id":34},"une-grille-de-recettes","Une grille de recettes",[37,38,39,40,44],"p",{},"Flexbox range des éléments sur un seul axe. ",[41,42,43],"strong",{},"CSS Grid"," gère deux axes à la fois : des lignes et des colonnes. Voici une grille de trois colonnes égales :",[46,47,52],"pre",{"className":48,"code":49,"language":50,"meta":51,"style":51},"language-css shiki shiki-themes github-light-default github-dark-default github-dark-default",".recettes {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 1rem;\n}\n","css","",[22,53,54,67,82,112,127],{"__ignoreMap":51},[55,56,59,63],"span",{"class":57,"line":58},"line",1,[55,60,62],{"class":61},"s5iOY",".recettes",[55,64,66],{"class":65},"scfrF"," {\n",[55,68,70,73,76,79],{"class":57,"line":69},2,[55,71,72],{"class":61},"  display",[55,74,75],{"class":65},": ",[55,77,78],{"class":61},"grid",[55,80,81],{"class":65},";\n",[55,83,85,88,90,93,96,99,102,105,109],{"class":57,"line":84},3,[55,86,87],{"class":61},"  grid-template-columns",[55,89,75],{"class":65},[55,91,92],{"class":61},"repeat",[55,94,95],{"class":65},"(",[55,97,98],{"class":61},"3",[55,100,101],{"class":65},", ",[55,103,104],{"class":61},"1",[55,106,108],{"class":107},"sOnC1","fr",[55,110,111],{"class":65},");\n",[55,113,115,118,120,122,125],{"class":57,"line":114},4,[55,116,117],{"class":61},"  gap",[55,119,75],{"class":65},[55,121,104],{"class":61},[55,123,124],{"class":107},"rem",[55,126,81],{"class":65},[55,128,130],{"class":57,"line":129},5,[55,131,132],{"class":65},"}\n",[37,134,135,136,138],{},"Chaque enfant direct de ",[22,137,62],{}," prend une case. Les cartes se rangent de gauche à droite, puis passent à la ligne suivante toutes seules.",[37,140,141,142,144,145,149,150,153,154,156,157,160],{},"L'unité ",[41,143,108],{}," (",[146,147,148],"em",{},"fraction",") est propre à la grille : ",[22,151,152],{},"1fr"," représente une part de l'espace disponible. Avec trois colonnes de ",[22,155,152],{},", chacune prend un tiers. Avec ",[22,158,159],{},"2fr 1fr",", la première colonne est deux fois plus large que la seconde.",[10,162,164],{"id":163},"mélanger-les-largeurs","Mélanger les largeurs",[37,166,167],{},"Tu peux fixer une colonne et laisser l'autre s'adapter :",[46,169,171],{"className":48,"code":170,"language":50,"meta":51,"style":51},".page {\n  display: grid;\n  grid-template-columns: 15rem 1fr;\n  gap: 2rem;\n}\n",[22,172,173,180,190,208,221],{"__ignoreMap":51},[55,174,175,178],{"class":57,"line":58},[55,176,177],{"class":61},".page",[55,179,66],{"class":65},[55,181,182,184,186,188],{"class":57,"line":69},[55,183,72],{"class":61},[55,185,75],{"class":65},[55,187,78],{"class":61},[55,189,81],{"class":65},[55,191,192,194,196,199,201,204,206],{"class":57,"line":84},[55,193,87],{"class":61},[55,195,75],{"class":65},[55,197,198],{"class":61},"15",[55,200,124],{"class":107},[55,202,203],{"class":61}," 1",[55,205,108],{"class":107},[55,207,81],{"class":65},[55,209,210,212,214,217,219],{"class":57,"line":114},[55,211,117],{"class":61},[55,213,75],{"class":65},[55,215,216],{"class":61},"2",[55,218,124],{"class":107},[55,220,81],{"class":65},[55,222,223],{"class":57,"line":129},[55,224,132],{"class":65},[37,226,227,228,231],{},"Une barre latérale de 15rem, et un contenu qui occupe tout le reste. Pour la hauteur des lignes, ",[22,229,230],{},"grid-template-rows"," fonctionne pareil, mais le plus souvent on laisse la hauteur s'adapter au contenu.",[37,233,234],{},"Un élément peut occuper plusieurs colonnes :",[46,236,238],{"className":48,"code":237,"language":50,"meta":51,"style":51},".recette-vedette {\n  grid-column: span 2;\n}\n",[22,239,240,247,259],{"__ignoreMap":51},[55,241,242,245],{"class":57,"line":58},[55,243,244],{"class":61},".recette-vedette",[55,246,66],{"class":65},[55,248,249,252,255,257],{"class":57,"line":69},[55,250,251],{"class":61},"  grid-column",[55,253,254],{"class":65},": span ",[55,256,216],{"class":61},[55,258,81],{"class":65},[55,260,261],{"class":57,"line":84},[55,262,132],{"class":65},[37,264,265],{},"Cette carte s'étend sur deux colonnes.",[10,267,269],{"id":268},"une-grille-qui-sadapte-seule","Une grille qui s'adapte seule",[37,271,272],{},"Cette déclaration crée autant de colonnes que la place le permet, sans media query :",[46,274,276],{"className":48,"code":275,"language":50,"meta":51,"style":51},".recettes {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));\n  gap: 1rem;\n}\n",[22,277,278,284,294,328,340],{"__ignoreMap":51},[55,279,280,282],{"class":57,"line":58},[55,281,62],{"class":61},[55,283,66],{"class":65},[55,285,286,288,290,292],{"class":57,"line":69},[55,287,72],{"class":61},[55,289,75],{"class":65},[55,291,78],{"class":61},[55,293,81],{"class":65},[55,295,296,298,300,302,304,307,309,312,314,317,319,321,323,325],{"class":57,"line":84},[55,297,87],{"class":61},[55,299,75],{"class":65},[55,301,92],{"class":61},[55,303,95],{"class":65},[55,305,306],{"class":61},"auto-fit",[55,308,101],{"class":65},[55,310,311],{"class":61},"minmax",[55,313,95],{"class":65},[55,315,316],{"class":61},"14",[55,318,124],{"class":107},[55,320,101],{"class":65},[55,322,104],{"class":61},[55,324,108],{"class":107},[55,326,327],{"class":65},"));\n",[55,329,330,332,334,336,338],{"class":57,"line":114},[55,331,117],{"class":61},[55,333,75],{"class":65},[55,335,104],{"class":61},[55,337,124],{"class":107},[55,339,81],{"class":65},[55,341,342],{"class":57,"line":129},[55,343,132],{"class":65},[37,345,346,349],{},[22,347,348],{},"minmax(14rem, 1fr)"," signifie « au moins 14rem, au plus une part de l'espace ». Sur un grand écran tu as quatre colonnes, sur un petit une seule. Le navigateur fait le calcul.",[10,351,353],{"id":352},"le-viewport","Le viewport",[37,355,356,357,360,361,364],{},"Un site ",[41,358,359],{},"responsive"," s'adapte à la taille de l'écran : téléphone, tablette, ordinateur. Pour que ça marche sur mobile, la page HTML doit contenir cette balise dans le ",[22,362,363],{},"\u003Chead>"," :",[46,366,370],{"className":367,"code":368,"language":369,"meta":51,"style":51},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n","html",[22,371,372],{"__ignoreMap":51},[55,373,374,377,381,384,387,391,394,396,399],{"class":57,"line":58},[55,375,376],{"class":65},"\u003C",[55,378,380],{"class":379},"s5JFL","meta",[55,382,383],{"class":61}," name",[55,385,386],{"class":65},"=",[55,388,390],{"class":389},"shWOn","\"viewport\"",[55,392,393],{"class":61}," content",[55,395,386],{"class":65},[55,397,398],{"class":389},"\"width=device-width, initial-scale=1\"",[55,400,401],{"class":65},">\n",[37,403,404],{},"Sans elle, un téléphone affiche la page comme sur un grand écran, en miniature.",[10,406,408],{"id":407},"les-media-queries","Les media queries",[37,410,411,412,415],{},"Une ",[41,413,414],{},"media query"," applique des règles seulement quand une condition est vraie, par exemple une largeur d'écran minimale :",[46,417,419],{"className":48,"code":418,"language":50,"meta":51,"style":51},"@media (min-width: 48rem) {\n  .recettes {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n",[22,420,421,441,448,469,474],{"__ignoreMap":51},[55,422,423,426,428,431,433,436,438],{"class":57,"line":58},[55,424,425],{"class":107},"@media",[55,427,144],{"class":65},[55,429,430],{"class":61},"min-width",[55,432,75],{"class":65},[55,434,435],{"class":61},"48",[55,437,124],{"class":107},[55,439,440],{"class":65},") {\n",[55,442,443,446],{"class":57,"line":69},[55,444,445],{"class":61},"  .recettes",[55,447,66],{"class":65},[55,449,450,453,455,457,459,461,463,465,467],{"class":57,"line":84},[55,451,452],{"class":61},"    grid-template-columns",[55,454,75],{"class":65},[55,456,92],{"class":61},[55,458,95],{"class":65},[55,460,216],{"class":61},[55,462,101],{"class":65},[55,464,104],{"class":61},[55,466,108],{"class":107},[55,468,111],{"class":65},[55,470,471],{"class":57,"line":114},[55,472,473],{"class":65},"  }\n",[55,475,476],{"class":57,"line":129},[55,477,132],{"class":65},[37,479,480,481,483,484,487],{},"Les règles entre accolades ne valent que si la fenêtre mesure au moins 48rem (environ 768 px). Utiliser des ",[22,482,124],{}," plutôt que des ",[22,485,486],{},"px"," dans les conditions fait suivre la taille de texte du visiteur.",[37,489,490,491,144,494,497],{},"Le point où la mise en page change s'appelle un ",[41,492,493],{},"point de rupture",[146,495,496],{},"breakpoint","). Choisis-les quand ton contenu devient mal à l'aise, pas d'après un modèle de téléphone.",[10,499,501],{"id":500},"mobile-dabord","Mobile d'abord",[37,503,504,505,508,509,511],{},"La méthode ",[41,506,507],{},"mobile d'abord"," consiste à écrire le style de base pour le petit écran, puis à ajouter des media queries ",[22,510,430],{}," pour élargir.",[46,513,516],{"className":48,"code":514,"filename":515,"language":50,"meta":51,"style":51},"\u002F* petit écran : une colonne *\u002F\n.recettes {\n  display: grid;\n  gap: 1rem;\n}\n\n\u002F* écran moyen : deux colonnes *\u002F\n@media (min-width: 40rem) {\n  .recettes {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n\u002F* grand écran : quatre colonnes *\u002F\n@media (min-width: 64rem) {\n  .recettes {\n    grid-template-columns: repeat(4, 1fr);\n  }\n}\n","style.css",[22,517,518,524,530,540,552,556,563,569,587,594,615,620,625,630,636,654,661,683,688],{"__ignoreMap":51},[55,519,520],{"class":57,"line":58},[55,521,523],{"class":522},"sd6ml","\u002F* petit écran : une colonne *\u002F\n",[55,525,526,528],{"class":57,"line":69},[55,527,62],{"class":61},[55,529,66],{"class":65},[55,531,532,534,536,538],{"class":57,"line":84},[55,533,72],{"class":61},[55,535,75],{"class":65},[55,537,78],{"class":61},[55,539,81],{"class":65},[55,541,542,544,546,548,550],{"class":57,"line":114},[55,543,117],{"class":61},[55,545,75],{"class":65},[55,547,104],{"class":61},[55,549,124],{"class":107},[55,551,81],{"class":65},[55,553,554],{"class":57,"line":129},[55,555,132],{"class":65},[55,557,559],{"class":57,"line":558},6,[55,560,562],{"emptyLinePlaceholder":561},true,"\n",[55,564,566],{"class":57,"line":565},7,[55,567,568],{"class":522},"\u002F* écran moyen : deux colonnes *\u002F\n",[55,570,572,574,576,578,580,583,585],{"class":57,"line":571},8,[55,573,425],{"class":107},[55,575,144],{"class":65},[55,577,430],{"class":61},[55,579,75],{"class":65},[55,581,582],{"class":61},"40",[55,584,124],{"class":107},[55,586,440],{"class":65},[55,588,590,592],{"class":57,"line":589},9,[55,591,445],{"class":61},[55,593,66],{"class":65},[55,595,597,599,601,603,605,607,609,611,613],{"class":57,"line":596},10,[55,598,452],{"class":61},[55,600,75],{"class":65},[55,602,92],{"class":61},[55,604,95],{"class":65},[55,606,216],{"class":61},[55,608,101],{"class":65},[55,610,104],{"class":61},[55,612,108],{"class":107},[55,614,111],{"class":65},[55,616,618],{"class":57,"line":617},11,[55,619,473],{"class":65},[55,621,623],{"class":57,"line":622},12,[55,624,132],{"class":65},[55,626,628],{"class":57,"line":627},13,[55,629,562],{"emptyLinePlaceholder":561},[55,631,633],{"class":57,"line":632},14,[55,634,635],{"class":522},"\u002F* grand écran : quatre colonnes *\u002F\n",[55,637,639,641,643,645,647,650,652],{"class":57,"line":638},15,[55,640,425],{"class":107},[55,642,144],{"class":65},[55,644,430],{"class":61},[55,646,75],{"class":65},[55,648,649],{"class":61},"64",[55,651,124],{"class":107},[55,653,440],{"class":65},[55,655,657,659],{"class":57,"line":656},16,[55,658,445],{"class":61},[55,660,66],{"class":65},[55,662,664,666,668,670,672,675,677,679,681],{"class":57,"line":663},17,[55,665,452],{"class":61},[55,667,75],{"class":65},[55,669,92],{"class":61},[55,671,95],{"class":65},[55,673,674],{"class":61},"4",[55,676,101],{"class":65},[55,678,104],{"class":61},[55,680,108],{"class":107},[55,682,111],{"class":65},[55,684,686],{"class":57,"line":685},18,[55,687,473],{"class":65},[55,689,691],{"class":57,"line":690},19,[55,692,132],{"class":65},[37,694,695],{},"Le style mobile est le plus simple, il sert de socle. Chaque media query ajoute seulement ce qui change. Le code reste court et facile à relire.",[697,698,699],"tip",{},[37,700,701],{},"Dans les outils de développement (F12), active le mode appareil mobile pour tester ta page à différentes largeurs, sans quitter ton ordinateur.",[10,703,705],{"id":704},"rendre-le-reste-souple","Rendre le reste souple",[37,707,708],{},"Quelques réflexes complètent la grille :",[710,711,712,719,732,742],"ol",{},[18,713,714,715,718],{},"Donne ",[22,716,717],{},"max-width: 100%"," aux images pour qu'elles ne dépassent jamais leur parent.",[18,720,721,722,724,725,728,729,731],{},"Préfère ",[22,723,124],{}," et ",[22,726,727],{},"%"," aux ",[22,730,486],{}," fixes pour les largeurs et les espaces.",[18,733,734,735,738,739,25],{},"Évite ",[22,736,737],{},"width"," fixe sur un conteneur : privilégie ",[22,740,741],{},"max-width",[18,743,744],{},"Teste avec un texte plus long que prévu.",[46,746,748],{"className":48,"code":747,"language":50,"meta":51,"style":51},"img {\n  max-width: 100%;\n  height: auto;\n}\n",[22,749,750,757,771,783],{"__ignoreMap":51},[55,751,752,755],{"class":57,"line":58},[55,753,754],{"class":379},"img",[55,756,66],{"class":65},[55,758,759,762,764,767,769],{"class":57,"line":69},[55,760,761],{"class":61},"  max-width",[55,763,75],{"class":65},[55,765,766],{"class":61},"100",[55,768,727],{"class":107},[55,770,81],{"class":65},[55,772,773,776,778,781],{"class":57,"line":84},[55,774,775],{"class":61},"  height",[55,777,75],{"class":65},[55,779,780],{"class":61},"auto",[55,782,81],{"class":65},[55,784,785],{"class":57,"line":114},[55,786,132],{"class":65},[788,789,790],"note",{},[37,791,792],{},"Flexbox et grid se combinent. Utilise grid pour la structure de la page, flexbox pour aligner le contenu à l'intérieur de chaque zone.",[10,794,796],{"id":795},"à-retenir","À retenir",[15,798,799,811,817,824,831,836],{},[18,800,801,803,804,807,808,810],{},[22,802,24],{}," avec ",[22,805,806],{},"grid-template-columns"," crée des colonnes ; ",[22,809,108],{}," partage l'espace disponible.",[18,812,813,816],{},[22,814,815],{},"repeat(auto-fit, minmax(14rem, 1fr))"," donne une grille qui s'adapte sans media query.",[18,818,819,820,823],{},"La balise ",[22,821,822],{},"\u003Cmeta name=\"viewport\" ...>"," est indispensable pour un affichage correct sur mobile.",[18,825,826,827,830],{},"Une media query ",[22,828,829],{},"@media (min-width: ...)"," applique des règles à partir d'une largeur.",[18,832,833,834,511],{},"Mobile d'abord : style de base pour le petit écran, puis ",[22,835,430],{},[18,837,838,839,25],{},"Les images responsives s'obtiennent avec ",[22,840,717],{},[842,843,844],"style",{},"html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html pre.shiki code .sd6ml, html code.shiki .sd6ml{--shiki-light:#6E7781;--shiki-default:#8B949E;--shiki-dark:#8B949E}",{"title":51,"searchDepth":69,"depth":84,"links":846},[847,848,849,850,851,852,853,854,855],{"id":12,"depth":69,"text":13},{"id":34,"depth":69,"text":35},{"id":163,"depth":69,"text":164},{"id":268,"depth":69,"text":269},{"id":352,"depth":69,"text":353},{"id":407,"depth":69,"text":408},{"id":500,"depth":69,"text":501},{"id":704,"depth":69,"text":705},{"id":795,"depth":69,"text":796},"Créer des grilles avec CSS Grid et adapter une page à tous les écrans avec les media queries, en partant du mobile.","md",{},[43,806,108,359,414,507,860,311,496],"viewport","intermediaire","\u002Fcss\u002Fgrid-et-responsive",[864],"\u002Fcss\u002Fflexbox",[866,870,873],{"nom":867,"url":868,"type":869},"MDN, Les grilles","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FCSS_layout\u002FGrids","cours",{"nom":871,"url":872,"type":869},"MDN, Design adaptatif","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FCSS_layout\u002FResponsive_design",{"nom":874,"url":875,"type":876},"MDN, @media","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FCSS\u002F@media","doc",{"title":5,"description":856},[879,880],{"nom":867,"url":868},{"nom":871,"url":872},"css\u002F05.grid-et-responsive","bYuRPZ7YLrzlsWwkt3UU1GipAEQO7SwAGTrFqXi2NgM",[884,888,892,896,899,900,904],{"path":885,"title":886,"stem":887},"\u002Fcss\u002Fpremiers-pas","Premiers pas en CSS","css\u002F01.premiers-pas",{"path":889,"title":890,"stem":891},"\u002Fcss\u002Fcascade-et-specificite","Cascade et spécificité","css\u002F02.cascade-et-specificite",{"path":893,"title":894,"stem":895},"\u002Fcss\u002Fboites-et-texte","Boîtes, unités et texte","css\u002F03.boites-et-texte",{"path":864,"title":897,"stem":898},"Flexbox","css\u002F04.flexbox",{"path":862,"title":5,"stem":881},{"path":901,"title":902,"stem":903},"\u002Fcss\u002Fvariables-et-animations","Variables, transitions et animations","css\u002F06.variables-et-animations",{"path":905,"title":906,"stem":907},"\u002Fcss","CSS","css\u002Findex",[909,911],{"title":897,"path":864,"stem":898,"description":910,"children":-1},"Aligner et répartir des éléments sur une ligne ou une colonne avec display flex, gap, justify-content et align-items.",{"title":902,"path":901,"stem":903,"description":912,"children":-1},"Centraliser ses valeurs avec les variables CSS, puis animer l'interface avec les transitions et les keyframes.",[914],{"path":864,"title":897,"ligne":50},[916,918,919,920,921,922,924],{"path":885,"title":886,"niveau":917,"stem":887},"debutant",{"path":889,"title":890,"niveau":917,"stem":891},{"path":893,"title":894,"niveau":917,"stem":895},{"path":864,"title":897,"niveau":861,"stem":898},{"path":862,"title":5,"niveau":861,"stem":881},{"path":901,"title":902,"niveau":923,"stem":903},"avance",{"path":905,"title":906,"niveau":925,"stem":907},"memo",1794583447296]