otrio-web/rules.html at main · seb16120/otrio-web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="theme-color" content="#0f1430">
  <meta name="description" content="Les règles du duel Otrio à deux joueurs et quatre couleurs."><title>Otrio — Règles</title><link rel="icon" href="favicon.svg" type="image/svg+xml">
  <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=Inter:wght@500;600;700;800;900&display=swap" rel="stylesheet"><link rel="stylesheet" href="styles.css?v=4">
</head>
<body>
  <div class="site-shell">
    <header class="site-header"><a class="brand" href="index.html"><span class="brand-mark" aria-hidden="true"></span><span>Otrio</span></a><nav class="nav-links"><a aria-current="page" href="rules.html">Règles</a><a href="local.html">Local</a><a href="online.html">Online</a></nav></header>
    <main class="page-main">
      <div class="page-heading"><div><p class="eyebrow">Comprendre en deux minutes</p><h1>Les règles</h1></div><p>Alignez trois cercles d’une même couleur. Chaque joueur dispose de deux réserves distinctes et doit construire ses combinaisons sans les mélanger.</p></div>
      <div class="rules-grid">
        <section class="panel rule-card"><h2>1. Les équipes</h2><p>Le joueur 1 contrôle <strong class="red">rouge</strong> et <strong class="yellow">jaune</strong>. Le joueur 2 contrôle <strong class="blue">bleu</strong> et <strong class="green">vert</strong>. La couleur active alterne à chacun des tours de son propriétaire.</p></section>
        <section class="panel rule-card"><h2>2. Poser une pièce</h2><p>Choisissez un petit, moyen ou grand cercle de la couleur active, puis une case. Une case peut accueillir les trois tailles, mais jamais deux cercles de même taille.</p></section>
        <section class="panel rule-card wide"><h2>3. Trois façons de marquer</h2><ul><li><strong>Même taille :</strong> trois petits, moyens ou grands cercles de la même couleur alignés.</li><li><strong>Crescendo :</strong> un petit, un moyen et un grand de la même couleur alignés, dans n’importe quel ordre.</li><li><strong>Imbrication :</strong> les trois tailles d’une même couleur dans une seule case.</li></ul><p>Les deux couleurs d’un joueur ne peuvent jamais être mélangées pour former une combinaison gagnante.</p></section>
        <section class="panel rule-card"><h2>4. Gagner le match</h2><p>Chaque combinaison rapporte un point et réinitialise le plateau. Le premier joueur à atteindre le score cible — 1, 3 ou 5 — remporte le match.</p></section>
        <section class="panel rule-card"><h2>5. Partie nulle</h2><p>Si aucun coup légal ne reste, la manche est déclarée nulle. Aucun joueur ne marque et le joueur de départ alterne pour la manche suivante.</p></section>
      </div>
      <div class="hero-actions" style="margin-top:26px"><a class="button" href="online.html">Jouer en ligne</a><a class="button secondary" href="local.html">Jouer en local</a></div>
    </main>
  </div>
</body>
</html>