index.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Le Grand Manuel du Savoir Utile — édition publique</title>
<link rel="icon" type="image/png" href="assets/favicon.png">
<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=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
  :root{
    --paper:#f7f5ef;
    --paper-raised:#fffefb;
    --ink:#252220;
    --ink-soft:#544e49;
    --line:#ddd6c9;
    --brick:#8a3b2f;
    --brick-dark:#6e2e24;
    --serif:'Source Serif 4', serif;
    --sans:'Inter', sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper); color:var(--ink); font-family:var(--sans);
    line-height:1.6; -webkit-font-smoothing:antialiased;
    background-image:
      radial-gradient(circle at 1px 1px, rgba(37,34,32,.05) 1px, transparent 0);
    background-size:28px 28px;
  }
  a{color:inherit;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
  @media (max-width:680px){ .wrap{padding:0 20px;} }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  }

  /* ---------- topbar ---------- */
  .topbar{border-bottom:1px solid var(--line); background:var(--paper);}
  .topbar .wrap{height:76px; display:flex; align-items:center; justify-content:space-between;}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
  .brand img{transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
  .brand:hover img{transform:rotate(-6deg) scale(1.05);}
  .brand .mark{
    width:34px; height:34px; border:1.6px solid var(--ink); border-radius:2px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--serif); font-weight:700; font-size:13px; letter-spacing:-0.5px;
  }
  .brand .name{font-family:var(--serif); font-weight:600; font-size:19px;}
  .brand .sub{font-size:11.5px; color:var(--ink-soft); margin-top:1px;}
  nav{display:flex; gap:30px; font-size:14.5px; font-weight:500;}
  nav a{text-decoration:none; color:var(--ink-soft); transition:color .15s;}
  nav a:hover{color:var(--ink);}
  @media (max-width:760px){ nav{display:none;} }
  .nav-cta{
    background:var(--ink); color:var(--paper); font-size:13.5px; font-weight:600;
    padding:9px 16px; border-radius:3px; text-decoration:none;
  }

  /* ---------- hero ---------- */
  .hero{padding:80px 0 64px; border-bottom:1px solid var(--line); overflow:hidden;}
  .hero-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:56px; align-items:end;}
  @media (max-width:820px){ .hero-grid{grid-template-columns:1fr; gap:36px;} }
  .kicker{
    font-size:13.5px; color:var(--brick); font-weight:600; margin-bottom:18px;
    letter-spacing:.02em;
  }
  h1{
    font-family:var(--serif); font-weight:700; letter-spacing:-0.01em;
    font-size:clamp(34px,5.4vw,54px); line-height:1.08;
    opacity:0; transform:scale(1.03) rotate(-.6deg);
    animation:stampIn .7s cubic-bezier(.2,.8,.3,1) .15s forwards;
  }
  @keyframes stampIn{
    0%{opacity:0; transform:scale(1.06) rotate(-1.2deg);}
    60%{opacity:1; transform:scale(.995) rotate(.15deg);}
    100%{opacity:1; transform:scale(1) rotate(0);}
  }
  .kicker{opacity:0; animation:riseIn .5s ease-out .05s forwards;}
  .hero p.lead{opacity:0; animation:riseIn .5s ease-out .4s forwards;}
  .hero-actions{opacity:0; animation:riseIn .5s ease-out .55s forwards;}
  .hero-stats .stat{opacity:0; animation:riseIn .45s ease-out forwards;}
  .hero-stats .stat:nth-child(1){animation-delay:.5s;}
  .hero-stats .stat:nth-child(2){animation-delay:.62s;}
  .hero-stats .stat:nth-child(3){animation-delay:.74s;}
  @keyframes riseIn{
    from{opacity:0; transform:translateY(8px);}
    to{opacity:1; transform:translateY(0);}
  }
  @media (prefers-reduced-motion: reduce){
    h1, .kicker, .hero p.lead, .hero-actions, .hero-stats .stat{opacity:1; animation:none; transform:none;}
  }
  .hero p.lead{margin-top:22px; font-size:17.5px; color:var(--ink-soft); max-width:56ch;}
  .hero-stats{
    border-left:1px solid var(--line); padding-left:32px;
    display:flex; flex-direction:column; gap:22px;
  }
  @media (max-width:820px){ .hero-stats{border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:28px; flex-direction:row; flex-wrap:wrap;} }
  .stat .n{font-family:var(--serif); font-size:30px; font-weight:700; color:var(--brick);}
  .stat .l{font-size:13px; color:var(--ink-soft); margin-top:2px;}

  .hero-actions{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap;}
  .btn{
    font-weight:600; font-size:14.5px; padding:13px 24px; border-radius:3px;
    text-decoration:none; display:inline-block; border:1.4px solid var(--ink);
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  }
  .btn-solid{background:var(--ink); color:var(--paper);}
  .btn-line{background:transparent; color:var(--ink);}
  .btn-solid:hover{background:transparent; color:var(--ink); transform:translateY(-2px); box-shadow:3px 3px 0 var(--line);}
  .btn-line:hover{background:var(--ink); color:var(--paper); transform:translateY(-2px); box-shadow:3px 3px 0 var(--line);}
  .btn:active{transform:translateY(0); box-shadow:none;}

  /* ---------- section ---------- */
  section{padding:64px 0;}
  section.story{padding:80px 0;}
  section#licence-lead{padding:48px 0 64px;}
  section#apercu-volumes{padding:70px 0 60px;}
  .section-head{margin-bottom:44px; max-width:640px;}
  .section-head .kicker{margin-bottom:12px;}
  .section-head h2{font-family:var(--serif); font-size:clamp(24px,3vw,32px); font-weight:600;}
  .section-head p{color:var(--ink-soft); font-size:15.5px; margin-top:12px;}

  /* ---------- pourquoi ---------- */
  .why-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
  @media (max-width:760px){ .why-grid{grid-template-columns:1fr;} }
  .why-card{background:var(--paper); padding:30px 28px; transition:background .2s ease;}
  .why-card:hover{background:var(--paper-raised);}
  .why-card.tall{padding-bottom:36px;}
  .why-card .glyph{
    font-family:var(--serif); font-size:26px; color:var(--brick); font-weight:700; margin-bottom:14px;
    display:inline-block; transition:transform .2s ease;
  }
  .why-card:hover .glyph{transform:translateX(3px);}
  .why-card h3{font-family:var(--serif); font-size:18px; font-weight:600; margin-bottom:10px;}
  .why-card p{font-size:14.5px; color:var(--ink-soft);}

  /* ---------- histoire ---------- */
  .story{background:var(--paper-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .story-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px;}
  @media (max-width:820px){ .story-grid{grid-template-columns:1fr;} }
  .story-grid h2{font-family:var(--serif); font-size:clamp(24px,3vw,32px); font-weight:600; max-width:9ch;}
  .story-text p{color:var(--ink-soft); font-size:15.5px; margin-bottom:16px; max-width:60ch;}
  .story-text strong{color:var(--ink);}

  /* ---------- collection preview ---------- */
  .vol-list{border-top:1px solid var(--line);}
  .vol-row{
    display:grid; grid-template-columns:56px 1fr auto auto; gap:20px; align-items:center;
    padding:22px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink);
    transition:padding-left .2s ease, background .2s ease;
  }
  @media (max-width:640px){ .vol-row{grid-template-columns:40px 1fr; row-gap:8px;} .vol-row .vol-pages{display:none;} }
  .vol-row:hover{padding-left:10px; background:var(--paper-raised);}
  .vol-num{
    font-family:var(--serif); font-size:22px; font-weight:700; color:var(--brick);
    text-align:center;
  }
  .vol-title{font-family:var(--serif); font-size:17px; font-weight:600;}
  .vol-title .sub{font-family:var(--sans); font-weight:400; font-size:13.5px; color:var(--ink-soft); display:block; margin-top:4px; line-height:1.5;}
  .vol-pages{font-size:12px; color:var(--ink-soft); white-space:nowrap; border:1px solid var(--line); border-radius:12px; padding:4px 10px;}
  .vol-arrow{font-size:20px; color:var(--ink-soft); transition:transform .2s ease;}
  .vol-row:hover .vol-arrow{transform:translateX(4px); color:var(--brick);}

  /* ---------- licence band ---------- */
  .band{background:var(--ink); color:var(--paper); padding:64px 0;}
  .band-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:center;}
  @media (max-width:820px){ .band-grid{grid-template-columns:1fr;} }
  .band h2{font-family:var(--serif); font-size:clamp(24px,3.4vw,34px); font-weight:600;}
  .band p{color:#d8d3c8; font-size:15px; margin-top:14px; max-width:52ch;}
  .band .btn-solid{background:var(--brick); border-color:var(--brick); color:#fff;}
  .band .btn-solid:hover{background:transparent; color:var(--brick);}
  .band .btn-line{border-color:#5a544d; color:var(--paper);}
  .band .btn-line:hover{background:var(--paper); color:var(--ink);}

  /* ---------- footer ---------- */
  footer{padding:36px 0;}
  footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
  footer .fine{font-size:13px; color:var(--ink-soft);}

  a:focus-visible, button:focus-visible{outline:2px solid var(--brick); outline-offset:2px;}
</style>
</head>
<body>

<div class="topbar">
  <div class="wrap">
    <a class="brand" href="index.html">
      <img src="assets/logo.svg" alt="Logo GMSU" style="width:34px; height:34px; display:block;">
      <span>
        <span class="name" style="display:block;">Grand Manuel du Savoir Utile</span>
        <span class="sub">édition publique — ResonLab</span>
      </span>
    </a>
    <nav>
      <a href="index.html">Découvrir</a>
      <a href="bibliotheque.html">Bibliothèque</a>
      <a href="#licence">Licence</a>
    </nav>
    <a class="nav-cta" href="bibliotheque.html">Voir les volumes</a>
  </div>
</div>

<header class="hero">
  <div class="wrap hero-grid">
    <div>
      <div class="kicker">Repères généraux — édition publique 2026</div>
      <h1>Comprendre un sujet, savoir quelle question poser, et où vérifier.</h1>
      <p class="lead">
        Une collection de fascicules courts sur le système suisse, la mécanique, les sciences,
        le droit et la lecture des chiffres. Pas de conseil, pas de marche à suivre —
        des repères pour s'orienter avant de creuser ou de consulter un professionnel.
      </p>
      <div class="hero-actions">
        <a class="btn btn-solid" href="bibliotheque.html">Parcourir la bibliothèque</a>
        <a class="btn btn-line" href="files/PX_edition_publique_complete.pdf" download>Tout télécharger (1 PDF)</a>
      </div>
    </div>
    <div class="hero-stats">
      <div class="stat"><div class="n">10</div><div class="l">fascicules publics, thème par thème</div></div>
      <div class="stat"><div class="n">62</div><div class="l">pages au total dans l'édition complète</div></div>
      <div class="stat"><div class="n">CC BY-NC-SA</div><div class="l">libre de lecture, de copie et de partage</div></div>
    </div>
  </div>
</header>

<section>
  <div class="wrap">
    <div class="section-head">
      <div class="kicker">Ce que ce n'est pas</div>
      <h2>Des repères, pas des conseils</h2>
      <p>Trois règles suivies dans tous les volumes, pour ne jamais confondre un point de repère avec une décision à prendre.</p>
    </div>
    <div class="why-grid">
      <div class="why-card tall">
        <div class="glyph">01</div>
        <h3>Savoir où chercher</h3>
        <p>Chaque repère indique la source officielle à vérifier plutôt que d'affirmer un chiffre figé. Par exemple, le volume sur le droit ne dit pas « la garantie dure deux ans » sans préciser où ça vient : il renvoie à l'article du Code des obligations, sur fedlex.admin.ch, gratuit et à jour.</p>
      </div>
      <div class="why-card">
        <div class="glyph">02</div>
        <h3>Aucun conseil personnalisé</h3>
        <p>Les situations réelles ont des détails qu'un document général ne couvre jamais.</p>
      </div>
      <div class="why-card">
        <div class="glyph">03</div>
        <h3>Daté et assumé</h3>
        <p>Les chiffres et seuils de l'édition 2026 changeront. La logique, elle, reste.</p>
      </div>
    </div>
  </div>
</section>

<section class="story" id="histoire">
  <div class="wrap story-grid">
    <h2>D'où vient cette collection</h2>
    <div class="story-text">
      <p>
        <strong>Le Grand Manuel du Savoir Utile</strong> est d'abord un document de travail personnel,
        écrit pour rassembler à un seul endroit des repères qu'on cherche sans arrêt : comment lire
        une référence légale, ce que veut dire une ligne sur un décompte, quelles sont les bonnes
        questions à poser avant une décision.
      </p>
      <p>
        Cette page ne présente que l'<strong>édition publique</strong> de la collection : les volumes
        pensés dès le départ pour être lus par n'importe qui, sans enjeu de confidentialité.
        Une partie plus personnelle de la collection (santé, fiscalité détaillée, droit privé)
        reste hors de cette édition — elle n'a pas sa place dans un espace public.
      </p>
      <p>
        Le projet est proposé par <strong>ResonLab</strong>, qui développe par ailleurs des petits
        logiciels métier pour indépendants — sans compte, sans abonnement, sans cloud.
      </p>
    </div>
  </div>
</section>

<section id="apercu-volumes">
  <div class="wrap">
    <div class="section-head">
      <div class="kicker">Aperçu</div>
      <h2>Les dix volumes de l'édition publique</h2>
      <p>Le détail de chaque fascicule, avec deux façons de le lire, se trouve dans la bibliothèque.</p>
    </div>
    <div class="vol-list">
      <a class="vol-row" href="bibliotheque.html#p0">
        <div class="vol-num">0</div>
        <div class="vol-title">L'essentiel<span class="sub">Sept repères qui reviennent tout le temps : lire une référence légale, situer les institutions, connaître les constantes utiles — condensé en deux pages, à garder sous la main.</span></div>
        <div class="vol-pages">2 p.</div>
        <div class="vol-arrow">→</div>
      </a>
      <a class="vol-row" href="bibliotheque.html#p1">
        <div class="vol-num">1</div>
        <div class="vol-title">Repères administratifs<span class="sub">Qui prélève quoi entre Confédération, canton et commune, le calendrier fiscal type, les déductions qu'on oublie, et les chiffres AVS/LAMal vérifiés pour 2026.</span></div>
        <div class="vol-pages">11 p.</div>
        <div class="vol-arrow">→</div>
      </a>
      <a class="vol-row" href="bibliotheque.html#p2">
        <div class="vol-num">2</div>
        <div class="vol-title">Comprendre son véhicule<span class="sub">Le cycle à quatre temps expliqué simplement, essence contre diesel, les grands groupes derrière chaque marque, et les voyants qu'il faut prendre au sérieux.</span></div>
        <div class="vol-pages">9 p.</div>
        <div class="vol-arrow">→</div>
      </a>
      <a class="vol-row" href="bibliotheque.html#p3">
        <div class="vol-num">3</div>
        <div class="vol-title">Notions de droit suisse<span class="sub">Comment se lit un article de loi, les droits fondamentaux de la Constitution, et les articles du Code des obligations qu'on croise vraiment : travail, bail, poursuites.</span></div>
        <div class="vol-pages">13 p.</div>
        <div class="vol-arrow">→</div>
      </a>
      <a class="vol-row" href="bibliotheque.html#p4">
        <div class="vol-num">4</div>
        <div class="vol-title">Sciences et technique<span class="sub">Les constantes qui ne changeront jamais, les formules de physique et d'électricité utiles au quotidien, et les bases pour comprendre son tableau électrique sans le toucher.</span></div>
        <div class="vol-pages">14 p.</div>
        <div class="vol-arrow">→</div>
      </a>
      <a class="vol-row" href="bibliotheque.html#p5">
        <div class="vol-num">5</div>
        <div class="vol-title">Culture et monde<span class="sub">De l'Antiquité à aujourd'hui en une frise commentée, l'histoire suisse en accéléré, et les organisations internationales qu'on entend citer sans toujours savoir ce qu'elles font.</span></div>
        <div class="vol-pages">15 p.</div>
        <div class="vol-arrow">→</div>
      </a>
      <a class="vol-row" href="bibliotheque.html#p6">
        <div class="vol-num">6</div>
        <div class="vol-title">Décoder un document officiel<span class="sub">Fiche de salaire, décompte de caisse maladie, décision de taxation : ce que chaque ligne veut vraiment dire, et où se cache l'erreur la plus fréquente.</span></div>
        <div class="vol-pages">10 p.</div>
        <div class="vol-arrow">→</div>
      </a>
      <a class="vol-row" href="bibliotheque.html#p7">
        <div class="vol-num">7</div>
        <div class="vol-title">Le vocabulaire administratif suisse<span class="sub">Environ deux cents termes classés par domaine, et le chapitre sur les faux amis — ces mots qui changent totalement de sens dans un document officiel.</span></div>
        <div class="vol-pages">10 p.</div>
        <div class="vol-arrow">→</div>
      </a>
      <a class="vol-row" href="bibliotheque.html#p8">
        <div class="vol-num">8</div>
        <div class="vol-title">Vérifier une information<span class="sub">La hiérarchie des sources à connaître, les cinq vérifications de base avant de croire un chiffre, et les signaux qui trahissent une tentative d'escroquerie.</span></div>
        <div class="vol-pages">7 p.</div>
        <div class="vol-arrow">→</div>
      </a>
      <a class="vol-row" href="bibliotheque.html#p9">
        <div class="vol-num">9</div>
        <div class="vol-title">L'informatique du quotidien<span class="sub">Pourquoi la longueur d'un mot de passe compte plus que sa complexité, ce que chiffre vraiment le cadenas du navigateur, et la règle 3-2-1 pour ne jamais perdre une sauvegarde.</span></div>
        <div class="vol-pages">8 p.</div>
        <div class="vol-arrow">→</div>
      </a>
    </div>
  </div>
</section>

<section class="band" id="licence">
  <div class="wrap band-grid">
    <div>
      <h2>Libre de lecture, de copie et de partage</h2>
      <p>
        L'édition publique est distribuée sous licence <strong>CC BY-NC-SA 4.0</strong> :
        vous pouvez la lire, la copier et la redistribuer, à condition de citer la source,
        de ne pas en faire un usage commercial, et de partager toute version modifiée
        sous la même licence.
      </p>
    </div>
    <div class="hero-actions">
      <a class="btn btn-solid" href="bibliotheque.html">Explorer la bibliothèque</a>
      <a class="btn btn-line" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr" target="_blank" rel="noopener">Lire la licence</a>
    </div>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="fine">Le Grand Manuel du Savoir Utile — édition publique 2026 — proposé par ResonLab</div>
    <div class="fine">CC BY-NC-SA 4.0 — sans valeur de conseil professionnel</div>
  </div>
</footer>

</body>
</html>