diff --git a/design_system_admin/modeles/dsfr_accordeon.html b/design_system_admin/modeles/dsfr_accordeon.html
index ea3b0f75182f6f7640eab3ca9a7295448eac7001..46c1f81b9be82bd7189c8140b158cf8ea72ee78a 100644
--- a/design_system_admin/modeles/dsfr_accordeon.html
+++ b/design_system_admin/modeles/dsfr_accordeon.html
@@ -1,5 +1,19 @@
[(#ENV{fin}|non)
+#SWITCH{#ENV{marge-basse}}
+ [(#CASE{1}) #SET{marge-basse, 'fr-mb-1w'}]
+ [(#CASE{2}) #SET{marge-basse, 'fr-mb-2w'}]
+ [(#CASE{3}) #SET{marge-basse, 'fr-mb-3w'}]
+ [(#CASE{4}) #SET{marge-basse, 'fr-mb-4w'} ]
+ [(#CASE_DEFAULT) #SET{marge-basse, ' fr-m-0'} ]
+
+#SWITCH{#ENV{marge-haute}}
+ [(#CASE{1}) #SET{marge-haute, 'fr-mt-1w'}]
+ [(#CASE{2}) #SET{marge-haute, 'fr-mt-2w'}]
+ [(#CASE{3}) #SET{marge-haute, 'fr-mt-3w'}]
+ [(#CASE{4}) #SET{marge-haute, 'fr-mt-4w'} ]
+ [(#CASE_DEFAULT) #SET{marge-haute, ' fr-m-0'} ]
+
#SWITCH{#ENV{h}}
[(#CASE{3}) #SET{montitre, '<h3 class="fr-card__title">'} #SET{fintitre, '</h3>'}]
[(#CASE{4}) #SET{montitre, '<h4 class="fr-card__title">'} #SET{fintitre, '</h4>'}]
@@ -7,7 +21,7 @@
[(#CASE{6}) #SET{montitre, '<h6 class="fr-card__title">'} #SET{fintitre, '</h6>'}]
[(#CASE_DEFAULT) #SET{montitre, '<h3 class="fr-card__title">'} #SET{fintitre, '</h3>'}]
#SET{aleatoire, #GET{aleatoire}|rand{5000000}}
-<section class="fr-accordion">
+<section class="fr-accordion [(#GET{marge-haute})] [(#GET{marge-basse})] [(#GET{marge})] ">
#GET{montitre}
<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-#GET{aleatoire}">#ENV{titre}</button>
#GET{fintitre}
diff --git a/design_system_admin/modeles/dsfr_carte.html b/design_system_admin/modeles/dsfr_carte.html
index bd76b6bbc8889d93162b34bee5d5db8e605f8354..e371dd85fb38763c1b542a88710dc5bc0d038bfa 100644
--- a/design_system_admin/modeles/dsfr_carte.html
+++ b/design_system_admin/modeles/dsfr_carte.html
@@ -33,7 +33,7 @@
">
<div class="fr-card__body">
<div class="fr-card__content">
- <p class="fr-card__title"> <a href="#URL_ARTICLE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non)#TITRE]</a><p>
+ <p class="fr-card__title"> <a [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] (nouvelle fenêtre)"] href="#URL_ARTICLE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non)#TITRE]</a><p>
[(#ENV{texte}|match{non}|oui)]
[(#ENV{texte}|match{non}|non)[(#ENV{texte}|oui)<div class="fr-card__desc">#ENV{texte}</div>]]
@@ -94,7 +94,7 @@
">
<div class="fr-card__body">
<div class="fr-card__content">
- <p class="fr-card__title"> <a href="#URL_RUBRIQUE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non)#TITRE]</a><p>
+ <p class="fr-card__title"> <a [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] (nouvelle fenêtre)"] href="#URL_RUBRIQUE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non)#TITRE]</a><p>
[(#ENV{texte}|match{non}|oui)]
[(#ENV{texte}|match{non}|non)[(#ENV{texte}|oui)<div class="fr-card__desc">#ENV{texte}</div>]]
[(#ENV{texte}|non)[<div class="fr-card__desc"(#DESCRIPTIF|oui)> #DESCRIPTIF</div>]]
diff --git a/design_system_admin/modeles/dsfr_exergue.html b/design_system_admin/modeles/dsfr_exergue.html
index 801f157bc1bfb67a239e44cb5a87fa301f3b4056..3d55a2dd38269492bb9a46890aa6cdae4daf5066 100644
--- a/design_system_admin/modeles/dsfr_exergue.html
+++ b/design_system_admin/modeles/dsfr_exergue.html
@@ -5,25 +5,25 @@
[(#REM) couleurs pour la compatibilité avec les anciens contenus ]
-[(#ENV{couleur}|=={jaune}|oui) fr-callout--yellow-moutarde]
-[(#ENV{couleur}|=={jaune-clair}|oui) fr-callout--yellow-tournesol]
-[(#ENV{couleur}|=={bleu}|oui) fr-callout--blue-cumulus]
-[(#ENV{couleur}|=={bleu-clair}|oui) fr-callout--blue-ecume]
-[(#ENV{couleur}|=={bleu-canard}|oui) fr-callout--green-archipel]
-[(#ENV{couleur}|=={rouge}|oui) fr-callout--purple-glycine]
-[(#ENV{couleur}|=={violet}|oui) fr-callout--purple-glycine]
-[(#ENV{couleur}|=={beige}|oui) fr-callout--pink-macaron]
-[(#ENV{couleur}|=={rouge}|oui) fr-callout--pink-tuile]
-[(#ENV{couleur}|=={rose}|oui) fr-callout--pink-tuile]
-[(#ENV{couleur}|=={vert}|oui) fr-callout--green-emeraude]
-[(#ENV{couleur}|=={vert-clair}|oui) fr-callout--green-menthe]
-[(#ENV{couleur}|=={vert-tilleul}|oui) fr-callout--green-tilleul-verveine]
-[(#ENV{couleur}|=={vert-fluo}|oui) fr-callout--green-bourgeon]
-[(#ENV{couleur}|=={orange}|oui) fr-callout--orange-terre-battue]
-[(#ENV{couleur}|=={cafe}|oui) fr-callout--brown-cafe-creme]
-[(#ENV{couleur}|=={marron-clair}|oui) fr-callout--brown-caramel]
-[(#ENV{couleur}|=={marron}|oui) fr-callout--brown-opera]
-[(#ENV{couleur}|=={gris-clair}|oui) fr-callout--beige-gris-galet]
+[(#ENV{couleur}|=={jaune}|oui) fr-highlight--yellow-moutarde]
+[(#ENV{couleur}|=={jaune-clair}|oui) fr-highlight--yellow-tournesol]
+[(#ENV{couleur}|=={bleu}|oui) fr-highlight--blue-cumulus]
+[(#ENV{couleur}|=={bleu-clair}|oui) fr-highlight--blue-ecume]
+[(#ENV{couleur}|=={bleu-canard}|oui) fr-highlight--green-archipel]
+[(#ENV{couleur}|=={rouge}|oui) fr-highlight--purple-glycine]
+[(#ENV{couleur}|=={violet}|oui) fr-highlight--purple-glycine]
+[(#ENV{couleur}|=={beige}|oui) fr-highlight--pink-macaron]
+[(#ENV{couleur}|=={rouge}|oui) fr-highlight--pink-tuile]
+[(#ENV{couleur}|=={rose}|oui) fr-highlight--pink-tuile]
+[(#ENV{couleur}|=={vert}|oui) fr-highlight--green-emeraude]
+[(#ENV{couleur}|=={vert-clair}|oui) fr-highlight--green-menthe]
+[(#ENV{couleur}|=={vert-tilleul}|oui) fr-highlight--green-tilleul-verveine]
+[(#ENV{couleur}|=={vert-fluo}|oui) fr-highlight--green-bourgeon]
+[(#ENV{couleur}|=={orange}|oui) fr-highlight--orange-terre-battue]
+[(#ENV{couleur}|=={cafe}|oui) fr-highlight--brown-cafe-creme]
+[(#ENV{couleur}|=={marron-clair}|oui) fr-highlight--brown-caramel]
+[(#ENV{couleur}|=={marron}|oui) fr-highlight--brown-opera]
+[(#ENV{couleur}|=={gris-clair}|oui) fr-highlight--beige-gris-galet]
[(#ENV{couleur}|=={gris}|oui) background-contrast-grey]
">
diff --git a/design_system_admin/modeles/dsfr_image.css b/design_system_admin/modeles/dsfr_image.css
new file mode 100644
index 0000000000000000000000000000000000000000..5e0f09bb553dc365be4efc3b00426d47bb643899
--- /dev/null
+++ b/design_system_admin/modeles/dsfr_image.css
@@ -0,0 +1,71 @@
+/******* images *****/
+
+.hauteur-limitee, .hauteur-limitee .fr-card__img img {
+ height: auto !important;
+ aspect-ratio: auto;
+}
+
+figure img {
+ max-width: 100%;
+ height: auto;
+}
+
+.fr-fond-blanc {
+ background-color: #fff;
+}
+
+.text-center {
+ text-align: center;}
+
+ .text-right {
+ text-align: right;}
+
+ .fr-display-block{display: block;}
+
+ .fr-w-auto {
+ width:auto;
+ }
+
+ .fr-clear-right {
+ clear: right;
+ }
+
+ .fr-clear-left {
+ clear: left;
+ }
+
+ .fr-clear-both {
+ clear: both;
+ }
+
+ .float-left {
+ float: left !important;
+}
+
+.float-right {
+ float: right !important;
+}
+
+.texte-droite {
+ text-align: right;
+}
+
+
+/***** gestion des largeurs images et encdrés ****/
+
+@media (min-width: 767px) {
+.fr-largeur-100{width:100% !important;}
+.fr-largeur-75{width: 75% !important;}
+.fr-largeur-70{width: 70% !important;}
+.fr-largeur-50{width: 50% !important;}
+.fr-largeur-30{width: 30% !important;}
+.fr-largeur-25{width: 25% !important;}
+}
+@media (max-width: 766px) {
+.fr-largeur-100{width:100% !important;}
+.fr-largeur-75{width: 100% !important;}
+.fr-largeur-70{width: 100% !important;}
+.fr-largeur-50{width: 100% !important;}
+.fr-largeur-30{width: 100% !important;}
+.fr-largeur-25{width: 100% !important;}
+}
\ No newline at end of file
diff --git a/design_system_admin/modeles/dsfr_image.html b/design_system_admin/modeles/dsfr_image.html
index c8178289969fa4aea19020a7db59e6a5554ac1c7..215fbd3cf7e2afabcfb4a2c87cca2d8bb18f207f 100644
--- a/design_system_admin/modeles/dsfr_image.html
+++ b/design_system_admin/modeles/dsfr_image.html
@@ -2,6 +2,9 @@
Attention a bien reproduire le modele media_image pour assurer la retrocompatibilité
]
+[(#REM) ajout de la feuille CSS du modele ]
+<link rel="stylesheet" type="text/css" href="#CHEMIN{modeles/dsfr_image.css}" />
+
[(#REM) Existe-il un modéle spécifique é cette extension ?]
[(#CHEMIN{modeles/media_image_#EXTENSION.html}|oui)
<INCLURE{fond=modeles/media_image_#EXTENSION, id=#ID_DOCUMENT, env, connect}>
@@ -43,15 +46,19 @@ Attention a bien reproduire le modele media_image pour assurer la retrocompatibi
[(#CASE{droite}) #SET{aligntext, 'text-right'}]
[(#CASE{left}) #SET{aligntext, 'text-left'}]
[(#CASE{gauche}) #SET{aligntext, 'text-left'}]
- [(#CASE_DEFAULT) #SET{aligntext, 'text-center'}]
+ [(#CASE{center}) #SET{aligntext, 'text-center'}]
+ [(#CASE{centre}) #SET{aligntext, 'text-center'}]
+ [(#CASE_DEFAULT) #SET{aligntext, 'text-left'}]
[(#REM) gestion des alignements et des largeurs]
[(#ENV{largeur}|=={100}|oui) #SET{largeur_ok, 'fr-largeur-100'}]
+ [(#ENV{largeur}|=={75}|oui) #SET{largeur_ok, 'fr-largeur-75'}]
[(#ENV{largeur}|=={70}|oui) #SET{largeur_ok, 'fr-largeur-70'}]
[(#ENV{largeur}|=={50}|oui) #SET{largeur_ok, 'fr-largeur-50'}]
[(#ENV{largeur}|=={30}|oui) #SET{largeur_ok, 'fr-largeur-30'}]
- [(#ENV{largeur}|non) #SET{largeur_ok, 'fr-largeur-100'} #SET{image_largeur, '600px'} ]
+ [(#ENV{largeur}|=={25}|oui) #SET{largeur_ok, 'fr-largeur-25'}]
+ [(#ENV{largeur}|non) #SET{largeur_ok2, 'fr-largeur-100'} #SET{image_largeur2, '600px'} ]
@@ -78,23 +85,24 @@ Attention a bien reproduire le modele media_image pour assurer la retrocompatibi
[(#ENV{lien}|oui)</a>]
<div class=' fr-py-2v fr-col-12'>
- [<p class='fr-content-media__caption fr-m-0 fr-text--xs'>Crédits : (#CREDITS)</p>]
- [<p class='fr-content-media__caption fr-m-0'>(#ENV{legende})</p>]
- [<em class='css_ressource_size fr-m-0 fr-text--xs fr-w-100 fr-display-block'>Notes : (#ENV{notes}|propre|PtoBR) </em>]
- [<em class='css_ressource_size fr-m-0 fr-text--xs fr-w-100 fr-display-block'>Sources : (#ENV{sources}|propre|PtoBR) </em>]
- [<em class='css_ressource_size fr-m-0 fr-text--xs fr-w-100 fr-display-block'>Traitement : (#ENV{traitement}|propre|PtoBR) </em>]
- <a href='#URL_DOCUMENT' class='fr-btn fr-btn--tertiary fr-m-0 fr-p-3v [(#ENV{sans-rien}|oui) fr-hidden] [(#ENV{sans-agrandir}) fr-sr-only]' title="Agrandir la figure #ENV{id} (#EXTENSION, [(#TAILLE|taille_en_octets)]) "> <span class="fr-icon-zoom-in-line fr-mr-1w" aria-hidden="true"></span> [(#ENV{compact}|oui) <span class="fr-sr-only">] Agrandir [(#ENV{compact}|oui) </span>] <span class='fr-sr-only'> la figure #ENV{id} </span>
+ <div class='fr-mb-2v'>
+ [<p class='fr-content-media__caption fr-m-0 fr-text--xs'><:dse:credits:>(#CREDITS)</p>]
+ [<p class='fr-content-media__caption fr-m-0'>(#ENV*{legende}|propre)</p>]
+ [<em class=' fr-m-0 fr-text--xs fr-w-100 fr-display-block'>(#ENV*{notes}|propre) </em>]
+ [<em class=' fr-m-0 fr-text--xs fr-w-100 fr-display-block'>(#ENV*{sources}|propre) </em>]
+ [<em class=' fr-m-0 fr-text--xs fr-w-100 fr-display-block'>(#ENV*{traitement}|propre) </em>] </div>
+ <a href='#URL_DOCUMENT' class='fr-btn fr-btn--tertiary fr-m-0 fr-p-3v [(#ENV{sans-rien}|oui) fr-hidden] [(#ENV{sans-agrandir}) fr-sr-only]' title="<:dse:agrandir:> <:dse:la_figure:> #ENV{id} (#EXTENSION, [(#TAILLE|taille_en_octets)]) "> <span class="fr-icon-zoom-in-line fr-mr-1w" aria-hidden="true"></span> [(#ENV{compact}|oui) <span class="fr-sr-only">] <:dse:agrandir:> [(#ENV{compact}|oui) </span>] <span class='fr-sr-only'> <:dse:la_figure:> #ENV{id} </span>
</a>
<BOUCLE_test2_csv(CONDITION){si #GET{monfichier}}>
- <a download class="fr-btn fr-btn--tertiary fr-m-0 fr-p-3v" title="Télécharger le document #ENV{id_document} ([(#GET{type_doc}),] [ (#GET{doc_taille})])" href='#GET{url_doc}'><span class="fr-icon-download-line fr-mr-1w" aria-hidden="true">
-</span> [(#ENV{compact}|oui) <span class="fr-sr-only">] Télécharger [(#ENV{compact}|oui) </span>] <span class="fr-ml-1v [(#ENV{compact}|oui) fr-sr-only] "> ([(#GET{type_doc}),] [ (#GET{doc_taille})])</span><span class='fr-sr-only'> le document [ (#TITRE*)] </span> </a>
+ <a download class="fr-btn fr-btn--tertiary fr-m-0 fr-p-3v" title="<:dse:telecharger:> <:dse:le_document:> #ENV{id_document} ([(#GET{type_doc}),] [ (#GET{doc_taille})])" href='#GET{url_doc}'><span class="fr-icon-download-line fr-mr-1w" aria-hidden="true">
+</span> [(#ENV{compact}|oui) <span class="fr-sr-only">] <:dse:telecharger:> [(#ENV{compact}|oui) </span>] <span class="fr-ml-1v [(#ENV{compact}|oui) fr-sr-only] "> ([(#GET{type_doc}),] [ (#GET{doc_taille})])</span><span class='fr-sr-only'> <:dse:le_document:> [ (#TITRE*)] </span> </a>
</BOUCLE_test2_csv>
<div class="fr-accordion fr-mb-1w fr-btn--tertiary d-inline-block [(#ENV{sans-rien}|oui) fr-hidden] [(#ENV{sans-transcription}) fr-hidden] ">
<div class="fr-accordion__title fr-pr-4">
<button type="button" title="Transcription de la figure #ENV{id}" class="fr-transcription__btn d-block fr-p-3v" aria-controls="collapse-group-section-0-mini#GET{titre1}#GET{aleatoire}" aria-expanded="[(#GET{isressource}|=={0}|non)true">
- [(#ENV{compact}|oui) <span class="fr-sr-only">] Transcription [(#ENV{compact}|oui)</span>]<span class="fr-sr-only">de l'image #ID_DOCUMENT</span>
+ [(#ENV{compact}|oui) <span class="fr-sr-only">] <:dse:transcription:> [(#ENV{compact}|oui)</span>]<span class="fr-sr-only"><:dse:de_la_figure:> #ID_DOCUMENT</span>
</button>
</div>
</div>
diff --git a/design_system_admin/modeles/dsfr_lien - archive dimanche.html b/design_system_admin/modeles/dsfr_lien - archive dimanche.html
new file mode 100644
index 0000000000000000000000000000000000000000..e2b0253e26506c2b7a52931df3d52522cda72ca3
--- /dev/null
+++ b/design_system_admin/modeles/dsfr_lien - archive dimanche.html
@@ -0,0 +1,666 @@
+[(#REM)
+Gestion des liens d'article, de rubriques d'url et de doc avec les modeles correspondants
+]
+
+[(#REM) gestion d'une div de debut et de fin ]
+
+[(#ENV{debut}|oui)<div class="fr-grid-row [(#ENV{marge}|oui) fr-grid-row--gutters ] fr-mb-3w">]
+
+[(#ENV{fin}|oui)</div>]
+
+[(#REM) gestion des icones ]
+[(#ENV{icone}|=={ajouter}|oui) #SET{mon-icone, ' fr-icon-file-add-fill'} ]
+[(#ENV{icone}|=={ampoule}|oui) #SET{mon-icone, ' fr-icon-lightbulb-fill'} ]
+[(#ENV{icone}|=={archive}|oui) #SET{mon-icone, ' fr-icon-archive-fill'} ]
+[(#ENV{icone}|=={article}|oui) #SET{mon-icone, ' fr-icon-article-fill'} ]
+[(#ENV{icone}|=={attention}|oui) #SET{mon-icone, ' fr-icon-warning-fill'} ]
+[(#ENV{icone}|=={calendrier}|oui) #SET{mon-icone, ' fr-icon-calendar-fill'} ]
+[(#ENV{icone}|=={camembert}|oui) #SET{mon-icone, ' fr-icon-pie-chart-2-fill'} ]
+[(#ENV{icone}|=={camera}|oui) #SET{mon-icone, ' fr-icon-camera-fill'} ]
+[(#ENV{icone}|=={chart}|oui) #SET{mon-icone, ' fr-icon-bar-chart-box-fill'} ]
+[(#ENV{icone}|=={check}|oui) #SET{mon-icone, ' fr-icon-success-fill'} ]
+[(#ENV{icone}|=={check-seul}|oui) #SET{mon-icone, ' fr-icon-check-line'} ]
+[(#ENV{icone}|=={citation}|oui) #SET{mon-icone, ' fr-icon-quote-fill'} ]
+[(#ENV{icone}|=={compte}|oui) #SET{mon-icone, ' fr-icon-account-circle-fill'} ]
+[(#ENV{icone}|=={copyright}|oui) #SET{mon-icone, ' fr-icon-copyright-fill'} ]
+[(#ENV{icone}|=={discussion}|oui) #SET{mon-icone, ' fr-icon-chat-3-fill'} ]
+[(#ENV{icone}|=={dossier}|oui) #SET{mon-icone, ' fr-icon-folder-2-fill'} ]
+[(#ENV{icone}|=={ecrire}|oui) #SET{mon-icone, ' fr-icon-draft-fill'} ]
+[(#ENV{icone}|=={email}|oui) #SET{mon-icone, ' fr-icon-mail-fill'} ]
+[(#ENV{icone}|=={engrenage}|oui) #SET{mon-icone, ' fr-icon-settings-5-fill'} ]
+[(#ENV{icone}|=={enquete}|oui) #SET{mon-icone, ' fr-icon-survey-fill'} ]
+[(#ENV{icone}|=={epingle}|oui) #SET{mon-icone, ' fr-icon-map-pin-2-fill'} ]
+[(#ENV{icone}|=={equipe}|oui) #SET{mon-icone, ' fr-icon-team-fill'} ]
+[(#ENV{icone}|=={etoile}|oui) #SET{mon-icone, ' fr-icon-star-s-fill'} ]
+[(#ENV{icone}|=={feuille}|oui) #SET{mon-icone, ' fr-icon-leaf-fill'} ]
+[(#ENV{icone}|=={fichier}|oui) #SET{mon-icone, ' fr-icon-file-fill'} ]
+[(#ENV{icone}|=={fichier-texte}|oui) #SET{mon-icone, ' fr-icon-file-text-fill'} ]
+[(#ENV{icone}|=={film}|oui) #SET{mon-icone, ' fr-icon-film-fill'} ]
+[(#ENV{icone}|=={fleche-bas}|oui) #SET{mon-icone, ' fr-icon-arrow-down-fill'} ]
+[(#ENV{icone}|=={mini-fleche-droite}|oui) #SET{mon-icone, ' fr-icon-arrow-right-s-fill'} ]
+[(#ENV{icone}|=={fleche-droite}|oui) #SET{mon-icone, ' fr-icon-arrow-right-fill'} ]
+[(#ENV{icone}|=={mini-fleche-gauche}|oui) #SET{mon-icone, ' fr-icon-arrow-left-s-fill'} ]
+[(#ENV{icone}|=={fleche-gauche}|oui) #SET{mon-icone, ' fr-icon-arrow-left-fill'} ]
+[(#ENV{icone}|=={fleche-haut}|oui) #SET{mon-icone, ' fr-icon-arrow-up-fill'} ]
+[(#ENV{icone}|=={france}|oui) #SET{mon-icone, ' fr-icon-france-fill'} ]
+[(#ENV{icone}|=={graphique}|oui) #SET{mon-icone, ' fr-icon-line-chart-fill'} ]
+[(#ENV{icone}|=={groupe}|oui) #SET{mon-icone, ' fr-icon-group-fill'} ]
+[(#ENV{icone}|=={image}|oui) #SET{mon-icone, ' fr-icon-image-fill'} ]
+[(#ENV{icone}|=={imprimante}|oui) #SET{mon-icone, ' fr-icon-printer-fill'} ]
+[(#ENV{icone}|=={info}|oui) #SET{mon-icone, ' fr-icon-info-fill'} ]
+[(#ENV{icone}|=={journal}|oui) #SET{mon-icone, ' fr-icon-newspaper-fill'} ]
+[(#ENV{icone}|=={lien}|oui) #SET{mon-icone, ' fr-icon-links-fill'} ]
+[(#ENV{icone}|=={lien-externe}|oui) #SET{mon-icone, ' fr-icon-external-link-fill'} ]
+[(#ENV{icone}|=={livre}|oui) #SET{mon-icone, ' fr-icon-book-2-fill'} ]
+[(#ENV{icone}|=={mallette}|oui) #SET{mon-icone, ' fr-icon-briefcase-fill'} ]
+[(#ENV{icone}|=={micro}|oui) #SET{mon-icone, ' fr-icon-mic-fill'} ]
+[(#ENV{icone}|=={mini-fleche-bas}|oui) #SET{mon-icone, ' fr-icon-arrow-down-s-fill'} ]
+[(#ENV{icone}|=={mini-fleche-haut}|oui) #SET{mon-icone, ' fr-icon-arrow-up-s-fill'} ]
+[(#ENV{icone}|=={monde}|oui) #SET{mon-icone, ' fr-icon-global-fill'} ]
+[(#ENV{icone}|=={musique}|oui) #SET{mon-icone, ' fr-icon-music-2-fill'} ]
+[(#ENV{icone}|=={nuage}|oui) #SET{mon-icone, ' fr-icon-cloud-fill'} ]
+[(#ENV{icone}|=={pdf}|oui) #SET{mon-icone, ' fr-icon-file-pdf-fill'} ]
+[(#ENV{icone}|=={piecejointe}|oui) #SET{mon-icone, ' fr-icon-attachment-fill'} ]
+[(#ENV{icone}|=={plante}|oui) #SET{mon-icone, ' fr-icon-plant-fill'} ]
+[(#ENV{icone}|=={plus}|oui) #SET{mon-icone, ' fr-icon-add-line'} ]
+[(#ENV{icone}|=={plus-rond}|oui) #SET{mon-icone, ' fr-icon-add-circle-fill'} ]
+[(#ENV{icone}|=={question}|oui) #SET{mon-icone, ' fr-icon-questionnaire-fill'} ]
+[(#ENV{icone}|=={question}|oui) #SET{mon-icone, ' fr-icon-question-fill'} ]
+[(#ENV{icone}|=={rechercher}|oui) #SET{mon-icone, ' fr-icon-search-fill'} ]
+[(#ENV{icone}|=={recycler}|oui) #SET{mon-icone, ' fr-icon-recycle-fill'} ]
+[(#ENV{icone}|=={rss}|oui) #SET{mon-icone, ' fr-icon-rss-fill'} ]
+[(#ENV{icone}|=={signet}|oui) #SET{mon-icone, ' fr-icon-bookmark-fill'} ]
+[(#ENV{icone}|=={telecharger}|oui) #SET{mon-icone, ' fr-icon-file-download-fill'} ]
+[(#ENV{icone}|=={telecharger}|oui) #SET{mon-icone, ' fr-icon-download-fill'} ]
+[(#ENV{icone}|=={telephone}|oui) #SET{mon-icone, ' fr-icon-phone-fill'} ]
+[(#ENV{icone}|=={terre}|oui) #SET{mon-icone, ' fr-icon-earth-fill'} ]
+[(#ENV{icone}|=={upload}|oui) #SET{mon-icone, ' fr-icon-upload-fill'} ]
+[(#ENV{icone}|=={utilisateur}|oui) #SET{mon-icone, ' fr-icon-user-fill'} ]
+[(#ENV{icone}|=={wifi}|oui) #SET{mon-icone, ' fr-icon-wifi-fill'} ]
+[(#ENV{icone}|=={zoom}|oui) #SET{mon-icone, ' fr-icon-zoom-in-fill'} ]
+[(#ENV{icone}|=={zoom-out}|oui) #SET{mon-icone, ' fr-icon-zoom-out-fill'} ]
+[(#ENV{icone}|=={ajouter2}|oui) #SET{mon-icone, ' fr-icon-file-add-line'} ]
+[(#ENV{icone}|=={ampoule2}|oui) #SET{mon-icone, ' fr-icon-lightbulb-line'} ]
+[(#ENV{icone}|=={archive2}|oui) #SET{mon-icone, ' fr-icon-archive-line'} ]
+[(#ENV{icone}|=={article2}|oui) #SET{mon-icone, ' fr-icon-article-line'} ]
+[(#ENV{icone}|=={attention2}|oui) #SET{mon-icone, ' fr-icon-warning-line'} ]
+[(#ENV{icone}|=={calendrier2}|oui) #SET{mon-icone, ' fr-icon-calendar-line'} ]
+[(#ENV{icone}|=={camembert2}|oui) #SET{mon-icone, ' fr-icon-pie-chart-2-line'} ]
+[(#ENV{icone}|=={camera2}|oui) #SET{mon-icone, ' fr-icon-camera-line'} ]
+[(#ENV{icone}|=={chart2}|oui) #SET{mon-icone, ' fr-icon-bar-chart-box-line'} ]
+[(#ENV{icone}|=={check2}|oui) #SET{mon-icone, ' fr-icon-success-line'} ]
+[(#ENV{icone}|=={citation2}|oui) #SET{mon-icone, ' fr-icon-quote-line'} ]
+[(#ENV{icone}|=={compte2}|oui) #SET{mon-icone, ' fr-icon-account-circle-line'} ]
+[(#ENV{icone}|=={copyright2}|oui) #SET{mon-icone, ' fr-icon-copyright-line'} ]
+[(#ENV{icone}|=={discussion2}|oui) #SET{mon-icone, ' fr-icon-chat-3-line'} ]
+[(#ENV{icone}|=={dossier2}|oui) #SET{mon-icone, ' fr-icon-folder-2-line'} ]
+[(#ENV{icone}|=={ecrire2}|oui) #SET{mon-icone, ' fr-icon-draft-line'} ]
+[(#ENV{icone}|=={email2}|oui) #SET{mon-icone, ' fr-icon-mail-line'} ]
+[(#ENV{icone}|=={engrenage2}|oui) #SET{mon-icone, ' fr-icon-settings-5-line'} ]
+[(#ENV{icone}|=={enquete2}|oui) #SET{mon-icone, ' fr-icon-survey-line'} ]
+[(#ENV{icone}|=={epingle2}|oui) #SET{mon-icone, ' fr-icon-map-pin-2-line'} ]
+[(#ENV{icone}|=={equipe2}|oui) #SET{mon-icone, ' fr-icon-team-line'} ]
+[(#ENV{icone}|=={etoile}|oui) #SET{mon-icone, ' fr-icon-star-s-line'} ]
+[(#ENV{icone}|=={feuille2}|oui) #SET{mon-icone, ' fr-icon-leaf-line'} ]
+[(#ENV{icone}|=={fichier-texte2}|oui) #SET{mon-icone, ' fr-icon-file-text-line'} ]
+[(#ENV{icone}|=={fichier2}|oui) #SET{mon-icone, ' fr-icon-file-line'} ]
+[(#ENV{icone}|=={film2}|oui) #SET{mon-icone, ' fr-icon-film-line'} ]
+[(#ENV{icone}|=={fleche-bas}|oui) #SET{mon-icone, ' fr-icon-arrow-down-line'} ]
+[(#ENV{icone}|=={fleche-droite2}|oui) #SET{mon-icone, ' fr-icon-arrow-right-line'} ]
+[(#ENV{icone}|=={mini-fleche-droite2}|oui) #SET{mon-icone, ' fr-icon-arrow-right-s-line'} ]
+[(#ENV{icone}|=={mini-fleche-gauche2}|oui) #SET{mon-icone, ' fr-icon-arrow-left-s-line'} ]
+[(#ENV{icone}|=={fleche-gauche2}|oui) #SET{mon-icone, ' fr-icon-arrow-left-line'} ]
+[(#ENV{icone}|=={fleche-haut2}|oui) #SET{mon-icone, ' fr-icon-arrow-up-line'} ]
+[(#ENV{icone}|=={france2}|oui) #SET{mon-icone, ' fr-icon-france-line'} ]
+[(#ENV{icone}|=={graphique2}|oui) #SET{mon-icone, ' fr-icon-line-chart-line'} ]
+[(#ENV{icone}|=={groupe2}|oui) #SET{mon-icone, ' fr-icon-group-line'} ]
+[(#ENV{icone}|=={image2}|oui) #SET{mon-icone, ' fr-icon-image-line'} ]
+[(#ENV{icone}|=={imprimante2}|oui) #SET{mon-icone, ' fr-icon-printer-line'} ]
+[(#ENV{icone}|=={info}|oui) #SET{mon-icone, ' fr-icon-info-line'} ]
+[(#ENV{icone}|=={journal2}|oui) #SET{mon-icone, ' fr-icon-newspaper-line'} ]
+[(#ENV{icone}|=={lien-externe}|oui) #SET{mon-icone, ' fr-icon-external-link-line'} ]
+[(#ENV{icone}|=={lien2}|oui) #SET{mon-icone, ' fr-icon-links-line'} ]
+[(#ENV{icone}|=={livre2}|oui) #SET{mon-icone, ' fr-icon-book-2-line'} ]
+[(#ENV{icone}|=={mallete2}|oui) #SET{mon-icone, ' fr-icon-briefcase-line'} ]
+[(#ENV{icone}|=={micro2}|oui) #SET{mon-icone, ' fr-icon-mic-line'} ]
+[(#ENV{icone}|=={mini-fleche-bas2}|oui) #SET{mon-icone, ' fr-icon-arrow-down-s-line'} ]
+[(#ENV{icone}|=={mini-fleche-haut2}|oui) #SET{mon-icone, ' fr-icon-arrow-up-s-line'} ]
+[(#ENV{icone}|=={monde2}|oui) #SET{mon-icone, ' fr-icon-global-line'} ]
+[(#ENV{icone}|=={musique2}|oui) #SET{mon-icone, ' fr-icon-music-2-line'} ]
+[(#ENV{icone}|=={nuage2}|oui) #SET{mon-icone, ' fr-icon-cloud-line'} ]
+[(#ENV{icone}|=={pdf2}|oui) #SET{mon-icone, ' fr-icon-file-pdf-line'} ]
+[(#ENV{icone}|=={piecejointe2}|oui) #SET{mon-icone, ' fr-icon-attachment-line'} ]
+[(#ENV{icone}|=={plante2}|oui) #SET{mon-icone, ' fr-icon-plant-line'} ]
+[(#ENV{icone}|=={plus-rond2}|oui) #SET{mon-icone, ' fr-icon-add-circle-line'} ]
+[(#ENV{icone}|=={question2}|oui) #SET{mon-icone, ' fr-icon-questionnaire-line'} ]
+[(#ENV{icone}|=={question2}|oui) #SET{mon-icone, ' fr-icon-question-line'} ]
+[(#ENV{icone}|=={rechercher2}|oui) #SET{mon-icone, ' fr-icon-search-line'} ]
+[(#ENV{icone}|=={recycler2}|oui) #SET{mon-icone, ' fr-icon-recycle-line'} ]
+[(#ENV{icone}|=={rss2}|oui) #SET{mon-icone, ' fr-icon-rss-line'} ]
+[(#ENV{icone}|=={signet2}|oui) #SET{mon-icone, ' fr-icon-bookmark-line'} ]
+[(#ENV{icone}|=={telecharger2}|oui) #SET{mon-icone, ' fr-icon-file-download-line'} ]
+[(#ENV{icone}|=={telecharger2}|oui) #SET{mon-icone, ' fr-icon-download-line'} ]
+[(#ENV{icone}|=={telephone2}|oui) #SET{mon-icone, ' fr-icon-phone-line'} ]
+[(#ENV{icone}|=={terre2}|oui) #SET{mon-icone, ' fr-icon-earth-line'} ]
+[(#ENV{icone}|=={upload2}|oui) #SET{mon-icone, ' fr-icon-upload-line'} ]
+[(#ENV{icone}|=={utilisateur2}|oui) #SET{mon-icone, ' fr-icon-user-line'} ]
+[(#ENV{icone}|=={wifi2}|oui) #SET{mon-icone, ' fr-icon-wifi-line'} ]
+[(#ENV{icone}|=={zoom-out2}|oui) #SET{mon-icone, ' fr-icon-zoom-out-line'} ]
+[(#ENV{icone}|=={zoom2}|oui) #SET{mon-icone, ' fr-icon-zoom-in-line'} ]
+
+[(#REM)icone par defaut]
+[(#ENV{icone}|oui) #SET{mon-icone, ' fr-icon-arrow-right-line'} ]
+
+[(#ENV{icone-dsfr}|oui) #SET{mon-icone, #ENV{icone-dsfr}}]
+
+[(#REM) gestion des couleurs ]
+[(#ENV{couleur}|=={jaune}|oui) #SET{ma_couleur, 'fr-callout--yellow-moutarde'} ]
+[(#ENV{couleur}|=={jaune-clair}|oui) #SET{ma_couleur, 'fr-callout--yellow-tournesol'} ]
+[(#ENV{couleur}|=={bleu}|oui) #SET{ma_couleur, 'fr-callout--blue-cumulus'} ]
+[(#ENV{couleur}|=={bleu-clair}|oui) #SET{ma_couleur, 'fr-callout--blue-ecume'} ]
+[(#ENV{couleur}|=={bleu-canard}|oui) #SET{ma_couleur, 'fr-callout--green-archipel'} ]
+[(#ENV{couleur}|=={rouge}|oui) #SET{ma_couleur, 'fr-callout--purple-glycine'} ]
+[(#ENV{couleur}|=={violet}|oui) #SET{ma_couleur, 'fr-callout--purple-glycine'} ]
+[(#ENV{couleur}|=={beige}|oui) #SET{ma_couleur, 'fr-callout--pink-macaron'} ]
+[(#ENV{couleur}|=={rouge}|oui) #SET{ma_couleur, 'fr-callout--pink-tuile'} ]
+[(#ENV{couleur}|=={rose}|oui) #SET{ma_couleur, 'fr-callout--pink-tuile'} ]
+[(#ENV{couleur}|=={vert}|oui) #SET{ma_couleur, 'fr-callout--green-emeraude'} ]
+[(#ENV{couleur}|=={vert-clair}|oui) #SET{ma_couleur, 'fr-callout--green-menthe'} ]
+[(#ENV{couleur}|=={vert-tilleul}|oui) #SET{ma_couleur, 'fr-callout--green-tilleul-verveine'} ]
+[(#ENV{couleur}|=={vert-fluo}|oui) #SET{ma_couleur, 'fr-callout--green-bourgeon'} ]
+[(#ENV{couleur}|=={orange}|oui) #SET{ma_couleur, 'fr-callout--orange-terre-battue'} ]
+[(#ENV{couleur}|=={cafe}|oui) #SET{ma_couleur, 'fr-callout--brown-cafe-creme'} ]
+[(#ENV{couleur}|=={marron-clair}|oui) #SET{ma_couleur, 'fr-callout--brown-caramel'} ]
+[(#ENV{couleur}|=={marron}|oui) #SET{ma_couleur, 'fr-callout--brown-opera'} ]
+[(#ENV{couleur}|=={gris-clair}|oui) #SET{ma_couleur, 'fr-callout--beige-gris-galet'} ]
+[(#ENV{couleur}|=={gris}|oui) #SET{ma_couleur, 'fr-card--grey'} ]
+
+[(#REM) correction du style pour les couleurs ]
+<style>
+.fr-card__content {
+ box-shadow: none !important;
+}
+</style>
+
+[(#REM) gestion des couleurs de badge ]
+[(#ENV{couleur_badge}|=={jaune}|oui) #SET{moncouleurbadge, 'fr-badge--new'} ]
+[(#ENV{couleur_badge}|=={marron}|oui) #SET{moncouleurbadge, 'fr-badge--warning'} ]
+[(#ENV{couleur_badge}|=={bleu}|oui) #SET{moncouleurbadge, 'fr-badge--info'} ]
+[(#ENV{couleur_badge}|=={rouge}|oui) #SET{moncouleurbadge, 'fr-badge--error'} ]
+[(#ENV{couleur_badge}|=={vert}|oui) #SET{moncouleurbadge, 'fr-badge--success'} ]
+
+<BOUCLE_condition_rubrique(CONDITION){si #ENV{rub}|oui}>
+ [(#REM) c'est une rubrique ]
+
+
+ [(#REM) c'est une rubrique avec un format card ]
+
+
+ <BOUCLE_rubrique-carte(RUBRIQUES){SI #ENV{carte}|oui}{id_rubrique=#ENV{rub}} >
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+ <div class="fr-card fr-enlarge-link
+ [(#ENV{vertical}|non) fr-card--horizontal]
+ [(#ENV{ratio50}|oui) fr-card--horizontal-half]
+ [(#ENV{ratio30}|oui) fr-card--horizontal-tier]
+ fr-card--sm [(#ENV{hauteur}|oui) hauteur-limitee ] fr-mb-2w ">
+ <div class="fr-card__body">
+ <div class="fr-card__content [(#GET{ma_couleur})]">
+ <p class="fr-card__title">
+ <a href="#URL_RUBRIQUE">#TITRE</a>
+ </p>
+ <div class="fr-card__desc">[(#INTRODUCTION{150})]</div>
+ [<div class="fr-card__start">
+ <ul class="fr-badges-group">
+ <li><p class="fr-badge [(#GET{moncouleurbadge})]">(#ENV{badge})</p></li>
+ </ul>
+ </div>]
+ [(#ENV{sans-date}|non)<div class="fr-card__start">
+ <p class="fr-card__detail fr-icon-calendar-line">[(#DATE|affdate)]</p>
+ </div>]
+ </div>
+ </div>
+ <BOUCLE_conditionsimage0(CONDITION){SI #ENV{sans-image}|non}>
+ <div class="fr-card__header">
+ <div class="fr-card__img">
+ <BOUCLE_conditionsimage(CONDITION){SI #ENV{logo}|oui}>
+ [(#LOGO_ARTICLE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ [(#LOGO_RUBRIQUE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_conditionsimage>
+
+ <BOUCLE_conditionsimage2(CONDITION){SI #ENV{image}|oui}>
+ <BOUCLE_image_bignews3(DOCUMENTS){id_rubrique}{0,1}>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_bignews3>
+ </BOUCLE_conditionsimage2>
+
+ <BOUCLE_conditionsimagerub_id(CONDITION){SI #ENV{image_id}|oui}>
+ <BOUCLE_image_docrub_id(DOCUMENTS){id_document=#ENV{image_id}}{0,1}>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_docrub_id>
+ </BOUCLE_conditionsimagerub_id>
+
+ <BOUCLE_conditionsimage3(CONDITION){SI #ENV{image}|non}{SI #ENV{logo}|non}{SI #ENV{image_id}|non}>
+ <BOUCLE_theme23(MOTS){id_rubrique}{id_groupe=14}>
+ #SET{themeimage, (#INFO_DESCRIPTIF{mot, #ID_MOT_RACINE}|textebrut)}
+ <img width="350" height="350" class="fr-img-responsive" src="#CHEMIN{images/themes/#GET{themeimage}-navigation.svg}" alt="">
+ </BOUCLE_theme23>
+ [(#LOGO_RUBRIQUE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ <//B_theme23>
+ </BOUCLE_conditionsimage3>
+
+ </div>
+ </div>
+ </BOUCLE_conditionsimage0>
+
+ </div>
+
+ [(#ENV{vertical}|oui)</div>]
+ </BOUCLE_rubrique-carte>
+
+ [(#REM) c'est une rubrique avec un format tuile ]
+
+ <BOUCLE_rubrique-tuile(RUBRIQUES){SI #ENV{tuile}|oui} {id_rubrique=#ENV{rub}}>
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+ <div class="fr-tile fr-enlarge-link [(#ENV{vertical}|non)fr-tile--horizontal] fr-mb-2w">
+ <div class="fr-tile__body">
+ <div class="fr-tile__content">
+ <h4 class="fr-tile__title">
+ <a class="" href="#URL_RUBRIQUE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ </h4>
+ <div class="fr-tile__desc">[(#INTRODUCTION{150})]</div>
+ </div>
+ </div>
+ <BOUCLE_conditionstuileimage(CONDITION){SI #ENV{sans-image}|non}>
+ <div class="fr-tile__img">
+
+
+ <BOUCLE_image_rub_tuile(DOCUMENTS){id_rubrique}{0,1}>
+ [(#FICHIER |image_reduire{80,80} |image_recadre{80,80,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_rub_tuile>
+
+ <BOUCLE_theme25(MOTS){id_rubrique}{id_groupe=14}>
+ #SET{themeimage, (#INFO_DESCRIPTIF{mot, #ID_MOT_RACINE}|textebrut)}
+ <img width="350" height="350" class="fr-img-responsive" src="#CHEMIN{images/themes/#GET{themeimage}-navigation.svg}" alt="">
+ </BOUCLE_theme25>
+
+
+ </div>
+ </BOUCLE_conditionstuileimage>
+ </div>
+ [(#ENV{vertical}|oui)</div>]
+ </BOUCLE_rubrique-tuile>
+
+ [(#REM) c'est un article avec un format bouton ]
+
+ <BOUCLE_rubrique-bouton(RUBRIQUES){SI #ENV{bouton}|oui} {id_rubrique=#ENV{rub}}>
+ <a class="fr-btn fr-my-1v [(#ENV{secondaire}|oui) fr-btn--secondary] [(#ENV{tertiaire}|oui) fr-btn--tertiary] [(#ENV{sans-encadre}|oui) fr-btn--tertiary-no-outline] [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) [(#ENV{icone-seule}|non) fr-btn--icon-right ]] [(#ENV{icone-gauche}|oui) fr-btn--icon-left] [(#ENV{petit}|oui) fr-btn--sm] [(#ENV{grand}|oui) fr-btn--lg]" [(#ENV{icone-seule}|oui)title="[(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #TITRE]"] [style="width:(#ENV{largeur})"] href="#URL_RUBRIQUE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] - ouvre une nouvelle fenêtre"] >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ </BOUCLE_rubrique-bouton>
+
+ [(#REM) c'est un article avec un format tag ]
+
+ <BOUCLE_rubrique-tag(RUBRIQUES){SI #ENV{tag}|oui} {id_rubrique=#ENV{rub}}>
+ <a class="fr-tag fr-my-1v [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-tag--icon-right] [(#ENV{icone-gauche}|oui) fr-tag--icon-left] [(#ENV{petit}|oui) fr-tag--sm] [(#ENV{grand}|oui) fr-tag--lg]" target="_self" href="#URL_RUBRIQUE" >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ </BOUCLE_rubrique-tag>
+
+ [(#REM) ce n'est pas
+ une card
+ ou une tuile
+ ou un bouton
+ ou un tag
+ donc c'est une rubrique simple ou avec un target blank une taille et une icone]
+
+ <BOUCLE_rubrique-simple(RUBRIQUES){id_rubrique=#ENV{rub}}{SI #ENV{carte}|non}>
+ <a class="fr-link [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-link--icon-right] [(#ENV{icone-gauche}|oui) fr-link--icon-left] [(#ENV{petit}|oui) fr-link--sm] [(#ENV{grand}|oui) fr-link--lg]" href="#URL_RUBRIQUE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#TITRE] - ouvre une nouvelle fenêtre"]>
+ [(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]
+ </a>
+ </BOUCLE_rubrique-simple>
+
+ <//B_rubrique-tag>
+
+ <//B_rubrique-bouton>
+
+ <//B_rubrique-tuile>
+
+ <//B_rubrique-carte>
+
+</BOUCLE_condition_rubrique>
+
+<BOUCLE_condition_document(CONDITION){si #ENV{doc}|oui}>
+
+ [(#REM) c'est une document simple]
+
+ <BOUCLE_document-simple(DOCUMENTS){id_document=#ENV{doc}}{si #ENV{carte}|non}>
+ <div class="fr-download">
+ <p class="fr-m-0">
+ <a href="#URL_DOCUMENT" download class="fr-download__link" [title="<multi>{fr}Télécharger ce document {en}Download this file</multi> : (#TITRE)" : #TITRE"]>[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]
+ <span class="fr-download__detail">[<multi>{fr}Fichier {en}File</multi> (#TYPE_DOCUMENT)] [ - (#TAILLE|taille_en_octets)]</span>
+ </a>
+ </p>
+ </div>
+ </BOUCLE_document-simple>
+
+
+
+ <BOUCLE_document-carte(DOCUMENTS){id_document=#ENV{doc}}{si #ENV{carte}|oui}>
+
+ [(#REM) c'est une document au format carte]
+
+ <div class="fr-download fr-enlarge-link fr-download--card">
+ <p class="fr-m-0">
+ <a href="#URL_DOCUMENT" download class="fr-download__link" [title="Télécharger le document : (#TITRE)"]>[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]
+ <span class="fr-download__detail">
+ [Fichier (#TYPE_DOCUMENT)] [ - (#TAILLE|taille_en_octets)]
+
+ </span>
+ </a>
+ </p>
+ [<p class="fr-download__desc">(#DESCRIPTIF*)</p>]
+</div>
+
+</BOUCLE_document-carte>
+
+
+
+
+
+</BOUCLE_condition_document>
+
+ [(#REM) c'est une url avec un format card ]
+ <BOUCLE_url_carte(CONDITION){si #ENV{url}|oui}{si #ENV{url}|contient_pdf|non}{si #ENV{carte}|oui}>
+
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+
+ <div class="fr-card fr-enlarge-link
+ [(#ENV{vertical}|non) fr-card--horizontal]
+ [(#ENV{ratio50}|oui) fr-card--horizontal-half]
+ [(#ENV{ratio30}|oui) fr-card--horizontal-tier]
+ fr-mb-2w ">
+ <div class="fr-card__body">
+ <div class="fr-card__content [(#GET{ma_couleur})]">
+ <p class="fr-card__title">
+ <a href="#ENV{url}">[(#ENV{titre}|non) #ENV{url}][(#ENV{titre}|oui) #ENV{titre}]</a>
+ </p>
+ [<div class="fr-card__desc fr-mb-2w">(#ENV{texte})</div>]
+ [<div class="fr-card__start">
+ <ul class="fr-badges-group">
+ <li><p class="fr-badge [(#GET{moncouleurbadge})]">(#ENV{badge})</p></li>
+ </ul>
+ </div>]
+ </div>
+ </div>
+
+ <BOUCLE_conditionsimage00(CONDITION){SI #ENV{image_id}|oui}>
+ <div class="fr-card__header">
+ <div class="fr-card__img">
+ <BOUCLE_image_id(DOCUMENTS){id_document=#ENV{image_id}}{0,1}>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_id>
+ </div>
+ </div>
+ </BOUCLE_conditionsimage00>
+
+ </div>
+ [(#ENV{vertical}|oui)</div>]
+ </BOUCLE_url_carte>
+
+ [(#REM) c'est une url avec un format tuile ]
+ <BOUCLE_url_tuile(CONDITION){si #ENV{url}|oui}{si #ENV{url}|contient_pdf|non}{SI #ENV{tuile}|oui}>
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+ <div class="fr-tile fr-enlarge-link [(#ENV{vertical}|non)fr-tile--horizontal] fr-mb-2w">
+ <div class="fr-tile__body">
+ <div class="fr-tile__content">
+ [<h4 class="fr-tile__title">
+ <a class="" href="#ENV{url}">(#ENV{titre})</a>
+ </h4>]
+ [<div class="fr-tile__desc">(#ENV{texte})</div>]
+ </div>
+ </div>
+
+ <BOUCLE_conditionsimagetuile(CONDITION){SI #ENV{image_id}|oui}>
+ <div class="fr-tile__img">
+
+ <BOUCLE_image_id_tuile(DOCUMENTS){id_document=#ENV{image_id}}{0,1}>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_id_tuile>
+
+ </div>
+ </BOUCLE_conditionsimagetuile>
+
+ </div>
+ [(#ENV{vertical}|oui)</div>]
+ </BOUCLE_url_tuile>
+
+ [(#REM) c'est une url avec un format bouton ]
+ <BOUCLE_url-bouton(CONDITION){si #ENV{url}|oui}{si #ENV{url}|contient_pdf|non}{SI #ENV{bouton}|oui}>
+
+ <a class="fr-btn fr-my-1v [(#ENV{bouton-secondaire}|oui) fr-btn--secondary] [(#ENV{bouton-tertiaire}|oui) fr-btn--tertiary] [(#ENV{sans-encadre}|oui) fr-btn--tertiary-no-outline] [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) [(#ENV{icone-seule}|non) fr-btn--icon-right ]] [(#ENV{icone-gauche}|oui) fr-btn--icon-left] [(#ENV{petit}|oui) fr-btn--sm] [(#ENV{grand}|oui) fr-btn--lg]" [(#ENV{icone-seule}|oui)title="[(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #ENV{TITRE}]"] [style="width:(#ENV{largeur})"] href="#ENV{url}" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #ENV{titre}] - ouvre une nouvelle fenêtre"] >[(#ENV{titre})]</a>
+ </BOUCLE_url-bouton>
+
+ [(#REM) c'est une url avec un format tag ]
+ <BOUCLE_url-tag(CONDITION){si #ENV{url}|oui}{si #ENV{url}|contient_pdf|non}{SI #ENV{tag}|oui}>
+
+ <a class="fr-tag fr-my-1v [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-tag--icon-right] [(#ENV{icone-gauche}|oui) fr-tag--icon-left] [(#ENV{petit}|oui) fr-tag--sm] [(#ENV{grand}|oui) fr-tag--lg]" target="_self" href="#ENV{url}" >[(#ENV{titre})]</a>
+ </BOUCLE_url-tag>
+
+ [(#REM) ce n'est pas une card - ou une tuile - ou un bouton - ou un tag - ou une card
+ donc c'est une url simple ou avec un target blank une taille et une icone]
+ <BOUCLE_url-simple(CONDITION){si #ENV{url}|oui}{si #ENV{url}|contient_pdf|non}{SI #ENV{tag}|non}{SI #ENV{carte}|non}{SI #ENV{tuile}|non}{SI #ENV{bouton}|non}>
+
+ <a class="fr-link [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-link--icon-right] [(#ENV{icone-gauche}|oui) fr-link--icon-left] [(#ENV{petit}|oui) fr-link--sm] [(#ENV{grand}|oui) fr-link--lg]" href="#ENV{url}" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#ENV{titre}] - ouvre une nouvelle fenêtre"]>
+ [(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#ENV{url}]
+ </a>
+ </BOUCLE_url-simple>
+
+ <BOUCLE_condition_pdf(CONDITION){si #ENV{url}|contient_pdf|oui}>
+
+ <BOUCLE_condition_document-pdf(CONDITION){si #ENV{doc}|non}>
+
+ [(#REM) c'est un lien vers un pdf ]
+
+ [(#REM) c'est une lien simple vers un document pdf]
+
+ <BOUCLE_document-simple-pdf(CONDITION){si #ENV{carte}|non}>
+ <div class="fr-download">
+ <p class="fr-m-0">
+ <a href="#ENV{url}" download class="fr-download__link" [title="Télécharger le document : (#ENV{titre})"]>[(#ENV{titre})]
+ <span class="fr-download__detail">
+ [Fichier (#ENV{type}) [ - (#ENV{poids})]]
+ </span>
+ </a>
+ </p>
+ </div>
+ </BOUCLE_document-simple-pdf>
+
+ [(#REM) c'est une lien simple au format carte vers un document pdf]
+
+ <BOUCLE_document-carte-pdf(CONDITION){si #ENV{carte}|oui}>
+
+ <div class="fr-download fr-enlarge-link fr-download--card">
+ <p class="fr-m-0">
+ <a href="#URL_DOCUMENT" download class="fr-download__card" [title="Télécharger le document : (#TITRE)"]>[(#ENV{titre})]
+ <span class="fr-download__detail">
+ [Fichier (#ENV{type}) [ - (#ENV{poids})]]
+
+ </span>
+ </a>
+ </p>
+ [<p class="fr-download__desc">(#ENV{texte})</p>]
+ </div>
+
+ </BOUCLE_document-carte-pdf>
+
+ </BOUCLE_condition_document-pdf>
+
+
+ </BOUCLE_condition_pdf>
+
+ <BOUCLE_condition_article(CONDITION){si #ENV{id}|oui}>
+ [(#REM) c'est un article ]
+
+ [(#REM) c'est un article avec un format card ]
+
+ <BOUCLE_article-carte(ARTICLES){SI #ENV{carte}|oui}{id_article=#ENV{id}} >
+
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+
+ <div class="fr-card fr-enlarge-link
+ [(#ENV{vertical}|non) fr-card--horizontal]
+ [(#ENV{ratio50}|oui) fr-card--horizontal-half]
+ [(#ENV{ratio30}|oui) fr-card--horizontal-tier]
+ fr-card--sm [(#ENV{hauteur}|oui) hauteur-limitee ] fr-mb-2w ">
+ <div class="fr-card__body">
+ <div class="fr-card__content [(#GET{ma_couleur})]">
+ <p class="fr-card__title">
+ <a href="#URL_ARTICLE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ </p>
+ <div class="fr-card__desc">[(#INTRODUCTION{150})]</div>
+ [<div class="fr-card__start">
+ <ul class="fr-badges-group">
+ <li><p class="fr-badge [(#GET{moncouleurbadge})]">(#ENV{badge})</p></li>
+ </ul>
+ </div>]
+ [(#ENV{sans-date}|non)<div class="fr-card__start">
+ <p class="fr-card__detail fr-icon-calendar-line">[(#DATE|affdate)]</p>
+ </div>]
+ </div>
+ </div>
+
+ <BOUCLE_conditionsimage_a0(CONDITION){SI #ENV{sans-image}|non}>
+ <div class="fr-card__header">
+ <div class="fr-card__img">
+ <BOUCLE_conditionsimage_a(CONDITION){SI #ENV{logo}|oui}>
+ [(#LOGO_ARTICLE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ [(#LOGO_RUBRIQUE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_conditionsimage_a>
+
+ <BOUCLE_conditionsimage_a2(CONDITION){SI #ENV{image}|oui}>
+ <BOUCLE_image_bignews_a3(DOCUMENTS){id_article}{0,1}>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_bignews_a3>
+ </BOUCLE_conditionsimage_a2>
+
+ <BOUCLE_conditionsimage_id(CONDITION){SI #ENV{image_id}|oui}>
+ <BOUCLE_image_doc_id(DOCUMENTS){id_document=#ENV{image_id}}{0,1}>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_doc_id>
+ </BOUCLE_conditionsimage_id>
+
+ <BOUCLE_conditionsimage_a3(CONDITION){SI #ENV{image}|non}{SI #ENV{logo}|non}{SI #ENV{image_id}|non}>
+ <BOUCLE_theme23_a(MOTS){id_article}{id_groupe=14}>
+ #SET{themeimage, (#INFO_DESCRIPTIF{mot, #ID_MOT_RACINE}|textebrut)}
+ <img width="350" height="350" class="fr-img-responsive" src="#CHEMIN{images/themes/#GET{themeimage}-navigation.svg}" alt="">
+ </BOUCLE_theme23_a>
+
+ <BOUCLE_image_par_defaut(ARTICLES){id_article}{0,1}>
+ [(#LOGO_ARTICLE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ [(#LOGO_RUBRIQUE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_par_defaut>
+
+ <//B_theme23_a>
+ </BOUCLE_conditionsimage_a3>
+
+ </div>
+ </div>
+ </BOUCLE_conditionsimage_a0>
+
+ </div>
+ [(#ENV{vertical}|oui)</div>]
+ </BOUCLE_article-carte>
+
+ [(#REM) c'est un article avec un format tuile ]
+
+ <BOUCLE_article-tuile(ARTICLES){SI #ENV{tuile}|oui} {id_article=#ENV{id}}>
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+ <div class="fr-tile fr-enlarge-link [(#ENV{vertical}|non)fr-tile--horizontal] fr-mb-2w">
+ <div class="fr-tile__body">
+ <div class="fr-tile__content">
+ <h4 class="fr-tile__title">
+ <a class="fr-tile__link" href="#URL_ARTICLE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ </h4>
+ <div class="fr-tile__desc">[(#INTRODUCTION{150})]</div>
+ </div>
+ </div>
+ <BOUCLE_conditionstuileimage2(CONDITION){SI #ENV{sans-image}|non}>
+ <div class="fr-tile__img">
+ <BOUCLE_image_tuile(DOCUMENTS){id_article}{0,1}>
+ [(#FICHIER |image_reduire{200,350} |image_recadre{200,200,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_tuile>
+ <img src="#CHEMIN{../dse_theme/images/ODD-banniere-agenda.jpg}" width="250" height="140" class="fr-responsive-img" alt="" />
+ <//B_image_tuile>
+ </div>
+ </BOUCLE_conditionstuileimage2>
+ </div>
+ [(#ENV{vertical}|oui)</div>]
+ </BOUCLE_article-tuile>
+
+ [(#REM) c'est un article avec un format bouton ]
+
+ <BOUCLE_article-bouton(ARTICLES){SI #ENV{bouton}|oui} {id_article=#ENV{id}}>
+ <a class="fr-btn fr-my-1v [(#ENV{secondaire}|oui) fr-btn--secondary] [(#ENV{tertiaire}|oui) fr-btn--tertiary] [(#ENV{sans-encadre}|oui) fr-btn--tertiary-no-outline] [(#GET{mon-icone}) ] [(#ENV{icone-gauche}|non) [(#ENV{icone-seule}|non) fr-btn--icon-right ]] [(#ENV{icone-gauche}|oui) fr-btn--icon-left] [(#ENV{petit}|oui) fr-btn--sm] [(#ENV{grand}|oui) fr-btn--lg]" [(#ENV{icone-seule}|oui)title="[(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #TITRE]"] [style="width:(#ENV{largeur})"] href="#URL_ARTICLE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] - ouvre une nouvelle fenêtre"] > [(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ </BOUCLE_article-bouton>
+
+ [(#REM) c'est un article avec un format tag ]
+
+ <BOUCLE_article-tag(ARTICLES){SI #ENV{tag}|oui} {id_article=#ENV{id}}>
+ <a class="fr-tag fr-my-1v [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-tag--icon-right] [(#ENV{icone-gauche}|oui) fr-tag--icon-left] [(#ENV{petit}|oui) fr-tag--sm] [(#ENV{grand}|oui) fr-tag--lg]" target="_self" href="#URL_ARTICLE" >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ </BOUCLE_article-tag>
+
+ [(#REM) ce n'est pas une card ou une tuile ou un bouton ou un tag
+ donc c'est un article simple ou avec un target blank une taille et une icone]
+
+ <BOUCLE_article-simple(ARTICLES){id_article=#ENV{id}}{SI #ENV{carte}|non}>
+ <a class="fr-link [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-link--icon-right] [(#ENV{icone-gauche}|oui) fr-link--icon-left] [(#ENV{petit}|oui) fr-link--sm] [(#ENV{grand}|oui) fr-link--lg]" href="#URL_ARTICLE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#TITRE] - ouvre une nouvelle fenêtre"]>
+ [(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #TITRE]
+ </a>
+ </BOUCLE_article-simple>
+
+ <//B_article-tag>
+ <//B_article-bouton>
+ <//B_article-tuile>
+ <//B_article-carte>
+
+ </BOUCLE_condition_article>
+
+ <//B_condition_pdf>
+ <//B_condition_document>
+ <//B_condition_rubrique>
+
+
+
+
+
+
+
+
+
+
diff --git a/design_system_admin/modeles/dsfr_lien-archive2.html b/design_system_admin/modeles/dsfr_lien-archive2.html
new file mode 100644
index 0000000000000000000000000000000000000000..59f0700311eb58809e09da9be92724fb493c679f
--- /dev/null
+++ b/design_system_admin/modeles/dsfr_lien-archive2.html
@@ -0,0 +1,745 @@
+[(#REM)Gestion des liens d'article, de rubriques d'url et de doc avec les modeles correspondants]
+
+[(#REM) ajout de la feuille CSS du modele ]
+<link rel="stylesheet" type="text/css" href="#CHEMIN{modeles/dsfr_lien.css}" 4 />
+
+[(#REM) couleur des fonds ]
+[(#ENV{couleur}|=={jaune}|oui) #SET{ma_couleur, 'fr-background-alt--yellow-moutarde'} ]
+[(#ENV{couleur}|=={jaune-clair}|oui) #SET{ma_couleur, 'fr-background-alt--yellow-tournesol'} ]
+[(#ENV{couleur}|=={bleu}|oui) #SET{ma_couleur, 'fr-background-alt--blue-cumulus'} ]
+[(#ENV{couleur}|=={bleu-clair}|oui) #SET{ma_couleur, 'fr-background-alt--blue-ecume'} ]
+[(#ENV{couleur}|=={bleu-canard}|oui) #SET{ma_couleur, 'fr-background-alt--green-archipel'} ]
+[(#ENV{couleur}|=={rouge}|oui) #SET{ma_couleur, 'fr-background-alt--purple-glycine'} ]
+[(#ENV{couleur}|=={violet}|oui) #SET{ma_couleur, 'fr-background-alt--purple-glycine'} ]
+[(#ENV{couleur}|=={beige}|oui) #SET{ma_couleur, 'fr-background-alt--pink-macaron'} ]
+[(#ENV{couleur}|=={rouge}|oui) #SET{ma_couleur, 'fr-background-alt--pink-tuile'} ]
+[(#ENV{couleur}|=={rose}|oui) #SET{ma_couleur, 'fr-background-alt--pink-tuile'} ]
+[(#ENV{couleur}|=={vert}|oui) #SET{ma_couleur, 'fr-background-alt--green-emeraude'} ]
+[(#ENV{couleur}|=={vert-clair}|oui) #SET{ma_couleur, 'fr-background-alt--green-menthe'} ]
+[(#ENV{couleur}|=={vert-tilleul}|oui) #SET{ma_couleur, 'fr-background-alt--green-tilleul-verveine'} ]
+[(#ENV{couleur}|=={vert-fluo}|oui) #SET{ma_couleur, 'fr-background-alt--green-bourgeon'} ]
+[(#ENV{couleur}|=={orange}|oui) #SET{ma_couleur, 'fr-background-alt--orange-terre-battue'} ]
+[(#ENV{couleur}|=={cafe}|oui) #SET{ma_couleur, 'fr-background-alt--brown-cafe-creme'} ]
+[(#ENV{couleur}|=={marron-clair}|oui) #SET{ma_couleur, 'fr-background-alt--brown-caramel'} ]
+[(#ENV{couleur}|=={marron}|oui) #SET{ma_couleur, 'fr-background-alt--brown-opera'} ]
+[(#ENV{couleur}|=={gris-clair}|oui) #SET{ma_couleur, 'fr-background-alt--beige-gris-galet'} ]
+[(#ENV{couleur}|=={gris}|oui) #SET{ma_couleur, 'fr-background-alt--grey'} ]
+
+
+[(#REM) gestion d'une div de debut et de fin ]
+[(#ENV{debut}|oui)<div class="fr-grid-row [(#ENV{marge}|oui) fr-grid-row--gutters ] fr-mb-3w">]
+[(#ENV{fin}|oui)</div>]
+
+[(#REM) gestion des icones ]
+[(#ENV{icone}|=={ajouter}|oui) #SET{mon-icone, ' fr-icon-file-add-fill'} ]
+[(#ENV{icone}|=={ampoule}|oui) #SET{mon-icone, ' fr-icon-lightbulb-fill'} ]
+[(#ENV{icone}|=={archive}|oui) #SET{mon-icone, ' fr-icon-archive-fill'} ]
+[(#ENV{icone}|=={article}|oui) #SET{mon-icone, ' fr-icon-article-fill'} ]
+[(#ENV{icone}|=={attention}|oui) #SET{mon-icone, ' fr-icon-warning-fill'} ]
+[(#ENV{icone}|=={calendrier}|oui) #SET{mon-icone, ' fr-icon-calendar-fill'} ]
+[(#ENV{icone}|=={camembert}|oui) #SET{mon-icone, ' fr-icon-pie-chart-2-fill'} ]
+[(#ENV{icone}|=={camera}|oui) #SET{mon-icone, ' fr-icon-camera-fill'} ]
+[(#ENV{icone}|=={chart}|oui) #SET{mon-icone, ' fr-icon-bar-chart-box-fill'} ]
+[(#ENV{icone}|=={check}|oui) #SET{mon-icone, ' fr-icon-success-fill'} ]
+[(#ENV{icone}|=={check-seul}|oui) #SET{mon-icone, ' fr-icon-check-line'} ]
+[(#ENV{icone}|=={citation}|oui) #SET{mon-icone, ' fr-icon-quote-fill'} ]
+[(#ENV{icone}|=={compte}|oui) #SET{mon-icone, ' fr-icon-account-circle-fill'} ]
+[(#ENV{icone}|=={copyright}|oui) #SET{mon-icone, ' fr-icon-copyright-fill'} ]
+[(#ENV{icone}|=={discussion}|oui) #SET{mon-icone, ' fr-icon-chat-3-fill'} ]
+[(#ENV{icone}|=={dossier}|oui) #SET{mon-icone, ' fr-icon-folder-2-fill'} ]
+[(#ENV{icone}|=={ecrire}|oui) #SET{mon-icone, ' fr-icon-draft-fill'} ]
+[(#ENV{icone}|=={email}|oui) #SET{mon-icone, ' fr-icon-mail-fill'} ]
+[(#ENV{icone}|=={engrenage}|oui) #SET{mon-icone, ' fr-icon-settings-5-fill'} ]
+[(#ENV{icone}|=={enquete}|oui) #SET{mon-icone, ' fr-icon-survey-fill'} ]
+[(#ENV{icone}|=={epingle}|oui) #SET{mon-icone, ' fr-icon-map-pin-2-fill'} ]
+[(#ENV{icone}|=={equipe}|oui) #SET{mon-icone, ' fr-icon-team-fill'} ]
+[(#ENV{icone}|=={etoile}|oui) #SET{mon-icone, ' fr-icon-star-s-fill'} ]
+[(#ENV{icone}|=={feuille}|oui) #SET{mon-icone, ' fr-icon-leaf-fill'} ]
+[(#ENV{icone}|=={fichier}|oui) #SET{mon-icone, ' fr-icon-file-fill'} ]
+[(#ENV{icone}|=={fichier-texte}|oui) #SET{mon-icone, ' fr-icon-file-text-fill'} ]
+[(#ENV{icone}|=={film}|oui) #SET{mon-icone, ' fr-icon-film-fill'} ]
+[(#ENV{icone}|=={fleche-bas}|oui) #SET{mon-icone, ' fr-icon-arrow-down-fill'} ]
+[(#ENV{icone}|=={mini-fleche-droite}|oui) #SET{mon-icone, ' fr-icon-arrow-right-s-fill'} ]
+[(#ENV{icone}|=={fleche-droite}|oui) #SET{mon-icone, ' fr-icon-arrow-right-fill'} ]
+[(#ENV{icone}|=={mini-fleche-gauche}|oui) #SET{mon-icone, ' fr-icon-arrow-left-s-fill'} ]
+[(#ENV{icone}|=={fleche-gauche}|oui) #SET{mon-icone, ' fr-icon-arrow-left-fill'} ]
+[(#ENV{icone}|=={fleche-haut}|oui) #SET{mon-icone, ' fr-icon-arrow-up-fill'} ]
+[(#ENV{icone}|=={france}|oui) #SET{mon-icone, ' fr-icon-france-fill'} ]
+[(#ENV{icone}|=={graphique}|oui) #SET{mon-icone, ' fr-icon-line-chart-fill'} ]
+[(#ENV{icone}|=={groupe}|oui) #SET{mon-icone, ' fr-icon-group-fill'} ]
+[(#ENV{icone}|=={image}|oui) #SET{mon-icone, ' fr-icon-image-fill'} ]
+[(#ENV{icone}|=={imprimante}|oui) #SET{mon-icone, ' fr-icon-printer-fill'} ]
+[(#ENV{icone}|=={info}|oui) #SET{mon-icone, ' fr-icon-info-fill'} ]
+[(#ENV{icone}|=={journal}|oui) #SET{mon-icone, ' fr-icon-newspaper-fill'} ]
+[(#ENV{icone}|=={lien}|oui) #SET{mon-icone, ' fr-icon-links-fill'} ]
+[(#ENV{icone}|=={lien-externe}|oui) #SET{mon-icone, ' fr-icon-external-link-fill'} ]
+[(#ENV{icone}|=={livre}|oui) #SET{mon-icone, ' fr-icon-book-2-fill'} ]
+[(#ENV{icone}|=={mallette}|oui) #SET{mon-icone, ' fr-icon-briefcase-fill'} ]
+[(#ENV{icone}|=={micro}|oui) #SET{mon-icone, ' fr-icon-mic-fill'} ]
+[(#ENV{icone}|=={mini-fleche-bas}|oui) #SET{mon-icone, ' fr-icon-arrow-down-s-fill'} ]
+[(#ENV{icone}|=={mini-fleche-haut}|oui) #SET{mon-icone, ' fr-icon-arrow-up-s-fill'} ]
+[(#ENV{icone}|=={monde}|oui) #SET{mon-icone, ' fr-icon-global-fill'} ]
+[(#ENV{icone}|=={musique}|oui) #SET{mon-icone, ' fr-icon-music-2-fill'} ]
+[(#ENV{icone}|=={nuage}|oui) #SET{mon-icone, ' fr-icon-cloud-fill'} ]
+[(#ENV{icone}|=={pdf}|oui) #SET{mon-icone, ' fr-icon-file-pdf-fill'} ]
+[(#ENV{icone}|=={piecejointe}|oui) #SET{mon-icone, ' fr-icon-attachment-fill'} ]
+[(#ENV{icone}|=={plante}|oui) #SET{mon-icone, ' fr-icon-plant-fill'} ]
+[(#ENV{icone}|=={plus}|oui) #SET{mon-icone, ' fr-icon-add-line'} ]
+[(#ENV{icone}|=={plus-rond}|oui) #SET{mon-icone, ' fr-icon-add-circle-fill'} ]
+[(#ENV{icone}|=={question}|oui) #SET{mon-icone, ' fr-icon-questionnaire-fill'} ]
+[(#ENV{icone}|=={question}|oui) #SET{mon-icone, ' fr-icon-question-fill'} ]
+[(#ENV{icone}|=={rechercher}|oui) #SET{mon-icone, ' fr-icon-search-fill'} ]
+[(#ENV{icone}|=={recycler}|oui) #SET{mon-icone, ' fr-icon-recycle-fill'} ]
+[(#ENV{icone}|=={rss}|oui) #SET{mon-icone, ' fr-icon-rss-fill'} ]
+[(#ENV{icone}|=={signet}|oui) #SET{mon-icone, ' fr-icon-bookmark-fill'} ]
+[(#ENV{icone}|=={telecharger}|oui) #SET{mon-icone, ' fr-icon-file-download-fill'} ]
+[(#ENV{icone}|=={telecharger}|oui) #SET{mon-icone, ' fr-icon-download-fill'} ]
+[(#ENV{icone}|=={telephone}|oui) #SET{mon-icone, ' fr-icon-phone-fill'} ]
+[(#ENV{icone}|=={terre}|oui) #SET{mon-icone, ' fr-icon-earth-fill'} ]
+[(#ENV{icone}|=={upload}|oui) #SET{mon-icone, ' fr-icon-upload-fill'} ]
+[(#ENV{icone}|=={utilisateur}|oui) #SET{mon-icone, ' fr-icon-user-fill'} ]
+[(#ENV{icone}|=={wifi}|oui) #SET{mon-icone, ' fr-icon-wifi-fill'} ]
+[(#ENV{icone}|=={zoom}|oui) #SET{mon-icone, ' fr-icon-zoom-in-fill'} ]
+[(#ENV{icone}|=={zoom-out}|oui) #SET{mon-icone, ' fr-icon-zoom-out-fill'} ]
+[(#ENV{icone}|=={ajouter2}|oui) #SET{mon-icone, ' fr-icon-file-add-line'} ]
+[(#ENV{icone}|=={ampoule2}|oui) #SET{mon-icone, ' fr-icon-lightbulb-line'} ]
+[(#ENV{icone}|=={archive2}|oui) #SET{mon-icone, ' fr-icon-archive-line'} ]
+[(#ENV{icone}|=={article2}|oui) #SET{mon-icone, ' fr-icon-article-line'} ]
+[(#ENV{icone}|=={attention2}|oui) #SET{mon-icone, ' fr-icon-warning-line'} ]
+[(#ENV{icone}|=={calendrier2}|oui) #SET{mon-icone, ' fr-icon-calendar-line'} ]
+[(#ENV{icone}|=={camembert2}|oui) #SET{mon-icone, ' fr-icon-pie-chart-2-line'} ]
+[(#ENV{icone}|=={camera2}|oui) #SET{mon-icone, ' fr-icon-camera-line'} ]
+[(#ENV{icone}|=={chart2}|oui) #SET{mon-icone, ' fr-icon-bar-chart-box-line'} ]
+[(#ENV{icone}|=={check2}|oui) #SET{mon-icone, ' fr-icon-success-line'} ]
+[(#ENV{icone}|=={citation2}|oui) #SET{mon-icone, ' fr-icon-quote-line'} ]
+[(#ENV{icone}|=={compte2}|oui) #SET{mon-icone, ' fr-icon-account-circle-line'} ]
+[(#ENV{icone}|=={copyright2}|oui) #SET{mon-icone, ' fr-icon-copyright-line'} ]
+[(#ENV{icone}|=={discussion2}|oui) #SET{mon-icone, ' fr-icon-chat-3-line'} ]
+[(#ENV{icone}|=={dossier2}|oui) #SET{mon-icone, ' fr-icon-folder-2-line'} ]
+[(#ENV{icone}|=={ecrire2}|oui) #SET{mon-icone, ' fr-icon-draft-line'} ]
+[(#ENV{icone}|=={email2}|oui) #SET{mon-icone, ' fr-icon-mail-line'} ]
+[(#ENV{icone}|=={engrenage2}|oui) #SET{mon-icone, ' fr-icon-settings-5-line'} ]
+[(#ENV{icone}|=={enquete2}|oui) #SET{mon-icone, ' fr-icon-survey-line'} ]
+[(#ENV{icone}|=={epingle2}|oui) #SET{mon-icone, ' fr-icon-map-pin-2-line'} ]
+[(#ENV{icone}|=={equipe2}|oui) #SET{mon-icone, ' fr-icon-team-line'} ]
+[(#ENV{icone}|=={etoile}|oui) #SET{mon-icone, ' fr-icon-star-s-line'} ]
+[(#ENV{icone}|=={feuille2}|oui) #SET{mon-icone, ' fr-icon-leaf-line'} ]
+[(#ENV{icone}|=={fichier-texte2}|oui) #SET{mon-icone, ' fr-icon-file-text-line'} ]
+[(#ENV{icone}|=={fichier2}|oui) #SET{mon-icone, ' fr-icon-file-line'} ]
+[(#ENV{icone}|=={film2}|oui) #SET{mon-icone, ' fr-icon-film-line'} ]
+[(#ENV{icone}|=={fleche-bas}|oui) #SET{mon-icone, ' fr-icon-arrow-down-line'} ]
+[(#ENV{icone}|=={fleche-droite2}|oui) #SET{mon-icone, ' fr-icon-arrow-right-line'} ]
+[(#ENV{icone}|=={mini-fleche-droite2}|oui) #SET{mon-icone, ' fr-icon-arrow-right-s-line'} ]
+[(#ENV{icone}|=={mini-fleche-gauche2}|oui) #SET{mon-icone, ' fr-icon-arrow-left-s-line'} ]
+[(#ENV{icone}|=={fleche-gauche2}|oui) #SET{mon-icone, ' fr-icon-arrow-left-line'} ]
+[(#ENV{icone}|=={fleche-haut2}|oui) #SET{mon-icone, ' fr-icon-arrow-up-line'} ]
+[(#ENV{icone}|=={france2}|oui) #SET{mon-icone, ' fr-icon-france-line'} ]
+[(#ENV{icone}|=={graphique2}|oui) #SET{mon-icone, ' fr-icon-line-chart-line'} ]
+[(#ENV{icone}|=={groupe2}|oui) #SET{mon-icone, ' fr-icon-group-line'} ]
+[(#ENV{icone}|=={image2}|oui) #SET{mon-icone, ' fr-icon-image-line'} ]
+[(#ENV{icone}|=={imprimante2}|oui) #SET{mon-icone, ' fr-icon-printer-line'} ]
+[(#ENV{icone}|=={info}|oui) #SET{mon-icone, ' fr-icon-info-line'} ]
+[(#ENV{icone}|=={journal2}|oui) #SET{mon-icone, ' fr-icon-newspaper-line'} ]
+[(#ENV{icone}|=={lien-externe}|oui) #SET{mon-icone, ' fr-icon-external-link-line'} ]
+[(#ENV{icone}|=={lien2}|oui) #SET{mon-icone, ' fr-icon-links-line'} ]
+[(#ENV{icone}|=={livre2}|oui) #SET{mon-icone, ' fr-icon-book-2-line'} ]
+[(#ENV{icone}|=={mallete2}|oui) #SET{mon-icone, ' fr-icon-briefcase-line'} ]
+[(#ENV{icone}|=={micro2}|oui) #SET{mon-icone, ' fr-icon-mic-line'} ]
+[(#ENV{icone}|=={mini-fleche-bas2}|oui) #SET{mon-icone, ' fr-icon-arrow-down-s-line'} ]
+[(#ENV{icone}|=={mini-fleche-haut2}|oui) #SET{mon-icone, ' fr-icon-arrow-up-s-line'} ]
+[(#ENV{icone}|=={monde2}|oui) #SET{mon-icone, ' fr-icon-global-line'} ]
+[(#ENV{icone}|=={musique2}|oui) #SET{mon-icone, ' fr-icon-music-2-line'} ]
+[(#ENV{icone}|=={nuage2}|oui) #SET{mon-icone, ' fr-icon-cloud-line'} ]
+[(#ENV{icone}|=={pdf2}|oui) #SET{mon-icone, ' fr-icon-file-pdf-line'} ]
+[(#ENV{icone}|=={piecejointe2}|oui) #SET{mon-icone, ' fr-icon-attachment-line'} ]
+[(#ENV{icone}|=={plante2}|oui) #SET{mon-icone, ' fr-icon-plant-line'} ]
+[(#ENV{icone}|=={plus-rond2}|oui) #SET{mon-icone, ' fr-icon-add-circle-line'} ]
+[(#ENV{icone}|=={question2}|oui) #SET{mon-icone, ' fr-icon-questionnaire-line'} ]
+[(#ENV{icone}|=={question2}|oui) #SET{mon-icone, ' fr-icon-question-line'} ]
+[(#ENV{icone}|=={rechercher2}|oui) #SET{mon-icone, ' fr-icon-search-line'} ]
+[(#ENV{icone}|=={recycler2}|oui) #SET{mon-icone, ' fr-icon-recycle-line'} ]
+[(#ENV{icone}|=={rss2}|oui) #SET{mon-icone, ' fr-icon-rss-line'} ]
+[(#ENV{icone}|=={signet2}|oui) #SET{mon-icone, ' fr-icon-bookmark-line'} ]
+[(#ENV{icone}|=={telecharger2}|oui) #SET{mon-icone, ' fr-icon-file-download-line'} ]
+[(#ENV{icone}|=={telecharger2}|oui) #SET{mon-icone, ' fr-icon-download-line'} ]
+[(#ENV{icone}|=={telephone2}|oui) #SET{mon-icone, ' fr-icon-phone-line'} ]
+[(#ENV{icone}|=={terre2}|oui) #SET{mon-icone, ' fr-icon-earth-line'} ]
+[(#ENV{icone}|=={upload2}|oui) #SET{mon-icone, ' fr-icon-upload-line'} ]
+[(#ENV{icone}|=={utilisateur2}|oui) #SET{mon-icone, ' fr-icon-user-line'} ]
+[(#ENV{icone}|=={wifi2}|oui) #SET{mon-icone, ' fr-icon-wifi-line'} ]
+[(#ENV{icone}|=={zoom-out2}|oui) #SET{mon-icone, ' fr-icon-zoom-out-line'} ]
+[(#ENV{icone}|=={zoom2}|oui) #SET{mon-icone, ' fr-icon-zoom-in-line'} ]
+
+[(#REM)icone par defaut]
+[(#ENV{icone}|oui) #SET{mon-icone, ' fr-icon-arrow-right-line'} ]
+
+[(#ENV{icone-dsfr}|oui) #SET{mon-icone, #ENV{icone-dsfr}}]
+
+[(#REM) gestion des couleurs de badge ]
+[(#ENV{couleur_badge}|=={jaune}|oui) #SET{moncouleurbadge, 'fr-badge--new'} ]
+[(#ENV{couleur_badge}|=={marron}|oui) #SET{moncouleurbadge, 'fr-badge--warning'} ]
+[(#ENV{couleur_badge}|=={bleu}|oui) #SET{moncouleurbadge, 'fr-badge--info'} ]
+[(#ENV{couleur_badge}|=={rouge}|oui) #SET{moncouleurbadge, 'fr-badge--error'} ]
+[(#ENV{couleur_badge}|=={vert}|oui) #SET{moncouleurbadge, 'fr-badge--success'} ]
+
+[(#REM) c'est un article ]
+<BOUCLE_condition_article(CONDITION){si #ENV{id}|oui}>
+
+ [(#REM) c'est un article avec un format card ]
+ <BOUCLE_article-carte(ARTICLES){SI #ENV{carte}|oui}{id_article=#ENV{id}} >
+
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+
+ <div class="fr-card fr-enlarge-link
+ [(#ENV{vertical}|non) fr-card--horizontal]
+ [(#ENV{ratio50}|oui) fr-card--horizontal-half]
+ [(#ENV{ratio30}|oui) fr-card--horizontal-tier]
+ fr-card--sm [(#ENV{hauteur}|oui) hauteur-limitee ] fr-mb-2w ">
+ <div class="fr-card__body">
+ <div class="fr-card__content [(#GET{ma_couleur})]">
+ <p class="fr-card__title">
+ <a href="#URL_ARTICLE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ </p>
+ <div class="fr-card__desc">[(#INTRODUCTION{150})]</div>
+ [<div class="fr-card__start">
+ <ul class="fr-badges-group">
+ <li><p class="fr-badge [(#GET{moncouleurbadge})]">(#ENV{badge})</p></li>
+ </ul>
+ </div>]
+ [(#ENV{sans-date}|non)<div class="fr-card__start">
+ <p class="fr-card__detail fr-icon-calendar-line">[(#DATE|affdate)]</p>
+ </div>]
+ </div>
+ </div>
+
+ <BOUCLE_conditionsimage_a0(CONDITION){SI #ENV{sans-image}|non}>
+ <div class="fr-card__header">
+ <div class="fr-card__img ">
+ <BOUCLE_conditionsimage_a(CONDITION){SI #ENV{logo}|oui}>
+ [(#LOGO_ARTICLE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_conditionsimage_a>
+
+ <BOUCLE_conditionsimage_a2(CONDITION){SI #ENV{image}|oui}>
+ <BOUCLE_image_bignews_a3(DOCUMENTS){id_article}{0,1}>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_bignews_a3>
+ </BOUCLE_conditionsimage_a2>
+
+ <BOUCLE_conditionsimage_id(CONDITION){SI #ENV{image_id}|oui}>
+ <BOUCLE_image_doc_id(DOCUMENTS){id_document=#ENV{image_id}}{0,1}>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_doc_id>
+ </BOUCLE_conditionsimage_id>
+
+ <BOUCLE_conditionsimage_a3(CONDITION){SI #ENV{image}|non}{SI #ENV{logo}|non}{SI #ENV{image_id}|non}>
+ <BOUCLE_theme23_a(MOTS){id_article}{id_groupe=14}>
+ #SET{themeimage, (#INFO_DESCRIPTIF{mot, #ID_MOT_RACINE}|textebrut)}
+ <img width="350" height="350" class="fr-img-responsive" src="#CHEMIN{images/themes/#GET{themeimage}-navigation.svg}" alt="">
+ </BOUCLE_theme23_a>
+
+ <BOUCLE_image_par_defaut(ARTICLES){id_article}{0,1}>
+ [(#LOGO_ARTICLE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_par_defaut>
+
+ <//B_theme23_a>
+ </BOUCLE_conditionsimage_a3>
+
+ </div>
+ </div>
+ </BOUCLE_conditionsimage_a0>
+
+ </div>
+ [(#ENV{vertical}|oui)</div>]
+ </BOUCLE_article-carte>
+
+ [(#REM) c'est un article avec un format tuile ]
+ <BOUCLE_article-tuile(ARTICLES){SI #ENV{tuile}|oui} {id_article=#ENV{id}}>
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+ <div class="fr-tile fr-enlarge-link [(#ENV{vertical}|non)fr-tile--horizontal] fr-mb-2w">
+ <div class="fr-tile__body">
+ <div class="fr-tile__content">
+ <h4 class="fr-tile__title">
+ <a class="fr-tile__link" href="#URL_ARTICLE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ </h4>
+ <div class="fr-tile__desc">[(#INTRODUCTION{150})]</div>
+ </div>
+ </div>
+ <BOUCLE_conditionstuileimage2(CONDITION){SI #ENV{sans-image}|non}>
+ <div class="fr-tile__img ">
+ <BOUCLE_image_tuile(DOCUMENTS){id_article}{0,1}>
+ [(#FICHIER |image_reduire{200,350} |image_recadre{200,200,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_tuile>
+ <img src="#CHEMIN{../dse_theme/images/ODD-banniere-agenda.jpg}" width="250" height="140" class="fr-responsive-img" alt="" />
+ <//B_image_tuile>
+ </div>
+ </BOUCLE_conditionstuileimage2>
+ </div>
+ [(#ENV{vertical}|oui)</div>]
+ </BOUCLE_article-tuile>
+
+ [(#REM) c'est un article avec un format bouton ]
+ <BOUCLE_article-bouton(ARTICLES){SI #ENV{bouton}|oui} {id_article=#ENV{id}}>
+ <a class="fr-btn fr-my-1v [(#ENV{secondaire}|oui) fr-btn--secondary] [(#ENV{tertiaire}|oui) fr-btn--tertiary] [(#ENV{sans-encadre}|oui) fr-btn--tertiary-no-outline] [(#GET{mon-icone}) ] [(#ENV{icone-gauche}|non) [(#ENV{icone-seule}|non) fr-btn--icon-right ]] [(#ENV{icone-gauche}|oui) fr-btn--icon-left] [(#ENV{petit}|oui) fr-btn--sm] [(#ENV{grand}|oui) fr-btn--lg]" [(#ENV{icone-seule}|oui)title="[(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #TITRE]"] [style="width:(#ENV{largeur})"] href="#URL_ARTICLE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] - ouvre une nouvelle fenêtre"] > [(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ </BOUCLE_article-bouton>
+
+ [(#REM) c'est un article avec un format tag ]
+ <BOUCLE_article-tag(ARTICLES){SI #ENV{tag}|oui} {id_article=#ENV{id}}>
+ <a class="fr-tag fr-my-1v [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-tag--icon-right] [(#ENV{icone-gauche}|oui) fr-tag--icon-left] [(#ENV{petit}|oui) fr-tag--sm] [(#ENV{grand}|oui) fr-tag--lg]" target="_self" href="#URL_ARTICLE" >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ </BOUCLE_article-tag>
+
+ [(#REM) ce n'est pas une card ou une tuile ou un bouton ou un tag
+ donc c'est un article simple ou avec un target blank une taille et une icone]
+
+ <BOUCLE_article-simple(ARTICLES){id_article=#ENV{id}}{SI #ENV{carte}|non}{SI #ENV{tuile}|non}{SI #ENV{bouton}|non}{SI #ENV{tag}|non}>
+ <a class="fr-link [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-link--icon-right] [(#ENV{icone-gauche}|oui) fr-link--icon-left] [(#ENV{petit}|oui) fr-link--sm] [(#ENV{grand}|oui) fr-link--lg]" href="#URL_ARTICLE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#TITRE] - ouvre une nouvelle fenêtre"]>
+ [(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #TITRE]
+ </a>
+ </BOUCLE_article-simple>
+
+
+</BOUCLE_condition_article>
+
+[(#REM) c'est une rubrique ]
+<BOUCLE_condition_rubrique(CONDITION){si #ENV{rub}|oui}>
+
+ [(#REM) c'est une rubrique avec un format card ]
+ <BOUCLE_rubrique-carte(RUBRIQUES){SI #ENV{carte}|oui}{id_rubrique=#ENV{rub}} >
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+ <div class="fr-card fr-enlarge-link
+ [(#ENV{vertical}|non) fr-card--horizontal]
+ [(#ENV{ratio50}|oui) fr-card--horizontal-half]
+ [(#ENV{ratio30}|oui) fr-card--horizontal-tier]
+ fr-card--sm [(#ENV{hauteur}|oui) hauteur-limitee ] fr-mb-2w ">
+ <div class="fr-card__body">
+ <div class="fr-card__content [(#GET{ma_couleur})]">
+ <p class="fr-card__title">
+ <a href="#URL_RUBRIQUE">#TITRE</a>
+ </p>
+ <div class="fr-card__desc">[(#INTRODUCTION{150})]</div>
+ [<div class="fr-card__start">
+ <ul class="fr-badges-group">
+ <li><p class="fr-badge [(#GET{moncouleurbadge})]">(#ENV{badge})</p></li>
+ </ul>
+ </div>]
+ [(#ENV{sans-date}|non)<div class="fr-card__start">
+ <p class="fr-card__detail fr-icon-calendar-line">[(#DATE|affdate)]</p>
+ </div>]
+ </div>
+ </div>
+ <BOUCLE_conditionsimage0(CONDITION){SI #ENV{sans-image}|non}>
+ <div class="fr-card__header">
+ <div class="fr-card__img ">
+ <BOUCLE_conditionsimage(CONDITION){SI #ENV{logo}|oui}>
+ [(#LOGO_RUBRIQUE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_conditionsimage>
+
+ <BOUCLE_conditionsimage2(CONDITION){SI #ENV{image}|oui}>
+ <BOUCLE_image_bignews3(DOCUMENTS){id_rubrique}{0,1}>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_bignews3>
+ </BOUCLE_conditionsimage2>
+
+ <BOUCLE_conditionsimagerub_id(CONDITION){SI #ENV{image_id}|oui}>
+ <BOUCLE_image_docrub_id(DOCUMENTS){id_document=#ENV{image_id}}{0,1}>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_docrub_id>
+ </BOUCLE_conditionsimagerub_id>
+
+ <BOUCLE_conditionsimage3(CONDITION){SI #ENV{image}|non}{SI #ENV{logo}|non}{SI #ENV{image_id}|non}>
+ <BOUCLE_theme23(MOTS){id_rubrique}{id_groupe=14}>
+ #SET{themeimage, (#INFO_DESCRIPTIF{mot, #ID_MOT_RACINE}|textebrut)}
+ <img width="350" height="350" class="fr-img-responsive" src="#CHEMIN{images/themes/#GET{themeimage}-navigation.svg}" alt="">
+ </BOUCLE_theme23>
+ [(#LOGO_RUBRIQUE|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ <//B_theme23>
+ </BOUCLE_conditionsimage3>
+
+ </div>
+ </div>
+ </BOUCLE_conditionsimage0>
+ </div>
+ [(#ENV{vertical}|oui)</div>]
+ </BOUCLE_rubrique-carte>
+
+ [(#REM) c'est une rubrique avec un format tuile ]
+
+ <BOUCLE_rubrique-tuile(RUBRIQUES){SI #ENV{tuile}|oui} {id_rubrique=#ENV{rub}}>
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+ <div class="fr-tile fr-enlarge-link [(#ENV{vertical}|non)fr-tile--horizontal] fr-mb-2w">
+ <div class="fr-tile__body">
+ <div class="fr-tile__content">
+ <h4 class="fr-tile__title">
+ <a class="" href="#URL_RUBRIQUE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ </h4>
+ <div class="fr-tile__desc">[(#INTRODUCTION{150})]</div>
+ </div>
+ </div>
+ <BOUCLE_conditionstuileimage(CONDITION){SI #ENV{sans-image}|non}>
+ <div class="fr-tile__img ">
+
+
+ <BOUCLE_image_rub_tuile(DOCUMENTS){id_rubrique}{0,1}>
+ [(#FICHIER |image_reduire{80,80} |image_recadre{80,80,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_rub_tuile>
+
+ <BOUCLE_theme25(MOTS){id_rubrique}{id_groupe=14}>
+ #SET{themeimage, (#INFO_DESCRIPTIF{mot, #ID_MOT_RACINE}|textebrut)}
+ <img width="350" height="350" class="fr-img-responsive" src="#CHEMIN{images/themes/#GET{themeimage}-navigation.svg}" alt="">
+ </BOUCLE_theme25>
+
+
+ </div>
+ </BOUCLE_conditionstuileimage>
+ </div>
+ [(#ENV{vertical}|oui)</div>]
+ </BOUCLE_rubrique-tuile>
+
+ [(#REM) c'est un article avec un format bouton ]
+
+ <BOUCLE_rubrique-bouton(RUBRIQUES){SI #ENV{bouton}|oui} {id_rubrique=#ENV{rub}}>
+ <a class="fr-btn fr-my-1v [(#ENV{secondaire}|oui) fr-btn--secondary] [(#ENV{tertiaire}|oui) fr-btn--tertiary] [(#ENV{sans-encadre}|oui) fr-btn--tertiary-no-outline] [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) [(#ENV{icone-seule}|non) fr-btn--icon-right ]] [(#ENV{icone-gauche}|oui) fr-btn--icon-left] [(#ENV{petit}|oui) fr-btn--sm] [(#ENV{grand}|oui) fr-btn--lg]" [(#ENV{icone-seule}|oui)title="[(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #TITRE]"] [style="width:(#ENV{largeur})"] href="#URL_RUBRIQUE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] - ouvre une nouvelle fenêtre"] >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ </BOUCLE_rubrique-bouton>
+
+ [(#REM) c'est un article avec un format tag ]
+
+ <BOUCLE_rubrique-tag(RUBRIQUES){SI #ENV{tag}|oui} {id_rubrique=#ENV{rub}}>
+ <a class="fr-tag fr-my-1v [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-tag--icon-right] [(#ENV{icone-gauche}|oui) fr-tag--icon-left] [(#ENV{petit}|oui) fr-tag--sm] [(#ENV{grand}|oui) fr-tag--lg]" target="_self" href="#URL_RUBRIQUE" >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ </BOUCLE_rubrique-tag>
+
+ [(#REM) ce n'est pas une card ou une tuile ou un bouton ou un tag
+ donc c'est une rubrique simple ou avec un target blank une taille et une icone]
+
+ <BOUCLE_rubrique-simple(RUBRIQUES){id_rubrique=#ENV{rub}}{SI #ENV{carte}|non}{SI #ENV{tuile}|non}{SI #ENV{bouton}|non}{SI #ENV{tag}|non}>
+ <a class="fr-link [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-link--icon-right] [(#ENV{icone-gauche}|oui) fr-link--icon-left] [(#ENV{petit}|oui) fr-link--sm] [(#ENV{grand}|oui) fr-link--lg]" href="#URL_RUBRIQUE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#TITRE] - ouvre une nouvelle fenêtre"]>
+ [(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]
+ </a>
+ </BOUCLE_rubrique-simple>
+
+</BOUCLE_condition_rubrique>
+
+
+[(#REM) c'est un mot clé ]
+<BOUCLE_condition_mot(CONDITION){si #ENV{mot}|oui}>
+
+ [(#REM) c'est une mot avec un format card ]
+ <BOUCLE_mot-carte(MOTS){SI #ENV{carte}|oui}{id_mot=#ENV{mot}} >
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+ <div class="fr-card fr-enlarge-link
+ [(#ENV{vertical}|non) fr-card--horizontal]
+ [(#ENV{ratio50}|oui) fr-card--horizontal-half]
+ [(#ENV{ratio30}|oui) fr-card--horizontal-tier]
+ fr-card--sm [(#ENV{hauteur}|oui) hauteur-limitee ] fr-mb-2w ">
+ <div class="fr-card__body">
+ <div class="fr-card__content [(#GET{ma_couleur})]">
+ <p class="fr-card__title">
+ <a href="#URL_MOT">#TITRE</a>
+ </p>
+ <div class="fr-card__desc">[(#INTRODUCTION{150})]</div>
+ [<div class="fr-card__start">
+ <ul class="fr-badges-group">
+ <li><p class="fr-badge [(#GET{moncouleurbadge})]">(#ENV{badge})</p></li>
+ </ul>
+ </div>]
+ [(#ENV{sans-date}|non)<div class="fr-card__start">
+ <p class="fr-card__detail fr-icon-calendar-line">[(#DATE|affdate)]</p>
+ </div>]
+ </div>
+ </div>
+ <BOUCLE_conditions_sansimage_mot(CONDITION){SI #ENV{sans-image}|non}>
+ <div class="fr-card__header">
+ <div class="fr-card__img ">
+ <BOUCLE_conditions_logo_mot(CONDITION){SI #ENV{logo}|oui}>
+ [(#LOGO_MOT|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_conditions_logo_mot>
+
+ <BOUCLE_conditions_image_logo_mot(CONDITION){SI #ENV{image}|oui}>
+ <BOUCLE_conditions_image_logo_mot_doc(DOCUMENTS){id_mot}{0,1}>
+ [(#FICHIER|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_conditions_image_logo_mot_doc>
+ </BOUCLE_conditions_image_logo_mot>
+
+ <BOUCLE_conditions_image_logo_mot_id(CONDITION){SI #ENV{image_id}|oui}>
+ <BOUCLE_conditions_image_logo_mot_id2(DOCUMENTS){id_document=#ENV{image_id}}{0,1}>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_conditions_image_logo_mot_id2>
+ </BOUCLE_conditions_image_logo_mot_id>
+
+ <BOUCLE_conditions_image_non(CONDITION){SI #ENV{image}|non}{SI #ENV{logo}|non}{SI #ENV{image_id}|non}{SI #ENV{logo}|non}>
+ <BOUCLE_theme99(MOTS){id_mot}{id_groupe=14}>
+ #SET{themeimage, (#INFO_DESCRIPTIF{mot, #ID_MOT_RACINE}|textebrut)}
+ <img width="350" height="350" class="fr-img-responsive" src="#CHEMIN{images/themes/#GET{themeimage}-navigation.svg}" alt="">
+ </BOUCLE_theme99>
+
+ [(#LOGO_MOT|image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ <//B_theme99>
+ </BOUCLE_conditions_image_non>
+
+ </div>
+ </div>
+ </BOUCLE_conditions_sansimage_mot>
+ </div>
+ [(#ENV{vertical}|oui)</div>]
+ </BOUCLE_mot-carte>
+
+ [(#REM) c'est une mot avec un format tuile ]
+
+ <BOUCLE_mot-tuile(MOTS){SI #ENV{tuile}|oui} {id_mot=#ENV{mot}}>
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+ <div class="fr-tile fr-enlarge-link [(#ENV{vertical}|non)fr-tile--horizontal] fr-mb-2w">
+ <div class="fr-tile__body">
+ <div class="fr-tile__content">
+ <h4 class="fr-tile__title">
+ <a class="" href="#URL_MOT">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ </h4>
+ <div class="fr-tile__desc">[(#INTRODUCTION{150})]</div>
+ </div>
+ </div>
+ <BOUCLE_conditionstuileimage_mot(CONDITION){SI #ENV{sans-image}|non}>
+ <div class="fr-tile__img ">
+ <BOUCLE_image_mot_tuile(DOCUMENTS){id_mot}{0,1}>
+ [(#FICHIER |image_reduire{80,80} |image_recadre{80,80,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_mot_tuile>
+
+ <BOUCLE_theme199(MOTS){id_mot}{id_groupe=14}>
+ #SET{themeimage, (#INFO_DESCRIPTIF{mot, #ID_MOT_RACINE}|textebrut)}
+ <img width="350" height="350" class="fr-img-responsive" src="#CHEMIN{images/themes/#GET{themeimage}-navigation.svg}" alt="">
+ </BOUCLE_theme199>
+ </div>
+ </BOUCLE_conditionstuileimage_mot>
+ </div>
+ [(#ENV{vertical}|oui)</div>]
+ </BOUCLE_mot-tuile>
+
+ [(#REM) c'est un mot avec un format bouton ]
+
+ <BOUCLE_mot-bouton(MOTS){SI #ENV{bouton}|oui} {id_mot=#ENV{mot}}>
+ <a class="fr-btn fr-my-1v [(#ENV{secondaire}|oui) fr-btn--secondary] [(#ENV{tertiaire}|oui) fr-btn--tertiary] [(#ENV{sans-encadre}|oui) fr-btn--tertiary-no-outline] [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) [(#ENV{icone-seule}|non) fr-btn--icon-right ]] [(#ENV{icone-gauche}|oui) fr-btn--icon-left] [(#ENV{petit}|oui) fr-btn--sm] [(#ENV{grand}|oui) fr-btn--lg]" [(#ENV{icone-seule}|oui)title="[(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #TITRE]"] [style="width:(#ENV{largeur})"] href="#URL_MOT" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] - ouvre une nouvelle fenêtre"] >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ </BOUCLE_mot-bouton>
+
+ [(#REM) c'est un mot avec un format tag ]
+
+ <BOUCLE_mot-tag(MOTS){SI #ENV{tag}|oui} {id_mot=#ENV{mot}}>
+ <a class="fr-tag fr-my-1v [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-tag--icon-right] [(#ENV{icone-gauche}|oui) fr-tag--icon-left] [(#ENV{petit}|oui) fr-tag--sm] [(#ENV{grand}|oui) fr-tag--lg]" target="_self" href="#URL_MOT" >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ </BOUCLE_mot-tag>
+
+ [(#REM) ce n'est pas une card ou une tuile ou un bouton ou un tag
+ donc c'est un mot simple ou avec un target blank une taille et une icone]
+
+ <BOUCLE_mot-simple(MOTS){id_mot=#ENV{mot}}{SI #ENV{carte}|non}{SI #ENV{tuile}|non}{SI #ENV{bouton}|non}{SI #ENV{tag}|non}>
+ <a class="fr-link [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-link--icon-right] [(#ENV{icone-gauche}|oui) fr-link--icon-left] [(#ENV{petit}|oui) fr-link--sm] [(#ENV{grand}|oui) fr-link--lg]" href="#URL_RUBRIQUE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#TITRE] - ouvre une nouvelle fenêtre"]>
+ [(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]
+ </a>
+ </BOUCLE_mot-simple>
+
+</BOUCLE_condition_mot>
+
+
+[(#REM) c'est une url qui ne contient pas de pdf ]
+<BOUCLE_condition_url(CONDITION){si #ENV{url}|contient_pdf|non}>
+ [(#REM) c'est une url avec un format card ]
+ <BOUCLE_url_carte(CONDITION){si #ENV{url}|oui}{si #ENV{carte}|oui}>
+
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+
+ <div class="fr-card fr-enlarge-link
+ [(#ENV{vertical}|non) fr-card--horizontal]
+ [(#ENV{ratio50}|oui) fr-card--horizontal-half]
+ [(#ENV{ratio30}|oui) fr-card--horizontal-tier]
+ fr-mb-2w ">
+ <div class="fr-card__body">
+ <div class="fr-card__content [(#GET{ma_couleur})]">
+ <p class="fr-card__title">
+ <a href="#ENV{url}">[(#ENV{titre}|non) #ENV{url}][(#ENV{titre}|oui) #ENV{titre}]</a>
+ </p>
+ [<div class="fr-card__desc fr-mb-2w">(#ENV{texte})</div>]
+ [<div class="fr-card__start">
+ <ul class="fr-badges-group">
+ <li><p class="fr-badge [(#GET{moncouleurbadge})]">(#ENV{badge})</p></li>
+ </ul>
+ </div>]
+ </div>
+ </div>
+
+ <BOUCLE_conditionsimage00(CONDITION){SI #ENV{image_id}|oui}>
+ <div class="fr-card__header">
+ <div class="fr-card__img ">
+ <BOUCLE_image_id(DOCUMENTS){id_document=#ENV{image_id}}{0,1}>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_id>
+ </div>
+ </div>
+ </BOUCLE_conditionsimage00>
+
+ </div>
+ [(#ENV{vertical}|oui)</div>]
+ </BOUCLE_url_carte>
+
+ [(#REM) c'est une url avec un format tuile ]
+ <BOUCLE_url_tuile(CONDITION){si #ENV{url}|oui}{SI #ENV{tuile}|oui}>
+ [(#ENV{vertical}|oui)
+ <div class="fr-col fr-col-12
+ [(#ENV{2cartes}|oui) fr-col-md-6 ]
+ [(#ENV{3cartes}|oui) fr-col-md-4 ]
+ [(#ENV{4cartes}|oui) fr-col-md-3 ]
+ ">]
+ <div class="fr-tile fr-enlarge-link [(#ENV{vertical}|non)fr-tile--horizontal] fr-mb-2w">
+ <div class="fr-tile__body">
+ <div class="fr-tile__content">
+ [<h4 class="fr-tile__title">
+ <a class="" href="#ENV{url}">(#ENV{titre})</a>
+ </h4>]
+ [<div class="fr-tile__desc">(#ENV{texte})</div>]
+ </div>
+ </div>
+
+ <BOUCLE_conditionsimagetuile(CONDITION){SI #ENV{image_id}|oui}>
+ <div class="fr-tile__img ">
+
+ <BOUCLE_image_id_tuile(DOCUMENTS){id_document=#ENV{image_id}}{0,1}>
+ [(#FICHIER |image_reduire{350,350} |image_recadre{350,350,center} |image_aplatir{jpg,ffffff} |inserer_attribut{class,fr-responsive-img}|inserer_attribut{alt,#DESCRIPTIF*})]
+ </BOUCLE_image_id_tuile>
+
+ </div>
+ </BOUCLE_conditionsimagetuile>
+
+ </div>
+ [(#ENV{vertical}|oui)</div>]
+ </BOUCLE_url_tuile>
+
+ [(#REM) c'est une url avec un format bouton ]
+ <BOUCLE_url-bouton(CONDITION){si #ENV{url}|oui}{SI #ENV{bouton}|oui}>
+
+ <a class="fr-btn fr-my-1v [(#ENV{bouton-secondaire}|oui) fr-btn--secondary] [(#ENV{bouton-tertiaire}|oui) fr-btn--tertiary] [(#ENV{sans-encadre}|oui) fr-btn--tertiary-no-outline] [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) [(#ENV{icone-seule}|non) fr-btn--icon-right ]] [(#ENV{icone-gauche}|oui) fr-btn--icon-left] [(#ENV{petit}|oui) fr-btn--sm] [(#ENV{grand}|oui) fr-btn--lg]" [(#ENV{icone-seule}|oui)title="[(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #ENV{TITRE}]"] [style="width:(#ENV{largeur})"] href="#ENV{url}" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #ENV{titre}] - ouvre une nouvelle fenêtre"] >[(#ENV{titre})]</a>
+ </BOUCLE_url-bouton>
+
+ [(#REM) c'est une url avec un format tag ]
+ <BOUCLE_url-tag(CONDITION){si #ENV{url}|oui}{SI #ENV{tag}|oui}>
+
+ <a class="fr-tag fr-my-1v [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-tag--icon-right] [(#ENV{icone-gauche}|oui) fr-tag--icon-left] [(#ENV{petit}|oui) fr-tag--sm] [(#ENV{grand}|oui) fr-tag--lg]" target="_self" href="#ENV{url}" >[(#ENV{titre})]</a>
+ </BOUCLE_url-tag>
+
+ [(#REM) ce n'est pas une card - ou une tuile - ou un bouton - ou un tag - ou une card
+ donc c'est une url simple ou avec un target blank une taille et une icone]
+ <BOUCLE_url-simple(CONDITION){si #ENV{url}|oui}{SI #ENV{tag}|non}{SI #ENV{carte}|non}{SI #ENV{tuile}|non}{SI #ENV{bouton}|non}>
+
+ <a class="fr-link [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-link--icon-right] [(#ENV{icone-gauche}|oui) fr-link--icon-left] [(#ENV{petit}|oui) fr-link--sm] [(#ENV{grand}|oui) fr-link--lg]" href="#ENV{url}" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#ENV{titre}] - ouvre une nouvelle fenêtre"]>
+ [(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#ENV{url}]
+ </a>
+ </BOUCLE_url-simple>
+
+</BOUCLE_condition_url>
+
+[(#REM) c'est un document]
+<BOUCLE_condition_document(CONDITION){si #ENV{doc}|oui}>
+
+ [(#REM) c'est un document a telecharger mais pas au format carte]
+ <BOUCLE_document-simple(DOCUMENTS){id_document=#ENV{doc}}{si #ENV{carte}|non}>
+ <div class="fr-download">
+ <p class="fr-m-0">
+ <a href="#URL_DOCUMENT" download class="fr-download__link" [title="<multi>{fr}Télécharger ce document {en}Download this file</multi> : (#TITRE)" : #TITRE"]>[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]
+ <span class="fr-download__detail">[<multi>{fr}Fichier {en}File</multi> (#TYPE_DOCUMENT)] [ - (#TAILLE|taille_en_octets)]</span>
+ </a>
+ </p>
+ </div>
+ </BOUCLE_document-simple>
+
+ [(#REM) c'est un document a telecharger au format carte]
+ <BOUCLE_document-carte(DOCUMENTS){id_document=#ENV{doc}}{si #ENV{carte}|oui}>
+
+ [(#REM) c'est une document au format carte]
+
+ <div class="fr-download fr-enlarge-link fr-download--card">
+ <p class="fr-m-0">
+ <a href="#URL_DOCUMENT" download class="fr-download__link" [title="Télécharger le document : (#TITRE)"]>[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]
+ <span class="fr-download__detail">
+ [Fichier (#TYPE_DOCUMENT)] [ - (#TAILLE|taille_en_octets)]
+
+ </span>
+ </a>
+ </p>
+ [<p class="fr-download__desc">(#DESCRIPTIF*)</p>]
+</div>
+
+</BOUCLE_document-carte>
+
+</BOUCLE_condition_document>
+
+[(#REM) c'est un lien vers un pdf ]
+<BOUCLE_condition_pdf(CONDITION){si #ENV{url}|contient_pdf|oui}>
+
+ [(#REM) c'est une lien simple vers un document pdf]
+ <BOUCLE_document-simple-pdf(CONDITION){si #ENV{carte}|non}>
+ <div class="fr-download">
+ <p class="fr-m-0">
+ <a href="#ENV{url}" download class="fr-download__link" [title="Télécharger le document : (#ENV{titre})"]>[(#ENV{titre})]
+ <span class="fr-download__detail">
+ [Fichier (#ENV{type}) [ - (#ENV{poids})]]
+ </span>
+ </a>
+ </p>
+ </div>
+ </BOUCLE_document-simple-pdf>
+
+ [(#REM) c'est une lien simple au format carte vers un document pdf]
+ <BOUCLE_document-carte-pdf(CONDITION){si #ENV{carte}|oui}>
+
+ <div class="fr-download fr-enlarge-link fr-download--card">
+ <p class="fr-m-0">
+ <a href="#URL_DOCUMENT" download class="fr-download__card" [title="Télécharger le document : (#TITRE)"]>[(#ENV{titre})]
+ <span class="fr-download__detail">
+ [Fichier (#ENV{type}) [ - (#ENV{poids})]]
+
+ </span>
+ </a>
+ </p>
+ [<p class="fr-download__desc">(#ENV{texte})</p>]
+ </div>
+
+ </BOUCLE_document-carte-pdf>
+
+</BOUCLE_condition_pdf>
+
+
+
+
+
+
+
+
+
+
diff --git a/design_system_admin/modeles/dsfr_lien.css b/design_system_admin/modeles/dsfr_lien.css
index c99e6c5b12d90952a0f41076e14ea79c4ab2a378..cf48d7468f1b778980cee5030d30932592d6a5b3 100644
--- a/design_system_admin/modeles/dsfr_lien.css
+++ b/design_system_admin/modeles/dsfr_lien.css
@@ -140,4 +140,30 @@
--hover: var(--background-alt-beige-gris-galet-hover)!important;
--active: var(--background-alt-beige-gris-galet-active)!important;
background-color: var(--background-alt-beige-gris-galet)!important
-}
\ No newline at end of file
+}
+
+
+
+.fr-callout p {
+ margin: 0 0 1.5rem !important;
+}
+
+.fr-callout .fr-download p {
+ margin: 0 !important;
+}
+
+.fr-callout p.fr-m-0 {
+ margin: 0 !important;
+}
+
+.fr-callout a:not(.fr-btn) {
+ border-bottom: 1px solid;
+ color: var(--text-action-high-blue-france);
+ background: none;
+ }
+
+ .fr-callout .fr-download a:not(.fr-btn) {
+ border-bottom: 1px solid;
+ color: var(--text-action-high-blue-france);
+ background: none;
+ }
\ No newline at end of file
diff --git a/design_system_admin/modeles/dsfr_lien.html b/design_system_admin/modeles/dsfr_lien.html
index ee083de809d146f71cff7b2fbe9516194e915aed..cab4f556a8da81c73729936c15517adc66f9438b 100644
--- a/design_system_admin/modeles/dsfr_lien.html
+++ b/design_system_admin/modeles/dsfr_lien.html
@@ -1,7 +1,7 @@
[(#REM)Gestion des liens d'article, de rubriques d'url et de doc avec les modeles correspondants]
[(#REM) ajout de la feuille CSS du modele ]
-<link rel="stylesheet" type="text/css" href="#CHEMIN{modeles/dsfr_lien.css}" 4 />
+<link rel="stylesheet" type="text/css" href="#CHEMIN{modeles/dsfr_lien.css}" />
[(#REM) couleur des fonds ]
[(#ENV{couleur}|=={jaune}|oui) #SET{ma_couleur, 'fr-background-alt--yellow-moutarde'} ]
@@ -203,7 +203,7 @@
<div class="fr-card__body">
<div class="fr-card__content [(#GET{ma_couleur})]">
<p class="fr-card__title">
- <a href="#URL_ARTICLE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ <a href="#URL_ARTICLE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] (nouvelle fenêtre)"] >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
</p>
<div class="fr-card__desc">[(#INTRODUCTION{150})]</div>
[<div class="fr-card__start">
@@ -269,7 +269,7 @@
<div class="fr-tile__body">
<div class="fr-tile__content">
<h4 class="fr-tile__title">
- <a class="fr-tile__link" href="#URL_ARTICLE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ <a class="fr-tile__link" href="#URL_ARTICLE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] (nouvelle fenêtre)"] >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
</h4>
<div class="fr-tile__desc">[(#INTRODUCTION{150})]</div>
</div>
@@ -289,19 +289,19 @@
[(#REM) c'est un article avec un format bouton ]
<BOUCLE_article-bouton(ARTICLES){SI #ENV{bouton}|oui} {id_article=#ENV{id}}>
- <a class="fr-btn fr-my-1v [(#ENV{secondaire}|oui) fr-btn--secondary] [(#ENV{tertiaire}|oui) fr-btn--tertiary] [(#ENV{sans-encadre}|oui) fr-btn--tertiary-no-outline] [(#GET{mon-icone}) ] [(#ENV{icone-gauche}|non) [(#ENV{icone-seule}|non) fr-btn--icon-right ]] [(#ENV{icone-gauche}|oui) fr-btn--icon-left] [(#ENV{petit}|oui) fr-btn--sm] [(#ENV{grand}|oui) fr-btn--lg]" [(#ENV{icone-seule}|oui)title="[(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #TITRE]"] [style="width:(#ENV{largeur})"] href="#URL_ARTICLE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] - ouvre une nouvelle fenêtre"] > [(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ <a class="fr-btn fr-my-1v [(#ENV{secondaire}|oui) fr-btn--secondary] [(#ENV{tertiaire}|oui) fr-btn--tertiary] [(#ENV{sans-encadre}|oui) fr-btn--tertiary-no-outline] [(#GET{mon-icone}) ] [(#ENV{icone-gauche}|non) [(#ENV{icone-seule}|non) fr-btn--icon-right ]] [(#ENV{icone-gauche}|oui) fr-btn--icon-left] [(#ENV{petit}|oui) fr-btn--sm] [(#ENV{grand}|oui) fr-btn--lg]" [(#ENV{icone-seule}|oui)title="[(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #TITRE]"] [style="width:(#ENV{largeur})"] href="#URL_ARTICLE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] (nouvelle fenêtre)"] > [(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
</BOUCLE_article-bouton>
[(#REM) c'est un article avec un format tag ]
<BOUCLE_article-tag(ARTICLES){SI #ENV{tag}|oui} {id_article=#ENV{id}}>
- <a class="fr-tag fr-my-1v [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-tag--icon-right] [(#ENV{icone-gauche}|oui) fr-tag--icon-left] [(#ENV{petit}|oui) fr-tag--sm] [(#ENV{grand}|oui) fr-tag--lg]" target="_self" href="#URL_ARTICLE" >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ <a class="fr-tag fr-my-1v [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-tag--icon-right] [(#ENV{icone-gauche}|oui) fr-tag--icon-left] [(#ENV{petit}|oui) fr-tag--sm] [(#ENV{grand}|oui) fr-tag--lg]" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] (nouvelle fenêtre)"] href="#URL_ARTICLE" >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
</BOUCLE_article-tag>
[(#REM) ce n'est pas une card ou une tuile ou un bouton ou un tag
donc c'est un article simple ou avec un target blank une taille et une icone]
<BOUCLE_article-simple(ARTICLES){id_article=#ENV{id}}{SI #ENV{carte}|non}{SI #ENV{tuile}|non}{SI #ENV{bouton}|non}{SI #ENV{tag}|non}>
- <a class="fr-link [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-link--icon-right] [(#ENV{icone-gauche}|oui) fr-link--icon-left] [(#ENV{petit}|oui) fr-link--sm] [(#ENV{grand}|oui) fr-link--lg]" href="#URL_ARTICLE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#TITRE] - ouvre une nouvelle fenêtre"]>
+ <a class="fr-link [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-link--icon-right] [(#ENV{icone-gauche}|oui) fr-link--icon-left] [(#ENV{petit}|oui) fr-link--sm] [(#ENV{grand}|oui) fr-link--lg]" href="#URL_ARTICLE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#TITRE] (nouvelle fenêtre)"]>
[(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #TITRE]
</a>
</BOUCLE_article-simple>
@@ -328,7 +328,7 @@
<div class="fr-card__body">
<div class="fr-card__content [(#GET{ma_couleur})]">
<p class="fr-card__title">
- <a href="#URL_RUBRIQUE">#TITRE</a>
+ <a [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] (nouvelle fenêtre)"] href="#URL_RUBRIQUE">#TITRE</a>
</p>
<div class="fr-card__desc">[(#INTRODUCTION{150})]</div>
[<div class="fr-card__start">
@@ -389,7 +389,7 @@
<div class="fr-tile__body">
<div class="fr-tile__content">
<h4 class="fr-tile__title">
- <a class="" href="#URL_RUBRIQUE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ <a class="" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] (nouvelle fenêtre)"] href="#URL_RUBRIQUE">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
</h4>
<div class="fr-tile__desc">[(#INTRODUCTION{150})]</div>
</div>
@@ -417,20 +417,20 @@
[(#REM) c'est un article avec un format bouton ]
<BOUCLE_rubrique-bouton(RUBRIQUES){SI #ENV{bouton}|oui} {id_rubrique=#ENV{rub}}>
- <a class="fr-btn fr-my-1v [(#ENV{secondaire}|oui) fr-btn--secondary] [(#ENV{tertiaire}|oui) fr-btn--tertiary] [(#ENV{sans-encadre}|oui) fr-btn--tertiary-no-outline] [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) [(#ENV{icone-seule}|non) fr-btn--icon-right ]] [(#ENV{icone-gauche}|oui) fr-btn--icon-left] [(#ENV{petit}|oui) fr-btn--sm] [(#ENV{grand}|oui) fr-btn--lg]" [(#ENV{icone-seule}|oui)title="[(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #TITRE]"] [style="width:(#ENV{largeur})"] href="#URL_RUBRIQUE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] - ouvre une nouvelle fenêtre"] >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ <a class="fr-btn fr-my-1v [(#ENV{secondaire}|oui) fr-btn--secondary] [(#ENV{tertiaire}|oui) fr-btn--tertiary] [(#ENV{sans-encadre}|oui) fr-btn--tertiary-no-outline] [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) [(#ENV{icone-seule}|non) fr-btn--icon-right ]] [(#ENV{icone-gauche}|oui) fr-btn--icon-left] [(#ENV{petit}|oui) fr-btn--sm] [(#ENV{grand}|oui) fr-btn--lg]" [(#ENV{icone-seule}|oui)title="[(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #TITRE]"] [style="width:(#ENV{largeur})"] href="#URL_RUBRIQUE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] (nouvelle fenêtre)"] >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
</BOUCLE_rubrique-bouton>
[(#REM) c'est un article avec un format tag ]
<BOUCLE_rubrique-tag(RUBRIQUES){SI #ENV{tag}|oui} {id_rubrique=#ENV{rub}}>
- <a class="fr-tag fr-my-1v [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-tag--icon-right] [(#ENV{icone-gauche}|oui) fr-tag--icon-left] [(#ENV{petit}|oui) fr-tag--sm] [(#ENV{grand}|oui) fr-tag--lg]" target="_self" href="#URL_RUBRIQUE" >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ <a class="fr-tag fr-my-1v [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-tag--icon-right] [(#ENV{icone-gauche}|oui) fr-tag--icon-left] [(#ENV{petit}|oui) fr-tag--sm] [(#ENV{grand}|oui) fr-tag--lg]" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] (nouvelle fenêtre)"] href="#URL_RUBRIQUE" >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
</BOUCLE_rubrique-tag>
[(#REM) ce n'est pas une card ou une tuile ou un bouton ou un tag
donc c'est une rubrique simple ou avec un target blank une taille et une icone]
<BOUCLE_rubrique-simple(RUBRIQUES){id_rubrique=#ENV{rub}}{SI #ENV{carte}|non}{SI #ENV{tuile}|non}{SI #ENV{bouton}|non}{SI #ENV{tag}|non}>
- <a class="fr-link [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-link--icon-right] [(#ENV{icone-gauche}|oui) fr-link--icon-left] [(#ENV{petit}|oui) fr-link--sm] [(#ENV{grand}|oui) fr-link--lg]" href="#URL_RUBRIQUE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#TITRE] - ouvre une nouvelle fenêtre"]>
+ <a class="fr-link [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-link--icon-right] [(#ENV{icone-gauche}|oui) fr-link--icon-left] [(#ENV{petit}|oui) fr-link--sm] [(#ENV{grand}|oui) fr-link--lg]" href="#URL_RUBRIQUE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#TITRE] (nouvelle fenêtre)"]>
[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]
</a>
</BOUCLE_rubrique-simple>
@@ -457,7 +457,7 @@
<div class="fr-card__body">
<div class="fr-card__content [(#GET{ma_couleur})]">
<p class="fr-card__title">
- <a href="#URL_MOT">#TITRE</a>
+ <a [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] (nouvelle fenêtre)"] href="#URL_MOT" >#TITRE</a>
</p>
<div class="fr-card__desc">[(#INTRODUCTION{150})]</div>
[<div class="fr-card__start">
@@ -519,7 +519,7 @@
<div class="fr-tile__body">
<div class="fr-tile__content">
<h4 class="fr-tile__title">
- <a class="" href="#URL_MOT">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ <a class="" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] (nouvelle fenêtre)"] href="#URL_MOT">[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
</h4>
<div class="fr-tile__desc">[(#INTRODUCTION{150})]</div>
</div>
@@ -543,7 +543,7 @@
[(#REM) c'est un mot avec un format bouton ]
<BOUCLE_mot-bouton(MOTS){SI #ENV{bouton}|oui} {id_mot=#ENV{mot}}>
- <a class="fr-btn fr-my-1v [(#ENV{secondaire}|oui) fr-btn--secondary] [(#ENV{tertiaire}|oui) fr-btn--tertiary] [(#ENV{sans-encadre}|oui) fr-btn--tertiary-no-outline] [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) [(#ENV{icone-seule}|non) fr-btn--icon-right ]] [(#ENV{icone-gauche}|oui) fr-btn--icon-left] [(#ENV{petit}|oui) fr-btn--sm] [(#ENV{grand}|oui) fr-btn--lg]" [(#ENV{icone-seule}|oui)title="[(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #TITRE]"] [style="width:(#ENV{largeur})"] href="#URL_MOT" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] - ouvre une nouvelle fenêtre"] >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
+ <a class="fr-btn fr-my-1v [(#ENV{secondaire}|oui) fr-btn--secondary] [(#ENV{tertiaire}|oui) fr-btn--tertiary] [(#ENV{sans-encadre}|oui) fr-btn--tertiary-no-outline] [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) [(#ENV{icone-seule}|non) fr-btn--icon-right ]] [(#ENV{icone-gauche}|oui) fr-btn--icon-left] [(#ENV{petit}|oui) fr-btn--sm] [(#ENV{grand}|oui) fr-btn--lg]" [(#ENV{icone-seule}|oui)title="[(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #TITRE]"] [style="width:(#ENV{largeur})"] href="#URL_MOT" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] (nouvelle fenêtre)"] >[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]</a>
</BOUCLE_mot-bouton>
[(#REM) c'est un mot avec un format tag ]
@@ -556,7 +556,7 @@
donc c'est un mot simple ou avec un target blank une taille et une icone]
<BOUCLE_mot-simple(MOTS){id_mot=#ENV{mot}}{SI #ENV{carte}|non}{SI #ENV{tuile}|non}{SI #ENV{bouton}|non}{SI #ENV{tag}|non}>
- <a class="fr-link [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-link--icon-right] [(#ENV{icone-gauche}|oui) fr-link--icon-left] [(#ENV{petit}|oui) fr-link--sm] [(#ENV{grand}|oui) fr-link--lg]" href="#URL_RUBRIQUE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#TITRE] - ouvre une nouvelle fenêtre"]>
+ <a class="fr-link [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-link--icon-right] [(#ENV{icone-gauche}|oui) fr-link--icon-left] [(#ENV{petit}|oui) fr-link--sm] [(#ENV{grand}|oui) fr-link--lg]" href="#URL_RUBRIQUE" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#TITRE] (nouvelle fenêtre)"]>
[(#ENV{titre}|oui)#ENV{titre}][(#ENV{titre}|non) #TITRE]
</a>
</BOUCLE_mot-simple>
@@ -584,7 +584,7 @@
<div class="fr-card__body">
<div class="fr-card__content [(#GET{ma_couleur})]">
<p class="fr-card__title">
- <a href="#ENV{url}">[(#ENV{titre}|non) #ENV{url}][(#ENV{titre}|oui) #ENV{titre}]</a>
+ <a [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] (nouvelle fenêtre)"] href="#ENV{url}">[(#ENV{titre}|non) #ENV{url}][(#ENV{titre}|oui) #ENV{titre}]</a>
</p>
[<div class="fr-card__desc fr-mb-2w fr-mr-4w">(#ENV{texte})</div>]
[<div class="fr-card__start">
@@ -644,20 +644,20 @@
[(#REM) c'est une url avec un format bouton ]
<BOUCLE_url-bouton(CONDITION){si #ENV{url}|oui}{SI #ENV{bouton}|oui}>
- <a class="fr-btn fr-my-1v [(#ENV{bouton-secondaire}|oui) fr-btn--secondary] [(#ENV{bouton-tertiaire}|oui) fr-btn--tertiary] [(#ENV{sans-encadre}|oui) fr-btn--tertiary-no-outline] [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) [(#ENV{icone-seule}|non) fr-btn--icon-right ]] [(#ENV{icone-gauche}|oui) fr-btn--icon-left] [(#ENV{petit}|oui) fr-btn--sm] [(#ENV{grand}|oui) fr-btn--lg]" [(#ENV{icone-seule}|oui)title="[(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #ENV{TITRE}]"] [style="width:(#ENV{largeur})"] href="#ENV{url}" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #ENV{titre}] - ouvre une nouvelle fenêtre"] >[(#ENV{titre})]</a>
+ <a class="fr-btn fr-my-1v [(#ENV{bouton-secondaire}|oui) fr-btn--secondary] [(#ENV{bouton-tertiaire}|oui) fr-btn--tertiary] [(#ENV{sans-encadre}|oui) fr-btn--tertiary-no-outline] [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) [(#ENV{icone-seule}|non) fr-btn--icon-right ]] [(#ENV{icone-gauche}|oui) fr-btn--icon-left] [(#ENV{petit}|oui) fr-btn--sm] [(#ENV{grand}|oui) fr-btn--lg]" [(#ENV{icone-seule}|oui)title="[(#ENV{titre}|oui) #ENV{titre}][(#ENV{titre}|non) #ENV{TITRE}]"] [style="width:(#ENV{largeur})"] href="#ENV{url}" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #ENV{titre}] (nouvelle fenêtre)"] >[(#ENV{titre})]</a>
</BOUCLE_url-bouton>
[(#REM) c'est une url avec un format tag ]
<BOUCLE_url-tag(CONDITION){si #ENV{url}|oui}{SI #ENV{tag}|oui}>
- <a class="fr-tag fr-my-1v [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-tag--icon-right] [(#ENV{icone-gauche}|oui) fr-tag--icon-left] [(#ENV{petit}|oui) fr-tag--sm] [(#ENV{grand}|oui) fr-tag--lg]" target="_self" href="#ENV{url}" >[(#ENV{titre})]</a>
+ <a class="fr-tag fr-my-1v [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-tag--icon-right] [(#ENV{icone-gauche}|oui) fr-tag--icon-left] [(#ENV{petit}|oui) fr-tag--sm] [(#ENV{grand}|oui) fr-tag--lg]" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui) #ENV{titre}] [(#ENV{titre}|non) #TITRE] (nouvelle fenêtre)"] href="#ENV{url}" >[(#ENV{titre})]</a>
</BOUCLE_url-tag>
[(#REM) ce n'est pas une card - ou une tuile - ou un bouton - ou un tag - ou une card
donc c'est une url simple ou avec un target blank une taille et une icone]
<BOUCLE_url-simple(CONDITION){si #ENV{url}|oui}{SI #ENV{tag}|non}{SI #ENV{carte}|non}{SI #ENV{tuile}|non}{SI #ENV{bouton}|non}>
- <a class="fr-link [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-link--icon-right] [(#ENV{icone-gauche}|oui) fr-link--icon-left] [(#ENV{petit}|oui) fr-link--sm] [(#ENV{grand}|oui) fr-link--lg]" href="#ENV{url}" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#ENV{titre}] - ouvre une nouvelle fenêtre"]>
+ <a class="fr-link [(#GET{mon-icone})] [(#ENV{icone-gauche}|non) fr-link--icon-right] [(#ENV{icone-gauche}|oui) fr-link--icon-left] [(#ENV{petit}|oui) fr-link--sm] [(#ENV{grand}|oui) fr-link--lg]" href="#ENV{url}" [(#ENV{nouvelle-fenetre}|oui) target="_blank" rel="noopener" title="[(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#ENV{titre}] (nouvelle fenêtre)"]>
[(#ENV{titre}|oui)#ENV{titre}] [(#ENV{titre}|non)#ENV{url}]
</a>
</BOUCLE_url-simple>
@@ -699,57 +699,40 @@
</BOUCLE_condition_document>
-[(#REM) c'est un lien vers un pdf ]
-<BOUCLE_condition_pdf(CONDITION){si #ENV{url}|contient_pdf|oui}>
+[(#REM) c'est un lien vers un doc : pdf ou svg ou autres ... ]
+<BOUCLE_condition_pdf(CONDITION){si #ENV{url_doc}|oui}>
- [(#REM) c'est une lien simple vers un document pdf]
+ [(#REM) c'est une lien simple vers un document]
<BOUCLE_document-simple-pdf(CONDITION){si #ENV{carte}|non}>
<div class="fr-download fr-mb-2w">
<p class="fr-m-0">
- <a href="#ENV{url}" download class="fr-download__link" [title="Télécharger le document : (#ENV{titre})"]>[(#ENV{titre})]
+ [ <a href="#ENV{url_doc}" download class="fr-download__link" [title="Télécharger le document : (#ENV{titre})"]>(#ENV{titre})
<span class="fr-download__detail">
- [Fichier (#ENV{type}) [ - (#ENV{poids})]]
+ [Fichier (#ENV{type})] [ - (#ENV{poids})]
</span>
- </a>
+ </a>]
</p>
</div>
</BOUCLE_document-simple-pdf>
- [(#REM) c'est une lien simple au format carte vers un document pdf]
+ [(#REM) c'est une lien simple au format carte vers un document pdf, svg, autres ... ]
<BOUCLE_document-carte-pdf(CONDITION){si #ENV{carte}|oui}>
- <div class="fr-card fr-card--download fr-enlarge-link fr-mb-2w ">
- <div class="fr-card__body">
- <div class="fr-card__content [(#GET{ma_couleur})]">
+ <div class="fr-download fr-enlarge-link fr-download--card fr-mb-2w ">
+
+
<p class="fr-card__title">
- <a href="#ENV{url}" download [title="Télécharger le document : (#TITRE)"]>[(#ENV{titre}|non) #ENV{url}][(#ENV{titre}|oui) #ENV{titre}]</a>
- </p>
- [<div class="fr-card__desc fr-mb-1w fr-mr-4w">(#ENV{texte})</div>]
- [<div class="fr-card__end fr-mb-2w">
- <p class="fr-card__detail ">
- Fichier (#ENV{type}) [ - (#ENV{poids})]
+ [ <a href="#ENV{url_doc}" download class="fr-download__link" [title="Télécharger le document : (#ENV{titre})"]>(#ENV{titre})</a>]
</p>
- </div>]
- [<div class="fr-card__start">
- <ul class="fr-badges-group">
- <li><p class="fr-badge [(#GET{moncouleurbadge})]">(#ENV{badge})</p></li>
- </ul>
- </div>]
- </div>
- </div>
- </div>
+ [<div class="fr-card__desc fr-mr-4w">(#ENV{texte})</div>]
+ [<span class="fr-download__detail">
+ Fichier (#ENV{type}) [ - (#ENV{poids})]
+ </span>]
+
+ </div>
</BOUCLE_document-carte-pdf>
</BOUCLE_condition_pdf>
-
-
-
-
-
-
-
-
-
diff --git a/design_system_admin/modeles/dsfr_titre.html b/design_system_admin/modeles/dsfr_titre.html
index 3015b992087d8290c3ede3d46c4660733129c823..66454d4b56f5acbf5b61b6802e5710016dd05b13 100644
--- a/design_system_admin/modeles/dsfr_titre.html
+++ b/design_system_admin/modeles/dsfr_titre.html
@@ -1,6 +1,7 @@
#SET{titrehmini, h#ENV{h}}
[(#ENV{h}|non) #SET{titrehmini, 'h2'}]
+[(#ENV{type}|oui) #SET{titrehmini, #ENV{type}}]
#SET{taille, fr-h#ENV{taille}}
<[(#GET{titrehmini}) ] class="#GET{taille}">#ENV{titre}<[/(#GET{titrehmini})]>
diff --git a/design_system_admin/modeles/dsfr_video.html b/design_system_admin/modeles/dsfr_video.html
index 67f1ac27a7f378d83f5b64e05ef6f85f35b1d96b..d404a12724d7e0917d44c3aaac9b5e7b881094ec 100644
--- a/design_system_admin/modeles/dsfr_video.html
+++ b/design_system_admin/modeles/dsfr_video.html
@@ -1,8 +1,8 @@
#SET{aleatoire, #EVAL{rand()}}
-[(#ENV{fin}|non)
+[(#ENV*{fin}|non)
-<figure class='fr-m-0 fr-p-0'>
+<figure class='fr-my-6w fr-mx-0 fr-p-0'>
[<figcaption class="fr-text--bold">(#ENV*{titre}|?{#ENV*{titre}, #TITRE})</figcaption>]
@@ -16,18 +16,16 @@
<div class='fr-accordion fr-my-1w fr-btn--tertiary d-inline-block [(#ENV{sans-rien}|oui) fr-hidden] [(#ENV{sans-infos}) fr-hidden]'>
<div class='fr-accordion__title '>
-<button type="button" class='fr-transcription__btn' aria-controls='collapse-group-section-0-mini#GET{titre1}#GET{aleatoire}' aria-expanded='[(#GET{isressource}|=={0}|non)true'>
+<button type="button" class='fr-transcription__btn' aria-controls='collapse-group-section-0-mini#GET{titre1}#GET{aleatoire}' aria-expanded='[(#GET{isressource}|=={0}|non)true]'>
Transcription
</button>
</div>
</div>
-<div class='fr-collapse shadow' id='collapse-group-section-0-mini#GET{titre1}#GET{aleatoire}'>
-<div class='fr-p-3w'>
+<div class='fr-collapse shadow' id='collapse-group-section-0-mini#GET{titre1}#GET{aleatoire}'><div class='fr-p-3w'>
[(#REM) debut de la transcription : soit par longdesc, soit par texte entre les deux balises de debut et de fin]
-[(#ENV*{longdesc}|propre)]
-
+[(#ENV*{longdesc}|propre)</div></div></figure>]
+[(#ENV*{transcription}|propre)</div></div></figure>]
]
-
-
-[(#ENV{fin}|oui)</div></div></figure>]
\ No newline at end of file
+
+[(#ENV*{fin}|oui)</div></div></figure>]
\ No newline at end of file
diff --git a/design_system_admin/modeles/titre.html b/design_system_admin/modeles/titre.html
new file mode 100644
index 0000000000000000000000000000000000000000..1a74bb072e5eab92f6b265a8cea2b92770078ed1
--- /dev/null
+++ b/design_system_admin/modeles/titre.html
@@ -0,0 +1,9 @@
+
+#SET{titrehmini, h#ENV{h}}
+[(#ENV{h}|non) #SET{titrehmini, 'h2'}]
+
+[(#ENV{souligne}|oui) #SET{souligne_border,fr-bottom-border}]
+
+#SET{taille, fr-h#ENV{taille}}
+<style type="text/css">fr-bottom-border {border-bottom: 1px solid #ccc;}</style>
+<[(#GET{titrehmini}) ] class="#GET{taille}">#ENV{titre}<[/(#GET{titrehmini})]>