From 18df0352b120956cce97d65e364fb0a23d30eaa7 Mon Sep 17 00:00:00 2001
From: tcharlss <tcharlss@bravecassine.com>
Date: Wed, 21 Apr 2021 17:17:22 +0200
Subject: [PATCH] =?UTF-8?q?Refacto=20des=20styles=20des=20bo=C3=AEtes=20de?=
 =?UTF-8?q?=20l'espace=20priv=C3=A9=20(#4727).?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* D'une façon générale, on aligne les styles des boîtes avec ceux des formulaires : bordure, espacements, ombre portée, etc.
* Les styles des variantes principales sont un peu ajustés, mais restent les mêmes dans les grandes lignes : couleurs, bordures, etc.
* En revanche on revient plus profondément sur les variantes d'états `notice`, `error` et `success`. Elle ne doivent pas être confondues ni se substituer à de vrais messages d'alerte, ce que pouvaient laisser à penser les styles actuels. On se contente d’ajouter une bordure  de couleur sur le côté, l'icône est au niveau du titre quand il est présent, sinon dans le body.
* Ajout de quelques variantes à combiner aux précédentes pour des cas précis : `flat` pour supprimer l'ombre portée, `pop` pour l’inverse, et `mini` pour une version plus petite (apliquée automatiquement en colonne latérale).
* Les boîtes imbriquées sont toujours en mode « flat ».
* En variantes de header on ne laisse que `titrem`, toutes les autres sont inutiles (et quasi pas utilisées).
* Réorganisation complète de la CSS
---
 prive/themes/spip/box_skins.css.html | 641 ++++++++++++++++++++++-----
 prive/themes/spip/theme.css.html     |  22 -
 2 files changed, 522 insertions(+), 141 deletions(-)

diff --git a/prive/themes/spip/box_skins.css.html b/prive/themes/spip/box_skins.css.html
index 9071bbcdde..d8e6edd893 100644
--- a/prive/themes/spip/box_skins.css.html
+++ b/prive/themes/spip/box_skins.css.html
@@ -1,126 +1,529 @@
 [(#REM)
 
-	Ce squelette definit les styles de l'espace prive
-
-	Note: l'entete "Vary:" sert a repousser l'entete par
-	defaut "Vary: Cookie,Accept-Encoding", qui est (un peu)
-	genant en cas de "rotation du cookie de session" apres
-	un changement d'IP (effet de clignotement).
-	<style>
-]
+	Ce squelette définit les styles des boîtes de l'espace privé.
+
+	Ce composant correspond aux balises #BOITE_OUVRIR et cie.
+
+	L'entête et le pied sont optionnels.
+	Les boîtes simples reprennent un style proche des formulaires.
+
+	Organisation du fichier :
+
+	0. Variables
+	1. Base lib
+	2. Layout et rythme vertical
+	3. Base graphique commune
+	4. Variantes principales
+	5. Variantes d'états
+	6. Autres variantes
+	7. Cas particuliers
+	8. Déprécations
+
+	Markup :
+
+	.box
+	  .inner
+	    .hd (header)
+	    .bd (body)
+	    .ft (footer)
+
+<style>]
 #CACHE{3600*100,cache-client}
 #HTTP_HEADER{Content-Type: text/css; charset=utf-8}
 #HTTP_HEADER{Vary: Accept-Encoding}
 
