<!doctype html>
<html lang="fr" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mes Lectures bibliothèque de fiches de lecture : classiques, mangas, comics, BD, Wattpad</title>
<meta name="description" content="Mes Lectures, la bibliothèque en ligne qui décrypte vos prochaines lectures : fiches détaillées sur les éditions classiques, mangas, comics, BD et récits Wattpad.">
<meta name="robots" content="index, follow">
<meta name="color-scheme" content="light">
<meta name="theme-color" content="#1c2b22">
<link rel="canonical" href="https://www.mes-lectures.fr/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Mes Lectures">
<meta property="og:title" content="Mes Lectures — Fiches de lecture : classiques, mangas, comics, BD, Wattpad">
<meta property="og:description" content="Des fiches de lecture claires et sans divulgâcher pour choisir votre prochain livre, manga, comic, BD ou récit Wattpad.">
<meta property="og:url" content="https://www.mes-lectures.fr/">
<meta property="og:locale" content="fr_FR">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Mes Lectures bibliothèque en ligne de fiches de lecture">
<meta name="twitter:description" content="Fiches de lecture détaillées : classiques, mangas, comics, BD, Wattpad.">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='4' fill='%231c2b22'/%3E%3Cpath d='M8 8h6v16H8zM18 8h6v16h-6z' fill='%23f7f4ec'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&family=Work+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://www.mes-lectures.fr/#organization",
"name": "Mes Lectures",
"url": "https://www.mes-lectures.fr/",
"logo": {
"@type": "ImageObject",
"url": "https://www.mes-lectures.fr/favicon.svg",
"width": "512",
"height": "512"
},
"sameAs": [
"https://www.instagram.com/meslectures",
"https://bsky.app/profile/meslectures.fr"
]
},
{
"@type": "WebSite",
"@id": "https://www.mes-lectures.fr/#website",
"url": "https://www.mes-lectures.fr/",
"name": "Mes Lectures",
"publisher": {
"@id": "https://www.mes-lectures.fr/#organization"
},
"inLanguage": "fr-FR",
"potentialAction": {
"@type": "SearchAction",
"target": {
"@type": "EntryPoint",
"urlTemplate": "https://www.mes-lectures.fr/recherche?q={search_term_string}"
},
"query-input": "required name=search_term_string"
}
},
{
"@type": "WebPage",
"@id": "https://www.mes-lectures.fr/#webpage",
"url": "https://www.mes-lectures.fr/",
"name": "Mes Lectures — Fiches de lecture : classiques, mangas, comics, BD, Wattpad",
"isPartOf": {
"@id": "https://www.mes-lectures.fr/#website"
},
"about": {
"@id": "https://www.mes-lectures.fr/#organization"
},
"description": "Mes Lectures, la bibliothèque en ligne qui décrypte vos prochaines lectures : fiches détaillées sur les éditions classiques, mangas, comics, BD et récits Wattpad.",
"breadcrumb": {
"@id": "https://www.mes-lectures.fr/#breadcrumb"
},
"mainEntity": [
{
"@id": "https://www.mes-lectures.fr/#faq"
},
{
"@id": "https://www.mes-lectures.fr/#howto"
},
{
"@id": "https://www.mes-lectures.fr/#book-les-miserables"
}
]
},
{
"@type": "BreadcrumbList",
"@id": "https://www.mes-lectures.fr/#breadcrumb",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Accueil",
"item": "https://www.mes-lectures.fr/"
}
]
},
{
"@type": "FAQPage",
"@id": "https://www.mes-lectures.fr/#faq",
"mainEntity": [
{
"@type": "Question",
"name": "Les fiches contiennent-elles des spoilers ?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Non. Chaque fiche sépare clairement un résumé sans divulgâcher d'une section d'analyse plus poussée, toujours signalée avant lecture."
}
},
{
"@type": "Question",
"name": "Puis-je proposer une fiche pour un livre que j'ai lu ?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Oui. Tout lecteur inscrit peut soumettre une fiche, relue par l'équipe éditoriale avant sa publication."
}
},
{
"@type": "Question",
"name": "L'accès au site est-il payant ?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Non, la lecture des fiches et l'usage du carnet de lecture sont entièrement gratuits, sans compte obligatoire."
}
},
{
"@type": "Question",
"name": "Comment sont classées les fiches Wattpad ?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Par genre (romance, fantasy, thriller...) et par statut de publication, avec un lien direct vers le récit original."
}
}
]
},
{
"@type": "HowTo",
"@id": "https://www.mes-lectures.fr/#howto",
"name": "Trois étapes avant de tourner la première page",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "Cherchez",
"text": "Un titre, un auteur ou tout un univers grâce à la recherche et aux filtres par cote."
},
{
"@type": "HowToStep",
"position": 2,
"name": "Lisez la fiche",
"text": "Résumé sans divulgâcher, points forts, points faibles et à qui le livre plaira vraiment."
},
{
"@type": "HowToStep",
"position": 3,
"name": "Suivez votre lecture",
"text": "Ajoutez le titre à votre carnet et retrouvez votre progression d'une visite à l'autre."
}
]
},
{
"@type": "Book",
"@id": "https://www.mes-lectures.fr/#book-les-miserables",
"name": "Les Misérables",
"author": {
"@type": "Person",
"@id": "https://www.mes-lectures.fr/#author-victor-hugo",
"name": "Victor Hugo"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.6",
"reviewCount": "312",
"bestRating": "5",
"worstRating": "1"
},
"description": "Un condamné en quête de rédemption, une ville qui se soulève, une fresque sociale qui n'a pas pris une ride.",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "EUR",
"availability": "https://schema.org/InStock"
}
}
]
}
</script>
<style>
:root{
--ink:#1c2b22;
--ink-soft:#2a3d30;
--paper:#f7f4ec;
--paper-dim:#efe9db;
--line:#d9d0b8;
--gold:#9c7a3c;
--gold-text:#6e5220;
--spine-classiques:#2f5233;
--spine-manga:#8c2f2f;
--spine-comics:#234f73;
--spine-bd:#8a6425;
--spine-wattpad:#55396e;
--radius-s:4px;
--radius-m:10px;
--shadow-1:0 1px 2px rgba(28,43,34,.14);
--shadow-2:0 10px 24px rgba(28,43,34,.18);
--font-display:'Fraunces', Georgia, serif;
--font-body:'Work Sans', system-ui, -apple-system, sans-serif;
--font-mono:'JetBrains Mono', ui-monospace, monospace;
--maxw:74rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:var(--font-body);
color:var(--ink);
background:var(--paper);
line-height:1.55;
-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);line-height:1.15;margin:0 0 .5em}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
button{font:inherit}
.visually-hidden{
position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
position:absolute;left:1rem;top:-3rem;background:var(--ink);color:var(--paper);
padding:.6rem 1rem;border-radius:var(--radius-s);z-index:100;transition:top .15s ease;
}
.skip-link:focus{top:1rem}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:1.25rem}
/* ---------- header ---------- */
.site-header{
position:sticky;top:0;z-index:50;background:rgba(247,244,236,.92);
backdrop-filter:blur(6px);border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem}
.logo{
font-family:var(--font-display);font-style:italic;font-weight:600;font-size:1.4rem;
text-decoration:none;letter-spacing:.01em;
}
.logo span{color:var(--gold-text)}
.menu-toggle{
display:inline-flex;align-items:center;gap:.5rem;background:none;border:1px solid var(--ink);
border-radius:var(--radius-s);padding:.45rem .7rem;cursor:pointer;
}
.menu-toggle .bars{width:20px;height:2px;background:var(--ink);position:relative;display:block}
.menu-toggle .bars::before,.menu-toggle .bars::after{
content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);
}
.menu-toggle .bars::before{top:-6px}
.menu-toggle .bars::after{top:6px}
.primary-nav{
display:none;position:absolute;inset-inline:0;top:100%;background:var(--paper);
border-bottom:1px solid var(--line);box-shadow:var(--shadow-2);
}
.primary-nav.is-open{display:block}
.primary-nav ul{display:flex;flex-direction:column;padding:.5rem 1.25rem 1rem}
.primary-nav a{
display:block;padding:.7rem .25rem;text-decoration:none;font-weight:600;
border-bottom:1px solid var(--line);
}
.primary-nav li:last-child a{border-bottom:none}
.primary-nav a[aria-current="page"]{color:var(--gold-text)}
@media (min-width:820px){
.menu-toggle{display:none}
.primary-nav{
display:block;position:static;background:none;border:none;box-shadow:none;
}
.primary-nav ul{flex-direction:row;padding:0;gap:1.75rem;align-items:center}
.primary-nav a{padding:.25rem 0;border-bottom:none;font-weight:500}
.primary-nav a.button-link{
background:var(--ink);color:var(--paper);padding:.55rem 1.1rem;border-radius:var(--radius-s);
}
}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
padding:.8rem 1.4rem;border-radius:var(--radius-s);font-weight:600;text-decoration:none;
border:1.5px solid transparent;cursor:pointer;font-size:1rem;
}
.btn-primary{background:var(--gold);color:var(--ink)}
.btn-primary:hover{background:#8a6b34}
.btn-ghost{border-color:var(--paper);color:var(--paper)}
.btn-ghost:hover{background:rgba(247,244,236,.12)}
/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--paper);overflow:clip}
.hero .wrap{
padding-block:3rem 2.5rem;display:flex;flex-direction:column;gap:2.5rem;
}
.hero-eyebrow{
font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
color:#c9bd9a;margin-bottom:.9rem;
}
.hero h1{font-size:clamp(2rem,5.5vw,3.1rem);max-width:18ch}
.hero-lede{max-width:52ch;color:#d9d3c2;font-size:1.05rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}
/* fiche demo card in hero */
.fiche-demo{
background:var(--paper);color:var(--ink);border-radius:var(--radius-m);
box-shadow:var(--shadow-2);padding:1.25rem 1.35rem;max-width:24rem;
}
.fiche-demo__badge{
display:inline-block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;
background:var(--spine-classiques);color:var(--paper);padding:.2rem .5rem;border-radius:3px;
margin-bottom:.6rem;
}
.fiche-demo h2{font-size:1.3rem;margin-bottom:.15rem}
.fiche-demo .auteur{color:#5c5645;font-size:.9rem;margin-bottom:.6rem}
.fiche-demo .note{
display:flex;align-items:center;gap:.4rem;font-size:.85rem;margin-bottom:.7rem;color:#4c4636;
}
.fiche-demo .note strong{font-family:var(--font-mono);color:var(--ink)}
.fiche-demo p{font-size:.92rem;color:#3c3628;margin-bottom:.8rem}
.fiche-demo__tags{display:flex;flex-wrap:wrap;gap:.4rem}
.fiche-demo__tags span{
font-family:var(--font-mono);font-size:.72rem;background:var(--paper-dim);
border:1px solid var(--line);border-radius:3px;padding:.15rem .45rem;
}
@media (min-width:900px){
.hero .wrap{flex-direction:row;align-items:center;padding-block:5rem}
.hero-text{flex:1 1 55%}
.fiche-demo{flex:0 0 auto;transform:rotate(-2deg)}
}
/* ---------- section shell ---------- */
.section{padding-block:3.25rem}
.section-head{max-width:42rem;margin-bottom:2rem}
.section-eyebrow{
font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--gold-text);margin-bottom:.6rem;display:block;
}
.section h2{font-size:clamp(1.55rem,3.2vw,2.1rem)}
/* ---------- univers de lecture (bookshelf) ---------- */
.univers-list{display:flex;flex-direction:column;gap:1rem}
.univers-card{
display:flex;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius-m);
padding:1.1rem;border-left-width:6px;border-left-style:solid;text-decoration:none;color:var(--ink);
transition:transform .12s ease,box-shadow .12s ease;
}
.univers-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)}
.univers-card[data-univers="classiques"]{border-left-color:var(--spine-classiques)}
.univers-card[data-univers="manga"]{border-left-color:var(--spine-manga)}
.univers-card[data-univers="comics"]{border-left-color:var(--spine-comics)}
.univers-card[data-univers="bd"]{border-left-color:var(--spine-bd)}
.univers-card[data-univers="wattpad"]{border-left-color:var(--spine-wattpad)}
.univers-card__icon{flex:0 0 auto;width:2.4rem;height:2.4rem}
.univers-card__body{flex:1 1 auto}
.cote{
font-family:var(--font-mono);font-size:.72rem;color:#6b6350;display:block;margin-bottom:.15rem;
}
.univers-card h3{font-size:1.15rem;margin-bottom:.3rem}
.univers-card p{font-size:.92rem;color:#3f3a2c;margin-bottom:0}
.filtre-recherche{
display:flex;gap:.6rem;margin-bottom:1.5rem;max-width:26rem;
}
.filtre-recherche input{
flex:1;padding:.65rem .8rem;border:1.5px solid var(--line);border-radius:var(--radius-s);
font:inherit;background:#fff;
}
.filtre-statut{font-size:.85rem;color:#5c5645;margin-bottom:1rem}
@media (min-width:700px){
.univers-list{flex-direction:row;flex-wrap:wrap}
.univers-card{flex:1 1 calc(50% - .5rem);flex-direction:column;border-left-width:0;border-top-width:6px;border-top-style:solid}
.univers-card[data-univers="classiques"]{border-top-color:var(--spine-classiques)}
.univers-card[data-univers="manga"]{border-top-color:var(--spine-manga)}
.univers-card[data-univers="comics"]{border-top-color:var(--spine-comics)}
.univers-card[data-univers="bd"]{border-top-color:var(--spine-bd)}
.univers-card[data-univers="wattpad"]{border-top-color:var(--spine-wattpad)}
}
@media (min-width:1024px){
.univers-card{flex-basis:calc(33.333% - .667rem)}
}
/* ---------- comment ça marche ---------- */
.etapes{display:flex;flex-direction:column;gap:1.25rem}
.etape{display:flex;gap:1rem;align-items:flex-start}
.etape__num{
font-family:var(--font-mono);font-size:.85rem;color:var(--paper);background:var(--ink);
width:2.1rem;height:2.1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
flex:0 0 auto;
}
.etape h3{font-size:1.05rem;margin-bottom:.2rem}
.etape p{font-size:.92rem;color:#3f3a2c;margin-bottom:0}
@media (min-width:700px){
.etapes{flex-direction:row}
.etape{flex-direction:column;text-align:left;flex:1}
}
/* ---------- faq ---------- */
.faq-list{display:flex;flex-direction:column;gap:.7rem;max-width:44rem}
.faq-list details{
background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);padding:.2rem .2rem;
}
.faq-list summary{
cursor:pointer;padding:.9rem 1rem;font-weight:600;list-style:none;position:relative;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
content:"+";position:absolute;right:1rem;top:.85rem;font-family:var(--font-mono);
}
.faq-list details[open] summary::after{content:"–"}
.faq-list p{padding:0 1rem 1rem;font-size:.94rem;color:#3f3a2c;margin:0}
/* ---------- newsletter ---------- */
.newsletter{background:var(--paper-dim);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.newsletter .wrap{display:flex;flex-direction:column;gap:1.25rem;padding-block:2.75rem}
.newsletter h2{font-size:1.5rem}
.newsletter-form{display:flex;flex-direction:column;gap:.7rem;max-width:26rem}
.newsletter-form label{font-weight:600;font-size:.9rem}
.newsletter-form .row{display:flex;gap:.6rem;flex-wrap:wrap}
.newsletter-form input[type="email"]{
flex:1 1 12rem;padding:.7rem .85rem;border:1.5px solid var(--line);border-radius:var(--radius-s);font:inherit;
}
.form-note{font-size:.8rem;color:#5c5645}
.form-confirm{font-size:.9rem;color:var(--ink);font-weight:600}
/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#cfc7ac}
.site-footer .wrap{padding-block:2.75rem;display:flex;flex-direction:column;gap:2rem}
.footer-grid{display:flex;flex-direction:column;gap:1.75rem}
.footer-col h3{
font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
color:#9c916f;margin-bottom:.7rem;
}
.footer-col ul{display:flex;flex-direction:column;gap:.5rem}
.footer-col a{text-decoration:none;font-size:.92rem}
.footer-col a:hover{text-decoration:underline}
.footer-bottom{
display:flex;flex-direction:column;gap:.75rem;border-top:1px solid #38473d;padding-top:1.5rem;
font-size:.85rem;
}
@media (min-width:700px){
.footer-grid{flex-direction:row;flex-wrap:wrap;gap:2.5rem}
.footer-col{flex:1 1 10rem}
.footer-bottom{flex-direction:row;justify-content:space-between;align-items:center}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{transition:none!important;animation:none!important}
.fiche-demo{transform:none}
}
</style>
</head>
<body>
<a class="skip-link" href="#contenu">Aller au contenu principal</a>
<header class="site-header">
<div class="wrap">
<a href="#" class="logo">Mes <span>Lectures</span></a>
<button type="button" class="menu-toggle" id="menu-toggle" aria-expanded="false" aria-controls="primary-navigation">
<span class="bars" aria-hidden="true"></span>
<span>Menu</span>
</button>
<nav id="primary-navigation" class="primary-nav" aria-label="Navigation principale">
<ul>
<li><a href="#" aria-current="page">Accueil</a></li>
<li><a href="#univers">Fiches lecture</a></li>
<li><a href="#fonctionnement">Comment ça marche</a></li>
<li><a href="#questions">Questions fréquentes</a></li>
<li><a href="#inscription" class="button-link">Créer mon carnet</a></li>
</ul>
</nav>
</div>
</header>
<main id="contenu">
<section class="hero">
<div class="wrap">
<div class="hero-text">
<span class="hero-eyebrow">Bibliothèque de fiches de lecture en ligne</span>
<h1>Mes lectures</h1>
<h2>Chaque livre a son histoire. Ici, on la raconte.</h2>
<p class="hero-lede">Des fiches de lecture précises sur les éditions classiques, les mangas, les comics, la bande dessinée et les récits Wattpad — pour choisir la suite de votre pile à lire en connaissance de cause.</p>
<div class="hero-actions">
<a href="#univers" class="btn btn-primary">Parcourir les fiches</a>
<a href="#inscription" class="btn btn-ghost">Créer mon carnet de lecture</a>
</div>
</div>
<article class="fiche-demo" aria-label="Exemple de fiche de lecture">
<span class="fiche-demo__badge">Classiques · cote 840.9</span>
<h2>Les Misérables</h2>
<p class="auteur">Victor Hugo</p>
<p class="note" aria-label="Note des lecteurs : 4,6 sur 5">
<span aria-hidden="true">★★★★★</span> <strong>4,6/5</strong> · 312 avis
</p>
<p>Un condamné en quête de rédemption, une ville qui se soulève, une fresque sociale qui n'a pas pris une ride. Résumé sans divulgâcher et clés de lecture sur les personnages.</p>
<p class="fiche-demo__tags">
<span>#romanhistorique</span><span>#france19e</span><span>#redemption</span>
</p>
</article>
</div>
</section>
<section class="section" id="univers">
<div class="wrap">
<div class="section-head">
<span class="section-eyebrow">Explorez par univers</span>
<h2>Cinq façons de choisir votre prochaine lecture</h2>
<p>Chaque univers a ses propres codes : nous les décryptons fiche après fiche, sans jamais gâcher la surprise.</p>
</div>
<div class="filtre-recherche" role="search">
<label for="filtre-univers" class="visually-hidden">Rechercher un univers de lecture</label>
<input type="search" id="filtre-univers" name="q" placeholder="Rechercher un univers (ex. manga, BD…)">
</div>
<p class="filtre-statut" id="filtre-statut" role="status" aria-live="polite">5 univers affichés sur 5</p>
<ul class="univers-list" id="liste-univers">
<li>
<a class="univers-card" data-univers="classiques" href="#">
<svg class="univers-card__icon" viewbox="0 0 48 48" role="img" aria-hidden="true">
<title>Éditions classiques</title>
<rect x="8" y="10" width="8" height="28" rx="1" fill="none" stroke="var(--spine-classiques)" stroke-width="2.4"/>
<rect x="18" y="8" width="8" height="30" rx="1" fill="none" stroke="var(--spine-classiques)" stroke-width="2.4"/>
<rect x="28" y="12" width="8" height="26" rx="1" fill="none" stroke="var(--spine-classiques)" stroke-width="2.4"/>
</svg>
<span class="univers-card__body">
<span class="cote">Cote 840.9</span>
<h3>Éditions Classiques</h3>
<p>Les textes qui ont façonné la littérature — Hugo, Austen, Camus — décryptés dans leur contexte, leur style et leur structure.</p>
</span>
</a>
</li>
<li>
<a class="univers-card" data-univers="manga" href="#">
<svg class="univers-card__icon" viewbox="0 0 48 48" role="img" aria-hidden="true">
<title>Mangas</title>
<circle cx="24" cy="22" r="11" fill="none" stroke="var(--spine-manga)" stroke-width="2.4"/>
<path d="M13 22h-6M35 22h6M24 11V6" stroke="var(--spine-manga)" stroke-width="2.4" stroke-linecap="round"/>
<circle cx="24" cy="22" r="3" fill="var(--spine-manga)"/>
</svg>
<span class="univers-card__body">
<span class="cote">Cote 741.5 JAP</span>
<h3>Mangas</h3>
<p>Arcs narratifs, évolution des personnages et clés de lecture pour suivre les séries phares tome après tome.</p>
</span>
</a>
</li>
<li>
<a class="univers-card" data-univers="comics" href="#">
<svg class="univers-card__icon" viewbox="0 0 48 48" role="img" aria-hidden="true">
<title>Comics</title>
<path d="M24 6l4 10 10-4-4 10 10 4-10 4 4 10-10-4-4 10-4-10-10 4 4-10-10-4 10-4-4-10 10 4z" fill="none" stroke="var(--spine-comics)" stroke-width="2.2" stroke-linejoin="round"/>
</svg>
<span class="univers-card__body">
<span class="cote">Cote 741.5 US</span>
<h3>Comics</h3>
<p>Origin stories, univers partagés et sagas cultes, entre grands studios et labels indépendants.</p>
</span>
</a>
</li>
<li>
<a class="univers-card" data-univers="bd" href="#">
<svg class="univers-card__icon" viewbox="0 0 48 48" role="img" aria-hidden="true">
<title>Bandes dessinées</title>
<path d="M8 12h32v16H20l-6 6v-6H8z" fill="none" stroke="var(--spine-bd)" stroke-width="2.4" stroke-linejoin="round"/>
</svg>
<span class="univers-card__body">
<span class="cote">Cote 741.5 FR-BE</span>
<h3>Bandes Dessinées</h3>
<p>Le neuvième art franco-belge, entre classiques indémodables et nouvelle génération d'auteurs.</p>
</span>
</a>
</li>
<li>
<a class="univers-card" data-univers="wattpad" href="#">
<svg class="univers-card__icon" viewbox="0 0 48 48" role="img" aria-hidden="true">
<title>Récits Wattpad</title>
<path d="M8 14c4 14 6 20 8 20s3-10 8-10 4 10 8 10 4-16 8-20" fill="none" stroke="var(--spine-wattpad)" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="univers-card__body">
<span class="cote">Cote WP.000</span>
<h3>Récits Wattpad</h3>
<p>Des plumes indépendantes et une communauté active : les récits qui méritent de sortir du fil d'actualité.</p>
</span>
</a>
</li>
</ul>
</div>
</section>
<section class="section" id="fonctionnement" style="background:var(--paper-dim);border-block:1px solid var(--line)">
<div class="wrap">
<div class="section-head">
<span class="section-eyebrow">Le principe</span>
<h2>Trois étapes avant de tourner la première page</h2>
</div>
<ol class="etapes">
<li class="etape">
<span class="etape__num" aria-hidden="true">1</span>
<span>
<h3>Cherchez</h3>
<p>Un titre, un auteur ou tout un univers grâce à la recherche et aux filtres par cote.</p>
</span>
</li>
<li class="etape">
<span class="etape__num" aria-hidden="true">2</span>
<span>
<h3>Lisez la fiche</h3>
<p>Résumé sans divulgâcher, points forts, points faibles et à qui le livre plaira vraiment.</p>
</span>
</li>
<li class="etape">
<span class="etape__num" aria-hidden="true">3</span>
<span>
<h3>Suivez votre lecture</h3>
<p>Ajoutez le titre à votre carnet et retrouvez votre progression d'une visite à l'autre.</p>
</span>
</li>
</ol>
</div>
</section>
<section class="section" id="questions">
<div class="wrap">
<div class="section-head">
<span class="section-eyebrow">Questions fréquentes</span>
<h2>Avant de vous installer avec un livre</h2>
</div>
<div class="faq-list">
<details>
<summary>Les fiches contiennent-elles des spoilers ?</summary>
<p>Non. Chaque fiche sépare clairement un résumé sans divulgâcher d'une section d'analyse plus poussée, toujours signalée avant lecture.</p>
</details>
<details>
<summary>Puis-je proposer une fiche pour un livre que j'ai lu ?</summary>
<p>Oui. Tout lecteur inscrit peut soumettre une fiche, relue par l'équipe éditoriale avant sa publication.</p>
</details>
<details>
<summary>L'accès au site est-il payant ?</summary>
<p>Non, la lecture des fiches et l'usage du carnet de lecture sont entièrement gratuits, sans compte obligatoire.</p>
</details>
<details>
<summary>Comment sont classées les fiches Wattpad ?</summary>
<p>Par genre (romance, fantasy, thriller…) et par statut de publication, avec un lien direct vers le récit original.</p>
</details>
</div>
</div>
</section>
<section class="newsletter" id="inscription">
<div class="wrap">
<h2>Recevez une sélection de fiches chaque mois</h2>
<p>Nouveautés classées par univers, sans spam ni relance quotidienne.</p>
<form class="newsletter-form" id="form-newsletter" novalidate>
<label for="email-newsletter">Adresse e-mail</label>
<div class="row">
<input type="email" id="email-newsletter" name="email" placeholder="vous@exemple.fr" required autocomplete="email">
<button type="submit" class="btn btn-primary">S'inscrire</button>
</div>
<p class="form-note">Désinscription possible à tout moment depuis chaque e-mail reçu.</p>
<p class="form-confirm" id="form-confirm" role="status" aria-live="polite"></p>
</form>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap">
<div class="footer-grid">
<div class="footer-col">
<h3>Univers</h3>
<ul>
<li><a href="#univers">Éditions classiques</a></li>
<li><a href="#univers">Mangas</a></li>
<li><a href="#univers">Comics</a></li>
<li><a href="#univers">Bandes dessinées</a></li>
<li><a href="#univers">Récits Wattpad</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Le site</h3>
<ul>
<li><a href="#fonctionnement">Comment ça marche</a></li>
<li><a href="#questions">Questions fréquentes</a></li>
<li><a href="#inscription">Newsletter</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Informations légales</h3>
<ul>
<li><a href="#">Mentions légales</a></li>
<li><a href="#">Politique de confidentialité</a></li>
<li><a href="#">Accessibilité : conformité partielle</a></li>
<li><a href="#">Gestion des cookies</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Suivre Mes Lectures</h3>
<ul>
<li><a href="#https://www.instagram.com/meslectures" rel="noopener">Instagram <span class="visually-hidden">(nouvelle fenêtre)</span></a></li>
<li><a href="#https://bsky.app/profile/meslectures.fr" rel="noopener">Bluesky <span class="visually-hidden">(nouvelle fenêtre)</span></a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© <span id="annee-courante">2026</span> Mes Lectures. Tous droits réservés.</p>
<p>Site conçu pour rester lisible, rapide et accessible à tous les lecteurs.</p>
</div>
</div>
</footer>
<script>
(function(){
"use strict";
// Menu mobile
var toggle = document.getElementById('menu-toggle');
var nav = document.getElementById('primary-navigation');
function closeMenu(){
nav.classList.remove('is-open');
toggle.setAttribute('aria-expanded', 'false');
}
function openMenu(){
nav.classList.add('is-open');
toggle.setAttribute('aria-expanded', 'true');
}
toggle.addEventListener('click', function(){
var isOpen = nav.classList.contains('is-open');
if (isOpen) { closeMenu(); } else { openMenu(); }
});
document.addEventListener('keydown', function(e){
if (e.key === 'Escape' && nav.classList.contains('is-open')) {
closeMenu();
toggle.focus();
}
});
nav.addEventListener('click', function(e){
if (e.target.tagName === 'A' && window.matchMedia('(max-width: 819px)').matches) {
closeMenu();
}
});
document.addEventListener('click', function(e){
if (!nav.contains(e.target) && !toggle.contains(e.target) && nav.classList.contains('is-open')) {
closeMenu();
}
});
// Filtre des univers de lecture
var filtre = document.getElementById('filtre-univers');
var items = document.querySelectorAll('#liste-univers > li');
var statut = document.getElementById('filtre-statut');
filtre.addEventListener('input', function(){
var terme = filtre.value.trim().toLowerCase();
var visibles = 0;
items.forEach(function(li){
var texte = li.textContent.toLowerCase();
var correspond = texte.indexOf(terme) !== -1;
li.style.display = correspond ? '' : 'none';
if (correspond) visibles++;
});
statut.textContent = visibles + ' univers affiché' + (visibles > 1 ? 's' : '') + ' sur ' + items.length;
});
// Formulaire newsletter
var form = document.getElementById('form-newsletter');
var confirmMsg = document.getElementById('form-confirm');
form.addEventListener('submit', function(e){
e.preventDefault();
var email = document.getElementById('email-newsletter');
if (!email.checkValidity()) {
confirmMsg.textContent = 'Merci de renseigner une adresse e-mail valide.';
return;
}
confirmMsg.textContent = 'Inscription confirmée : surveillez votre boîte de réception.';
form.reset();
});
// Année courante
document.getElementById('annee-courante').textContent = new Date().getFullYear();
})();
</script>
</body>
</html>
