On teste les formus en reprenant ceux de forums

content/article.html

@@ -33,14 +33,14 @@
 	<div class="js-tabs tabs__standard">
 		<ul class="js-tablist tabs__standard_ul tabs__list" data-hx="h2">
 			<li class="js-tablist__item tabs__standard__li tabs__item">
-				<a href="#article__documentation" id="label_article__documentation" class="js-tablist__link tabs__link tabs__standard__a"><:galactic_contrib:article_documentation:></a>
+				<a href="#documentation" id="tab_documentation" class="js-tablist__link tabs__link tabs__standard__a"><:galactic_contrib:article_documentation:></a>
 			</li>
 			<li class="js-tablist__item tabs__standard__li tabs__item">
-				<a href="#article__forum" id="label_article__forum" class="js-tablist__link tabs__link  tabs__standard__a"><:galactic_contrib:article_forum:></a>
+				<a href="#discussions" id="tab_discussions" class="js-tablist__link tabs__link  tabs__standard__a"><:galactic_contrib:article_forum:></a>
 			</li>
 		</ul>
 	]
-		<div class="js-tabcontent tabs__standard__tabcontent tabs__content" id="article__documentation">
+		<div class="js-tabcontent tabs__standard__tabcontent tabs__content" id="documentation">
 			<div class="surlignable">
 				[<div class="#EDIT{descriptif} descriptif">(#DESCRIPTIF|PtoBR)</div>]
 				[<div class="#EDIT{chapo} chapo" itemprop="description">(#CHAPO|image_reduire{#CONFIG{documentation/taille_redimensionnement_image,440}, 0})</div>]
@@ -64,17 +64,31 @@
 				</abbr>
 			})</p>]
 		</div>
-	
+
+		[(#SET{repondre_url,repondre_url=#PARAMETRES_FORUM|url_reponse_forum})]
 		[(#PARAMETRES_FORUM|oui)
-		<div class="js-tabcontent tabs__standard__tabcontent tabs__content" id="article__forum">
+		<div class="js-tabcontent  tabs__standard__tabcontent tabs__content" id="discussions">
 			<div class="article__forum">
-				<INCLURE{fond=inclure/forum}{id_article} />
-				#FORMULAIRE_FORUM{#SELF}
+				<INCLURE{fond=inclure/forum,
+					id_article,
+					repondre_url=#GET{repondre_url},
+					repondre_titre=<:repondre_article:>,
+					env} />
 			</div>
 		</div>]
 
 	[(#PARAMETRES_FORUM|oui)
 	</div>
+	<script type="application/javascript">
+		(function($){
+			$(function(){
+				var hash = window.location.hash.substr(1);
+				if (hash == 'discussions') {
+					$('#tab_discussions').click();
+				}
+			});
+		})(jQuery);
+	</script>
 	]
 
 </article>

formulaires/recherche_ajax.html

@@ -0,0 +1,28 @@
+<div class="formulaire_spip formulaire_recherche formulaire_recherche_ajax[ (#ENV{class})]">
+	<form action="[(#ENV{action})]" method="get">
+		[(#ENV{action}|form_hidden)]
+		[<input type="hidden" name="lang" value="(#ENV{lang})"/>]
+		<label for="#ENV{_id_champ}" class="visuallyhidden">
+			<:info_rechercher_02:>
+		</label>
+		[(#SET{titre,#ENV{placeholder,<:info_rechercher:>}})]
+		[(#CHEMIN{images/icone-loupe.svg}|file_get_contents|replace{'<svg ','<svg height="16" '})]
+		<div class="search">
+			<input type="search" placeholder="[(#GET{titre}|attribut_html)]" name="recherche" id="#ENV{_id_champ}" [ value="(#ENV{recherche})" ] accesskey="4" autocapitalize="off" autocorrect="off"/>
+		</div>
+		<a class="close ajax" href="[(#ENV{action}|parametre_url{'recherche',''})]" title="Annuler la recherche">
+			<span class="fa fa-close"></span>
+		</a>
+		<div class="submit">
+			<input type="submit" value="&gt;&gt;" title="[(#GET{titre}|attribut_html)]" onclick="return recherche_submit_#ENV{_id_champ}.apply(this);" />
+			<a class="none visuallyhidden refresh[ (#ENV{class})]" href="[(#ENV{action}|parametre_url{'recherche',''})]">[(#GET{titre})]</a>
+		</div>
+	</form>
+</div>
+<script type="text/javascript">/*<![CDATA[*/
+function recherche_submit_#ENV{_id_champ}() {
+	var a = $(this).siblings('a.refresh');
+	var href = parametre_url(a.attr('href'), 'recherche', $(this).parents('form').find('input[type=search]').val());
+	a.attr('href', href).followLink();
+	return false;
+}/*]]>*/</script>

formulaires/recherche_ajax.php

@@ -0,0 +1,45 @@
+<?php
+
+/***************************************************************************\
+ *  SPIP, Systeme de publication pour l'internet                           *
+ *                                                                         *
+ *  Copyright (c) 2001-2016                                                *
+ *  Arnaud Martin, Antoine Pitrou, Philippe Riviere, Emmanuel Saint-James  *
+ *                                                                         *
+ *  Ce programme est un logiciel libre distribue sous licence GNU/GPL.     *
+ *  Pour plus de details voir le fichier COPYING.txt ou l'aide en ligne.   *
+\***************************************************************************/
+
+if (!defined('_ECRIRE_INC_VERSION')) {
+	return;
+}
+
+/**
+ * chargement des valeurs par defaut des champs du `#FORMULAIRE_RECHERCHE_AJAX{#SELF}`
+ *
+ * on peut lui passer l'url de destination en premier argument
+ * on peut passer une deuxième chaine qui va différencier le formulaire pour pouvoir en utiliser plusieurs sur une même page
+ *
+ * @param string $lien URL où amène le formulaire validé
+ * @param string $placeholder Pour indiquer un titre spécifique au placeholder
+ * @return array
+ */
+function formulaires_recherche_ajax_charger_dist($lien = '', $placeholder = '') {
+	if ($GLOBALS['spip_lang'] != $GLOBALS['meta']['langue_site']) {
+		$lang = $GLOBALS['spip_lang'];
+	} else {
+		$lang = '';
+	}
+
+	$class = 'ajax';
+	$action = ($lien ? $lien : generer_url_public('recherche')); # action specifique, ne passe pas par Verifier, ni Traiter
+	return
+		array(
+			'action' => $action,
+			'recherche' => _request('recherche'),
+			'lang' => $lang,
+			'class' => $class,
+			'placeholder' => $placeholder,
+			'_id_champ' => $class ? substr(md5($action . $class), 0, 4) : 'recherche'
+		);
+}

galactic_contrib_fonctions.php

@@ -1,10 +1,59 @@
 <?php
 
 // Retire les liens en syntaxe Trac: [URL titre] ---> titre
-function tracbrut($texte)
-{
-	if (preg_match_all('/[[][^ ]* *([^]]*)]/', $texte, $m, PREG_SET_ORDER))
-		foreach($m as $r)
+function tracbrut($texte) {
+	if (preg_match_all('/[[][^ ]* *([^]]*)]/', $texte, $m, PREG_SET_ORDER)) {
+		foreach ($m as $r) {
 			$texte = str_replace($r[0], $r[1], $texte);
+		}
+	}
 	return $texte ? $texte : 'Log';
-}
+}
+
+
+/**
+ * Pluriels, singulier ou zéro...
+ *
+ * Les items sont à indiquer comme pour la fonction _T() sous la forme :
+ * "module:chaine"
+ *
+ * Cherchera chaine_zero, chaine_un, chaine_nb en fonction de $nb.
+ *
+ * @example
+ *     ```
+ *     [(#NB|contrib_pluraliser{forum:sujets})]
+ *     [(#NB|contrib_pluraliser{#LISTE{forum:sujets_zero,forum:sujets_un,forum:sujets_nb}})]
+ *     ```
+ *
+ * @param int $nb : le nombre
+ * @param string|array $chaine
+ *     - string : radical de l'item de langue, sera complété par _zero, _un, _nb
+ *     - array : couples {0 => module:chaine_zero, 1 => module:chaine_un, 2 => module:chaine_nb}
+ *
+ * @param array $vars : Les autres variables nécessaires aux chaines de langues (facultatif)
+ * @return string : la chaine de langue finale en utilisant la fonction _T()
+ */
+function contrib_pluraliser($nb, $chaine, $vars = array()) {
+	$nb = intval($nb);
+
+	if (!is_array($vars)) {
+		$vars = array();
+	}
+
+	if (!is_array($chaine)) {
+		$chaine = array(
+			$chaine . '_zero',
+			$chaine . '_un',
+			$chaine . '_nb',
+		);
+	}
+
+	$vars['nb'] = $nb;
+	if ($nb > 1) {
+		return _T($chaine[2], $vars);
+	} elseif ($nb == 1) {
+		return _T($chaine[1], $vars);
+	} else {
+		return _T($chaine[0], $vars);
+	}
+}

inclure/forum.html

@@ -0,0 +1,12 @@
+<div class="comments">
+	<a href="#comments" id="comments"></a>
+	<a href="#forum" id="forum"></a>
+	[<script type="text/javascript">/*<!\[CDATA\[*/(#INCLURE{javascript/thread-move.js}|compacte{js})/*\]\]>*/</script>]
+	<INCLURE{fond=inclure/forums/bloc-discussions, env, ajax}>
+	[(#ENV{repondre_url}|oui)
+	[<div class="comment-form">
+		[<h2 class="h2">(#ENV*{repondre_titre,<:repondre_article:>}|trim)</h2>]
+		(#FORMULAIRE_FORUM{#SELF,#ENV{objet},#ENV{id_objet}})
+	</div>]
+	[(#PARAMETRES_FORUM|oui)<INCLURE{fond=comments-feed,env} />]
+]</div>

inclure/forums/bloc-discussions.html

@@ -0,0 +1,53 @@
+[(#REM)
+
+	On présente différents onglets d’affichage des messages, par date, par note, ...
+	On permet de définir aussi la durée (depuis 3 mois, depuis toujours...)
+	Par défaut, la durée est sur 5 ans, ce qui accélère l’affichage (la requête) par rapport à «depuis toujours».
+
+]
+<div class="comments-posts"></div>[(#REM) fake pour retour JS de Comments ]
+
+[(#SET{self,#SELF|parametre_url{debut_forums,''}})]
+<div class="alignement_avec_liste">
+<div class="onglets">
+	<div class="onglets__groupe">
+		<a href="[(#GET{self}|parametre_url{max,''})]" class="ajax[ (#ENV{max}|non)on]" title="[(#VAL{5}|singulier_ou_pluriel{galactic_contrib:annees_depuis_un,galactic_contrib:annees_depuis_nb})]" rel="nofollow">
+			[(#VAL{5}|singulier_ou_pluriel{galactic_contrib:annees_un,galactic_contrib:annees_nb})]
+		</a>
+		<a href="[(#GET{self}|parametre_url{max,1y})]" class="ajax[ (#ENV{max}|=={1y}|oui)on]" title="[(#VAL{1}|singulier_ou_pluriel{galactic_contrib:annees_depuis_un,galactic_contrib:annees_depuis_nb})]" rel="nofollow">
+			[(#VAL{1}|singulier_ou_pluriel{galactic_contrib:annees_un,galactic_contrib:annees_nb})]
+		</a>
+		<a href="[(#GET{self}|parametre_url{max,3m})]" class="ajax[ (#ENV{max}|=={3m}|oui)on]" title="[(#VAL{3}|singulier_ou_pluriel{galactic_contrib:mois_depuis_un,galactic_contrib:mois_depuis_nb}|attribut_html)]" rel="nofollow">
+			[(#VAL{3}|singulier_ou_pluriel{galactic_contrib:mois_un,galactic_contrib:mois_nb})]
+		</a>
+
+		<a href="[(#GET{self}|parametre_url{max,+})]" class="ajax[ (#ENV{max}|=={+}|oui)on]" title="<:galactic_contrib:depuis_origine|attribut_html:>" rel="nofollow">
+			<:galactic_contrib:sans_limite:>
+		</a>
+	</div>
+
+	<div class="onglets__groupe">
+		<a href="[(#GET{self}|parametre_url{ordre,''})]" class="ajax[ (#ENV{ordre}|non)on]" title="<:galactic_contrib:classer_par_date|attribut_html:>" rel="nofollow">
+			<:galactic_contrib:par_date:>
+		</a>
+	</div>
+
+</div>
+
+[(#FORMULAIRE_RECHERCHE_AJAX{#SELF,<:galactic_contrib:info_filtrer:>})]
+
+</div>[(#REM) .alignement_avec_liste ]
+
+#SET{date_min,#NULL}
+#SET{age,1825}
+[(#ENV{max}|=={1y}|oui)#SET{age,365}]
+[(#ENV{max}|=={3m}|oui)#SET{age,90}]
+[(#ENV{max}|=={+}|oui)#SET{age,#NULL}]
+
+#SET{par,date_thread} [(#REM) ou date_heure ]
+
+<INCLURE{fond=inclure/forums/liste-discussions, dernier_message=1,
+	id_article, id_rubrique, recherche,
+	age=#GET{age}, date_thread=#GET{date_min},
+	par=#GET{par},
+	ajax, env} />

inclure/forums/bref/commentaires.html

@@ -0,0 +1,8 @@
+#SET{nb_reponses,#ENV{nb_reponses,0}}
+<div class="nb_comments comments_#GET{nb_reponses}" title="[(#GET{nb_reponses}|contrib_pluraliser{galactic_contrib:info_reponses}|attribut_html)]">
+	[(#GET{nb_reponses}|oui)#GET{nb_reponses}]
+	#SET{icone,fa-comment}
+	[(#GET{nb_reponses}|=={1}|oui)#SET{icone,fa-comment-o}]
+	[(#GET{nb_reponses}|>{1}|oui)#SET{icone,fa-comments-o}]
+	<span class="fa[ (#GET{icone})]" aria-hidden="true"></span>
+</div>

inclure/forums/bref/moderation.html

@@ -0,0 +1,36 @@
+<BOUCLE_moderateur(CONDITION)
+	{si #ENV{id_forum}}
+	{si #ENV{objet}}
+	{si #ENV{id_objet}}
+>
+<?php
+if (
+	!empty($GLOBALS['visiteur_session']['id_auteur'])
+	and $GLOBALS['visiteur_session']['statut']=='0minirezo'
+	and include_spip('inc/autoriser')
+	and autoriser('modererforum','#ENV{objet}','#ENV{id_objet}')
+) {
+	include_spip('inc/actions');
+	$action_off  = generer_action_auteur('instituer_forum','#ID_FORUM-off',self());
+	$action_spam = generer_action_auteur('instituer_forum','#ID_FORUM-spam',self());
+
+	echo '<div class="moderations">';
+	echo bouton_action(
+		'<i class="fa fa-fire" aria-hidden="true"></i> <span class="sr-only">' . _T('forum:icone_bruler_message') . '</span>',
+		$action_spam,
+		'moderation-spam ajax',
+		_T('galactic_forum:confirmer_spam_message'),
+		_T('forum:icone_bruler_message')
+	);
+	echo bouton_action(
+		'<i class="fa fa-trash-o" aria-hidden="true"></i> <span class="sr-only">' . _T('forum:icone_supprimer_message') . '</span>',
+		$action_off,
+		'moderation-off ajax',
+		_T('galactic_forum:confirmer_suppression_message'),
+		_T('forum:icone_supprimer_message')
+	);
+	echo '</div>';
+	unset($action_off, $action_spam);
+}
+?>
+</BOUCLE_moderateur>

inclure/forums/liste-discussions.html

@@ -0,0 +1,39 @@
+<B_forums>
+<div class="Sujets">
+	#ANCRE_PAGINATION
+	<h3 class="menu-titre invisible"><:galactic_contrib:dernieres_discussions_par_date></h3>
+	[<p class="nb_resultats">(#GRAND_TOTAL|contrib_pluraliser{galactic_contrib:discussions})</p>]
+	<ul class="listeSujets comments-ul comments-items">
+	<BOUCLE_forums(FORUMS)
+		{id_article ?}
+		{articles.id_rubrique?}
+		{id_auteur?}
+		{id_mot?}
+		{age ?<=#ENV{age}}
+		{date_heure ?> #ENV{date_heure}}
+		{date_thread ?> #ENV{date_thread}}
+		{recherche?}
+		{par #ENV{par,date_heure}}{inverse #ENV{inverse,1}}
+		{!par date_heure}
+		{pagination 10}
+	>
+		<li class="item comment-li comment-item">
+			<INCLURE{fond=inclure/forums/presentation-message, id_forum} />
+			<B_dernier_message>
+				<ul class="listeReponses comment-ul comment-items">
+			<BOUCLE_dernier_message(FORUMS){plat}{id_thread}{id_parent!=0}{par date}>
+					<li class="item comment-li comment-item">
+					<INCLURE{fond=inclure/forums/presentation-reponse, id_forum} />
+					</li>
+			</BOUCLE_dernier_message>
+				</ul>
+			</B_dernier_message>
+		</li>
+	</BOUCLE_forums>
+	</ul>
+
+	[<div class="pagination">(#PAGINATION)</div>]
+</div>
+</B_forums>
+	[<p class="nb_resultats">(#GRAND_TOTAL|contrib_pluraliser{galactic_contrib:discussions})</p>]
+<//B_forums>

inclure/forums/presentation-message.html

@@ -0,0 +1,19 @@
+<BOUCLE_forum(FORUMS){id_forum}>
+
+#SET{nb_reponses,0}
+<BOUCLE_compte(FORUMS){id_thread}{plat}{id_parent!=0} />#SET{nb_reponses,#TOTAL_BOUCLE}<//B_compte>
+
+<div id="forum#ID_FORUM" class="comment ligneSujet[ (#GET{nb_reponses}|>={1}|non)noreponse]">
+
+	<div class="ligneSujet__enbref">
+		<INCLURE{fond=inclure/forums/bref/commentaires, nb_reponses=#GET{nb_reponses}} />
+		<INCLURE{fond=inclure/forums/bref/moderation, id_forum, objet, id_objet} />
+	</div>
+
+	<div class="ligneSujet__description">
+		<INCLURE{fond=inclure/forums/publication-auteur, id_auteur, id_forum, nom, date, lien_lang=#LANG, lien_lang_dir=#LANG_DIR} />
+		[<div class="texte #EDIT{texte}">(#TEXTE)</div>]
+	</div>
+
+</div>
+</BOUCLE_forum>

inclure/forums/presentation-reponse.html

@@ -0,0 +1,16 @@
+<BOUCLE_forum(FORUMS){id_forum}>
+	<div id="forum#ID_FORUM" class="ligneSujet comment">
+		<div class="ligneSujet__enbref">
+			<div class="link">
+				<a href="#URL_FORUM" title="<:galactic_contrib:message_suivant_dans_discussion|attribut_html:>">
+					<span class="fa fa-reply[ (#LANG_DIR|=={rtl}|?{fa-flip-vertical,fa-rotate-180})]" aria-hidden="true" ></span>
+				</a>
+			</div>
+			<INCLURE{fond=inclure/forums/bref/moderation, id_forum, objet, id_objet} />
+		</div>
+		<div class="ligneSujet__description">
+			<INCLURE{fond=inclure/forums/publication-auteur, id_auteur, id_forum, nom, date, lien_lang=#LANG, lien_lang_dir=#LANG_DIR} />
+			[<div class="texte #EDIT{texte}">(#TEXTE)</div>]
+		</div>
+	</div>
+</BOUCLE_forum>

inclure/forums/publication-auteur.html

@@ -0,0 +1,19 @@
+<div class="publication">
+	<div class="publication__logo">
+		[(#LOGO_AUTEUR|image_reduire{20,20}|sinon{#LOGO_ARTICLE|image_reduire{20,20}|image_alpha{50}})]
+	</div>
+	<div class="publication__auteur">
+		<BOUCLE_auteur(AUTEURS){tout}{id_auteur}>
+		[(#REM) on force l'affichage de la page appelee dans la langue et la dir de l'environnement global d'origine ]
+		[<a href="[(#URL_AUTEUR|parametre_url{lang,#ENV{lien_lang,''}}|parametre_url{dir,#ENV{lien_lang_dir,''}})]">(#NOM)</a>]
+		</BOUCLE_auteur>
+		[<strong class="non_auteur">(#NOM)</strong> ]
+		<//B_auteur>
+	</div>
+	<div class="publication_date">
+		<a href="#URL_FORUM{#ID_FORUM}" class="permalink" title="<:galactic_contrib:permalink|attribut_html:>">
+			<span class="fa fa-link" aria-hidden="true"></span>
+			<time class="published" datetime="[(#DATE|date_iso)]" title="[(#DATE|affdate_heure|attribut_html)]">[(#DATE|date_relative)]</time>
+		</a>
+	</div>
+</div>

inclure/head-theme.html

@@ -1,3 +1,6 @@
+
+[(#REM) Feuille de style CSS pour les icones ]
+[<link rel="stylesheet" href="(#CHEMIN{css/font-awesome.min.css}|direction_css|timestamp)" type="text/css" media="all" />]
 [(#REM) Feuille de style CSS pour la coloration ]
 [<link rel="stylesheet" href="(#CHEMIN{css/geshi.css}|timestamp)" type="text/css" media="all" />]
 

lang/galactic_contrib_fr.php

@@ -6,5 +6,56 @@ if (!defined('_ECRIRE_INC_VERSION')) {
 }
 
 $GLOBALS[$GLOBALS['idx_lang']] = array(
-	
+	// A
+	'annees_un' => '1 an',
+	'annees_nb' => '@nb@ ans',
+	'annees_depuis_un' => 'Depuis 1 an',
+	'annees_depuis_nb' => 'Depuis @nb@ ans',
+	'aucune_reponse' => 'Pas de réponse',
+
+	// C
+	'classer_par_date' => 'Classer par date',
+	'classer_par_note' => 'Classer par note',
+
+	// D
+	'depuis_origine' => 'Depuis toujours',
+	'dernieres_discussions_par_date' => 'Discussions par date d’activité',
+	'discussions_zero' => 'Aucune discussion',
+	'discussions_un' => 'Une discussion',
+	'discussions_nb' => '@nb@ discussions',
+
+	// I
+	'info_filtrer' => 'Filtrer',
+	'info_reponses_zero' => '0 réponse',
+	'info_reponses_un' => '1 réponse',
+	'info_reponses_nb' => '@nb@ réponses',
+	'info_votes_zero' => '0 vote',
+	'info_votes_un' => '1 vote',
+	'info_votes_nb' => '@nb@ votes',
+	'info_votes_plus_zero' => '0 vote positif',
+	'info_votes_plus_un' => '1 vote positif',
+	'info_votes_plus_nb' => '@nb@ votes positifs',
+	'info_votes_moins_zero' => '0 vote négatif',
+	'info_votes_moins_un' => '1 vote négatif',
+	'info_votes_moins_nb' => '@nb@ votes négatifs',
+
+	// M
+	'message_dans_discussion' => 'Message dans la discussion',
+	'message_suivant_dans_discussion' => 'Message suivant dans la discussion',
+	'mois_un' => '1 mois',
+	'mois_nb' => '@nb@ mois',
+	'mois_depuis_un' => 'Depuis 1 mois',
+	'mois_depuis_nb' => 'Depuis @nb@ mois',
+
+	// P
+	'par_date' => 'Par date',
+	'par_note' => 'Par note',
+	'permalink' => 'Lien permanent',
+
+	// R
+	'rechercher' => 'Rechercher',
+
+	// S
+	'sans_limite' => 'Sans limite',
+
 );

scss/galactic_theme.scss

@@ -85,3 +85,14 @@
 .user__links {
   margin-top: .5em;
 }
+
+.menu--surweb {
+  p {
+    margin: 0;
+  }
+}
+
+@import "scss/theme/onglets";
+@import "scss/theme/formulaires";
+@import "scss/theme/forums";
+

scss/theme/formulaires.scss

@@ -0,0 +1,148 @@
+
+/* Colorer pour rendre visible tous les formulaires */
+.formulaire_spip:not(.formulaire_recherche) {
+	background: $couleur-gris5;
+	padding:1em;
+}
+
+/* Comprimer le formulaire de login */
+.formulaire_login {
+	position:relative;
+	#pass_securise { float:right; }
+	.editer_password .details { margin-bottom:0; }
+	.editer_session { margin-bottom:0; }
+	fieldset { margin:0; }
+	.boutons { margin-top:0; padding:0; position:absolute; bottom:1em; right:1em; }
+}
+.formulaire_oubli {
+	padding:0 1em;
+	fieldset { margin:0; }
+	.boutons { padding:0; }
+}
+
+.formulaire_forum {
+	margin-top:1em;
+	.texte {
+		font-size:.9em;
+	}
+	.explication {
+		font-size:.8em;
+	}
+	.titre_groupe {
+		font-weight: normal;
+		display:inline-block;
+	}
+	.choix_mots {
+		margin-left:1em;
+		margin-bottom:1em;
+		columns:3;
+		@include media($bp-medium) {
+			columns:2;
+		}
+		@include media($bp-small) {
+			columns:1;
+		}
+	}
+	.editer_notification {
+		border: 1px solid #ddd;
+		border-radius: 5px;
+		background: rgba(255,255,255,.3);
+		padding-left: 1em;
+		margin-bottom: 0;
+		.choix label {
+			font-size: .9em;
+		}
+	}
+	fieldset.qui {
+		margin-top:0;
+	}
+	fieldset.commentaire {
+		margin-bottom: 0;
+		margin-top:0;
+	}
+	fieldset + fieldset.commentaire {
+		margin-top:1.5em;
+	}
+}
+
+.formulaire_spip {
+	fieldset.previsu {
+		background:white;
+		padding:1em 1em 0 1em;
+		border:3px solid #ecc218;
+		& > legend {
+			margin-top:-1.2em;
+		}
+		.comment-meta {
+			overflow: auto;
+			border-bottom: 3px solid $couleur-gris5;
+			padding-bottom: .5em;
+			.spip_logo {
+				float:right;
+				height:auto !important;
+				max-width:20px !important;
+			}
+		}
+	}
+}
+
+.formulaire_recherche_ajax {
+	form {
+		position: relative;
+		width:    100%;
+	}
+	svg {
+		display:block;
+		position:  absolute;
+		top:       50%;
+		transform: translateY(-50%);
+		left:      em(12px);
+		width:     em(12px);
+		height:    em(12px);
+		* {
+			stroke: $couleur-nav;
+		}
+	}
+	div.search {
+		width: 100%;
+	}
+	a.close {
+		position:absolute;
+		top:       50%;
+		transform: translateY(-50%);
+		right:0;
+		padding: em(6px) em(12px);
+		color:$couleur-gris4b;
+		&:hover {
+			color: $couleur-lien;
+		}
+	}
+	div.submit {
+		display: none;
+	}
+
+	input[type="search"] {
+		border:        1px solid $couleur-gris4b;;
+		height:        em(36px);
+		width:         100%;
+		padding-left:  em(34px);
+		padding-right: 15%;
+		&:focus {
+			border:     1px solid $couleur-nav;
+		}
+	}
+}
+
+.formulaire_ecrire_auteur {
+	padding:1em 2em;
+	legend {
+		text-transform: none;
+	}
+	fieldset:last-of-type {
+		margin-bottom:0;
+	}
+	.boutons {
+		margin-top:0;
+	}
+	.previsu .comment-meta { margin-bottom:.5em; }
+}

scss/theme/forums.scss

@@ -0,0 +1,217 @@
+
+$largeur-enbref: 72px;
+$largeur-enbref-bordure: 72px - 4px;
+
+
+.article__forum {
+	padding-top:3em;
+	background-color:white;
+
+	@include media($bp-medium-up) {
+		padding-left: calc(5.5555% - #{$largeur-enbref});
+	}
+	@include media($bp-large-up) {
+		padding-left: calc(16.6666% - #{$largeur-enbref});
+	}
+}
+
+.listeSujets, .listeReponses {
+	list-style-type:none;
+	margin-left:0;
+	margin-top:2em;
+	margin-bottom:4em;
+
+
+	/* Comments déplace la réponse du formulaire */
+	.reponse_formulaire {
+		padding: 0.5em;
+		margin-left: calc(#{$largeur-enbref} + 1em); /* ~ largeur de .ligneSujet__enbref */
+		@include media($bp-small) {
+			margin-left:0;
+		}
+		border:        1px solid;
+		font-weight:   normal;
+		min-height:    em(24px);
+		margin-bottom: 1em;
+		margin-top:    1em;
+	}
+
+	.reponse_formulaire_ok {
+		color:            #264409;
+		border-color:     #C6D880;
+		background-color: #E6EFC2;
+	}
+
+	.reponse_formulaire_erreur {
+		color:            #8A1F11;
+		border-color:     #FBC2C4;
+		background-color: #FBE3E4;
+	}
+}
+
+.alignement_avec_liste, .nb_resultats {
+	padding-left: $largeur-enbref; /* ~ largeur de .ligneSujet__enbref */
+	@include media($bp-small) {
+		padding-left:0;
+	}
+}
+
+.nb_resultats {
+	margin-top:-1em;
+	margin-bottom:3em;
+	font-size:.9em;
+	color:transparentize($couleur-texte, 20%);
+	margin-left:1em;
+}
+
+.ligneSujet {
+	display:flex;
+
+	.ligneSujet__enbref {
+		font-size: .9em;
+		text-align:right;
+		width: $largeur-enbref;
+		@include vendor-prefix('flex', 0 0 $largeur-enbref);/* 999 votes */
+		padding-right:1em;
+		margin-right:1em;
+		border-right:4px solid $couleur-gris5;
+		@include media($bp-xxsmall) {
+			display:none; /* TEMPORAIRE // TODO */
+		}
+		.categorie {
+			margin-top:.1em;
+		}
+		.nb_comments {
+			display: block;
+			.fa {
+				color: $couleur-gris4;
+			}
+			&.comments_0 .fa {
+				color: $couleur-nocomment;
+			}
+		}
+	}
+	.ligneSujet__enbref {
+		.nb_comments { margin-bottom:1em; }
+		.resolu { font-size:2em; }
+		.moderations {
+			margin-top:1em;
+			.bouton_action_post {
+				display:block;
+				border:none;
+				font-size:2em;
+				margin-right:.1em;
+				line-height:1;
+				button {
+					border:none;
+					background:transparent;
+					padding:0;
+					color:$couleur-bouton;
+					transition:color 0.3s;
+				}
+				&:not(:last-child) {
+					margin-bottom:.2em;
+				}
+				&.moderation-off button {
+					&:hover, &:focus {
+						color:$couleur-moderation-off !important;
+						background-color:transparent !important;
+					}
+				}
+				&.moderation-spam button {
+					&:hover, &:focus {
+						color:$couleur-moderation-spam !important;
+						background-color:transparent !important;
+					}
+				}
+			}
+		}
+	}
+	.ligneSujet__description {
+		@include vendor-prefix('flex-grow', 1);
+		overflow-wrap: break-word;
+		min-width: 0;
+		padding-bottom: 2em;
+		.titre {
+			margin-bottom: .3em;
+		}
+	}
+
+	&:not(.complet) {
+		.ligneSujet__description {
+			p { margin-bottom:0; }
+		}
+	}
+	&.complet .titre {
+		margin:0 0 1em;
+	}
+
+	.publication {
+		background: transparentize($couleur-gris5, 70%);
+		padding:.2em .3em;
+		margin: 0 0 .4em 0;
+		border-bottom: 2px solid $couleur-gris5;
+		display:flex;
+		@include vendor-prefix('flex-direction', 'row');
+		@include vendor-prefix('flex-wrap', 'wrap');
+		font-size: .9em;
+
+		.publication__logo {
+			width: 20px;
+			@include vendor-prefix('flex', '0 0 20px');
+			img { vertical-align: top; margin-top:1px; }
+		}
+		.publication__auteur {
+			margin-left:.5em;
+			@include vendor-prefix('flex-grow', 1);
+		}
+		.publication_date {
+			width:12em;
+			@include vendor-prefix('flex', '0 0 12em');
+			text-align:right;
+			margin-left: auto;
+			abbr.published { border-bottom:0; }
+			a.permalink {
+				color:$couleur-texte;
+				.fa {
+					color: $couleur-bouton-sombre;
+					margin-right:.5em;
+					transition: color 0.3s;
+				}
+				&:hover .fa {
+					color: $couleur-lien-hover;
+				}
+			}
+			@include media($bp-xxsmall) {
+				width:auto;
+				@include vendor-prefix('flex', '0 0 100%');
+			}
+		}
+	}
+	.texte p:last-child {
+		margin-bottom:0;
+	}
+
+	/* message qui est une réponse, dans une liste d’intros */
+	.reponse {
+		display:flex;
+		@include vendor-prefix('flex-direction', 'row');
+		.link {
+			width: 2em;
+			@include vendor-prefix('flex', 0 0 2em);
+			a {
+				padding:.3em;
+			}
+		}
+		.message_reponse {
+			@include vendor-prefix('flex-grow', 1);
+		}
+	}
+}
+.listeReponses {
+	margin-top:0;
+}
+
+.comments .comment-form{
+	margin-left:$largeur-enbref;
+}

scss/theme/onglets.scss

@@ -0,0 +1,70 @@
+
+.onglets {
+	display:flex;
+	@include vendor-prefix('flex-wrap', 'wrap');
+	@include vendor-prefix('justify-content', 'space-between');
+	font-size:.9em;
+	list-style-type:none;
+
+	.onglets__groupe {
+		display: flex;
+		@include vendor-prefix('flex-wrap', 'wrap');
+		margin-bottom: 0.5em;
+	}
+	.onglets__groupe:not(.onglets__groupe--principal) {
+		font-size:.9em;
+	}
+	a {
+		text-align:center;
+		padding: .3em .6em;
+		line-height: 1;
+		margin-bottom:.3em;
+		background-color: $couleur-gris5;
+		&:not(:last-child) {
+			margin-right:4px;
+		}
+		&.on {
+			/*background-color: $couleur-lien-hover;*/
+			/*color:white;*/
+			border-bottom: 4px solid $couleur-onglet-hover;
+			font-weight: bold;
+		}
+		&:hover, &:focus {
+			background-color: $couleur-lien;
+			color:white;
+			text-decoration:none;
+		}
+		.label, .badge {
+			background-color: $couleur-lien;
+			transition: background-color 0.3s, color 0.3s;
+		}
+		&.on, &:hover, &:focus {
+			.fa {
+				color: white !important;
+				transition: color 0.3s;
+			}
+			.label, .badge {
+				background:white;
+				color: $couleur-lien !important;
+				.fa { color: $couleur-lien !important; }
+			}
+		}
+		.fa.sans_reponse { color: $couleur-nocomment; margin-right:.2em; }
+	}
+	a.on .badge,
+	a.on .label {
+		background:white
+	}
+	.onglets__groupe--principal, .js-tablist {
+		 width: 100%;
+		 a {
+			 border:0;
+			 padding: .4em .7em;
+		 }
+		 a.on {
+			 background-color: $couleur-lien-hover;
+			 color:white;
+		 }
+	 }
+}
+

scss/utils/_couleurs.scss

@@ -5,6 +5,7 @@ $couleur-gris1: #333333;
 $couleur-gris2: #424242;
 $couleur-gris3: #444444;
 $couleur-gris4: #838383;
+$couleur-gris4b : #cacaca;
 $couleur-gris5: #f0edf0;
 $couleur-gris6: #f8f6f8;
 
@@ -26,4 +27,12 @@ $couleur-texte-gris: lighten($couleur-gris3, 6%);
 $couleur-lien: #27A3C3;
 $couleur-lien-hover: darken($couleur-lien, 10%);
 
-$couleur-fond-boussole: #333;
+$couleur-fond-boussole: #333;
+
+/** Autres couleurs */
+$couleur-moderation-off: #d10007;
+$couleur-moderation-spam: #ff6a00;
+$couleur-bouton : #e8e5e8;
+$couleur-bouton-sombre : #dddadd;
+$couleur-nocomment: #ba2842;
+$couleur-onglet-hover: $couleur-nav-fleche-hover;