first commit

.gitignore

@@ -0,0 +1,5 @@
+*~
+*.swp
+*.swo
+.DS_Store
+Thumbs.db

README.md

@@ -0,0 +1,122 @@
+# GeckoBreizh
+
+GeckoBreizh est un ensemble de fiches imprimables pour le suivi d’un **élevage familial de geckos léopards**.
+
+Les documents sont conçus pour conserver les informations utiles au soin, à la traçabilité et à la reproduction, sans imposer de journal quotidien.
+
+## Principe de suivi
+
+- Le **nom de l’animal sert d’identifiant** dans tous les documents et doit rester unique dans l’élevage.
+- Les gestes de routine ne sont pas notés lorsqu’il n’y a rien de particulier à signaler.
+- Une nouvelle fiche est créée lorsqu’un événement, une nouvelle année ou une modification importante le justifie.
+- Les anciennes fiches sont conservées afin de garder l’historique de l’animal et de son installation.
+
+## Documents
+
+| Document | Usage | Rythme |
+| --- | --- | --- |
+| **Identité** | origine et informations durables de l’animal | une fiche par animal |
+| **Suivi** | poids, alimentation, supplémentation, mue, selles, observations et soins | une fiche par animal et par année ; plusieurs exemplaires si besoin |
+| **Santé** | problème de santé, consultation, traitement et évolution | une fiche par événement significatif |
+| **Reproduction** | couple, ovulation, accouplements, pontes, incubation et jeunes | une fiche par couple et par saison |
+| **Installation** | configuration du terrarium et maintenance UVB | une fiche par installation ou modification importante |
+| **Éclairage annuel** | programmation mensuelle des éclairages | une fiche par terrarium et par année |
+
+### Identité
+
+`src/templates/fiche_gecko_modele.html` sert de modèle pour créer la fiche d’un nouvel animal. `src/geckos/delta.html` est la fiche de Delta.
+
+Pour créer une fiche :
+
+```bash
+cp src/templates/fiche_gecko_modele.html src/geckos/nom_du_gecko.html
+```
+
+Ajouter ensuite la photo dans `assets/images/`, puis modifier dans le HTML le nom, les informations de l’animal, le chemin de l’image et son attribut `alt`.
+
+### Suivi
+
+`src/suivi/suivi_gecko.html`
+
+Fiche **A4 portrait** organisée par animal et par année. Une ligne est renseignée lorsqu’un élément mérite d’être conservé : date, poids, alimentation ou supplément, mue, selles, observation ou soin.
+
+Les colonnes **Mue** et **Selles** peuvent recevoir une coche ou une mention courte. Les détails éventuels sont notés dans **Observations / soins**.
+
+### Santé
+
+`src/sante/sante.html`
+
+Fiche **A4 portrait** destinée à un événement de santé nécessitant un historique séparé : symptômes, appétit, selles, consultation ou diagnostic, traitement, évolution et contrôle éventuel.
+
+### Reproduction
+
+`src/reproduction/reproduction.html`
+
+Fiche **A4 portrait** par couple et par saison. Elle permet de suivre l’ovulation, les accouplements, les pontes, l’incubation, les éclosions et jusqu’à 12 jeunes.
+
+Chaque jeune peut ensuite disposer de sa propre fiche d’identité et de suivi.
+
+### Installation
+
+`src/installation/installation.html`
+
+Fiche **A4 portrait** consacrée à la configuration du terrarium : dimensions, substrat, ventilation, chauffage, thermostat, UVB, températures cibles et modifications importantes.
+
+En cas de changement majeur de configuration ou d’occupant, archiver la fiche précédente et en commencer une nouvelle.
+
+### Éclairage annuel
+
+`src/installation/eclairage_annuel.html`
+
+Fiche **A4 paysage** contenant les horaires mensuels des programmateurs, les cases de validation des réglages et les contrôles liés aux changements d’heure été/hiver.
+
+## Impression et PDF
+
+Les fiches sont conçues pour une **impression laser noir et blanc**. L’affichage dans Firefox correspond au document destiné à être imprimé.
+
+Pour imprimer ou créer un PDF :
+
+1. Ouvrir le fichier HTML dans Firefox.
+2. Faire `Ctrl+P`.
+3. Utiliser une échelle de **100 %**.
+4. Activer **Imprimer les arrière-plans** dans les paramètres supplémentaires.
+5. Vérifier le format **A4** et l’orientation : portrait pour toutes les fiches sauf **Éclairage annuel**, en paysage.
+6. Imprimer ou choisir **Enregistrer au format PDF**.
+
+Le dossier `pdf/` contient des versions prêtes à imprimer des fiches courantes. Les fichiers HTML/CSS restent les fichiers à modifier.
+
+## Arborescence
+
+```text
+GeckoBreizh/
+├── README.md
+├── assets/
+│   ├── css/
+│   │   └── style.css
+│   └── images/
+│       ├── delta.jpg
+│       └── photo_modele.svg
+├── src/
+│   ├── geckos/
+│   │   └── delta.html
+│   ├── suivi/
+│   │   └── suivi_gecko.html
+│   ├── sante/
+│   │   └── sante.html
+│   ├── reproduction/
+│   │   └── reproduction.html
+│   ├── installation/
+│   │   ├── installation.html
+│   │   └── eclairage_annuel.html
+│   └── templates/
+│       └── fiche_gecko_modele.html
+└── pdf/
+    ├── delta.pdf
+    ├── suivi_gecko.pdf
+    ├── sante.pdf
+    ├── reproduction.pdf
+    ├── installation.pdf
+    └── eclairage_annuel.pdf
+```
+
+La mise en page commune est définie dans `assets/css/style.css`.