+
+/**
+ * ============
+ * 0. Variables
+ * ============
+ */
+
+
+/* Nb : la media-query au début sinon pb */
+@media (min-width: 768px) {
+	:root {
+		--spip-box-iconsize: 32px;
+		--spip-box-highlightsize: 1.5em;
+	}
+}
+/* On reprend certaines valeurs des formulaires pour harmoniser */
+:root {
+	/* base pour les espacements internes */
+	--spip-box-spacing-x: var(--spip-form-spacing-x);
+	--spip-box-spacing-y: var(--spip-form-spacing-y);
+	/* couleurs */
+	--spip-box-sep-color: hsla(0, 0%, 0%, 0.125);
+	--spip-box-border-color: hsla(0, 0%, 0%, 0.125); /* bordure basique */
+	--spip-box-sep-color-inverse: hsla(0, 0%, 100%, 0.1);
+	/* divers */
+	--spip-box-border-radius: var(--spip-form-border-radius);
+	--spip-box-iconsize: 24px;
+	--spip-box-highlightsize: 1em; /* largeur bordure colorée sur boîtes d'états */
+}
+.lat .box,
+.box.mini {
+	--spip-box-iconsize: 24px;
+	--spip-box-highlightsize: 1em;
+	/* Obligé de reprendre à la main les mêmes valeurs que les forms */
+	--spip-box-spacing-x: 0.75em;
+	--spip-box-spacing-y: 0.75em;
+}
+
+
+/**
+ * ===========
+ * 1. Base lib
+ * ===========
+ */
 [(#INCLURE{prive/themes/spip/box.css})]
-/* ajustement des marges selon grille verticale en em */
-.box{margin:[(#ENV{margin-bottom}|strmult{1.5})em] 0;}
-.bd {padding:[(#ENV{margin-bottom}|strdiv{2})em] 10px;}
-.bd > :first-child,.bd > :first-child > :first-child {margin-top:0;}
-.bd > :last-child {margin-bottom:0;}
-.hd, .ft {padding:[(#ENV{margin-bottom}|strdiv{2})em] 10px;}
-.hd h1,.hd h2,.hd h3,.hd h4,.hd h5,.hd h6 {margin-bottom:0;}
-
-/* **************** BLOCK SKINS ***************** */
-/* ====== Contour blocks ====== */
-/* remove *background-image:" to default to square corners for IE */
-/* ----- simple (extends box) ----- */
-.simple .inner {border:1px solid #ccc;background-color:#fcfcfc;color:#333;}
-.simple .inner .hd {}
-.simple b{}
-/* ----- info (extends box) ----- */
-.info .inner {border:2px solid #ENV{claire};background:#fcfcfc;}
-.info .inner .hd {}
-.info b{}
-/* ----- note (extends box) ----- */
-.note,.note .inner{border:1px solid #c2c2c2;}
-.note .inner{border-color:#eee; border-width:4px; background-color:[#(#ENV{claire}|couleur_eclaircir{0.85})];}
-.note .inner .hd {}
-
-/* ----- raccourcis (extends box) ----- */
-.raccourcis .inner{border:1px solid #ccc;background-color:#eee;}
-.note .inner .hd {}
-
-/* ----- important (extends box) ----- */
-.important .inner{border: 3px solid [(#ENV{foncee})]; border-bottom-width:10px;background:#fff;}
-.important b{}
-
-/* ----- basic (extends box) ----- */
-.basic {/*margin-bottom: -1px*/}
-.basic .inner {/*padding-bottom: 1px;*/border: 1px solid #aaa;}
-.basic .inner .hd {}
-.basic b{}
-
-/* ----- error, success, notice (extends box) ----- */
-.box.error, .box.success, .box.notice {padding:0;backround-image:none;}
-.error .inner,.success .inner,.notice .inner{border:2px solid;font-weight: normal;color:#333;}
-.error .bd,.success .bd,.notice .bd {padding-[(#ENV{left})]:40px;min-height:24px;background-repeat:no-repeat;background-position: [(#ENV{left}) ]2px top 5px;background-size:32px;}
-.box.error .hd,.box.success .hd,.box.notice .hd {padding-[(#ENV{left})]:40px;}
-.error .ft,.success .ft,.notice .ft {padding-[(#ENV{left})]:40px;}
-.box.error .ft,.box.success .ft,.box.notice .ft {border-color:#ddd;background-color:#eee;}
-
-.success .inner{color: #264409;border-color: #C6D880;background-color:#E6EFC2;}
-.success .bd{background-image:url(#CHEMIN_IMAGE{ok-32.png});}
-.box.success .inner .hd {background-color:#C6DF61;}
-.box.success .hd h1,.box.success .hd h2,.box.success .hd h3,.box.success .hd h4,.box.success .hd h5,.box.success .hd h6 {background-color:#C6DF61;}
-
-.error .inner{color: #8A1F11;border-color: #FBC2C4;background-color:#FBE3E4;}
-.error .bd{background-image:url(#CHEMIN_IMAGE{erreur-32.png});}
-.box.error .inner .hd {background-color:#DF454F;color:#fff;}
-.box.error .hd h1,.box.error .hd h2,.box.error .hd h3,.box.error .hd h4,.box.error .hd h5,.box.error .hd h6 {background-color:#DF454F;color:#fff;}
-
-.notice .inner{color: #514721;border-color: #FFD324;background-color:#FFF6BF;}
-.notice .bd{background-image:url(#CHEMIN_IMAGE{warning-32.png});}
-.box.notice .inner .hd {background-color:#FFD83F;}
-.box.notice .hd h1,.box.notice .hd h2,.box.notice .hd h3,.box.notice .hd h4,.box.notice .hd h5,.box.notice .hd h6 {background-color:#FFD83F;}
-
-
-/* ====== Background blocks ====== */
-.highlight > .inner{background-color:#ENV{claire}; border: 0; box-shadow: 0 0 15px #ccc;}
-.inverse .inner{background-color:#ENV{foncee};color:#ffffff}
-
-/* ====== Block headers and footers ====== */
-.hd.titrem { background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;
-background-color: [#(#ENV{foncee}|couleur_eclaircir)];color: #4A4A4A; font-size:[(#ENV{line-height}|strmult{1})em];position:relative;line-height: 1;}
-.hd.titrem h1,.hd.titrem h2,.hd.titrem h3,.hd.titrem h4,.hd.titrem h5,.hd.titrem h6{ font-size: 1em; color:#4A4A4A;}
-
-.section{ background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;
-background-color: #ENV{foncee}; color: #4A4A4A;font-size:1.2em;position:relative;}
-.section h1,.section h2,.section h3,.section h4,.section h5,.section h6{font-size:100%;color:#4A4A4A;padding:0;margin:0;}
-
-.bam{ background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;
-background-color: [#(#ENV{foncee}|couleur_foncer)]; color: #fff;font-size:1.2em; position:relative;}
-.bam h1,.bam h2,.bam h3,.bam h4,.bam h5,.bam h6{font-size:100%;color:#fff;padding:0;margin:0;}
-
-.topper{ background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;
-background-color: #fff; color: #4A4A4A;font-size:1.2em; position:relative;}
-.topper h1,.topper h2,.topper h3,.topper h4,.topper h5,.topper h6{font-size:100%;color:#4A4A4A;padding:0;margin:0;}
-
-.act{	[background-color: #(#ENV{claire}|couleur_eclaircir);]
-	[border-top: 1px solid (#ENV{claire});]
-	margin-top:-1px;
-	clear:both;
-	text-align: #ENV{right};
-}
-
-/* Cas particuliers */
-.simple.sous-rub .inner .hd {padding:0}
-.simple.sous-rub .inner .hd .logo {float:#ENV{right};margin: 1px 5px 0;margin-#ENV{right}: -9px;z-index:2;position:relative;}
-.simple.sous-rub .sous-sous-rub {margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;}
-
-/* vieilles boites depliables/repliables
-  encore maintenues mais depreciees
-*/
-.titrem { font-weight: bold; }
-div.titrem, h3.titrem { display: block; padding-top: [(#ENV{margin-bottom}|strdiv{2})em]; padding-bottom: [(#ENV{margin-bottom}|strdiv{2})em]; background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;}
-div.titrem a.titremancre,h3.titrem a.titremancre {padding:15px 0 0 16px;background-position: [(#ENV{left})] top;background-repeat: no-repeat; position:relative;float:[(#ENV{left})];margin-[(#ENV{left})]:-16px;}
-/* Deplier / Replier */
-.deplie a.titremancre, .deplie a.titremancre, .depliant a.titremancre, .replie a.titremancre { height: 1px; padding-bottom: 0px; }
-.replie a.titremancre { background-image: url([(#CHEMIN_IMAGE{deplierhaut[(#ENV{rtl})].gif})]); }
-.titrem.hover { background-color: #ENV{claire}; }
-.deplie a.titremancre { background-image: url(#CHEMIN_IMAGE{deplierbas.gif}); }
-.impliable {}
-.js .blocreplie { display: none; }
-.js .titrem.blocreplie { display: block; }
-.blocdeplie { display: block; background: none; }
-.bloc_depliable .pagination{ white-space:normal; }
\ No newline at end of file
+
+
+/**
+ * ============================
+ * 2. Layout et rythme vertical
+ * ============================
+ */
+
+
+.box,
+.box * {
+	box-sizing: border-box;
+}
+
+/* La marge externe doit être identique entre plusieurs composants (formulaires, …).
+   Plus tard il faudra se baser sur spip-spacing-y quand ça sera au point.
+   Pour l'instant on laisse la valeur historique. */
+.box {
+	margin: calc(var(--spip-margin-bottom) * 1.5) 0;
+}
+.box .inner {
+	position: relative;
+}
+/* Même padding partout, sauf footer */
+.box .bd, .box .hd, .box .ft {
+	position: relative;
+	padding: var(--spip-box-spacing-y) var(--spip-box-spacing-x);
+}
+.box .ft {
+	padding-top: calc(var(--spip-box-spacing-y) / 2);
+	padding-bottom: calc(var(--spip-box-spacing-y) / 2);
+}
+/* Annuler marges inutiles au début et à la fin */
+.box .bd > :first-child,
+.box .bd > :first-child > :first-child {
+	margin-top: 0;
+}
+.box .bd > :last-child {
+	margin-bottom: 0;
+}
+.box .hd h1, .box .hd h2, .box .hd h3, .box .hd h4, .box .hd h5, .box .hd h6 {
+	margin-bottom: 0;
+}
+.box .ft .btn,
+.box .ft button,
+.box .ft .groupe-btns {
+	margin-bottom: 0;
+}
+
+
+/**
+ * =========================
+ * 3. Base graphique commune
+ * =========================
+ *
+ * Nb : les styles s’appliquent au .inner, pas sur le .box lui-même.
+ */
+
+
+/* Conteneur interne */
+.box .inner {
+	background-color: var(--spip-color-white);
+	transition: box-shadow 0.2s;
+	border-radius: var(--spip-box-border-radius);
+	border: 0;
+	box-shadow: var(--spip-box-shadow);
+}
+.box .inner:hover,
+.box .inner:focus-within {
+	box-shadow: var(--spip-box-shadow-hover);
+}
+
+/* Header */
+.box .hd {
+	border-top-left-radius: inherit;
+	border-top-right-radius: inherit;
+	border-bottom: 1px solid var(--spip-box-sep-color);
+}
+
+/* Body : sans titre et/ou sans footer, ajuster l'arrondi */
+.box .bd:first-child {
+	border-top-left-radius: var(--spip-box-border-radius);
+	border-top-right-radius: var(--spip-box-border-radius);
+}
+.box .bd:only-child {
+	border-bottom-left-radius: var(--spip-box-border-radius);
+	border-bottom-right-radius: var(--spip-box-border-radius);
+}
+
+/* Footer */
+.box .ft {
+	border-bottom-left-radius: inherit;
+	border-bottom-right-radius: inherit;
+	background-color: var(--spip-color-gray-lightest);
+	text-align: var(--spip-right);
+}
+
+/* Titres
+   Règle : avec le h3 par défaut on raccorde avec les titres des formulaires (taille, graisse, …).
+	 Si on veut forcer avec une autre balise (h2…), utilisez la variante .titrem sur le header.  */
+.box .hd h3,
+.box .hd.titrem h1, .box .hd.titrem h2, .box .hd.titrem h3, .box .hd.titrem h4, .box .hd.titrem h5, .box .hd.titrem h6,
+.formulaire_spip .titrem {
+	font-size: calc(1em * var(--spip-form-titrem-factor));
+	font-weight: 600;
+	/* color: var(--spip-color-theme-dark); */
+}
+
+/* En colonne latérale (+ voir variables au début) */
+.lat .box {
+	font-size: 0.95em;
+}
+.lat .box .hd h1, .lat .box .hd h2, .lat .box .hd h3, .lat .box .hd h4, .lat .box .hd h5, .lat .box .hd h6,
+.lat .formulaire_spip .titrem  {
+	font-size: 1em;
+}
+
+
+/**
+ * ========================
+ * 4. Variantes principales
+ * ========================
+ */
+
+
+/* Simple */
+.box.simple .inner {
+	background-color: var(--spip-color-white);
+}
+
+/* Info */
+.box.info .inner {
+	border: 3px solid var(--spip-color-theme-light);
+	background-color: var(--spip-color-white);
+}
+
+/* Note */
+.box.note .inner {
+	border: 3px solid var(--spip-color-theme-lighter);
+	background-color: var(--spip-color-theme-lightest);
+}
+
+/* Raccourcis */
+.box.raccourcis .inner {
+	border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
+	background-color: var(--spip-color-gray-lighter);
+}
+
+/* Important */
+.box.important .inner {
+	border: 3px solid var(--spip-color-theme);
+	background: var(--spip-color-white);
+}
+
+/* Highlight */
+.box.highlight .inner {
+	background-color: hsl(var(--spip-color-theme--h), var(--spip-color-theme--s), calc(var(--spip-color-theme--l) * 0.8));
+	color: var(--spip-color-white);
+}
+.box.highlight .hd {
+	border-bottom-color: var(--spip-box-sep-color-inverse);
+}
+.box.highlight .hd * {
+	color: inherit;
+}
+
+/* Inverse */
+.box.inverse .inner {
+	background-color: var(--spip-color-gray-darker);
+	color: var(--spip-color-white);
+}
+.box.inverse .hd {
+	border-bottom-color: var(--spip-box-sep-color-inverse);
+}
+.box.inverse .hd * {
+	color: inherit;
+}
+
+
+/**
+ * ====================
+ * 5. Variantes d'états
+ * ====================
+ */
+
+
+/* Reset des styles des "messages" qui sont pour l'instant dans forms.css */
+.box.notice, .box.error, .box.success {
+	border: 0;
+	background: transparent;
+	padding: 0;
+	color: inherit;
+}
+/* Icône centrée verticalement dans le header */
+.box.notice .hd, .box.error .hd, .box.success .hd,
+.box.notice .bd, .box.error .bd, .box.success .bd {
+	background-repeat: no-repeat;
+	background-size: var(--spip-box-iconsize);
+	background-position: var(--spip-left) var(--spip-box-spacing-x) center;
+}
+/* Décommenter s'il faut centrer l'icône sur la 1ère ligne de texte dans le body */
+/*.notice .bd, .error .bd, .success .bd {
+	background-position: var(--spip-left) var(--spip-box-spacing-x) top calc(var(--spip-box-spacing-y) - ((var(--spip-box-iconsize) - var(--spip-line-height)) / 2));
+}*/
+/* Espacement pour l'icône selon qu'elle soit dans le header ou dans le body */
+.box.notice .hd, .box.error .hd, .box.success .hd,
+.box.notice .bd:first-child, .box.error .bd:first-child, .box.success .bd:first-child {
+	padding-#LEFT: calc(var(--spip-box-iconsize) + (var(--spip-box-spacing-x) * 2));
+}
+/* Bordure sur le côté */
+.box.notice .hd, .box.error .hd, .box.success .hd,
+.box.notice .bd, .box.error .bd, .box.success .bd,
+.box.notice .ft, .box.error .ft, .box.success .ft {
+	border-#LEFT: var(--spip-box-highlightsize) solid transparent;
+}
+/* Mini hack : sous le header on met la bordure basse en pseudo pour ne pas empiéter la bordure latérale colorée */
+.box.notice .hd, .box.error .hd, .box.success .hd {
+	border-bottom: 0;
+}
+.box.notice .hd:before, .box.error .hd:before, .box.success .hd:before {
+	content: "";
+	display: block;
+	z-index: 2;
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	border-bottom: 1px solid var(--spip-box-sep-color);
+}
+
+/* Notice */
+.box.notice .hd,
+.box.notice .bd {
+	border-#LEFT-color: hsl(var(--spip-color-notice--h), var(--spip-color-notice--s), 60%);
+}
+.box.notice .ft {
+	border-#LEFT-color: hsl(var(--spip-color-notice--h), var(--spip-color-notice--s), 50%);
+}
+.box.notice .hd,
+.box.notice .bd:first-child {
+	background-image: url(#CHEMIN_IMAGE{warning-32.png});
+}
+
+/* Erreur */
+.box.error .hd,
+.box.error .bd {
+	border-#LEFT-color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 60%);
+}
+.box.error .ft {
+	border-#LEFT-color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 50%);
+}
+.box.error .hd,
+.box.error .bd:first-child {
+	background-image: url(#CHEMIN_IMAGE{erreur-32.png});
+}
+
+/* Succès */
+.box.success .hd,
+.box.success .bd {
+	border-#LEFT-color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 55%);
+}
+.box.success .ft {
+	border-#LEFT-color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 48%);
+}
+.box.success .hd,
+.box.success .bd:first-child {
+	background-image: url(#CHEMIN_IMAGE{ok-32.png});
+}
+
+
+/**
+ * ===================
+ * 6. Autres variantes
+ * ===================
+ */
+
+
+/* Flat : sans ombre portée.
+   Peut se conjuguer aux autres quand on veut forcer.
+   Certaines le sont d'office, notamment les boîtes imbriquées.
+	 Une bordure est ajoutée si nécessaire. */
+.box.flat .inner,
+.box.info:not(.pop) .inner,
+.box.note:not(.pop) .inner,
+.box.important:not(.pop) .inner,
+.box.raccourcis:not(.pop) .inner,
+.box .box:not(.pop) .inner /* imbriquées */
+{
+	box-shadow: none !important;
+}
+.box.simple.flat .inner,
+.box.notice.flat .inner,
+.box.error.flat .inner,
+.box.success.flat .inner,
+.box .box.simple:not(.pop) .inner, /* imbriquées */
+.box .box.notice:not(.pop) .inner,
+.box .box.error:not(.pop) .inner,
+.box .box.success:not(.pop) .inner {
+	border: 1px solid var(--spip-box-border-color);
+}
+
+/* pop : avec une ombre portée.
+   Peut se conjuguer aux autres quand on veut forcer */
+.box.pop .inner {
+	box-shadow: var(--spip-box-shadow);
+}
+.box.pop .inner:hover,
+.box.pop .inner:focus-within {
+	box-shadow: var(--spip-box-shadow-hover);
+}
+
+
+/**
+ * ===================
+ * 7. Cas particuliers
+ * ===================
+ */
+
+
+/**
+ * Menu des rubriques dépliables sur la home
+ * (voir aussi styles boîtes dépliables plus bas)
+ */
+.box.sous-rub .inner {
+	background-color: var(--spip-color-theme-lighter);
+	box-shadow: none !important;
+}
+/* titre */
+.box.sous-rub .hd {
+	padding: 0; /* padding dans le titre cliquable plutôt */
+	border-bottom: 0;
+}
+.box.sous-rub .titrem.hover,
+.box.sous-rub .titrem.deplie,
+.box.sous-rub .titrem:hover,
+.box.sous-rub .titrem:focus {
+	background-color: var(--spip-color-theme-light);
+}
+.box.sous-rub .titrem.hover a,
+.box.sous-rub .titrem.deplie a,
+.box.sous-rub .titrem:hover a,
+.box.sous-rub .titrem:focus a {
+	color: var(--spip-color-theme-darker);
+}
+.box.sous-rub .titrem:not(.deplie):hover,
+.box.sous-rub .titrem:not(.deplie):focus {
+	border-radius: var(--spip-box-border-radius);
+}
+.box.sous-rub .hd .logo {
+	float: var(--spip-right);
+	margin: 1px 5px 0;
+	margin-#ENV{right}: -9px;
+	z-index: 2;
+	position: relative;
+	border-top-#RIGHT-radius:5px;
+}
+/* Body */
+.box.sous-rub .bd {
+	padding: 0;
+	border-top: 0;
+}
+.box.sous-rub .descriptif {
+	padding: 0px 10px 1px 16px;
+	font-size: 0.95em;
+}
+.box.sous-rub a:hover {
+	color: black;
+}
+.box.sous-rub .liste-items {
+	font-size: 0.85em;
+	line-height: 1.2;
+	/* border-top: 1px solid var(--spip-box-sep-color); */
+	border-top: 0;
+}
+.box.sous-rub .liste-items .item {
+	padding: 0px;
+	border-color: var(--spip-box-sep-color);
+}
+.box.sous-rub .liste-items .item a {
+	display: block;
+	padding: calc(var(--spip-box-spacing-y) / 2) calc(var(--spip-box-spacing-x) / 2);
+}
+.box.sous-rub .liste-items .item:hover {
+	background-color: var(--spip-color-theme-light);
+}
+.box.sous-rub .liste-items > .item:last-child {
+	border-bottom: 0;
+}
+.box.sous-rub .sous-sous-rub {
+	margin-top: 0;
+	margin-bottom: 0;
+	padding-top: 0;
+	padding-bottom: 0;
+}
+
+
+/**
+ * ===============
+ * 8. Déprécations
+ * ===============
+ * Vieilles boîtes dépliables/repliables encore maintenues mais dépréciées
+ * Exemple : menu des rubriques dépliables sur la home (utilisé ailleurs ?)
+ */
+
+/* Titre
+   - init :   .replie
+   - déplié : .depliant.deplie
+   - replié : .depliant.replie */
+.box .titrem.replie,
+.box .titrem.depliant,
+.box .titrem.impliable {
+	display: block;
+	font-size: 1em;
+	line-height: 1.25;
+	padding: calc(var(--spip-box-spacing-y) / 2) calc(var(--spip-box-spacing-x) / 2);
+	background-repeat: no-repeat;
+	border-radius: inherit;
+}
+
+/* Picto déplier / Replier */
+.box .titremancre {
+	display: inline-block;
+	position: relative;
+	width: 1em;
+	height: 1em;
+	float: var(--spip-left);
+	margin-#RIGHT: calc(var(--spip-box-spacing-x) / 3);
+	background-position: center center;
+	background-repeat: no-repeat;
+}
+.box .replie .titremancre {
+	background-image: url([(#CHEMIN_IMAGE{deplierhaut[(#ENV{rtl})].gif})]);
+}
+.box .deplie .titremancre {
+	background-image: url(#CHEMIN_IMAGE{deplierbas.gif});
+}
+/* Afficher / Masquer */
+.js .box .blocreplie {
+	display: none;
+}
+.js .box .titrem.blocreplie {
+	display: block;
+}
+.box .blocdeplie {
+	display: block;
+	background: none;
+}
+.box .bloc_depliable .pagination {
+	white-space: normal;
+}
diff --git a/prive/themes/spip/theme.css.html b/prive/themes/spip/theme.css.html
index 62b3de8378..32b7b3b43c 100644
--- a/prive/themes/spip/theme.css.html
+++ b/prive/themes/spip/theme.css.html
@@ -63,9 +63,6 @@ body {
 .navigation_avec_icones #bando1_menu_administration {background-image: url("plugins/details_interface_3/images/maintenance-48.png");}
 .navigation_avec_icones #bando1_menu_configuration {background-image: url("plugins/details_interface_3/images/configuration-48.png");}
 */
-.simple .inner {border-radius:5px;border: 1px solid #d7d7d7;position:relative;}
-.simple .inner:hover {box-shadow:0px 0px 2px #dddddd;position:relative;}
-.simple .inner .hd { background-color: #f0f0f0; color: #444;}
 .simple.fiche_objet .inner .hd { line-height: 120%; }
 #contenu .fiche_objet .propose .inner {border: 0;border-radius:0;background-color: #ffde00;margin: 0px -15px;padding:15px;position:relative;}
 #contenu .fiche_objet .propose .inner p {margin: 0;}
@@ -84,19 +81,6 @@ body {
 h1 {font-size: 2em;line-height: 125%;}
 .h1 {font-size: 2em;line-height: 125%;}
 
-.sous-rub .inner {border: 0;background-color: #[(#ENV{foncee}|couleur_luminance{0.15})];box-shadow:0px 0px 10px #[(#ENV{foncee}|couleur_luminance{0.20})] inset;position:relative;}
-.sous-rub .inner:hover {box-shadow:0px 0px 10px #[(#ENV{foncee}|couleur_luminance{0.20})] inset;position:relative;}
-.sous-rub .inner .hd {background-color: transparent;font-size: 100%;}
-.simple.sous-rub .inner .hd .logo {border-top-#ENV{right}-radius:5px;}
-.sous-rub .inner .bd {padding: 0;}
-.sous-rub .inner .bd .descriptif {padding:0px 10px 1px 16px; font-size: 0.95em;}
-.sous-rub .inner .bd .liste-items {font-size: 0.85em;line-height: 120%;}
-.sous-rub .inner .bd .liste-items .item {padding: 0px;}
-.sous-rub .inner .bd .liste-items .item a {padding: 5px 18px;display: block;}
-.sous-rub .inner .bd .liste-items .item:hover {background-color: #[(#ENV{foncee}|couleur_luminance{0.25})];}
-.sous-rub .inner .bd .liste-items .item:hover a {color: black;}
-.sous-rub .inner .bd .liste-items > .item:last-child {border-bottom: 0px;}
-
 .liste-objets {border:1px solid #e5e5e5;border-top-left-radius:5px;border-top-right-radius:5px;position: relative;z-index: 1;display: block;}
 
 /*
@@ -119,16 +103,10 @@ h1 {font-size: 2em;line-height: 125%;}
 .liste-objets-lies.mots thead {display: none;}
 
 .en-edition {line-height: 120%;}
-div.titrem {font-size: 1em;line-height: 125%;padding-top: 7px;padding-bottom: 7px;}
-h3.titrem {font-size: 1em;line-height: 125%;padding-top: 7px;padding-bottom: 7px;}
 
 #chemin {}
 #chemin .bouton_deplacer {font-size: 10px;color: #GET{lien};opacity:0.6;filter:alpha(opacity=60);}
 #chemin:hover .bouton_deplacer {opacity:1.0;filter:alpha(opacity=100);}
-.box, .box .inner  {border-radius:5px;}
-.box .inner .hd  {border-top-left-radius:5px; border-top-right-radius:5px;}
-.note {border: 0;}
-.box.error,.box.success,.box.notice {border: 0;}
 
 .lat #documents_joints {border-top:0}
 .lat #documents_joints .item {border-radius:5px;}
-- 
GitLab