[{"data":1,"prerenderedAt":1204},["ShallowReactive",2],{"navigation_docs":3,"-themes-theme-de-votre-equipe":127,"-themes-theme-de-votre-equipe-surround":1199},[4,19,71,101],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":18},"Démarrer","i-lucide-rocket","\u002Fdemarrer","1.demarrer",[10,14],{"title":11,"path":12,"stem":13},"Rejoindre le studio","\u002Fdemarrer\u002Frejoindre-le-studio","1.demarrer\u002F1.rejoindre-le-studio",{"title":15,"path":16,"stem":17},"Première présentation","\u002Fdemarrer\u002Fpremiere-presentation","1.demarrer\u002F2.premiere-presentation",false,{"title":20,"icon":21,"path":22,"stem":23,"children":24,"page":18},"Écrire","i-lucide-pen-line","\u002Fecrire","2.ecrire",[25,29,33,37,41,45,49,53],{"title":26,"path":27,"stem":28},"La syntaxe","\u002Fecrire\u002Fsyntaxe","2.ecrire\u002F1.syntaxe",{"title":30,"path":31,"stem":32},"Les composants","\u002Fecrire\u002Fcomposants","2.ecrire\u002F2.composants",{"title":34,"path":35,"stem":36},"Story Storybook","\u002Fecrire\u002Fstory-storybook","2.ecrire\u002F3.story-storybook",{"title":38,"path":39,"stem":40},"Image et texte","\u002Fecrire\u002Fimage-a-cote-du-texte","2.ecrire\u002F4.image-a-cote-du-texte",{"title":42,"path":43,"stem":44},"Notes de l'orateur","\u002Fecrire\u002Fnotes-de-presentation","2.ecrire\u002F5.notes-de-presentation",{"title":46,"path":47,"stem":48},"Exporter en PDF","\u002Fecrire\u002Fexport-pdf","2.ecrire\u002F6.export-pdf",{"title":50,"path":51,"stem":52},"Écrire avec un agent","\u002Fecrire\u002Fecrire-avec-un-agent","2.ecrire\u002F7.ecrire-avec-un-agent",{"title":54,"icon":55,"path":56,"stem":57,"children":58,"page":18},"Référence","i-lucide-book-open","\u002Fecrire\u002Freference","ecrire\u002Freference",[59,63,67],{"title":60,"path":61,"stem":62},"nuxt","\u002Fecrire\u002Freference\u002Fnuxt","ecrire\u002Freference\u002Fnuxt\u002FREADME",{"title":64,"path":65,"stem":66},"schemas","\u002Fecrire\u002Freference\u002Fschemas","ecrire\u002Freference\u002Fschemas\u002FREADME",{"title":68,"path":69,"stem":70},"storybook","\u002Fecrire\u002Freference\u002Fstorybook","ecrire\u002Freference\u002Fstorybook\u002FREADME",{"title":72,"icon":73,"path":74,"stem":75,"children":76,"page":18},"Studio","i-lucide-layout-grid","\u002Fstudio","3.studio",[77,81,85,89,93,97],{"title":78,"path":79,"stem":80},"Les rôles","\u002Fstudio\u002Froles","3.studio\u002F1.roles",{"title":82,"path":83,"stem":84},"Visibilité et partage","\u002Fstudio\u002Fvisibilite-et-partage","3.studio\u002F2.visibilite-et-partage",{"title":86,"path":87,"stem":88},"Versions et brouillon","\u002Fstudio\u002Fversions-et-brouillon","3.studio\u002F3.versions-et-brouillon",{"title":90,"path":91,"stem":92},"Jetons d'accès","\u002Fstudio\u002Fjetons-d-acces","3.studio\u002F4.jetons-d-acces",{"title":94,"path":95,"stem":96},"Organiser le catalogue","\u002Fstudio\u002Forganiser-le-catalogue","3.studio\u002F4.organiser-le-catalogue",{"title":98,"path":99,"stem":100},"Problèmes fréquents","\u002Fstudio\u002Fproblemes-frequents","3.studio\u002F5.problemes-frequents",{"title":102,"icon":103,"path":104,"stem":105,"children":106,"page":18},"Thèmes","i-lucide-palette","\u002Fthemes","4.themes",[107,111],{"title":108,"path":109,"stem":110},"Le thème de votre équipe","\u002Fthemes\u002Ftheme-de-votre-equipe","4.themes\u002F1.theme-de-votre-equipe",{"title":54,"icon":55,"path":112,"stem":113,"children":114,"page":18},"\u002Fthemes\u002Freference","themes\u002Freference",[115,119,123],{"title":116,"path":117,"stem":118},"theme-dsfr","\u002Fthemes\u002Freference\u002Ftheme-dsfr","themes\u002Freference\u002Ftheme-dsfr\u002FREADME",{"title":120,"path":121,"stem":122},"theme-kit","\u002Fthemes\u002Freference\u002Ftheme-kit","themes\u002Freference\u002Ftheme-kit\u002FREADME",{"title":124,"path":125,"stem":126},"Theme system","\u002Fthemes\u002Freference\u002Ftheme-system","themes\u002Freference\u002Ftheme-system",{"id":128,"title":129,"body":130,"description":1193,"extension":1194,"meta":1195,"navigation":1196,"path":109,"seo":1197,"stem":110,"__hash__":1198},"docs\u002F4.themes\u002F1.theme-de-votre-equipe.md","Créer le thème de votre équipe",{"type":131,"value":132,"toc":1179},"minimark",[133,150,155,170,224,234,261,265,293,334,352,356,362,427,443,447,454,478,483,490,546,559,563,598,603,622,629,641,645,659,761,795,799,816,909,921,949,970,974,977,991,1006,1014,1032,1047,1066,1070,1078,1082,1092,1095,1114,1117,1146,1157,1160,1175],[134,135,136,137,141,142,145,146,149],"p",{},"Un thème fixe les couleurs, la police, les tailles et les fonds des présentations. C'est un dossier qui contient un manifeste ",[138,139,140],"code",{},"theme.json"," et une feuille de style SCSS construite sur le paquet ",[138,143,144],{},"@vignettes\u002Ftheme-kit",". Vous écrivez ce dossier et vous le vérifiez dans un studio installé sur votre ordinateur, puis l'exploitant de votre instance le publie. Chaque présentation choisit ensuite le thème par la clé ",[138,147,148],{},"theme"," de son en-tête.",[151,152,154],"h2",{"id":153},"installer-le-studio-sur-votre-ordinateur","Installer le studio sur votre ordinateur",[134,156,157,158,161,162,169],{},"Le dépôt GitHub ",[138,159,160],{},"ShallowRed\u002Fvignettes"," contient le studio. Ce dépôt est privé : votre compte GitHub doit pouvoir le lire. ",[163,164,168],"a",{"href":165,"rel":166},"https:\u002F\u002Fmise.jdx.dev",[167],"nofollow","mise"," installe Node 22 et pnpm, puis lance les tâches du dépôt.",[171,172,177],"pre",{"className":173,"code":174,"language":175,"meta":176,"style":176},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","git clone https:\u002F\u002Fgithub.com\u002FShallowRed\u002Fvignettes.git\ncd vignettes\nmise install\nmise run setup\n","bash","",[138,178,179,195,205,213],{"__ignoreMap":176},[180,181,184,188,192],"span",{"class":182,"line":183},"line",1,[180,185,187],{"class":186},"sBMFI","git",[180,189,191],{"class":190},"sfazB"," clone",[180,193,194],{"class":190}," https:\u002F\u002Fgithub.com\u002FShallowRed\u002Fvignettes.git\n",[180,196,198,202],{"class":182,"line":197},2,[180,199,201],{"class":200},"s2Zo4","cd",[180,203,204],{"class":190}," vignettes\n",[180,206,208,210],{"class":182,"line":207},3,[180,209,168],{"class":186},[180,211,212],{"class":190}," install\n",[180,214,216,218,221],{"class":182,"line":215},4,[180,217,168],{"class":186},[180,219,220],{"class":190}," run",[180,222,223],{"class":190}," setup\n",[134,225,226,229,230,233],{},[138,227,228],{},"mise run setup"," écrit le fichier ",[138,231,232],{},".env",", installe les dépendances et crée la base de données locale.",[134,235,236,237,240,241,244,245,248,249,252,253,256,257,260],{},"Le studio lit les thèmes dans deux dossiers : ",[138,238,239],{},"themes\u002F",", qui contient les thèmes de l'application, ",[138,242,243],{},"dsfr"," et ",[138,246,247],{},"minimal",", et ",[138,250,251],{},"presentations\u002Fthemes\u002F",", qui contient les thèmes de votre instance. Git ignore le dossier ",[138,254,255],{},"presentations\u002F",". Si votre instance garde ses présentations et ses thèmes dans un dépôt, clonez ce dépôt sous le nom ",[138,258,259],{},"presentations",".",[151,262,264],{"id":263},"copier-le-thème-dexemple","Copier le thème d'exemple",[134,266,267,268,275,276,279,280,282,283,285,286,288,289,292],{},"Le thème ",[163,269,272],{"href":270,"rel":271},"https:\u002F\u002Fgithub.com\u002FShallowRed\u002Fvignettes\u002Fblob\u002Fmain\u002Fexamples\u002Fthemes\u002Fexemple-marque",[167],[138,273,274],{},"examples\u002Fthemes\u002Fexemple-marque"," est un thème complet : il règle les jetons, peint les diapositives de section et décrit sa carte du catalogue. Choisissez le nom de votre thème, en minuscules et avec des tirets, puis copiez l'exemple sous ce nom. Ce nom désigne à la fois le dossier, la clé ",[138,277,278],{},"name"," du manifeste, le fichier SCSS et la valeur de la clé ",[138,281,148],{}," des présentations. Il doit être différent de ",[138,284,243],{}," et de ",[138,287,247],{},". Sur cette page, le thème s'appelle ",[138,290,291],{},"mon-equipe"," :",[171,294,296],{"className":173,"code":295,"language":175,"meta":176,"style":176},"mkdir -p presentations\u002Fthemes\ncp -R examples\u002Fthemes\u002Fexemple-marque presentations\u002Fthemes\u002Fmon-equipe\nmv presentations\u002Fthemes\u002Fmon-equipe\u002Fexemple-marque.scss presentations\u002Fthemes\u002Fmon-equipe\u002Fmon-equipe.scss\n",[138,297,298,309,323],{"__ignoreMap":176},[180,299,300,303,306],{"class":182,"line":183},[180,301,302],{"class":186},"mkdir",[180,304,305],{"class":190}," -p",[180,307,308],{"class":190}," presentations\u002Fthemes\n",[180,310,311,314,317,320],{"class":182,"line":197},[180,312,313],{"class":186},"cp",[180,315,316],{"class":190}," -R",[180,318,319],{"class":190}," examples\u002Fthemes\u002Fexemple-marque",[180,321,322],{"class":190}," presentations\u002Fthemes\u002Fmon-equipe\n",[180,324,325,328,331],{"class":182,"line":207},[180,326,327],{"class":186},"mv",[180,329,330],{"class":190}," presentations\u002Fthemes\u002Fmon-equipe\u002Fexemple-marque.scss",[180,332,333],{"class":190}," presentations\u002Fthemes\u002Fmon-equipe\u002Fmon-equipe.scss\n",[134,335,336,337,340,341,344,345,347,348,351],{},"Dans ",[138,338,339],{},"presentations\u002Fthemes\u002Fmon-equipe\u002Ftheme.json",", remplacez ",[138,342,343],{},"exemple-marque"," par ",[138,346,291],{},". Le thème peut aussi contenir un dossier ",[138,349,350],{},"assets\u002F",", pour ses polices et ses images.",[151,353,355],{"id":354},"régler-le-manifeste","Régler le manifeste",[134,357,358,359,361],{},"Le manifeste ",[138,360,140],{}," contient les clés suivantes :",[363,364,365,371,381,399,415,421],"ul",{},[366,367,368,370],"li",{},[138,369,278],{}," est le nom du thème, identique au nom du dossier.",[366,372,373,376,377,380],{},[138,374,375],{},"lang"," est la langue par défaut des présentations. Avec ",[138,378,379],{},"fr",", le moteur applique la typographie française.",[366,382,383,386,387,390,391,394,395,398],{},[138,384,385],{},"parser"," est le découpage des diapositives par défaut : ",[138,388,389],{},"heading"," découpe aux titres, ",[138,392,393],{},"separator"," aux lignes ",[138,396,397],{},"---",". Une présentation peut choisir l'autre découpage dans son en-tête.",[366,400,401,403,404,407,408,411,412,260],{},[138,402,138],{}," choisit les couleurs des blocs de code par défaut : ",[138,405,406],{},"clair",", ",[138,409,410],{},"sombre"," ou ",[138,413,414],{},"nuit",[366,416,417,420],{},[138,418,419],{},"reveal"," contient des réglages de reveal.js, ici l'affichage du numéro de la diapositive.",[366,422,423,426],{},[138,424,425],{},"preview"," décrit la carte d'une présentation dans le catalogue : la police, la couleur du titre, la couleur du texte et le fond. Le catalogue dessine cette carte sans charger la feuille du thème. Reportez-y les couleurs de votre thème.",[134,428,429,430,434,435,438,439,442],{},"La ",[163,431,433],{"href":432},"\u002Fthemes\u002Freference\u002Ftheme-system#manifest","référence du système de thèmes"," décrit les autres clés, dont ",[138,436,437],{},"backgrounds",", qui associe une image de fond à chaque niveau de titre, et ",[138,440,441],{},"aliases",", qui fait correspondre au thème un nom que vos présentations utilisent déjà.",[151,444,446],{"id":445},"régler-la-feuille-de-style","Régler la feuille de style",[134,448,449,450,453],{},"Les trois premières lignes de ",[138,451,452],{},"mon-equipe.scss"," chargent le kit de thèmes :",[363,455,456,466,472],{},[366,457,458,461,462,465],{},[138,459,460],{},"pkg:@vignettes\u002Ftheme-kit"," contient les règles dont les composants ont besoin : la structure des diapositives, la grille des mises en page ",[138,463,464],{},"media-*",", les corrections de reveal.js et une valeur par défaut pour chaque jeton. Chaque thème le charge.",[366,467,468,471],{},[138,469,470],{},"pkg:@vignettes\u002Ftheme-kit\u002Fbase"," applique les neuf jetons de couleur au fond, au texte, aux titres, aux liens, au code en ligne, aux citations, aux puces et aux flèches de navigation, avec la police du système. Un thème qui dessine lui-même ces éléments omet cette ligne.",[366,473,474,477],{},[138,475,476],{},"pkg:@vignettes\u002Ftheme-kit\u002Fpresets\u002Flayout"," donne les tailles de titre et les espacements du DSFR, sans ses couleurs ni sa police. C'est le seul preset du kit. Un thème qui fixe ses propres tailles omet cette ligne.",[479,480,482],"h3",{"id":481},"régler-les-jetons","Régler les jetons",[134,484,485,486,489],{},"Le bloc ",[138,487,488],{},":root"," règle les douze jetons que lisent les composants. Remplacez leurs valeurs par les couleurs de votre équipe :",[363,491,492,506,520,534],{},[366,493,494,497,498,501,502,505],{},[138,495,496],{},"--accent"," est la couleur principale : liens, puces, contour des boîtes d'un diagramme. ",[138,499,500],{},"--accent-soft"," en est une teinte claire, et ",[138,503,504],{},"--accent-bg"," une teinte très claire, qui colore le fond du code en ligne et des boîtes d'un diagramme.",[366,507,508,511,512,515,516,519],{},[138,509,510],{},"--surface"," est le fond des diapositives. ",[138,513,514],{},"--surface-contrast"," est une surface sombre, et ",[138,517,518],{},"--on-contrast"," la couleur du texte posé sur elle.",[366,521,522,525,526,529,530,533],{},[138,523,524],{},"--text-title"," colore les titres et le texte en gras, ",[138,527,528],{},"--text-default"," le texte courant, ",[138,531,532],{},"--text-mention"," les légendes et les petits caractères.",[366,535,536,407,539,244,542,545],{},[138,537,538],{},"--border",[138,540,541],{},"--radius",[138,543,544],{},"--shadow"," donnent le contour, les coins et l'ombre des boîtes que dessinent les composants.",[134,547,548,549,407,552,244,555,558],{},"Un jeton omis prend la valeur par défaut du kit : un gris neutre, avec un accent bleu. Le kit calcule trois jetons de plus à partir des jetons de texte, ",[138,550,551],{},"--on-surface-title",[138,553,554],{},"--on-surface-default",[138,556,557],{},"--on-surface-mention"," : un thème ne les règle pas.",[479,560,562],{"id":561},"peindre-les-diapositives-de-section","Peindre les diapositives de section",[134,564,565,566,569,570,573,574,577,578,573,581,584,585,588,589,591,592,594,595,597],{},"Le moteur donne à chaque diapositive une classe selon le niveau de son premier titre : ",[138,567,568],{},"slide-h1"," pour la diapositive de titre (",[138,571,572],{},"#","), ",[138,575,576],{},"slide-h2"," pour une diapositive de section (",[138,579,580],{},"##",[138,582,583],{},"slide-h3"," pour une diapositive de contenu (",[138,586,587],{},"###","). Avec le découpage ",[138,590,389],{},", chaque diapositive ouverte par un titre ",[138,593,580],{}," reçoit la classe ",[138,596,576],{},", y compris quand elle contient des paragraphes ou une liste, et le thème la peint comme une section.",[134,599,600,601,292],{},"Les deux dernières règles de l'exemple peignent les sections avec ",[138,602,514],{},[363,604,605,616],{},[366,606,607,608,611,612,615],{},"La règle ",[138,609,610],{},".reveal .slide-background.slide-h2"," colore l'élément de fond que reveal.js place derrière chaque diapositive. reveal.js donne à cet élément les classes de la diapositive et l'étend à tout l'écran, quelle que soit sa proportion. La règle colore aussi l'export PDF et la vue défilante du téléphone, où reveal.js place cet élément ailleurs dans la page. reveal.js lit sa couleur et ajoute la classe ",[138,613,614],{},"has-dark-background",", qui passe ses flèches de navigation en clair.",[366,617,607,618,621],{},[138,619,620],{},".reveal section.slide-h2"," passe les jetons de texte et les liens en clair sur la section. Les diapositives verticales rangées sous la section ont leur propre classe et gardent leur texte sombre.",[134,623,624,625,628],{},"Sur une section, une boîte dessinée par un composant, comme celle d'un diagramme, garde son fond clair et son texte sombre : elle lit les jetons ",[138,626,627],{},"--on-surface-*",", calculés pour toute la page.",[134,630,631,632,634,635,637,638,260],{},"Pour une image de fond, la clé ",[138,633,437],{}," du manifeste associe une image du dossier ",[138,636,350],{}," à un niveau de titre : ",[138,639,640],{},"\"backgrounds\": { \"h2\": \"assets\u002Fsection.png\" }",[479,642,644],{"id":643},"partir-du-thème-dsfr","Partir du thème DSFR",[134,646,647,648,650,651,654,655,658],{},"Pour garder la police Marianne, la palette et la mise en forme des composants du DSFR, remplacez les trois lignes du kit et le bloc ",[138,649,488],{}," par le paquet ",[138,652,653],{},"@vignettes\u002Ftheme-dsfr",", qui charge lui-même le kit et le preset ",[138,656,657],{},"layout",". On règle ses couleurs par ses variables Sass, avant de charger le thème :",[171,660,664],{"className":661,"code":662,"language":663,"meta":176,"style":176},"language-scss shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@use 'pkg:@vignettes\u002Ftheme-dsfr\u002Fvariables' with (\n  $dsfr-blue-france-sun-113: #7c2d12,\n  $dsfr-blue-france-main-525: #c2410c,\n  $dsfr-blue-france-850: #fed7aa,\n  $dsfr-blue-france-950: #fff7ed\n);\n@use 'pkg:@vignettes\u002Ftheme-dsfr';\n","scss",[138,665,666,688,703,715,727,740,746],{"__ignoreMap":176},[180,667,668,672,676,679,682,685],{"class":182,"line":183},[180,669,671],{"class":670},"s7zQu","@use",[180,673,675],{"class":674},"sMK4o"," '",[180,677,678],{"class":190},"pkg:@vignettes\u002Ftheme-dsfr\u002Fvariables",[180,680,681],{"class":674},"'",[180,683,684],{"class":670}," with",[180,686,687],{"class":674}," (\n",[180,689,690,694,697,700],{"class":182,"line":197},[180,691,693],{"class":692},"sTEyZ","  $dsfr-blue-france-sun-113",[180,695,696],{"class":674},":",[180,698,699],{"class":674}," #",[180,701,702],{"class":692},"7c2d12,\n",[180,704,705,708,710,712],{"class":182,"line":207},[180,706,707],{"class":692},"  $dsfr-blue-france-main-525",[180,709,696],{"class":674},[180,711,699],{"class":674},[180,713,714],{"class":692},"c2410c,\n",[180,716,717,720,722,724],{"class":182,"line":215},[180,718,719],{"class":692},"  $dsfr-blue-france-850",[180,721,696],{"class":674},[180,723,699],{"class":674},[180,725,726],{"class":692},"fed7aa,\n",[180,728,730,733,735,737],{"class":182,"line":729},5,[180,731,732],{"class":692},"  $dsfr-blue-france-950",[180,734,696],{"class":674},[180,736,699],{"class":674},[180,738,739],{"class":692},"fff7ed\n",[180,741,743],{"class":182,"line":742},6,[180,744,745],{"class":674},");\n",[180,747,749,751,753,756,758],{"class":182,"line":748},7,[180,750,671],{"class":670},[180,752,675],{"class":674},[180,754,755],{"class":190},"pkg:@vignettes\u002Ftheme-dsfr",[180,757,681],{"class":674},[180,759,760],{"class":674},";\n",[134,762,763,764,766,767,407,770,766,772,244,775,766,777,780,781,784,785,790,791,794],{},"Le thème DSFR associe ",[138,765,496],{}," à ",[138,768,769],{},"$dsfr-blue-france-main-525",[138,771,500],{},[138,773,774],{},"$dsfr-blue-france-850",[138,776,504],{},[138,778,779],{},"$dsfr-blue-france-950",", et colore le survol des liens avec ",[138,782,783],{},"$dsfr-blue-france-sun-113",". Le fichier ",[163,786,789],{"href":787,"rel":788},"https:\u002F\u002Fgithub.com\u002FShallowRed\u002Fvignettes\u002Fblob\u002Fmain\u002Fpackages\u002Ftheme-dsfr\u002F_variables.scss",[167],"_variables.scss"," liste les variables, et la ",[163,792,793],{"href":117},"référence du paquet"," décrit ses entrées. Pour peindre les diapositives de section, gardez les deux règles de la section précédente.",[151,796,798],{"id":797},"choisir-la-police","Choisir la police",[134,800,801,802,805,806,809,810,812,813,292],{},"Placez les fichiers de la police dans ",[138,803,804],{},"assets\u002Ffonts\u002F",", puis déclarez-la dans un fichier ",[138,807,808],{},"_fonts.scss"," du dossier du thème. Le studio sert le dossier ",[138,811,350],{}," à l'adresse ",[138,814,815],{},"\u002Fthemes\u002Fmon-equipe\u002Fassets\u002F",[171,817,819],{"className":661,"code":818,"language":663,"meta":176,"style":176},"@font-face {\n  font-family: Equipe;\n  font-weight: 400;\n  font-display: swap;\n  src: url('\u002Fthemes\u002Fmon-equipe\u002Fassets\u002Ffonts\u002FEquipe-Regular.woff2') format('woff2');\n}\n",[138,820,821,829,842,855,867,904],{"__ignoreMap":176},[180,822,823,826],{"class":182,"line":183},[180,824,825],{"class":670},"@font-face",[180,827,828],{"class":674}," {\n",[180,830,831,835,837,840],{"class":182,"line":197},[180,832,834],{"class":833},"sqsOY","  font-family",[180,836,696],{"class":674},[180,838,839],{"class":692}," Equipe",[180,841,760],{"class":674},[180,843,844,847,849,853],{"class":182,"line":207},[180,845,846],{"class":833},"  font-weight",[180,848,696],{"class":674},[180,850,852],{"class":851},"sbssI"," 400",[180,854,760],{"class":674},[180,856,857,860,862,865],{"class":182,"line":215},[180,858,859],{"class":833},"  font-display",[180,861,696],{"class":674},[180,863,864],{"class":692}," swap",[180,866,760],{"class":674},[180,868,869,872,874,877,880,882,885,887,890,893,895,897,900,902],{"class":182,"line":729},[180,870,871],{"class":833},"  src",[180,873,696],{"class":674},[180,875,876],{"class":200}," url",[180,878,879],{"class":674},"(",[180,881,681],{"class":674},[180,883,884],{"class":190},"\u002Fthemes\u002Fmon-equipe\u002Fassets\u002Ffonts\u002FEquipe-Regular.woff2",[180,886,681],{"class":674},[180,888,889],{"class":674},")",[180,891,892],{"class":200}," format",[180,894,879],{"class":674},[180,896,681],{"class":674},[180,898,899],{"class":190},"woff2",[180,901,681],{"class":674},[180,903,745],{"class":674},[180,905,906],{"class":182,"line":742},[180,907,908],{"class":674},"}\n",[134,910,336,911,913,914,917,918,920],{},[138,912,452],{},", ajoutez ",[138,915,916],{},"@use 'fonts';"," aux autres ",[138,919,671],{},", puis appliquez la police aux diapositives :",[171,922,924],{"className":661,"code":923,"language":663,"meta":176,"style":176},".reveal {\n  font-family: Equipe, system-ui, sans-serif;\n}\n",[138,925,926,934,945],{"__ignoreMap":176},[180,927,928,930,932],{"class":182,"line":183},[180,929,260],{"class":674},[180,931,419],{"class":186},[180,933,828],{"class":674},[180,935,936,938,940,943],{"class":182,"line":197},[180,937,834],{"class":833},[180,939,696],{"class":674},[180,941,942],{"class":692}," Equipe, system-ui, sans-serif",[180,944,760],{"class":674},[180,946,947],{"class":182,"line":207},[180,948,908],{"class":674},[134,950,951,952,955,956,958,959,962,963,966,967,969],{},"Pour que la carte du catalogue affiche la même police, ajoutez ",[138,953,954],{},"\"fonts\": \"fonts\""," dans ",[138,957,425],{}," et mettez ",[138,960,961],{},"Equipe"," en tête de ",[138,964,965],{},"fontFamily",". Le studio compile alors ",[138,968,808],{}," à part pour le catalogue.",[151,971,973],{"id":972},"afficher-le-thème-dans-le-studio-local","Afficher le thème dans le studio local",[134,975,976],{},"Lancez le studio :",[171,978,980],{"className":173,"code":979,"language":175,"meta":176,"style":176},"mise run dev:nuxt\n",[138,981,982],{"__ignoreMap":176},[180,983,984,986,988],{"class":182,"line":183},[180,985,168],{"class":186},[180,987,220],{"class":190},[180,989,990],{"class":190}," dev:nuxt\n",[134,992,993,994,998,999,1002,1003,1005],{},"La commande compile les thèmes, puis sert le studio sur ",[163,995,996],{"href":996,"rel":997},"http:\u002F\u002Flocalhost:3000",[167],". Quand vous enregistrez un fichier ",[138,1000,1001],{},".scss"," du thème, le studio le compile de nouveau et recharge la page. Après une modification de ",[138,1004,140],{},", arrêtez le serveur et relancez la commande.",[134,1007,1008,1009,1013],{},"Ouvrez ",[163,1010,1011],{"href":1011,"rel":1012},"http:\u002F\u002Flocalhost:3000\u002Fauth\u002Fdev-login?role=owner",[167]," pour vous connecter sans compte GitHub ni Google : cette adresse répond seulement en développement.",[134,1015,1016,1017,1024,1025,344,1027,1029,1030,292],{},"La présentation de contrôle ",[163,1018,1021],{"href":1019,"rel":1020},"https:\u002F\u002Fgithub.com\u002FShallowRed\u002Fvignettes\u002Fblob\u002Fmain\u002Fexamples\u002Fcontrole-du-theme.md",[167],[138,1022,1023],{},"examples\u002Fcontrole-du-theme.md"," contient chaque rôle de diapositive et chaque élément que colore un thème. Copiez-la, puis remplacez ",[138,1026,343],{},[138,1028,291],{}," dans sa clé ",[138,1031,148],{},[171,1033,1035],{"className":173,"code":1034,"language":175,"meta":176,"style":176},"cp examples\u002Fcontrole-du-theme.md controle-du-theme.md\n",[138,1036,1037],{"__ignoreMap":176},[180,1038,1039,1041,1044],{"class":182,"line":183},[180,1040,313],{"class":186},[180,1042,1043],{"class":190}," examples\u002Fcontrole-du-theme.md",[180,1045,1046],{"class":190}," controle-du-theme.md\n",[134,1048,1049,1050,1054,1055,1057,1058,1061,1062,260],{},"Importez ce fichier dans le studio, comme le décrit ",[163,1051,1053],{"href":1052},"\u002Fecrire\u002Fecrire-avec-un-agent#importer-le-fichier-dans-le-studio","Importer le fichier dans le studio"," : le champ « Thème » affiche ",[138,1056,291],{},", et le studio remplit le champ « Adresse » avec ",[138,1059,1060],{},"controle-du-theme",". Publiez la présentation, puis ouvrez ",[163,1063,1064],{"href":1064,"rel":1065},"http:\u002F\u002Flocalhost:3000\u002Fslides\u002Fcontrole-du-theme",[167],[151,1067,1069],{"id":1068},"vérifier-le-thème","Vérifier le thème",[134,1071,1072,1073,1077],{},"Lisez chaque diapositive de la présentation de contrôle, en largeur d'ordinateur puis en 390 pixels de large avec le mode adaptatif des outils de développement du navigateur. La section ",[163,1074,1076],{"href":1075},"\u002Fthemes\u002Freference\u002Ftheme-system#checking-a-theme","Checking a theme"," de la référence liste ce qu'il faut vérifier : le contraste de chaque couple de couleurs, le code en ligne coupé en fin de ligne, les diagrammes sur une diapositive de contenu et sur une section, la vue défilante du téléphone et l'export PDF.",[151,1079,1081],{"id":1080},"faire-publier-le-thème","Faire publier le thème",[134,1083,1084,1085,407,1087,1089,1090,260],{},"L'exploitant de votre instance publie les thèmes, parce que la commande de publication demande les clés du stockage de l'instance. Il compile le thème dans son propre clone du studio. La feuille de style peut donc charger ",[138,1086,460],{},[138,1088,755],{}," et les fichiers du dossier du thème, et les polices et les images doivent se trouver dans ",[138,1091,350],{},[134,1093,1094],{},"Envoyez-lui :",[363,1096,1097,1109],{},[366,1098,1099,1100,1102,1103,1105,1106,1108],{},"le dossier du thème, ",[138,1101,140],{},", le fichier SCSS, ",[138,1104,808],{}," s'il existe et ",[138,1107,350],{},", en archive, ou par un commit dans le dépôt des présentations de l'instance ;",[366,1110,1111,1112,260],{},"le nom du thème, et les noms que vos présentations utilisent déjà s'il doit les reprendre par la clé ",[138,1113,441],{},[134,1115,1116],{},"Demandez-lui :",[1118,1119,1120,1126,1140],"ol",{},[366,1121,1122,1123,1125],{},"de placer le dossier dans ",[138,1124,251],{}," de son clone du studio ;",[366,1127,1128,1129,1132,1133,1136,1137,1139],{},"de lancer ",[138,1130,1131],{},"mise run theme:push -- mon-equipe",", qui compile le thème et liste les fichiers à envoyer sans rien écrire, puis ",[138,1134,1135],{},"mise run theme:push -- mon-equipe --apply",", qui envoie la feuille compilée, les fichiers de ",[138,1138,350],{}," et les réglages du manifeste dans le stockage de l'instance ;",[366,1141,1142,1143,260],{},"de vous prévenir quand la commande affiche ",[138,1144,1145],{},"✓ published",[134,1147,1148,1149,1152,1153,1156],{},"L'instance relit la liste des thèmes publiés au bout d'une minute au plus. Un Propriétaire du studio peut forcer cette lecture par une requête ",[138,1150,1151],{},"POST \u002Fapi\u002Fadmin\u002Fthemes\u002Freload",". Le thème apparaît alors dans le champ « Thème » de la fenêtre « Nouvelle présentation ». Pour l'appliquer à une présentation existante, écrivez ",[138,1154,1155],{},"theme: mon-equipe"," dans son en-tête, puis publiez-la.",[134,1158,1159],{},"Pour une nouvelle version du thème, faites la même demande : la commande remplace les fichiers publiés sous le même nom.",[134,1161,1162,1163,1166,1167,1171,1172,260],{},"Le plugin ",[138,1164,1165],{},"vignettes-decks"," de Claude Code contient aussi les règles d'écriture d'un thème : après son ",[163,1168,1170],{"href":1169},"\u002Fecrire\u002Fecrire-avec-un-agent#installer-le-plugin","installation",", commencez la demande par ",[138,1173,1174],{},"\u002Fvignettes-decks:writing-themes",[1176,1177,1178],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":176,"searchDepth":197,"depth":197,"links":1180},[1181,1182,1183,1184,1189,1190,1191,1192],{"id":153,"depth":197,"text":154},{"id":263,"depth":197,"text":264},{"id":354,"depth":197,"text":355},{"id":445,"depth":197,"text":446,"children":1185},[1186,1187,1188],{"id":481,"depth":207,"text":482},{"id":561,"depth":207,"text":562},{"id":643,"depth":207,"text":644},{"id":797,"depth":197,"text":798},{"id":972,"depth":197,"text":973},{"id":1068,"depth":197,"text":1069},{"id":1080,"depth":197,"text":1081},"Écrire un thème aux couleurs de votre équipe, le vérifier dans un studio installé sur votre ordinateur, puis le faire publier par l'exploitant de votre instance.","md",{},{"title":108},{"title":129,"description":1193},"Gi9DZ92_Sht8_H0Ge0v6BU40DQJ18uyaAgjc0MHWkJU",[1200,1202],{"title":98,"path":99,"stem":100,"description":1201,"children":-1},"Ce que le studio affiche quand la session, une story, un composant, une adresse, l'export PDF, une image, un accès, un mot de passe ou la visibilité d'une présentation pose problème, la cause et ce qu'il faut faire.",{"title":116,"path":117,"stem":118,"description":1203,"children":-1},"The base Vignettes theme following the Système de Design de l'État (DSFR), the French state design system: its palette, Marianne typography and type scale, on light surfaces. It is pure SCSS with no JavaScript.",1792605685679]