assets/css/style.css

@@ -0,0 +1,605 @@
+/*
+  GeckoBreizh - charte graphique commune
+  ------------------------------------
+  Charte unique conçue pour l'impression papier en A4.
+  L'affichage HTML reprend volontairement le rendu imprimé.
+*/
+
+:root {
+  --ink: #000000;
+  --muted: #333333;
+  --line: #666666;
+  --grid: #555555;
+  --table-head: #dedede;
+  --radius: 3mm;
+  --write-short: 8mm;
+  --write-standard: 10mm;
+  --write-roomy: 15mm;
+  --font: "Noto Sans", "DejaVu Sans", Arial, sans-serif;
+}
+
+* { box-sizing: border-box; }
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: #ffffff;
+  color: var(--ink);
+  font-family: var(--font);
+}
+
+body {
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+
+/* Toutes les fiches sont en A4 portrait, sauf l'éclairage annuel. */
+@page { size: A4 portrait; margin: 0; }
+@page lighting { size: A4 landscape; margin: 0; }
+
+.animal-sheet,
+.followup-sheet,
+.health-sheet,
+.installation-sheet,
+.reproduction-sheet {
+  width: 210mm;
+  height: 297mm;
+}
+
+.animal-sheet,
+.followup-sheet,
+.health-sheet,
+.installation-sheet {
+  padding: 14mm 16mm;
+}
+
+.reproduction-sheet { padding: 10mm 16mm; }
+
+.lighting-sheet {
+  page: lighting;
+  width: 297mm;
+  height: 210mm;
+  padding: 10mm 13mm 9mm;
+}
+
+/* ----- Éléments communs ----- */
+.title {
+  margin: 0;
+  color: var(--ink);
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: 0;
+}
+
+.subtitle {
+  margin: 0;
+  color: var(--muted);
+}
+
+.header-rule {
+  margin: 0;
+  border: 0;
+  border-top: .5mm solid var(--grid);
+}
+
+.panel {
+  border: .32mm solid var(--line);
+  border-radius: var(--radius);
+}
+
+.section-title {
+  margin: 0 0 4mm;
+  font-size: 10.4pt;
+  font-weight: 800;
+  letter-spacing: .005em;
+}
+
+.section-note {
+  margin-left: 2mm;
+  color: var(--muted);
+  font-size: 8pt;
+  font-weight: 500;
+  text-transform: none;
+}
+
+.label {
+  color: var(--muted);
+  font-size: 7.7pt;
+  font-weight: 500;
+  letter-spacing: .01em;
+}
+
+.value {
+  color: var(--ink);
+  font-size: 9.6pt;
+  font-weight: 700;
+}
+
+.write-line {
+  display: block;
+  width: 100%;
+  min-height: 5mm;
+  border-bottom: .27mm solid var(--grid);
+}
+
+.meta-field {
+  display: flex;
+  flex-direction: column;
+  gap: 1.1mm;
+  min-width: 0;
+}
+
+.meta-field .label {
+  font-size: 8pt;
+  font-weight: 700;
+}
+
+/* ----- En-têtes portrait ----- */
+.animal-header,
+.followup-header,
+.record-header,
+.installation-header {
+  position: relative;
+  height: 22mm;
+}
+
+.animal-header { height: 21mm; }
+
+.animal-header .title,
+.followup-header .title,
+.record-header .title,
+.installation-header .title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size: 30pt;
+}
+
+.animal-header .subtitle,
+.followup-header .subtitle,
+.record-header .subtitle,
+.installation-header .subtitle {
+  position: absolute;
+  top: 2mm;
+  right: 0;
+  font-size: 10pt;
+}
+
+.animal-header .subtitle { font-style: italic; }
+
+.animal-header .header-rule,
+.followup-header .header-rule,
+.record-header .header-rule,
+.installation-header .header-rule {
+  position: absolute;
+  right: 0;
+  bottom: 1mm;
+  left: 0;
+}
+
+/* ----- Fiche animal ----- */
+.animal-photo {
+  width: 100%;
+  height: 88mm;
+  margin: 7mm 0 0;
+  overflow: hidden;
+  border: .28mm solid var(--line);
+  border-radius: var(--radius);
+}
+
+.animal-photo img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 50% 50%;
+}
+
+.identity {
+  min-height: 47mm;
+  margin-top: 6mm;
+  padding: 5mm 6mm 4.5mm;
+}
+
+.identity-grid {
+  display: grid;
+  grid-template-columns: 39mm 1fr;
+  row-gap: 2.8mm;
+  align-items: baseline;
+}
+
+.origin {
+  min-height: 75mm;
+  margin-top: 5mm;
+  padding: 5mm 7mm;
+}
+
+.origin-item .name {
+  margin: 0;
+  font-size: 10pt;
+  font-weight: 700;
+}
+
+.origin-item .detail {
+  margin: 1.1mm 0 0;
+  color: var(--muted);
+  font-size: 9.4pt;
+}
+
+.origin-item .detail.small { font-size: 8.7pt; }
+
+/* Flèche verticale plus régulière et mieux proportionnée. */
+.origin-arrow {
+  position: relative;
+  width: 12mm;
+  height: 8.2mm;
+  margin: .7mm 0 .9mm 1.1mm;
+}
+
+.origin-arrow::before {
+  content: "";
+  position: absolute;
+  top: .5mm;
+  left: 5.7mm;
+  width: .35mm;
+  height: 4.8mm;
+  background: var(--grid);
+  border-radius: .2mm;
+}
+
+.origin-arrow::after {
+  content: "";
+  position: absolute;
+  top: 4.25mm;
+  left: 4.35mm;
+  width: 2.7mm;
+  height: 2.7mm;
+  border-right: .36mm solid var(--grid);
+  border-bottom: .36mm solid var(--grid);
+  transform: rotate(45deg);
+}
+
+.origin-arrival {
+  margin: 0;
+  font-size: 9.1pt;
+}
+
+/* ----- Tableaux communs ----- */
+.followup-table-wrap,
+.record-table-wrap,
+.schedule-wrap {
+  overflow: hidden;
+  border: .35mm solid var(--grid);
+  border-radius: var(--radius);
+}
+
+.followup-table-wrap { margin-top: 6mm; }
+
+table.followup-table,
+table.record-table,
+table.schedule {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+table.followup-table { font-size: 8.8pt; }
+table.record-table { font-size: 8.6pt; }
+table.schedule { font-size: 9.5pt; }
+
+.followup-table th,
+.record-table th,
+.schedule th {
+  background: var(--table-head);
+  color: var(--ink);
+  font-weight: 800;
+  text-align: center;
+}
+
+.followup-table th,
+.record-table th,
+.schedule th {
+  border-right: .25mm solid #777777;
+}
+
+.followup-table th:last-child,
+.record-table th:last-child,
+.schedule th:last-child {
+  border-right: 0;
+}
+
+.followup-table td,
+.record-table td,
+.schedule td {
+  border-top: .25mm solid var(--grid);
+  border-right: .25mm solid var(--grid);
+}
+
+.followup-table td:last-child,
+.record-table td:last-child,
+.schedule td:last-child {
+  border-right: 0;
+}
+
+/* ----- Fiche de suivi ----- */
+.followup-meta {
+  display: grid;
+  grid-template-columns: 1fr 34mm;
+  gap: 6mm;
+  margin-top: 6mm;
+  padding: 4.3mm 6mm 4.6mm;
+}
+
+.followup-table th {
+  height: 12mm;
+  padding: 1.8mm 1.2mm;
+  font-size: 9pt;
+  line-height: 1.18;
+}
+
+.followup-table td {
+  height: var(--write-roomy);
+  padding: 1.5mm;
+  vertical-align: top;
+}
+
+.followup-table .date { width: 16mm; }
+.followup-table .weight { width: 18mm; }
+.followup-table .food { width: 42mm; }
+.followup-table .moult { width: 16mm; }
+.followup-table .stool { width: 16mm; }
+
+.followup-hint {
+  margin: 4mm 1mm 0;
+  color: var(--muted);
+  font-size: 8.2pt;
+  line-height: 1.4;
+}
+
+/* ----- Installation ----- */
+.installation-meta {
+  display: grid;
+  grid-template-columns: 1.15fr .75fr 1fr;
+  gap: 6mm;
+  margin-top: 6mm;
+  padding: 4.3mm 6mm 4.6mm;
+}
+
+.installation-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 5mm;
+  margin-top: 6mm;
+}
+
+.installation-panel {
+  min-height: 68mm;
+  padding: 5mm 6mm;
+}
+
+.installation-list {
+  display: grid;
+  gap: 2.5mm;
+}
+
+.installation-row {
+  display: flex;
+  flex-direction: column;
+  gap: .7mm;
+}
+
+.installation-row .label { font-size: 8pt; }
+
+.installation-notes {
+  min-height: 64mm;
+  margin-top: 5mm;
+  padding: 5mm 6mm;
+}
+
+.notes-lines {
+  display: grid;
+  gap: 5mm;
+  margin-top: 1mm;
+}
+
+.notes-lines span {
+  display: block;
+  height: 5mm;
+  border-bottom: .24mm solid var(--grid);
+}
+
+/* ----- Santé et reproduction ----- */
+.record-meta {
+  display: grid;
+  gap: 5mm;
+  margin-top: 6mm;
+  padding: 4.3mm 6mm 4.6mm;
+}
+
+.health-meta {
+  grid-template-columns: 1.4fr .8fr .65fr;
+  margin-top: 5mm;
+}
+
+.reproduction-meta {
+  grid-template-columns: 1fr 1fr .85fr;
+  margin-top: 4mm;
+  padding-top: 4mm;
+  padding-bottom: 4.2mm;
+}
+
+.record-panel { padding: 5mm 6mm; }
+
+.health-symptoms {
+  min-height: 44mm;
+  margin-top: 4mm;
+}
+
+.health-context {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6mm;
+  margin-bottom: 2mm;
+}
+
+.record-inline-field {
+  display: flex;
+  flex-direction: column;
+  gap: .8mm;
+  margin-bottom: 2mm;
+}
+
+.record-inline-field .label {
+  font-size: 8pt;
+  font-weight: 700;
+}
+
+.record-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 5mm;
+}
+
+.health-grid { margin-top: 3mm; }
+.health-grid .record-panel { min-height: 53mm; }
+
+.compact-lines { gap: 4mm; }
+.compact-lines span { height: 4mm; }
+
+.record-table-title {
+  margin: 0 0 2.1mm 1mm;
+  font-size: 10.3pt;
+  font-weight: 800;
+  letter-spacing: .005em;
+}
+
+.record-table th {
+  height: var(--write-standard);
+  padding: 1.6mm 1.1mm;
+  font-size: 8.7pt;
+  line-height: 1.15;
+}
+
+.record-table td {
+  height: var(--write-standard);
+  padding: 1.1mm;
+  vertical-align: top;
+}
+
+.health-evolution { margin-top: 3mm; }
+.health-table .health-date { width: 27mm; }
+.health-table .health-weight { width: 24mm; }
+
+.health-outcome {
+  min-height: 28mm;
+  margin-top: 3mm;
+}
+
+.reproduction-section { margin-top: 3mm; }
+.reproduction-section .record-table-title { margin-bottom: 1.3mm; }
+
+.mating-table td,
+.clutch-table td,
+.hatchling-table td {
+  height: var(--write-short);
+}
+
+.mating-table .mating-date { width: 24mm; }
+.mating-table .mating-ovulation { width: 25mm; }
+.mating-table .mating-seen { width: 29mm; }
+
+.clutch-table .clutch-number { width: 11mm; }
+.clutch-table .clutch-date { width: 22mm; }
+.clutch-table .clutch-eggs { width: 15mm; }
+.clutch-table .clutch-status { width: 22mm; }
+.clutch-table .clutch-temp { width: 19mm; }
+.clutch-table .clutch-hatch { width: 23mm; }
+
+.hatchling-table th { height: 8.7mm; }
+.hatchling-table td { padding: .8mm 1mm; }
+.hatchling-table .hatchling-name { width: 23mm; }
+.hatchling-table .hatchling-date { width: 25mm; }
+.hatchling-table .hatchling-weight { width: 19mm; }
+.hatchling-table .hatchling-sex { width: 18mm; }
+
+/* ----- Éclairage annuel ----- */
+.lighting-header { text-align: center; }
+
+.lighting-header .title { font-size: 26pt; }
+
+.lighting-header .subtitle {
+  margin-top: 2.3mm;
+  font-size: 9.8pt;
+}
+
+.lighting-header .header-rule { margin-top: 3.3mm; }
+
+.lighting-meta {
+  display: grid;
+  grid-template-columns: 1.35fr .55fr 1.1fr;
+  gap: 6mm;
+  margin-top: 4mm;
+  padding: 3.2mm 5mm 3.7mm;
+}
+
+.lighting-legend {
+  margin: 3.5mm 0;
+  text-align: center;
+  font-size: 10.2pt;
+  font-weight: 700;
+}
+
+.lighting-legend span + span { margin-left: 10mm; }
+
+.schedule th {
+  height: var(--write-standard);
+  padding: 1.4mm 1mm;
+  font-size: 9.5pt;
+}
+
+.schedule td {
+  height: 8.25mm;
+  text-align: center;
+}
+
+.schedule td:nth-child(2) { font-weight: 700; }
+.schedule-check { width: 18mm; }
+
+.check-box {
+  display: inline-block;
+  width: 4.4mm;
+  height: 4.4mm;
+  vertical-align: -0.7mm;
+  background: #ffffff;
+  border: .35mm solid var(--grid);
+  border-radius: .6mm;
+}
+
+.lighting-note {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 8mm;
+  min-height: 15mm;
+  margin-top: 4mm;
+  padding: 3mm 5mm;
+}
+
+.note-text {
+  color: var(--muted);
+  font-size: 8.3pt;
+  line-height: 1.4;
+}
+
+.note-text p { margin: 0; }
+
+.season-checks {
+  display: flex;
+  gap: 7mm;
+  color: var(--ink);
+  font-size: 8.3pt;
+  white-space: nowrap;
+}
+
+.season-checks .check-box { margin-right: 1.5mm; }

