Comme vu avec Jordan, bien séparer tous les blocs de contenus avec une ombre portée.

aside/article.html

@@ -1,10 +1,9 @@
 <INCLURE{fond=aside/dist}/>
 
 <BOUCLE_article(ARTICLES) {id_article}>
-<div class="menu menu-article">
-	
+		
 	[(#REM) Liste des versions compatibles ]
-	<div class="aside-article">
+	<div class="menu menu-article">
 		<B_versions_compat>
 			<h2><:versions:></h2>
 			<ul class="versions">
@@ -21,13 +20,13 @@
 
 	[(#REM) Téléchargments ]
 	<B_documents_joints>
-		<div class="aside-article">
+		<div class="menu menu-article">
 			<h2><:telechargement:></h2>
 			<ul class="telechargements_article">
 				<BOUCLE_documents_joints(DOCUMENTS) {id_article} {extension !IN gif,jpg,png} {par num titre, date}{statut==.*}>
 				<li class="telechargement_article">
 				<span class="telechargement_logo">
-				[(#LOGO_DOCUMENT{icone})]
+				[(#LOGO_DOCUMENT{icone}|image_reduire{32})]
 				</span>
 					<span class="telechargement_info">
 					<a href="[(#URL_DOCUMENT)]" class="" title="<:bouton_telecharger:>[ (#FICHIER|basename)]" type="#MIME_TYPE"><strong class="#EDIT{titre}">[(#TITRE|sinon{[(#FICHIER|basename)]})]</strong></a>
@@ -43,7 +42,7 @@
 
 	[(#REM) Articles dans la meme rubrique ]
 	<BOUCLE_articles_rubrique(ARTICLES) {id_rubrique}{1,2}> </BOUCLE_articles_rubrique>
-	<div class="aside-article">
+	<div class="menu menu-article">
 		<h2><:meme_rubrique:></h2>
 		<ul>
 			<BOUCLE_memrub(ARTICLES){lang}{id_rubrique}{exclus}{!id_mot IN 154,223,158}{par sinum titre, date}{doublons}>
@@ -60,12 +59,11 @@
 	[(#INCLURE{fond=modeles/rubrique_sur-le-web,id_rubrique,ajax})]
 	
 	<B_used>
-	<div class="aside-article">
+	<div class="menu menu-article">
 	<BOUCLE_used(MOTS){id_mot=263}{id_article}>
 		[<div>(#LOGO_MOT|#URL_MOT|image_reduire{100,100}|image_aplatir{png,ffffff})</div>]
 	</BOUCLE_used>
 	</div>
 	</B_used>
-	
-</div>
+
 </BOUCLE_article>

breadcrumb/auteurs.html

@@ -0,0 +1,6 @@
+<nav role="navigation">
+	<p><span class="visuallyhidden"><:galactic:vous_etes_ici:/></span>
+	<span><a href="#URL_SITE_SPIP"><:accueil_site:/></a></span>
+	<span><:info_auteurs:/></span>
+	</p>
+</nav>

content/article.html

@@ -5,7 +5,7 @@
 <article>
 	
 	<div class="cartouche surlignable">
-		[(#LOGO_ARTICLE_RUBRIQUE|image_reduire{180,120})]
+		[(#LOGO_ARTICLE_RUBRIQUE|image_reduire{240,160})]
 		[<p class="#EDIT{surtitre} surtitre">(#SURTITRE)</p>]
 		<h1 class="#EDIT{titre} entry-title" itemprop="name">#TITRE</h1>
 		[<p class="#EDIT{soustitre} soustitre">(#SOUSTITRE)</p>]
@@ -42,17 +42,6 @@
 	[<div class="extra ps">
 		<div class="#EDIT{ps}">(#PS|image_reduire{120,0})</div>
 	</div>]
-	
-	[(#SET{repondre_url,repondre_url=#PARAMETRES_FORUM|url_reponse_forum})]
-	[(#PARAMETRES_FORUM|oui)
-	<div class="article__forum">
-		<div class="forum__titre"><h2><:article_forum:></h2></div>
-		<INCLURE{fond=inclure/forum,
-			id_article,
-			repondre_url=#GET{repondre_url},
-			repondre_titre=<:repondre_article:>,
-			env} />
-	</div>]
 
 	[<p class="small">(#DATE|<{#DATE_MODIF}|?{
 		<abbr class="published dateModified" title="[(#DATE_MODIF|date_iso)]">
@@ -64,4 +53,16 @@
 	})</p>]
 	
 </article>
+
+[(#SET{repondre_url,repondre_url=#PARAMETRES_FORUM|url_reponse_forum})]
+[(#PARAMETRES_FORUM|oui)
+<div class="article__forum">
+	<div class="forum__titre"><h2><:article_forum:></h2></div>
+	<INCLURE{fond=inclure/forum,
+		id_article,
+		repondre_url=#GET{repondre_url},
+		repondre_titre=<:repondre_article:>,
+		env} />
+</div>]
+
 </BOUCLE_art>

content/auteurs.html

@@ -1,5 +1,3 @@
-[(#REM) Fil d'Ariane ]
-<p id="hierarchie"><a href="#URL_SITE_SPIP/"><:accueil_site:></a> &gt; <strong class="on"><:info_auteurs:></strong></p>
 
 <h1><:info_auteurs:></h1>
 

content/sommaire.html

@@ -1,6 +1,6 @@
 <h1 class="visuallyhidden">#NOM_SITE_SPIP</h1>
 
-#DESCRIPTIF_SITE_SPIP
+[<div class="sommaire_descriptif_site">(#DESCRIPTIF_SITE_SPIP)</div>]
 
 [(#REM) Articles en tete - pas besoin exclusions "hors sommaire" puisque parametrage volontaire]
 <BOUCLE_entetelang(ARTICLES){!par date}{0,1}{id_mot=246}{lang}>#SET{entete,#ID_ARTICLE}</BOUCLE_entetelang>
@@ -22,7 +22,7 @@
 <div class="resumes resumes--brulant">
 	<BOUCLE_brulant(ARTICLES){!id_mot IN 239,246,189}{age_relatif>3}{age_relatif<730}{!par popularite}{3,2}{doublons}>
 	<div class="resume" lang="#LANG" xml:lang="#LANG" dir="#LANG_DIR">
-		<h3 class="resume__titre"><a href="#URL_ARTICLE">[(#LOGO_ARTICLE_RUBRIQUE|image_reduire{60,60}|image_aplatir{png,ffffff}) ][(#MODELE{lang_article,lang=#ENV{lang}}) ]#TITRE</a></h3>
+		<h3 class="resume__titre"><a href="#URL_ARTICLE">[(#LOGO_ARTICLE_RUBRIQUE|image_reduire{80,80}|image_aplatir{png,ffffff}) ][(#MODELE{lang_article,lang=#ENV{lang}}) ]#TITRE</a></h3>
 		<p class="resume__date">[(#DATE|affdate_jourcourt)][ &ndash;&nbsp;(#MODELE{nb_commentaires})]</p>
 		[<p class="resume__intro">(#INTRODUCTION{250}|PtoBR)</p>]
 	</div>
@@ -32,7 +32,7 @@
 <div class="resumes resumes--recents">
 	<BOUCLE_recents(ARTICLES){!id_mot IN 239,246,189}{!par date}{0,4}{doublons}>
 	<div class="resume" lang="#LANG" xml:lang="#LANG" dir="#LANG_DIR">
-		<h3 class="resume__titre"><a href="#URL_ARTICLE">[(#LOGO_ARTICLE_RUBRIQUE|image_reduire{60,60}|image_aplatir{png,ffffff}) ][(#MODELE{lang_article,lang=#ENV{lang}}) ]#TITRE</a></h3>
+		<h3 class="resume__titre"><a href="#URL_ARTICLE">[(#LOGO_ARTICLE_RUBRIQUE|image_reduire{80,80}|image_aplatir{png,ffffff}) ][(#MODELE{lang_article,lang=#ENV{lang}}) ]#TITRE</a></h3>
 		<p class="resume__date">[(#DATE|affdate_jourcourt)][ &ndash;&nbsp;(#MODELE{nb_commentaires})]</p>
 		[<p class="resume__intro">(#INTRODUCTION{250}|PtoBR)</p>]
 	</div>
@@ -51,7 +51,7 @@
 			<BOUCLE_articles_recents(ARTICLES){!id_mot=239}{doublons} {!par date}{0,10}>
 			<li class="listeResultats__item--separateur" lang="#LANG" xml:lang="#LANG" dir="#LANG_DIR">
 				<a href="#URL_ARTICLE">[(#MODELE{lang_article,lang=#ENV{lang}}) ]#TITRE</a>
-				<small><abbr[ title="(#DATE|date_iso)"]>[(#MAJ|date_relative)]</abbr></small>
+				<small>[(#MAJ|date_relative)]</small>
 			</li>
 			</BOUCLE_articles_recents>
 		</ul>

modeles/rubrique_sur-le-web.html

@@ -1,5 +1,5 @@
 <B_sites_rubrique>
-<div class="aside-article">
+<div class="menu menu-article">
 	<h2><:sur_web:></h2>
 	<BOUCLE_sites_rubrique(SITES){id_rubrique}{!par date}{par nom_site}>
 	<h3><a href="#URL_SITE" class="spip_out">#NOM_SITE</a></h3>

scss/galactic_theme.scss

@@ -55,6 +55,50 @@ a.on {
   }
 }
 
+// contenu principal
+
+.contentMain__breadcrumb {
+  @include ombre();
+  padding: 1em 3em;
+  background: white;
+  margin: 0;
+  border: none;
+}
+.contentMain__breadcrumb nav {
+  margin: 0;
+  padding: 0;
+}
+
+.contentMain__main {
+  @include ombre();
+  padding: 2em 3em;
+  background: white;
+  margin-bottom: 1em;
+}
+
+.body--article, .body--sommaire {
+  .contentMain__main {
+    box-shadow: none;
+    background: none;
+    padding:    0;
+  }
+}
+.body--article {
+  article, .article__forum {
+    @include ombre();
+    padding:       2em 3em;
+    background:    white;
+    margin-bottom: 1em;
+  }
+}
+
+.article__statut {
+  margin: 0 0 -2.5em 0;
+  padding: 0;
+  border: none;
+}
+
+
 // Bloc nav
 
 .contentNav__main,
@@ -79,10 +123,14 @@ a.on {
   }
 }
 
+.contentNav {
+  .menu, .contentNav__main {
+    @include ombre();
+  }
+}
 .contentNav__main + .contentNav__extra {
   margin-top:-1em;
 }
-
 .contentNav__rubrique.active {
    & > a {
     font-style: italic;
@@ -141,6 +189,9 @@ a.on {
 
 // Téléchargements
 
+.telechargements_article {
+  margin-left: 0;
+}
 .telechargement_article {
   display: flex;
   .telechargement_logo {

scss/styles/_sommaire.scss

@@ -1,28 +1,36 @@
 .body--sommaire {
 
-  // le contenu de la page d'accueil est sur 2 ou 3 colonnes
-  // on élargit un peu la zone de contenu en réduisant le padding
-  .contentMain__main {
-    @include media($bp-medium-up) {
-      padding-left: 3em;
-      padding-right: 3em;
-    }
+  .contentMain__breadcrumb {
+    display: none;
   }
   
+  .sommaire_descriptif_site {
+    @include ombre();
+    padding: 2em;
+    background: white;
+    margin-bottom: 1em;
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+    
   .resumes {
   }
   .resume {
-    margin-bottom: 2.5em;
-    border-bottom: 4px solid rgba($couleur-nav, 0.15);
-    padding-bottom: 1.5em;
+    @include ombre();
+    padding: 2em;
+    background: white;
+    margin-bottom: 1em;
   }
   .resume__titre {
     margin-bottom: 0.25em;
     .spip_logo {
       float: right;
-      margin-left: 1em;
+      margin-left: 0.5em;
+      margin-top: -1em;
+      margin-right: -1em;
       @include media($bp-medium) {
-        max-width: em(60px) !important;
+        max-width: em(50px) !important;
       }
     }
   }
@@ -35,27 +43,45 @@
     margin-bottom: 0;
   }
   
+  .top_sommaire__colonne {
+    @include ombre();
+    padding: 2em;
+    background: white;
+    margin-bottom: 1em;
+    ul {
+      list-style: none;
+      margin: 0;
+      li {
+        margin-bottom: 0.5em;
+        small {
+        }
+      }
+    }
+  }
+  
   // gestion des colonnes
   @include media($bp-medium-up) {
     .resumes--brulant,
     .resumes--recents {
       display: flex;
       flex-wrap: wrap;
+      margin-left: -0.5em;
+      margin-right: -0.5em;
       .resume {
-        width: 50%;
-        &:nth-child(even){
-          padding-left: 0.75em;
-        }
-        &:nth-child(odd){
-          padding-right: 0.75em;
-        }
+        width: calc(50% - 1em);
+        margin-left: 0.5em;
+        margin-right: 0.5em;
       }
     }
 
     .top_sommaire {
       display: flex;
+      @include ombre();
+      padding: 2em;
+      background: white;
     }
     .top_sommaire__colonne {
+      box-shadow: none;
       width: 33%;
       padding: 0 0.5em;
       &:first-child{
@@ -69,15 +95,3 @@
   }
 
 }
-
-.top_sommaire__colonne {
-  ul {
-    list-style: none;
-    margin: 0;
-    li {
-      margin-bottom: 0.5em;
-      small {
-      }
-    }
-  }
-}

scss/theme/forums.scss

@@ -4,19 +4,10 @@ $largeur-enbref-bordure: em(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});
-	}
+	margin: 0;
 	.spip_surligne {
 		background: #b109bb;
 	}
-	.forum__titre {
-		margin-left: $largeur-enbref;
-	}
 }
 
 .listeSujets, .listeReponses {
@@ -28,10 +19,6 @@ $largeur-enbref-bordure: em(72px - 4px);
 	/* 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);
@@ -52,13 +39,6 @@ $largeur-enbref-bordure: em(72px - 4px);
 	}
 }
 
-.alignement_avec_liste, .alignement_avec_liste + .ajaxbloc .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;
@@ -248,15 +228,8 @@ $largeur-enbref-bordure: em(72px - 4px);
 	}
 }
 
-/* formulaire de forum en pied d’article */
-.comments .comment-form {
-	margin-left: $largeur-enbref;
-}
-
-/* formulaire de forum en pied de thread */
-.comment-reply + .ariaformprop {
-	margin-left: $largeur-enbref-bordure;
-	margin-top: -4.5em;
+.comment-reply {
+	text-align: right;
 }
 
 /* liens sur derniers commentaires en colonne */