<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Kit de Survie Pratique – La Planque</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- HEADER : logo + menu -->
  <header class="site-header">
    <div class="site-header-inner">
      <a href="#top" class="site-logo">
        <!-- Remplace logo.png par ton vrai fichier -->
        <img src="logo.png" alt="kitdesurviepratique.fr">
      </a>
      <nav class="main-nav" aria-label="Navigation principale">
        <a href="#top" class="nav-link">Accueil</a>
        <a href="#ksp-main-article" class="nav-link">Article de base</a>
        <a href="#ksp-start-here" class="nav-link">Par où commencer</a>
        <a href="#ksp-latest-title" class="nav-link">Derniers articles</a>
        <a href="#contact" class="nav-link">Contact</a>
      </nav>
    </div>
  </header>

  <!-- CONTENU PRINCIPAL -->
  <main id="top" class="ksp-page">

    <!-- HERO + MAIN ARTICLE ABOVE THE FOLD -->
    <section class="ksp-hero" aria-labelledby="ksp-hero-title">
      <div class="ksp-hero-inner">

        <div class="ksp-hero-text">
          <p class="ksp-eyebrow">kitdesurviepratique.fr</p>
          <h1 id="ksp-hero-title" class="ksp-hero-title">
            Et si demain tout partait en vrille…<br>tu serais prêt&nbsp;?
          </h1>
          <p class="ksp-hero-subtitle">
            Ici, pas de délire apocalyptique. Juste des infos concrètes pour
            être moins vulnérable face aux pannes, coupures, galères et “oh merde”
            du quotidien.
          </p>

          <div class="ksp-hero-actions">
            <a href="#ksp-main-article" class="ksp-btn ksp-btn-primary">
              Commencer par l’article de base
            </a>
            <a href="#ksp-start-here" class="ksp-btn ksp-btn-ghost">
              Voir le plan en 3 étapes
            </a>
          </div>
        </div>

        <div class="ksp-hero-highlight" aria-hidden="true">
          <div class="ksp-hero-highlight-card">
            <p class="ksp-hero-highlight-eyebrow">Ton kit, ta vie plus simple</p>
            <p class="ksp-hero-highlight-text">
              Un kit, quelques routines, et tu arrêtes de subir les galères
              comme tout le monde.
            </p>
            <ul class="ksp-hero-list">
              <li>✔ Checklists claires</li>
              <li>✔ Matos utile (pas de gadgets débiles)</li>
              <li>✔ Histoires vraies, pas de théorie en l’air</li>
            </ul>
          </div>
        </div>

      </div>
    </section>

    <!-- MAIN ARTICLE FEATURE -->
    <section id="ksp-main-article" class="ksp-main-article" aria-labelledby="ksp-main-article-title">
      <div class="ksp-section-inner">
        <article class="ksp-article-card">
          <header class="ksp-article-header">
            <p class="ksp-label">Point de départ</p>
            <h2 id="ksp-main-article-title" class="ksp-article-title">
              Pourquoi préparer un kit de survie&nbsp;?
            </h2>
          </header>
          <div class="ksp-article-body">
            <p>
              Préparer un kit de survie, ce n’est pas se prendre pour un héros de série.
              C’est juste accepter un truc simple&nbsp;: parfois, la vie déraille. Coupure
              de courant, panne d’eau, blocage, déplacement forcé… et tu peux soit subir,
              soit être un peu prêt.
            </p>
            <p>
              Cet article pose les bases&nbsp;: ce que “survie” veut dire dans la vraie vie,
              ce que ton kit doit (et ne doit pas) contenir, et comment rester pragmatique
              sans tomber dans la parano.
            </p>
          </div>
          <footer class="ksp-article-footer">
            <a href="/pourquoi-preparer-un-kit-de-survie/" class="ksp-btn-link">
              Lire l’article complet &rarr;
            </a>
          </footer>
        </article>
      </div>
    </section>

    <!-- 3-STEP “START HERE” -->
    <section id="ksp-start-here" class="ksp-start" aria-labelledby="ksp-start-title">
      <div class="ksp-section-inner">
        <header class="ksp-section-header">
          <p class="ksp-label">Plan simple</p>
          <h2 id="ksp-start-title">Par où commencer sans se prendre la tête&nbsp;?</h2>
          <p class="ksp-section-intro">
            Trois blocs, pas plus&nbsp;: comprendre, préparer le minimum, puis améliorer
            quand tu veux. Tu peux déjà être mieux préparé ce soir.
          </p>
        </header>

        <div class="ksp-start-grid">
          <article class="ksp-start-card">
            <p class="ksp-start-step">Étape 1</p>
            <h3>Comprendre les risques “réalistes”</h3>
            <p>
              On ne part pas sur une invasion extraterrestre. On parle coupures de courant,
              eau, transport, santé, météo. Le basique, mais bien fait.
            </p>
            <a href="#" class="ksp-card-link">Voir les bases &rarr;</a>
          </article>

          <article class="ksp-start-card">
            <p class="ksp-start-step">Étape 2</p>
            <h3>Monter ton kit de survie “pratique”</h3>
            <p>
              Un kit que tu peux vraiment porter, utiliser et ranger chez toi. Sans te ruiner,
              sans matériel inutile.
            </p>
            <a href="#" class="ksp-card-link">Préparer ton kit &rarr;</a>
          </article>

          <article class="ksp-start-card">
            <p class="ksp-start-step">Étape 3</p>
            <h3>Installer 2–3 routines qui tiennent</h3>
            <p>
              Contrôle des stocks, rotation, petites habitudes. Ce qui fait la différence
              le jour où ça déraille.
            </p>
            <a href="#" class="ksp-card-link">Mettre en place les routines &rarr;</a>
          </article>
        </div>
      </div>
    </section>

    <!-- CATEGORY SECTIONS -->
    <section class="ksp-section" aria-labelledby="ksp-terrain-title">
      <div class="ksp-section-inner">
        <header class="ksp-section-header">
          <p class="ksp-label">Contenus pratiques</p>
          <h2 id="ksp-terrain-title">Terrain miné d’infos utiles</h2>
          <p class="ksp-section-intro">
            Des articles concrets pour gérer les pannes, coupures et galères sans drama.
          </p>
        </header>

        <div class="ksp-grid">
          <article class="ksp-grid-card">
            <p class="ksp-grid-tag">Électricité</p>
            <h3>Que faire avant, pendant et après une coupure de courant&nbsp;?</h3>
            <p>
              Checklist simple pour éviter de finir au froid, dans le noir, en stress complet.
            </p>
            <a href="#" class="ksp-card-link">Lire &rarr;</a>
          </article>

          <article class="ksp-grid-card">
            <p class="ksp-grid-tag">Eau & hygiène</p>
            <h3>Stocker de l’eau sans transformer ton salon en bunker</h3>
            <p>
              Les bons contenants, les bonnes quantités, sans se compliquer la vie.
            </p>
            <a href="#" class="ksp-card-link">Lire &rarr;</a>
          </article>

          <article class="ksp-grid-card">
            <p class="ksp-grid-tag">Déplacements</p>
            <h3>Préparer un sac “au cas où” réaliste</h3>
            <p>
              Ni sac militaire de 30 kg, ni tote bag. Un vrai sac utile si tu dois partir.
            </p>
            <a href="#" class="ksp-card-link">Lire &rarr;</a>
          </article>
        </div>
      </div>
    </section>

    <section class="ksp-section ksp-section-alt" aria-labelledby="ksp-point-entree-title">
      <div class="ksp-section-inner">
        <header class="ksp-section-header">
          <p class="ksp-label">Histoires & déclics</p>
          <h2 id="ksp-point-entree-title">Point d’entrée — faites comme si tout était normal</h2>
          <p class="ksp-section-intro">
            Des histoires vraies et des moments où “tout allait bien”… jusqu’à ce que non.
          </p>
        </header>

        <div class="ksp-grid">
          <article class="ksp-grid-card">
            <p class="ksp-grid-tag">Histoire vraie</p>
            <h3>Le jour où l’ascenseur est resté bloqué 2 heures</h3>
            <p>
              Et comment un simple kit “ridicule” a fait toute la différence.
            </p>
            <a href="#" class="ksp-card-link">Lire &rarr;</a>
          </article>

          <article class="ksp-grid-card">
            <p class="ksp-grid-tag">Retour d’expérience</p>
            <h3>Cet hiver où le chauffage a lâché un dimanche soir</h3>
            <p>
              Ce qui a sauvé la soirée, ce qui a clairement manqué.
            </p>
            <a href="#" class="ksp-card-link">Lire &rarr;</a>
          </article>

          <article class="ksp-grid-card">
            <p class="ksp-grid-tag">Réflexion</p>
            <h3>Pourquoi “je verrai plus tard” finit mal</h3>
            <p>
              Le vrai coût de ne jamais anticiper. Spoiler&nbsp;: ce n’est pas que l’argent.
            </p>
            <a href="#" class="ksp-card-link">Lire &rarr;</a>
          </article>
        </div>
      </div>
    </section>

    <!-- REVIEWS & GEAR -->
    <section class="ksp-section" aria-labelledby="ksp-reviews-title">
      <div class="ksp-section-inner">
        <header class="ksp-section-header">
          <p class="ksp-label">Matériel & avis</p>
          <h2 id="ksp-reviews-title">Reviews & Tests</h2>
          <p class="ksp-section-intro">
            Des tests honnêtes, sans drama, pour choisir du matériel utile sans te ruiner.
          </p>
        </header>

        <div class="ksp-grid">
          <article class="ksp-grid-card">
            <p class="ksp-grid-tag">Éclairage</p>
            <h3>3 lampes fiables pour les coupures</h3>
            <p>
              On compare autonomie, solidité, prix, sans jargon inutile.
            </p>
            <a href="#" class="ksp-card-link">Voir le test &rarr;</a>
          </article>

          <article class="ksp-grid-card">
            <p class="ksp-grid-tag">Eau</p>
            <h3>Filtres à eau&nbsp;: ce qui vaut le coup</h3>
            <p>
              Les options simples pour ne pas te prendre la tête en cas de souci.
            </p>
            <a href="#" class="ksp-card-link">Voir le test &rarr;</a>
          </article>

          <article class="ksp-grid-card">
            <p class="ksp-grid-tag">Sac</p>
            <h3>Choisir un sac “au cas où” sans te ruiner</h3>
            <p>
              On regarde confort, capacité et durabilité, pas juste le marketing.
            </p>
            <a href="#" class="ksp-card-link">Voir le test &rarr;</a>
          </article>
        </div>
      </div>
    </section>

    <!-- NEWSLETTER CTA -->
    <section class="ksp-newsletter" aria-labelledby="ksp-newsletter-title">
      <div class="ksp-section-inner">
        <div class="ksp-newsletter-card">
          <div class="ksp-newsletter-text">
            <p class="ksp-label">Rester un coup d’avance</p>
            <h2 id="ksp-newsletter-title">Le petit mail qui t’évite des grosses galères</h2>
            <p>
              Un email de temps en temps avec une idée simple, un rappel utile ou une mini-checklist.
              Pas de spam, pas de bullshit, pas de “24h pour acheter”.
            </p>
          </div>
          <form class="ksp-newsletter-form">
            <!-- Remplace plus tard par ton vrai outil d’email -->
            <label class="ksp-visually-hidden" for="ksp-email">Adresse email</label>
            <input id="ksp-email" type="email" placeholder="ton.email@example.com" required>
            <button type="submit">Recevoir les mises à jour</button>
          </form>
        </div>
      </div>
    </section>

    <!-- LATEST ARTICLES – VRAIS ARTICLES -->
    <section class="ksp-section ksp-section-alt" aria-labelledby="ksp-latest-title">
      <div class="ksp-section-inner">
        <header class="ksp-section-header">
          <p class="ksp-label">Nouveaux contenus</p>
          <h2 id="ksp-latest-title">Les derniers articles</h2>
          <p class="ksp-section-intro">
            Quand tu reviens, tu peux commencer par ici.
          </p>
        </header>

        <div class="ksp-grid ksp-grid-latest">

          <!-- Article 1 -->
          <article class="ksp-grid-card">
            <p class="ksp-grid-tag">Point de départ</p>
            <h3>Pourquoi préparer un kit de survie&nbsp;?</h3>
            <p>
              Parce que la vie adore te balancer des petites merdes au pire moment possible :
              panne géante, inondation, coupure réseau, blackout… Tu peux subir, ou être un
              minimum prêt sans devenir parano. Cet article pose les bases sans drama.
            </p>
            <a href="/pourquoi-preparer-un-kit-de-survie/" class="ksp-card-link">
              Lire l’article &rarr;
            </a>
          </article>

          <!-- Article 2 -->
          <article class="ksp-grid-card">
            <p class="ksp-grid-tag">Préparation concrète</p>
            <h3>Se préparer à une situation d’urgence : ce qu’il faut vraiment faire</h3>
            <p>
              On prend le plan officiel du gouvernement, on enlève le jargon et les PDF imbuvables,
              on garde ce qui sert vraiment. Tu ressors avec une liste claire et actionnable que
              tu peux mettre en place en une soirée, sans te cramer le cerveau.
            </p>
            <a href="/se-preparer-a-une-situation-durgence-ce-quil-faut-vraiment-faire/"
               class="ksp-card-link">
              Lire l’article &rarr;
            </a>
          </article>

        </div>
      </div>
    </section>

    <!-- CONTACT -->
    <section class="ksp-contact" id="contact" aria-labelledby="ksp-contact-title">
      <div class="ksp-section-inner">
        <h2 id="ksp-contact-title">Me contacter</h2>
        <p>
          Une question, une remarque, une histoire de galère à partager&nbsp;?<br>
          Tu peux m’écrire à :
          <a href="mailto:ton.email@example.com">ton.email@example.com</a>
        </p>
      </div>
    </section>

  </main>

  <!-- FOOTER GLOBAL -->
  <footer class="site-footer">
    <div class="site-footer-inner">
      <div class="site-footer-left">
        <p>© 2026 kitdesurviepratique.fr. Tous droits réservés.</p>
        <p class="site-footer-links">
          <a href="/mentions-legales">Mentions légales</a>
          <span aria-hidden="true">·</span>
          <a href="/contact">Contact</a>
        </p>
      </div>
      <p class="site-footer-amazon">
        Ce site participe au Programme Partenaires Amazon EU, un programme d’affiliation conçu
        pour permettre à des sites de percevoir une rémunération grâce à la création de liens
        vers Amazon.fr.
      </p>
    </div>
  </footer>