assets/images/photo_modele.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" width="1200" height="600" role="img" aria-label="Emplacement photo">
+  <rect width="1200" height="600" fill="#f7f2ea"/>
+  <rect x="16" y="16" width="1168" height="568" rx="18" ry="18" fill="none" stroke="#d8c5aa" stroke-width="8" stroke-dasharray="24 18"/>
+  <g fill="#98682f" opacity="0.88">
+    <circle cx="600" cy="220" r="44"/>
+    <path d="M520 360c0-52 36-96 80-96s80 44 80 96v28H520z"/>
+  </g>
+  <text x="600" y="470" text-anchor="middle" font-family="Noto Sans, Arial, sans-serif" font-size="38" fill="#6c6862">Photo du gecko</text>
+</svg>

src/geckos/delta.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Delta — GeckoBreizh</title>
+  <link rel="stylesheet" href="../../assets/css/style.css">
+</head>
+<body>
+  <main class="animal-sheet">
+    <header class="animal-header">
+      <h1 class="title">DELTA</h1>
+      <p class="subtitle">Eublepharis macularius</p>
+      <hr class="header-rule">
+    </header>
+
+    <figure class="animal-photo">
+      <img src="../../assets/images/delta.jpg" alt="Delta, gecko léopard">
+    </figure>
+
+    <section class="panel identity">
+      <h2 class="section-title">IDENTITÉ</h2>
+      <div class="identity-grid">
+        <div class="label">SEXE</div><div class="value">Femelle</div>
+        <div class="label">NAISSANCE</div><div class="value">NC 2021</div>
+        <div class="label">MORPH</div><div class="value">Zorro Bandit No Het</div>
+        <div class="label">PARENTS</div><div class="value">-</div>
+      </div>
+    </section>
+
+    <section class="panel origin">
+      <h2 class="section-title">ORIGINE</h2>
+
+      <div class="origin-item">
+        <p class="name">Geckomaniax / Julie Delavaux</p>
+        <p class="detail">Née et reproductrice</p>
+      </div>
+      <div class="origin-arrow" aria-hidden="true"></div>
+
+      <div class="origin-item">
+        <p class="name">GeckolookPaca / Marine Willemin</p>
+        <p class="detail small">Reproductrice – tentative sans succès (mâle ~10 ans)</p>
+      </div>
+      <div class="origin-arrow" aria-hidden="true"></div>
+
+      <p class="origin-arrival">Arrivée le 13 septembre 2026</p>
+    </section>
+  </main>
+</body>
+</html>

