<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Le Cafard Hérétique - Temple des Écrits</title>
<meta name="description" content="Le Cafard Hérétique est le temple des écrits, un imaginarium philosophique et littéraire où les neurones s'agitent sans cesse..">
<meta property="og:title" content="Le Cafard Hérétique - Temple des Écrits">
<meta property="og:description" content="Un imaginarium où les idées philosophiques et littéraires prennent vie. Plongez dans des réflexions profondes et divagations imaginaires.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.lecafardheretique.fr/">
<!-- <meta property="og:image" content="https://www.lecafardheretique.fr/images/og-image.jpg"> //-->
<meta property="og:site_name" content="Le Cafard Hérétique">
<meta property="og:locale" content="fr_FR">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Le Cafard Hérétique - Temple des Écrits">
<meta name="twitter:description" content="Un imaginarium où les idées philosophiques et littéraires prennent vie. Plongez dans des réflexions profondes et divagations imaginaires.">
<!-- <meta name="twitter:image" content="https://www.lecafardheretique.fr/images/twitter-image.jpg"> //-->
<meta name="twitter:site" content="@lecafardheretique">
<meta name="twitter:creator" content="@lecafardheretique">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Le Cafard Hérétique",
"url": "https://www.lecafardheretique.fr/",
"logo": "https://www.lecafardheretique.fr/images/logo.jpg",
"description": "Le temple des écrits philosophiques et littéraires.",
"sameAs": [
"https://www.facebook.com/lecafardheretique",
"https://twitter.com/lecafardheretique",
"https://www.instagram.com/lecafardheretique",
"https://www.linkedin.com/company/lecafardheretique"
],
"about": "Un imaginarium dédié à la philosophie, la littérature et les divagations imaginaires."
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Le Cafard Hérétique",
"url": "https://www.lecafardheretique.fr/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://www.lecafardheretique.fr/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "Accueil - Le Cafard Hérétique",
"url": "https://www.lecafardheretique.fr/",
"description": "Page d'accueil du temple des écrits philosophiques et littéraires."
}
</script>
<script type="application/ld+json">
[
{
"@context": "https://schema.org",
"@type": "Article",
"@id": "#cogito",
"headline": "Cogito Ergo Sum",
"description": "Plongez dans les abysses de la pensée philosophique.",
"author": {
"@type": "Organization",
"name": "Le Cafard Hérétique"
},
"publisher": {
"@type": "Organization",
"name": "Le Cafard Hérétique",
"logo": {
"@type": "ImageObject",
"url": "https://www.lecafardheretique.fr/images/logo.jpg"
}
},
"datePublished": "2025-10-01",
"dateModified": "2025-10-01"
},
{
"@context": "https://schema.org",
"@type": "Article",
"@id": "#absurdum",
"headline": "Absurdum Est",
"description": "Explorez l'absurde et le non-sens littéraire.",
"author": {
"@type": "Organization",
"name": "Le Cafard Hérétique"
},
"publisher": {
"@type": "Organization",
"name": "Le Cafard Hérétique",
"logo": {
"@type": "ImageObject",
"url": "https://www.lecafardheretique.fr/images/logo.jpg"
}
},
"datePublished": "2025-10-01",
"dateModified": "2025-10-01"
},
{
"@context": "https://schema.org",
"@type": "Article",
"@id": "#divagations",
"headline": "Divagations Littéraires",
"description": "Laissez votre imagination vagabonder à travers les mots.",
"author": {
"@type": "Organization",
"name": "Le Cafard Hérétique"
},
"publisher": {
"@type": "Organization",
"name": "Le Cafard Hérétique",
"logo": {
"@type": "ImageObject",
"url": "https://www.lecafardheretique.fr/images/logo.jpg"
}
},
"datePublished": "2025-10-01",
"dateModified": "2025-10-01"
},
{
"@context": "https://schema.org",
"@type": "Article",
"@id": "#metaphysique",
"headline": "Métaphysique Musings",
"description": "Réflexions sur l'être, le temps et l'infini.",
"author": {
"@type": "Organization",
"name": "Le Cafard Hérétique"
},
"publisher": {
"@type": "Organization",
"name": "Le Cafard Hérétique",
"logo": {
"@type": "ImageObject",
"url": "https://www.lecafardheretique.fr/images/logo.jpg"
}
},
"datePublished": "2025-10-01",
"dateModified": "2025-10-01"
}
]
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Georgia', serif;
background-color: #0a0a0a;
color: #e0e0e0;
overflow-x: hidden;
font-size: 16px; /* Base font size */
line-height: 1.5; /* Improved legibility */
}
/* Header */
header {
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/* background: url('https://source.unsplash.com/random/1920x1080/?temple,night') no-repeat center center/cover; */
overflow: hidden;
}
header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
}
header > * {
position: relative;
z-index: 2;
}
h1 {
font-size: 2rem; /* Smaller for mobile */
margin: 0;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
animation: glow 2s infinite alternate;
}
@keyframes glow {
from { text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }
to { text-shadow: 0 0 20px rgba(255, 255, 255, 1); }
}
p.subtitle {
font-size: 1rem;
margin: 20px 0;
max-width: 90%;
}
.button {
color: #fff;
text-decoration: none;
font-size: 1rem;
padding: 12px 24px; /* Increased for touch */
background: rgba(0, 0, 0, 0.7);
border-radius: 50px;
transition: transform 0.3s, box-shadow 0.3s;
min-width: 48px;
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.button:hover,
.button:focus {
transform: scale(1.1);
box-shadow: 0 0 15px #ffcc00;
outline: none;
}
/* Neuron Animation */
#neurons {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
/* Navigation - Mobile Burger */
nav {
position: fixed;
top: 10px;
right: 10px;
left: 10px;
display: flex;
justify-content: flex-end;
z-index: 3;
}
#menu-toggle {
display: none;
}
.burger {
display: block;
font-size: 1.5rem;
color: #fff;
cursor: pointer;
padding: 12px; /* Increased for touch */
background: rgba(0, 0, 0, 0.7);
border-radius: 50%;
min-width: 48px;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.burger:focus {
box-shadow: 0 0 15px #ffcc00;
outline: none;
}
nav ul {
display: none;
position: absolute;
top: 50px;
right: 0;
flex-direction: column;
background: #111;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
width: calc(100vw - 40px);
}
#menu-toggle:checked ~ ul {
display: flex;
}
nav li {
margin-bottom: 10px;
}
nav a {
display: block;
color: #fff;
text-decoration: none;
font-size: 1rem;
padding: 12px 24px; /* Increased for touch */
background: rgba(0, 0, 0, 0.7);
border-radius: 50px;
transition: transform 0.3s, box-shadow 0.3s;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
nav a:hover,
nav a:focus {
transform: scale(1.1);
box-shadow: 0 0 15px #ffcc00;
outline: none;
}
/* Sections */
section {
padding: 60px 10px;
text-align: center;
}
.rubrique {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.card {
width: 90%;
max-width: 300px;
padding: 24px; /* Increased for touch */
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
transition: transform 0.5s, opacity 0.5s;
cursor: pointer;
position: relative;
overflow: hidden;
min-height: 200px; /* Ensure tappable area */
}
.card:hover,
.card:focus {
transform: translateY(-10px);
opacity: 1;
outline: none;
}
.card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 204, 0, 0.3), transparent);
opacity: 0;
transition: opacity 0.5s;
}
.card:hover::before,
.card:focus::before {
opacity: 1;
}
.card h2 {
font-size: 1.5rem;
margin-bottom: 10px;
}
.card p {
font-size: 0.9rem;
}
/* Interactive Quote */
.quote {
visibility: hidden;
margin-top: 20px;
font-style: italic;
color: #ffcc00;
}
.card:hover .quote,
.card:focus .quote {
visibility: visible;
}
/* Footer */
footer {
padding: 30px 10px;
text-align: center;
background: #111;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
footer .footer-menu ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
}
footer .footer-menu a {
color: #e0e0e0;
text-decoration: none;
font-size: 0.9rem;
padding: 12px 24px; /* Increased for touch */
transition: color 0.3s;
display: block;
min-height: 48px;
}
footer .footer-menu a:hover,
footer .footer-menu a:focus {
color: #ffcc00;
outline: none;
}
footer .social-icons ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 15px;
}
footer .social-icons a {
color: #e0e0e0;
font-size: 1.2rem;
padding: 12px; /* Increased for touch */
transition: color 0.3s, transform 0.3s;
min-width: 48px;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
footer .social-icons a:hover,
footer .social-icons a:focus {
color: #ffcc00;
transform: scale(1.2);
outline: none;
}
footer .copyright {
font-size: 0.8rem;
margin-top: 10px;
}
/* Parallax Effect */
.parallax {
perspective: 1px;
height: auto;
overflow-x: hidden;
overflow-y: auto;
}
.parallax-layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateZ(-1px) scale(2);
}
/* Touch Optimizations */
@media (pointer: coarse) {
/* Always show quotes on touch devices */
.card .quote {
visibility: visible;
}
/* Disable hover transforms if needed, but keep for tap feedback */
.button:active, nav a:active, footer a:active {
transform: scale(1.05);
}
/* Reduce animations for performance */
.card {
transition: none;
}
}
/* Media Queries - Mobile First */
/* Small devices (landscape phones, 481px and up) */
@media (min-width: 481px) {
h1 {
font-size: 2.5rem;
}
p.subtitle {
font-size: 1.2rem;
}
.button {
font-size: 1.2rem;
padding: 12px 24px;
}
.burger {
font-size: 2rem;
}
nav a {
font-size: 1.2rem;
}
.card h2 {
font-size: 1.8rem;
}
.card p {
font-size: 1rem;
}
footer .footer-menu a {
font-size: 1rem;
}
footer .social-icons a {
font-size: 1.5rem;
}
footer .copyright {
font-size: 0.9rem;
}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
h1 {
font-size: 3rem;
}
p.subtitle {
font-size: 1.4rem;
max-width: 600px;
}
section {
padding: 80px 20px;
}
.rubrique {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
}
.card {
width: 300px;
}
.burger {
display: none;
}
nav {
top: 20px;
right: 20px;
left: auto;
justify-content: flex-start;
}
nav ul {
display: flex;
flex-direction: row;
position: static;
width: auto;
background: none;
padding: 0;
box-shadow: none;
gap: 20px;
}
nav li {
margin-bottom: 0;
}
nav a {
padding: 12px 24px;
border-radius: 50px;
background: rgba(0, 0, 0, 0.7);
}
footer {
padding: 40px 20px;
}
footer .footer-menu ul {
flex-direction: row;
gap: 15px;
}
}
/* Large devices (desktops, 1025px and up) */
@media (min-width: 1025px) {
h1 {
font-size: 3.5rem;
}
p.subtitle {
font-size: 1.5rem;
}
body {
font-size: 18px;
}
.card {
width: 350px;
padding: 25px;
}
.card h2 {
font-size: 2rem;
}
}
/* Extra large devices (large desktops, 1201px and up) */
@media (min-width: 1201px) {
h1 {
font-size: 4rem;
}
.rubrique {
gap: 50px;
}
.card {
width: 400px;
}
}
/* Orientation: Landscape */
@media (orientation: landscape) and (max-height: 500px) {
header {
height: auto;
padding: 50px 0;
}
}
/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
/* Print Styles */
@media print {
body {
background: white;
color: black;
}
header {
height: auto;
background: none;
}
nav, footer .social-icons, .button, #neurons {
display: none;
}
.card {
box-shadow: none;
background: none;
page-break-inside: avoid;
}
}
</style>
</head>
<body>
<!-- Header -->
<header role="banner">
<h1>Le Cafard Hérétique</h1>
<p class="subtitle">Le temple des écrits, un imaginarium où les neurones s'agitent sans cesse.</p>
<a href="#rubriques" class="button">Agiter vos Neurones</a>
<canvas id="neurons" aria-hidden="true"></canvas>
</header>
<!-- Navigation -->
<nav role="navigation">
<input type="checkbox" id="menu-toggle" hidden>
<label for="menu-toggle" class="burger" aria-label="Ouvrir le menu de navigation"><i class="fas fa-bars"></i></label>
<ul id="nav-menu">
<li><a href="#cogito">Cogito Ergo Sum</a></li>
<li><a href="#absurdum">Absurdum Est</a></li>
<li><a href="#divagations">Divagations Littéraires</a></li>
<li><a href="#metaphysique">Métaphysique Musings</a></li>
</ul>
</nav>
<!-- Main Content -->
<main class="parallax" role="main">
<section id="rubriques" class="rubrique" role="region" aria-label="Rubriques principales">
<article class="card" id="cogito" tabindex="0" role="article" aria-labelledby="cogito-title">
<h2 id="cogito-title">Cogito Ergo Sum</h2>
<p>Plongez dans les abysses de la pensée philosophique.</p>
<p class="quote">« Je pense, donc je suis. » - Descartes</p>
</article>
<article class="card" id="absurdum" tabindex="0" role="article" aria-labelledby="absurdum-title">
<h2 id="absurdum-title">Absurdum Est</h2>
<p>Explorez l'absurde et le non-sens littéraire.</p>
<p class="quote">« L'absurde naît de la confrontation entre l'appel humain et le silence déraisonnable du monde. » - Camus</p>
</article>
<article class="card" id="divagations" tabindex="0" role="article" aria-labelledby="divagations-title">
<h2 id="divagations-title">Divagations Littéraires</h2>
<p>Laissez votre imagination vagabonder à travers les mots.</p>
<p class="quote">« Les mots sont des fenêtres, ou bien des murs. » - Marshall McLuhan</p>
</article>
<article class="card" id="metaphysique" tabindex="0" role="article" aria-labelledby="metaphysique-title">
<h2 id="metaphysique-title">Métaphysique Musings</h2>
<p>Réflexions sur l'être, le temps et l'infini.</p>
<p class="quote">« L'être et le néant. » - Sartre</p>
</article>
</section>
</main>
<!-- Footer -->
<footer role="contentinfo">
<div class="footer-menu">
<ul role="navigation" aria-label="Liens légaux">
<li><a href="#/mentions-legales">Mentions Légales</a></li>
<li><a href="#/politique-confidentialite">Politique de Confidentialité</a></li>
<li><a href="#/conditions-utilisation">Conditions d'Utilisation</a></li>
<li><a href="#/contact">Contact</a></li>
</ul>
</div>
<div class="social-icons">
<ul role="navigation" aria-label="Réseaux sociaux">
<li><a href="#https://www.facebook.com/lecafardheretique" target="_blank" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#https://twitter.com/lecafardheretique" target="_blank" aria-label="Twitter"><i class="fab fa-twitter"></i></a></li>
<li><a href="#https://www.instagram.com/lecafardheretique" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a></li>
<li><a href="#https://www.linkedin.com/company/lecafardheretique" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<p class="copyright">© 2025 Le Cafard Hérétique. Tous droits réservés.</p>
</footer>
<script>
// Neuron Particle Animation (reduced for mobile performance)
const canvas = document.getElementById('neurons');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 5 + 1;
this.speedX = Math.random() * 3 - 1.5;
this.speedY = Math.random() * 3 - 1.5;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.size > 0.2) this.size -= 0.1;
}
draw() {
ctx.fillStyle = 'rgba(255, 204, 0, 0.8)';
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
let particles = [];
const maxParticles = /Mobi|Android/i.test(navigator.userAgent) ? 50 : 100; // Reduce particles on mobile/tablet
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (particles.length < maxParticles) {
particles.push(new Particle());
}
particles.forEach((p, i) => {
p.update();
p.draw();
if (p.size <= 0.2) particles.splice(i, 1);
});
requestAnimationFrame(animate);
}
animate();
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// Haptic Feedback
function hapticFeedback() {
if ('vibrate' in navigator) {
navigator.vibrate(50); // Short vibration for feedback
}
}
// Add haptic feedback to interactive elements on touchstart
document.querySelectorAll('.card, .button, nav a, footer a, .burger').forEach(element => {
element.addEventListener('touchstart', hapticFeedback, { passive: true });
});
</script>
</body>
</html>