</body>
</html>
/* KSP : cartes derniers articles */
.latest-posts {
  padding: 40px 0;
}

.latest-posts h2 {
  margin-bottom: 20px;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.post-card {
  background: #ffffff;
  padding: 20px;
  border: 1px solid #dddddd;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.post-card h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.post-card p {
  margin: 0;
}
/* --- Latest Posts → Cards clean --- */
.wp-block-latest-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.wp-block-latest-posts__post-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: .5rem;
  display: block;
}

.wp-block-latest-posts__post-excerpt {
  font-size: .95rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  color: #444;
}

/* Card style */
.wp-block-latest-posts > li {
  list-style: none;
  padding: 1.5rem;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.07);
  transition: transform .2s ease, box-shadow .2s ease;
}

.wp-block-latest-posts > li:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.10);
}
/* === Cartes pour "Articles prioritaires" sur La Planque === */

.ksp-article-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}

.ksp-article-item {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ksp-article-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

.ksp-article-item .ksp-article-meta h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}

.ksp-article-item .ksp-article-meta h3 a {
  text-decoration: none;
}

.ksp-article-item .ksp-article-meta h3 a:hover {
  text-decoration: underline;
}

.ksp-article-item .ksp-tag {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: #0B6835;
  color: #ffffff;
}

.ksp-article-item .ksp-why {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333;
}
/* Forcer les cartes dans "Articles prioritaires" */

.ksp-page #articles .ksp-article-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}

.ksp-page #articles .ksp-article-item {
  background: #ffffff !important;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ksp-page #articles .ksp-article-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.16);
}

.ksp-page #articles .ksp-article-item .ksp-article-meta h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}

.ksp-page #articles .ksp-article-item .ksp-article-meta h3 a {
  text-decoration: none;
}

.ksp-page #articles .ksp-article-item .ksp-article-meta h3 a:hover {
  text-decoration: underline;
}

.ksp-page #articles .ksp-article-item .ksp-tag {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: #0B6835;
  color: #ffffff;
}

.ksp-page #articles .ksp-article-item .ksp-why {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333;
}