src/installation/eclairage_annuel.html

@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Éclairage annuel — GeckoBreizh</title>
+  <link rel="stylesheet" href="../../assets/css/style.css">
+</head>
+<body>
+  <main class="lighting-sheet">
+    <header class="lighting-header">
+      <h1 class="title">Éclairage annuel</h1>
+      <p class="subtitle">Brasparts (Finistère) – cycle saisonnier</p>
+      <hr class="header-rule">
+    </header>
+
+    <section class="panel lighting-meta" aria-label="Identification de la fiche d'éclairage">
+      <div class="meta-field">
+        <span class="label">TERRARIUM</span>
+        <span class="write-line" aria-hidden="true"></span>
+      </div>
+      <div class="meta-field">
+        <span class="label">ANNÉE</span>
+        <span class="write-line" aria-hidden="true"></span>
+      </div>
+      <div class="meta-field">
+        <span class="label">ANIMAL</span>
+        <span class="write-line" aria-hidden="true"></span>
+      </div>
+    </section>
+
+    <div class="lighting-legend">
+      <span>P1 : spot chauffant</span>
+      <span>P2 : UVB</span>
+    </div>
+
+    <div class="schedule-wrap">
+      <table class="schedule" aria-label="Horaires mensuels d'éclairage">
+        <thead>
+          <tr>
+            <th class="schedule-check" scope="col">Réglé</th>
+            <th scope="col">Mois</th>
+            <th scope="col">P1 ON</th>
+            <th scope="col">P2 ON</th>
+            <th scope="col">P2 OFF</th>
+            <th scope="col">P1 OFF</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr><td><span class="check-box" aria-hidden="true"></span></td><td>Janvier</td><td>09:00</td><td>09:30</td><td>17:20</td><td>17:50</td></tr>
+          <tr><td><span class="check-box" aria-hidden="true"></span></td><td>Février</td><td>08:25</td><td>08:55</td><td>18:05</td><td>18:35</td></tr>
+          <tr><td><span class="check-box" aria-hidden="true"></span></td><td>Mars</td><td>07:30</td><td>08:00</td><td>18:50</td><td>19:20</td></tr>
+          <tr><td><span class="check-box" aria-hidden="true"></span></td><td>Avril</td><td>07:25</td><td>07:55</td><td>20:35</td><td>21:05</td></tr>
+          <tr><td><span class="check-box" aria-hidden="true"></span></td><td>Mai</td><td>06:35</td><td>07:05</td><td>21:20</td><td>21:50</td></tr>
+          <tr><td><span class="check-box" aria-hidden="true"></span></td><td>Juin</td><td>06:15</td><td>06:45</td><td>21:50</td><td>22:20</td></tr>
+          <tr><td><span class="check-box" aria-hidden="true"></span></td><td>Juillet</td><td>06:30</td><td>07:00</td><td>21:45</td><td>22:15</td></tr>
+          <tr><td><span class="check-box" aria-hidden="true"></span></td><td>Août</td><td>07:10</td><td>07:40</td><td>21:00</td><td>21:30</td></tr>
+          <tr><td><span class="check-box" aria-hidden="true"></span></td><td>Septembre</td><td>07:50</td><td>08:20</td><td>20:00</td><td>20:30</td></tr>
+          <tr><td><span class="check-box" aria-hidden="true"></span></td><td>Octobre</td><td>08:35</td><td>09:05</td><td>19:00</td><td>19:30</td></tr>
+          <tr><td><span class="check-box" aria-hidden="true"></span></td><td>Novembre</td><td>08:20</td><td>08:50</td><td>17:10</td><td>17:40</td></tr>
+          <tr><td><span class="check-box" aria-hidden="true"></span></td><td>Décembre</td><td>09:00</td><td>09:30</td><td>16:50</td><td>17:20</td></tr>
+        </tbody>
+      </table>
+    </div>
+
+    <aside class="panel lighting-note">
+      <div class="note-text">
+        <p>Le 1er de chaque mois : appliquer les horaires correspondants, puis cocher.</p>
+      </div>
+      <div class="season-checks" aria-label="Changements d'heure">
+        <span><span class="check-box" aria-hidden="true"></span> Heure d’été : P1 et P2 réglés</span>
+        <span><span class="check-box" aria-hidden="true"></span> Heure d’hiver : P1 et P2 réglés</span>
+      </div>
+    </aside>
+  </main>
+</body>
+</html>

