Explorar el Código

mise a jour affichage

Laurent Hazart hace 1 mes
padre
commit
8948892b1c

+ 212 - 58
blog/templates/listing.html

@@ -10,105 +10,259 @@
 {% endblock %}
 
 {% block main %}
+<style>
+/* Styles modernes pour les articles */
+.blog-card {
+	background: white;
+	border-radius: 12px;
+	overflow: hidden;
+	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+	transition: all 0.3s ease;
+	margin-bottom: 2rem;
+}
+
+.blog-card:hover {
+	transform: translateY(-4px);
+	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+}
+
+.blog-card-image {
+	width: 100%;
+	height: 280px;
+	object-fit: cover;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.blog-card-content {
+	padding: 2rem;
+}
+
+.blog-card-title {
+	font-size: 1.75rem;
+	font-weight: 700;
+	color: #1a202c;
+	margin-bottom: 1rem;
+	line-height: 1.3;
+}
+
+.blog-card-title:hover {
+	color: #667eea;
+}
+
+.blog-card-description {
+	font-size: 1.05rem;
+	line-height: 1.7;
+	color: #4a5568;
+	margin-bottom: 1.5rem;
+}
+
+.blog-card-footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding-top: 1rem;
+	border-top: 1px solid #e2e8f0;
+	font-size: 0.9rem;
+	color: #718096;
+}
+
+.blog-meta {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+.blog-category-badge {
+	display: inline-block;
+	padding: 0.25rem 0.75rem;
+	background: #667eea;
+	color: white;
+	border-radius: 20px;
+	font-size: 0.85rem;
+	text-decoration: none;
+	transition: background 0.2s;
+}
+
+.blog-category-badge:hover {
+	background: #764ba2;
+	color: white;
+}
+
+.blog-date {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.blog-date i {
+	color: #cbd5e0;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+	.blog-card-image {
+		height: 200px;
+	}
+	
+	.blog-card-content {
+		padding: 1.5rem;
+	}
+	
+	.blog-card-title {
+		font-size: 1.5rem;
+	}
+}
+</style>
+
 {% if page.blog_art %}
 	{% for item in page.blog_art %}
-		<div class="card mb-2" style="background-color: rgba(250,250,250,0.88);" >
-			<div class="card-header">
-				<a class="text-dark text-decoration-none" href="{% url 'blog_play' item.b_titre_slugify %}"><h2>{{item.b_titre}}</h2></a>
-			</div>
-			<div class="card-body">
-			<p class="card-text">
-			<a class="text-dark text-decoration-none" href="{% url 'blog_play' item.b_titre_slugify %}">
-				{% if item.b_description_img != "" %}<p><img src="{{item.b_description_img}}"></p>{% endif %}
-				{{item.b_description|safe}}
+		<article class="blog-card">
+			<a href="{% url 'blog_play' item.b_titre_slugify %}" class="text-decoration-none">
+				{% if item.b_description_img %}
+					<img src="{{item.b_description_img}}" alt="{{item.b_titre}}" class="blog-card-image">
+				{% else %}
+					<div class="blog-card-image d-flex align-items-center justify-content-center">
+						<h3 class="text-white text-center px-4">{{item.b_titre}}</h3>
+					</div>
+				{% endif %}
 			</a>
-			</p>
-			</div>
-			<div class="card-footer">
-				Publié, il y'a {{item.b_publdate|timesince }} {% if item.b_cat.all %} | {%for cat in item.b_cat.all %}<a class="text-dark text-decoration-none" href="{% url 'blog_tag' cat.cb_titre_slgify %}">{{ cat.cb_titre }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}{% endif %}
+			
+			<div class="blog-card-content">
+				<a href="{% url 'blog_play' item.b_titre_slugify %}" class="text-decoration-none">
+					<h2 class="blog-card-title">{{item.b_titre}}</h2>
+				</a>
+				
+				<div class="blog-card-description">
+					{{item.b_description|safe|truncatewords_html:50}}
+				</div>
+				
+				<div class="blog-card-footer">
+					<div class="blog-meta">
+						<span class="blog-date">
+							<i class="far fa-clock"></i>
+							{{item.b_publdate|timesince}}
+						</span>
+						
+						{% if item.b_cat.all %}
+							{% for cat in item.b_cat.all %}
+								<a href="{% url 'blog_tag' cat.cb_titre_slgify %}" class="blog-category-badge">
+									{{ cat.cb_titre }}
+								</a>
+							{% endfor %}
+						{% endif %}
+					</div>
+					
+					<span class="text-muted">
+						<i class="far fa-eye"></i> {{item.b_reading}}
+					</span>
+				</div>
 			</div>
-		</div>
+		</article>
 	{% endfor %}
+{% else %}
+	<div class="alert alert-info">
+		<i class="fas fa-info-circle"></i> Aucun article trouvé.
+	</div>
 {% endif %}
 {% endblock %}
 
 {% block right_panel %}
 {% if page.p_right != "" %}
-<div class="card" style="background-color: rgba(250,250,250,0.88);" >
+<div class="card shadow-sm" style="background-color: rgba(250,250,250,0.95); border-radius: 12px;">
 <div class="card-body">
+	<!-- Recherche -->
+	<h5 class="mb-3"><i class="fas fa-search"></i> Rechercher</h5>
 	<form action="" method="get">
 		<div class="row align-items-center">
-			
 			<div class="col-lg-8 col-sm-12">
 				{{page.blog_search|crispy}}
 			</div>
 			<div class="col mt-sm-1">
-				<input type="submit" class="btn btn-success w-100" value="Rechercher">
+				<input type="submit" class="btn btn-primary w-100" value="Rechercher">
 			</div>
 		</div>
 	</form>
-	<hr>
+	
+	<hr class="my-4">
+	
+	<!-- Pagination -->
 	{% if page.blog_art.paginator.num_pages != 1 %}
-	<p class="card-text">
-	<nav aria-label="...">
+	<nav aria-label="Pagination">
 		<ul class="pagination justify-content-center">
 			{% if page.blog_art.has_previous %}
 				<li class="page-item">
-					<a class="page-link" href="?page={{ page.blog_art.previous_page_number }}"> << </a>
-				</li>
-			{% else %}
-				<li class="page-item disabled">
-					<span class="page-link"> << </span>
+					<a class="page-link" href="?page={{ page.blog_art.previous_page_number }}">
+						<i class="fas fa-chevron-left"></i>
+					</a>
 				</li>
 			{% endif %}
+			
 			{% for nb_page in page.blog_art.nbpage %}
 				{% if page.blog_art.number == forloop.counter %}
-					<li class="page-item active" aria-current="page"><span class="page-link">{{forloop.counter}}</span></li>
+					<li class="page-item active">
+						<span class="page-link">{{forloop.counter}}</span>
+					</li>
 				{% else %}
-					<li class="page-item"><a class="page-link" href="?page={{forloop.counter}}">{{forloop.counter}}</a></li>
+					<li class="page-item">
+						<a class="page-link" href="?page={{forloop.counter}}">{{forloop.counter}}</a>
+					</li>
 				{% endif %}
 			{% endfor %}
+			
 			{% if page.blog_art.has_next %}
 				<li class="page-item">
-					<a class="page-link" href="?page={{ page.blog_art.next_page_number }}"> >> </a>
-				</li>
-			{% else %}
-				<li class="page-item disabled">
-					<span class="page-link"> >> </span>
+					<a class="page-link" href="?page={{ page.blog_art.next_page_number }}">
+						<i class="fas fa-chevron-right"></i>
+					</a>
 				</li>
 			{% endif %}
 		</ul>
 	</nav>
-	<p>
+	<hr class="my-4">
 	{% endif %}
-	<p class="card-text">{{page.p_right|safe}}</p>
-	<h4> <i class="fas fa-tags"></i> Les Catégories </h4>
-	<p class="card-text">
-	{% for cat in page.blog_cat %}
-		<a href="{% url 'blog_tag' cat.cb_titre_slgify %}" class="btn btn-dark mb-2" tabindex="-1" role="button" aria-disabled="true">{{cat.cb_titre}}</a>
-	{% endfor %}
 	
-	{% if page.blog_filter == True %}
-		<a href="{% url 'blog_index' %}" class="btn btn-danger mb-2" tabindex="-1" role="button" aria-disabled="true"><i class="fas fa-filter text-white"></i> Retirer les filtres</a>
-	{% else %}
-		<a href="{% url 'blog_tag' 'all' %}" class="btn btn-dark mb-2" tabindex="-1" role="button" aria-disabled="true">Tous les articles</a>
-	{% endif %}
-
-	</p>
-
-	<h4> <i class="fas fa-bomb"></i> Les articles les plus consulté </h4>
-	<p class="card-text">
-	{% for item in page.blog_top10 %}
-		<i class="far fa-play-circle"></i> <a class="text-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="{{item.b_titre}}" href="{% url 'blog_play' item.b_titre_slugify %}">{{item.b_titre|truncatechars:40}}</a><br>
-	{% endfor %}
-	</p>
-
+	<!-- Catégories -->
+	<h5 class="mb-3"><i class="fas fa-tags"></i> Catégories</h5>
+	<div class="d-flex flex-wrap gap-2 mb-4">
+		{% for cat in page.blog_cat %}
+			<a href="{% url 'blog_tag' cat.cb_titre_slgify %}" class="btn btn-outline-primary btn-sm">
+				{{cat.cb_titre}}
+			</a>
+		{% endfor %}
+		
+		{% if page.blog_filter == True %}
+			<a href="{% url 'blog_index' %}" class="btn btn-outline-danger btn-sm">
+				<i class="fas fa-times"></i> Retirer les filtres
+			</a>
+		{% else %}
+			<a href="{% url 'blog_tag' 'all' %}" class="btn btn-outline-dark btn-sm">
+				Tous les articles
+			</a>
+		{% endif %}
+	</div>
+	
+	<hr class="my-4">
+	
+	<!-- Top 10 -->
+	<h5 class="mb-3"><i class="fas fa-fire"></i> Articles Populaires</h5>
+	<div class="list-group list-group-flush">
+		{% for item in page.blog_top10 %}
+			<a href="{% url 'blog_play' item.b_titre_slugify %}" 
+			   class="list-group-item list-group-item-action border-0 px-0">
+				<div class="d-flex align-items-start">
+					<span class="badge bg-primary rounded-pill me-2">{{forloop.counter}}</span>
+					<span class="flex-grow-1">{{item.b_titre|truncatechars:45}}</span>
+				</div>
+			</a>
+		{% endfor %}
+	</div>
+	
 	{% if page.retour %}
-	<p class="card-text">
-		<a href="{% url page.retour %}" class="btn btn-dark mb-2" tabindex="-1" role="button" aria-disabled="true"><i class="fas fa-undo-alt"></i> Retour</a>
-	</p>
+	<hr class="my-4">
+	<a href="{% url page.retour %}" class="btn btn-outline-secondary w-100">
+		<i class="fas fa-arrow-left"></i> Retour
+	</a>
 	{% endif %}
-	
 </div>
 </div>
 {% endif %}

+ 115 - 0
blog/templates/listing_backup_20251030.html

@@ -0,0 +1,115 @@
+{% extends 'base_no_card.html' %}
+{% load crispy_forms_tags %}
+{% load static %}
+
+{% block exted_menu %}
+{% for cat in page.blog_cat %}
+	<li class="nav-item"><a class="nav-link" href="{% url 'blog_tag' cat.cb_titre_slgify %}">{{cat.cb_titre}}</a></li>
+{% endfor %}
+<li class="nav-item"><a class="nav-link" href="{% url 'blog_tag' 'all' %}">Tous les articles</a></li>
+{% endblock %}
+
+{% block main %}
+{% if page.blog_art %}
+	{% for item in page.blog_art %}
+		<div class="card mb-2" style="background-color: rgba(250,250,250,0.88);" >
+			<div class="card-header">
+				<a class="text-dark text-decoration-none" href="{% url 'blog_play' item.b_titre_slugify %}"><h2>{{item.b_titre}}</h2></a>
+			</div>
+			<div class="card-body">
+			<p class="card-text">
+			<a class="text-dark text-decoration-none" href="{% url 'blog_play' item.b_titre_slugify %}">
+				{% if item.b_description_img != "" %}<p><img src="{{item.b_description_img}}"></p>{% endif %}
+				{{item.b_description|safe}}
+			</a>
+			</p>
+			</div>
+			<div class="card-footer">
+				Publié, il y'a {{item.b_publdate|timesince }} {% if item.b_cat.all %} | {%for cat in item.b_cat.all %}<a class="text-dark text-decoration-none" href="{% url 'blog_tag' cat.cb_titre_slgify %}">{{ cat.cb_titre }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}{% endif %}
+			</div>
+		</div>
+	{% endfor %}
+{% endif %}
+{% endblock %}
+
+{% block right_panel %}
+{% if page.p_right != "" %}
+<div class="card" style="background-color: rgba(250,250,250,0.88);" >
+<div class="card-body">
+	<form action="" method="get">
+		<div class="row align-items-center">
+			
+			<div class="col-lg-8 col-sm-12">
+				{{page.blog_search|crispy}}
+			</div>
+			<div class="col mt-sm-1">
+				<input type="submit" class="btn btn-success w-100" value="Rechercher">
+			</div>
+		</div>
+	</form>
+	<hr>
+	{% if page.blog_art.paginator.num_pages != 1 %}
+	<p class="card-text">
+	<nav aria-label="...">
+		<ul class="pagination justify-content-center">
+			{% if page.blog_art.has_previous %}
+				<li class="page-item">
+					<a class="page-link" href="?page={{ page.blog_art.previous_page_number }}"> << </a>
+				</li>
+			{% else %}
+				<li class="page-item disabled">
+					<span class="page-link"> << </span>
+				</li>
+			{% endif %}
+			{% for nb_page in page.blog_art.nbpage %}
+				{% if page.blog_art.number == forloop.counter %}
+					<li class="page-item active" aria-current="page"><span class="page-link">{{forloop.counter}}</span></li>
+				{% else %}
+					<li class="page-item"><a class="page-link" href="?page={{forloop.counter}}">{{forloop.counter}}</a></li>
+				{% endif %}
+			{% endfor %}
+			{% if page.blog_art.has_next %}
+				<li class="page-item">
+					<a class="page-link" href="?page={{ page.blog_art.next_page_number }}"> >> </a>
+				</li>
+			{% else %}
+				<li class="page-item disabled">
+					<span class="page-link"> >> </span>
+				</li>
+			{% endif %}
+		</ul>
+	</nav>
+	<p>
+	{% endif %}
+	<p class="card-text">{{page.p_right|safe}}</p>
+	<h4> <i class="fas fa-tags"></i> Les Catégories </h4>
+	<p class="card-text">
+	{% for cat in page.blog_cat %}
+		<a href="{% url 'blog_tag' cat.cb_titre_slgify %}" class="btn btn-dark mb-2" tabindex="-1" role="button" aria-disabled="true">{{cat.cb_titre}}</a>
+	{% endfor %}
+	
+	{% if page.blog_filter == True %}
+		<a href="{% url 'blog_index' %}" class="btn btn-danger mb-2" tabindex="-1" role="button" aria-disabled="true"><i class="fas fa-filter text-white"></i> Retirer les filtres</a>
+	{% else %}
+		<a href="{% url 'blog_tag' 'all' %}" class="btn btn-dark mb-2" tabindex="-1" role="button" aria-disabled="true">Tous les articles</a>
+	{% endif %}
+
+	</p>
+
+	<h4> <i class="fas fa-bomb"></i> Les articles les plus consulté </h4>
+	<p class="card-text">
+	{% for item in page.blog_top10 %}
+		<i class="far fa-play-circle"></i> <a class="text-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="{{item.b_titre}}" href="{% url 'blog_play' item.b_titre_slugify %}">{{item.b_titre|truncatechars:40}}</a><br>
+	{% endfor %}
+	</p>
+
+	{% if page.retour %}
+	<p class="card-text">
+		<a href="{% url page.retour %}" class="btn btn-dark mb-2" tabindex="-1" role="button" aria-disabled="true"><i class="fas fa-undo-alt"></i> Retour</a>
+	</p>
+	{% endif %}
+	
+</div>
+</div>
+{% endif %}
+{% endblock %}

+ 269 - 0
blog/templates/listing_modern.html

@@ -0,0 +1,269 @@
+{% extends 'base_no_card.html' %}
+{% load crispy_forms_tags %}
+{% load static %}
+
+{% block exted_menu %}
+{% for cat in page.blog_cat %}
+	<li class="nav-item"><a class="nav-link" href="{% url 'blog_tag' cat.cb_titre_slgify %}">{{cat.cb_titre}}</a></li>
+{% endfor %}
+<li class="nav-item"><a class="nav-link" href="{% url 'blog_tag' 'all' %}">Tous les articles</a></li>
+{% endblock %}
+
+{% block main %}
+<style>
+/* Styles modernes pour les articles */
+.blog-card {
+	background: white;
+	border-radius: 12px;
+	overflow: hidden;
+	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+	transition: all 0.3s ease;
+	margin-bottom: 2rem;
+}
+
+.blog-card:hover {
+	transform: translateY(-4px);
+	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+}
+
+.blog-card-image {
+	width: 100%;
+	height: 280px;
+	object-fit: cover;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.blog-card-content {
+	padding: 2rem;
+}
+
+.blog-card-title {
+	font-size: 1.75rem;
+	font-weight: 700;
+	color: #1a202c;
+	margin-bottom: 1rem;
+	line-height: 1.3;
+}
+
+.blog-card-title:hover {
+	color: #667eea;
+}
+
+.blog-card-description {
+	font-size: 1.05rem;
+	line-height: 1.7;
+	color: #4a5568;
+	margin-bottom: 1.5rem;
+}
+
+.blog-card-footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding-top: 1rem;
+	border-top: 1px solid #e2e8f0;
+	font-size: 0.9rem;
+	color: #718096;
+}
+
+.blog-meta {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+.blog-category-badge {
+	display: inline-block;
+	padding: 0.25rem 0.75rem;
+	background: #667eea;
+	color: white;
+	border-radius: 20px;
+	font-size: 0.85rem;
+	text-decoration: none;
+	transition: background 0.2s;
+}
+
+.blog-category-badge:hover {
+	background: #764ba2;
+	color: white;
+}
+
+.blog-date {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.blog-date i {
+	color: #cbd5e0;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+	.blog-card-image {
+		height: 200px;
+	}
+	
+	.blog-card-content {
+		padding: 1.5rem;
+	}
+	
+	.blog-card-title {
+		font-size: 1.5rem;
+	}
+}
+</style>
+
+{% if page.blog_art %}
+	{% for item in page.blog_art %}
+		<article class="blog-card">
+			<a href="{% url 'blog_play' item.b_titre_slugify %}" class="text-decoration-none">
+				{% if item.b_description_img %}
+					<img src="{{item.b_description_img}}" alt="{{item.b_titre}}" class="blog-card-image">
+				{% else %}
+					<div class="blog-card-image d-flex align-items-center justify-content-center">
+						<h3 class="text-white text-center px-4">{{item.b_titre}}</h3>
+					</div>
+				{% endif %}
+			</a>
+			
+			<div class="blog-card-content">
+				<a href="{% url 'blog_play' item.b_titre_slugify %}" class="text-decoration-none">
+					<h2 class="blog-card-title">{{item.b_titre}}</h2>
+				</a>
+				
+				<div class="blog-card-description">
+					{{item.b_description|safe|truncatewords_html:50}}
+				</div>
+				
+				<div class="blog-card-footer">
+					<div class="blog-meta">
+						<span class="blog-date">
+							<i class="far fa-clock"></i>
+							{{item.b_publdate|timesince}}
+						</span>
+						
+						{% if item.b_cat.all %}
+							{% for cat in item.b_cat.all %}
+								<a href="{% url 'blog_tag' cat.cb_titre_slgify %}" class="blog-category-badge">
+									{{ cat.cb_titre }}
+								</a>
+							{% endfor %}
+						{% endif %}
+					</div>
+					
+					<span class="text-muted">
+						<i class="far fa-eye"></i> {{item.b_reading}}
+					</span>
+				</div>
+			</div>
+		</article>
+	{% endfor %}
+{% else %}
+	<div class="alert alert-info">
+		<i class="fas fa-info-circle"></i> Aucun article trouvé.
+	</div>
+{% endif %}
+{% endblock %}
+
+{% block right_panel %}
+{% if page.p_right != "" %}
+<div class="card shadow-sm" style="background-color: rgba(250,250,250,0.95); border-radius: 12px;">
+<div class="card-body">
+	<!-- Recherche -->
+	<h5 class="mb-3"><i class="fas fa-search"></i> Rechercher</h5>
+	<form action="" method="get">
+		<div class="row align-items-center">
+			<div class="col-lg-8 col-sm-12">
+				{{page.blog_search|crispy}}
+			</div>
+			<div class="col mt-sm-1">
+				<input type="submit" class="btn btn-primary w-100" value="Rechercher">
+			</div>
+		</div>
+	</form>
+	
+	<hr class="my-4">
+	
+	<!-- Pagination -->
+	{% if page.blog_art.paginator.num_pages != 1 %}
+	<nav aria-label="Pagination">
+		<ul class="pagination justify-content-center">
+			{% if page.blog_art.has_previous %}
+				<li class="page-item">
+					<a class="page-link" href="?page={{ page.blog_art.previous_page_number }}">
+						<i class="fas fa-chevron-left"></i>
+					</a>
+				</li>
+			{% endif %}
+			
+			{% for nb_page in page.blog_art.nbpage %}
+				{% if page.blog_art.number == forloop.counter %}
+					<li class="page-item active">
+						<span class="page-link">{{forloop.counter}}</span>
+					</li>
+				{% else %}
+					<li class="page-item">
+						<a class="page-link" href="?page={{forloop.counter}}">{{forloop.counter}}</a>
+					</li>
+				{% endif %}
+			{% endfor %}
+			
+			{% if page.blog_art.has_next %}
+				<li class="page-item">
+					<a class="page-link" href="?page={{ page.blog_art.next_page_number }}">
+						<i class="fas fa-chevron-right"></i>
+					</a>
+				</li>
+			{% endif %}
+		</ul>
+	</nav>
+	<hr class="my-4">
+	{% endif %}
+	
+	<!-- Catégories -->
+	<h5 class="mb-3"><i class="fas fa-tags"></i> Catégories</h5>
+	<div class="d-flex flex-wrap gap-2 mb-4">
+		{% for cat in page.blog_cat %}
+			<a href="{% url 'blog_tag' cat.cb_titre_slgify %}" class="btn btn-outline-primary btn-sm">
+				{{cat.cb_titre}}
+			</a>
+		{% endfor %}
+		
+		{% if page.blog_filter == True %}
+			<a href="{% url 'blog_index' %}" class="btn btn-outline-danger btn-sm">
+				<i class="fas fa-times"></i> Retirer les filtres
+			</a>
+		{% else %}
+			<a href="{% url 'blog_tag' 'all' %}" class="btn btn-outline-dark btn-sm">
+				Tous les articles
+			</a>
+		{% endif %}
+	</div>
+	
+	<hr class="my-4">
+	
+	<!-- Top 10 -->
+	<h5 class="mb-3"><i class="fas fa-fire"></i> Articles Populaires</h5>
+	<div class="list-group list-group-flush">
+		{% for item in page.blog_top10 %}
+			<a href="{% url 'blog_play' item.b_titre_slugify %}" 
+			   class="list-group-item list-group-item-action border-0 px-0">
+				<div class="d-flex align-items-start">
+					<span class="badge bg-primary rounded-pill me-2">{{forloop.counter}}</span>
+					<span class="flex-grow-1">{{item.b_titre|truncatechars:45}}</span>
+				</div>
+			</a>
+		{% endfor %}
+	</div>
+	
+	{% if page.retour %}
+	<hr class="my-4">
+	<a href="{% url page.retour %}" class="btn btn-outline-secondary w-100">
+		<i class="fas fa-arrow-left"></i> Retour
+	</a>
+	{% endif %}
+</div>
+</div>
+{% endif %}
+{% endblock %}

+ 21 - 0
clean_sessions.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+# Script de nettoyage des sessions pour production
+
+echo "🧹 Nettoyage des sessions Django..."
+
+# Activer l'environnement virtuel
+source venv/bin/activate
+
+# Nettoyer les sessions expirées
+echo "Suppression des sessions expirées..."
+python manage.py clearsessions
+
+# Optionnel : Supprimer TOUTES les sessions
+read -p "Voulez-vous supprimer TOUTES les sessions ? (o/N) " -n 1 -r
+echo
+if [[ $REPLY =~ ^[OoYy]$ ]]; then
+    python manage.py shell -c "from django.contrib.sessions.models import Session; Session.objects.all().delete(); print('✅ Toutes les sessions supprimées')"
+fi
+
+echo "✅ Nettoyage terminé"
+echo "Redémarrez maintenant le serveur : sudo systemctl restart gunicorn"