src/installation/installation.html

@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Installation — GeckoBreizh</title>
+  <link rel="stylesheet" href="../../assets/css/style.css">
+</head>
+<body>
+  <main class="installation-sheet">
+    <header class="installation-header">
+      <h1 class="title">Installation</h1>
+      <p class="subtitle">GeckoBreizh</p>
+      <hr class="header-rule">
+    </header>
+
+    <section class="panel installation-meta" aria-label="Identification de l'installation">
+      <div class="meta-field">
+        <span class="label">TERRARIUM</span>
+        <span class="write-line" aria-hidden="true"></span>
+      </div>
+      <div class="meta-field">
+        <span class="label">MISE EN SERVICE</span>
+        <span class="write-line" aria-hidden="true"></span>
+      </div>
+      <div class="meta-field">
+        <span class="label">ANIMAL</span>
+        <span class="write-line" aria-hidden="true"></span>
+      </div>
+    </section>
+
+    <div class="installation-grid">
+      <section class="panel installation-panel">
+        <h2 class="section-title">TERRARIUM</h2>
+        <div class="installation-list">
+          <div class="installation-row"><span class="label">DIMENSIONS</span><span class="write-line" aria-hidden="true"></span></div>
+          <div class="installation-row"><span class="label">SUBSTRAT</span><span class="write-line" aria-hidden="true"></span></div>
+          <div class="installation-row"><span class="label">VENTILATION</span><span class="write-line" aria-hidden="true"></span></div>
+        </div>
+      </section>
+
+      <section class="panel installation-panel">
+        <h2 class="section-title">ÉQUIPEMENT</h2>
+        <div class="installation-list">
+          <div class="installation-row"><span class="label">CHAUFFAGE</span><span class="write-line" aria-hidden="true"></span></div>
+          <div class="installation-row"><span class="label">THERMOSTAT</span><span class="write-line" aria-hidden="true"></span></div>
+          <div class="installation-row"><span class="label">UVB / MODÈLE</span><span class="write-line" aria-hidden="true"></span></div>
+        </div>
+      </section>
+
+      <section class="panel installation-panel">
+        <h2 class="section-title">UVB</h2>
+        <div class="installation-list">
+          <div class="installation-row"><span class="label">MISE EN SERVICE</span><span class="write-line" aria-hidden="true"></span></div>
+          <div class="installation-row"><span class="label">REMPLACEMENT PRÉVU</span><span class="write-line" aria-hidden="true"></span></div>
+          <div class="installation-row"><span class="label">DISTANCE UVB–BASKING</span><span class="write-line" aria-hidden="true"></span></div>
+        </div>
+      </section>
+
+      <section class="panel installation-panel">
+        <h2 class="section-title">PARAMÈTRES CIBLES</h2>
+        <div class="installation-list">
+          <div class="installation-row"><span class="label">BASKING (°C)</span><span class="write-line" aria-hidden="true"></span></div>
+          <div class="installation-row"><span class="label">ZONE CHAUDE (°C)</span><span class="write-line" aria-hidden="true"></span></div>
+          <div class="installation-row"><span class="label">ZONE FROIDE (°C)</span><span class="write-line" aria-hidden="true"></span></div>
+        </div>
+      </section>
+    </div>
+
+    <section class="panel installation-notes">
+      <h2 class="section-title">MODIFICATIONS <span class="section-note">date + détail</span></h2>
+      <div class="notes-lines" aria-hidden="true">
+        <span></span><span></span><span></span><span></span><span></span><span></span>
+      </div>
+    </section>
+  </main>
+</body>
+</html>

src/reproduction/reproduction.html

@@ -0,0 +1,113 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Reproduction — GeckoBreizh</title>
+  <link rel="stylesheet" href="../../assets/css/style.css">
+</head>
+<body>
+  <main class="reproduction-sheet">
+    <header class="record-header">
+      <h1 class="title">Reproduction</h1>
+      <p class="subtitle">GeckoBreizh</p>
+      <hr class="header-rule">
+    </header>
+
+    <section class="panel record-meta reproduction-meta" aria-label="Identification de la reproduction">
+      <div class="meta-field">
+        <span class="label">FEMELLE</span>
+        <span class="write-line" aria-hidden="true"></span>
+      </div>
+      <div class="meta-field">
+        <span class="label">MÂLE</span>
+        <span class="write-line" aria-hidden="true"></span>
+      </div>
+      <div class="meta-field">
+        <span class="label">SAISON / ANNÉE</span>
+        <span class="write-line" aria-hidden="true"></span>
+      </div>
+    </section>
+
+    <section class="reproduction-section">
+      <h2 class="record-table-title">OVULATION / ACCOUPLEMENTS</h2>
+      <div class="record-table-wrap">
+        <table class="record-table mating-table" aria-label="Ovulation et accouplements">
+          <thead>
+            <tr>
+              <th class="mating-date" scope="col">Date</th>
+              <th class="mating-ovulation" scope="col">Ovulation</th>
+              <th class="mating-seen" scope="col">Accouplement</th>
+              <th scope="col">Notes</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td></tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <section class="reproduction-section">
+      <h2 class="record-table-title">PONTES / INCUBATION</h2>
+      <div class="record-table-wrap">
+        <table class="record-table clutch-table" aria-label="Pontes et incubation">
+          <thead>
+            <tr>
+              <th class="clutch-number" scope="col">N°</th>
+              <th class="clutch-date" scope="col">Ponte</th>
+              <th class="clutch-eggs" scope="col">Œufs</th>
+              <th class="clutch-status" scope="col">Statut</th>
+              <th class="clutch-temp" scope="col">Temp. (°C)</th>
+              <th class="clutch-hatch" scope="col">Éclosion</th>
+              <th scope="col">Notes</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <section class="reproduction-section">
+      <h2 class="record-table-title">JEUNES</h2>
+      <div class="record-table-wrap">
+        <table class="record-table hatchling-table" aria-label="Jeunes issus de la reproduction">
+          <thead>
+            <tr>
+              <th class="hatchling-name" scope="col">Nom</th>
+              <th class="hatchling-date" scope="col">Éclosion</th>
+              <th class="hatchling-weight" scope="col">Poids (g)</th>
+              <th class="hatchling-sex" scope="col">Sexe</th>
+              <th scope="col">Morph / génétique / notes</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td></tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </main>
+</body>
+</html>

src/sante/sante.html

@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Santé — GeckoBreizh</title>
+  <link rel="stylesheet" href="../../assets/css/style.css">
+</head>
+<body>
+  <main class="health-sheet">
+    <header class="record-header">
+      <h1 class="title">Santé</h1>
+      <p class="subtitle">GeckoBreizh</p>
+      <hr class="header-rule">
+    </header>
+
+    <section class="panel record-meta health-meta" aria-label="Identification de l'événement de santé">
+      <div class="meta-field">
+        <span class="label">ANIMAL</span>
+        <span class="write-line" aria-hidden="true"></span>
+      </div>
+      <div class="meta-field">
+        <span class="label">DATE</span>
+        <span class="write-line" aria-hidden="true"></span>
+      </div>
+      <div class="meta-field">
+        <span class="label">POIDS (g)</span>
+        <span class="write-line" aria-hidden="true"></span>
+      </div>
+    </section>
+
+    <section class="panel record-panel health-symptoms">
+      <h2 class="section-title">MOTIF / SYMPTÔMES</h2>
+      <div class="health-context">
+        <div class="record-inline-field">
+          <span class="label">APPÉTIT</span>
+          <span class="write-line" aria-hidden="true"></span>
+        </div>
+        <div class="record-inline-field">
+          <span class="label">SELLES</span>
+          <span class="write-line" aria-hidden="true"></span>
+        </div>
+      </div>
+      <div class="notes-lines compact-lines" aria-hidden="true">
+        <span></span><span></span><span></span>
+      </div>
+    </section>
+
+    <div class="record-grid health-grid">
+      <section class="panel record-panel">
+        <h2 class="section-title">CONSULTATION / DIAGNOSTIC</h2>
+        <div class="record-inline-field">
+          <span class="label">VÉTÉRINAIRE</span>
+          <span class="write-line" aria-hidden="true"></span>
+        </div>
+        <div class="notes-lines compact-lines" aria-hidden="true">
+          <span></span><span></span><span></span><span></span>
+        </div>
+      </section>
+
+      <section class="panel record-panel">
+        <h2 class="section-title">TRAITEMENT / SOINS</h2>
+        <div class="notes-lines compact-lines" aria-hidden="true">
+          <span></span><span></span><span></span><span></span><span></span>
+        </div>
+      </section>
+    </div>
+
+    <section class="health-evolution">
+      <h2 class="record-table-title">ÉVOLUTION / CONTRÔLE</h2>
+      <div class="record-table-wrap">
+        <table class="record-table health-table" aria-label="Évolution de l'événement de santé">
+          <thead>
+            <tr>
+              <th class="health-date" scope="col">Date</th>
+              <th class="health-weight" scope="col">Poids (g)</th>
+              <th scope="col">Évolution / soins</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td></tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <section class="panel record-panel health-outcome">
+      <h2 class="section-title">BILAN / PROCHAIN CONTRÔLE</h2>
+      <div class="record-inline-field">
+        <span class="label">PROCHAIN CONTRÔLE</span>
+        <span class="write-line" aria-hidden="true"></span>
+      </div>
+      <div class="notes-lines compact-lines" aria-hidden="true">
+        <span></span><span></span>
+      </div>
+    </section>
+  </main>
+</body>
+</html>

src/suivi/suivi_gecko.html

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Suivi — GeckoBreizh</title>
+  <link rel="stylesheet" href="../../assets/css/style.css">
+</head>
+<body>
+  <main class="followup-sheet">
+    <header class="followup-header">
+      <h1 class="title">Suivi</h1>
+      <p class="subtitle">GeckoBreizh</p>
+      <hr class="header-rule">
+    </header>
+
+    <section class="panel followup-meta" aria-label="Identification de la fiche de suivi">
+      <div class="meta-field">
+        <span class="label">ANIMAL</span>
+        <span class="write-line" aria-hidden="true"></span>
+      </div>
+      <div class="meta-field">
+        <span class="label">ANNÉE</span>
+        <span class="write-line" aria-hidden="true"></span>
+      </div>
+    </section>
+
+    <div class="followup-table-wrap">
+      <table class="followup-table" aria-label="Suivi de l'animal">
+        <thead>
+          <tr>
+            <th class="date" scope="col">Date</th>
+            <th class="weight" scope="col">Poids (g)</th>
+            <th class="food" scope="col">Alimentation / supplément</th>
+            <th class="moult" scope="col">Mue</th>
+            <th class="stool" scope="col">Selles</th>
+            <th scope="col">Observations / soins</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+          <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+          <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+          <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+          <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+          <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+          <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+          <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+          <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+          <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+          <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+          <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+          <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+        </tbody>
+      </table>
+    </div>
+
+    <p class="followup-hint">Mue / selles : cocher ou noter brièvement l’état ; détailler si nécessaire dans « Observations / soins ».</p>
+  </main>
+</body>
+</html>

src/templates/fiche_gecko_modele.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Fiche gecko — GeckoBreizh</title>
+  <link rel="stylesheet" href="../../assets/css/style.css">
+</head>
+<body>
+  <main class="animal-sheet">
+    <!-- Le nom sert d’identifiant dans les autres fiches. -->
+    <header class="animal-header">
+      <h1 class="title">NOM</h1>
+      <p class="subtitle">Eublepharis macularius</p>
+      <hr class="header-rule">
+    </header>
+
+    <!-- Placer la photo dans assets/images/ puis modifier src et alt. -->
+    <figure class="animal-photo">
+      <img src="../../assets/images/photo_modele.svg" alt="Photo du gecko">
+    </figure>
+
+    <section class="panel identity">
+      <h2 class="section-title">IDENTITÉ</h2>
+      <div class="identity-grid">
+        <div class="label">SEXE</div><div class="value">-</div>
+        <div class="label">NAISSANCE</div><div class="value">-</div>
+        <div class="label">MORPH</div><div class="value">-</div>
+        <div class="label">PARENTS</div><div class="value">-</div>
+      </div>
+    </section>
+
+    <!-- Adapter ce parcours : élevages/détenteurs successifs, ou « Né à l’élevage ». -->
+    <section class="panel origin">
+      <h2 class="section-title">ORIGINE</h2>
+
+      <div class="origin-item">
+        <p class="name">Origine / élevage</p>
+        <p class="detail">Détail</p>
+      </div>
+      <div class="origin-arrow" aria-hidden="true"></div>
+
+      <p class="origin-arrival">Arrivée / naissance : -</p>
+    </section>
+  </main>
+</body>
+</html>