From cd58bc13e47c533fd68b1f7f36c6f01ea06adcfb Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Wed, 1 Apr 2026 17:08:12 +0200
Subject: [PATCH] css: replace presentational class selectors with semantic
 element selectors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace 6 CSS class selectors across tfe.css, main.css, and search.css with
semantic element-based selectors, removing the corresponding classes from the
HTML templates entirely.

tfe.css:
- .tfe-meta-list → article dl / article dl > div / article dl dt / article dl dd
- .tfe-media-block → aside figure (+ img, video, embed children)
- .tfe-file-caption → aside figcaption

main.css:
- .card__media → .home-body figure (+ img/video children and hover/motion rules)
- .card__caption → .home-body li > a > p

search.css:
- .repertoire-col > h2 → .repertoire-index section > h2

Template changes:
- tfe.php: removed class= from <dl>, <figure>, and <figcaption>
- index.php: removed class= from <figure> and <p class=card__caption>;
  stripped orphaned card__media from the gradient <div> (only --gradient needed)

No visual change — selectors match the same elements as before since the
semantic HTML was already in place from prior refactoring work.
---
 TODO.md                      | 20 ++++++++++----------
 public/assets/css/main.css   | 24 ++++++++++++------------
 public/assets/css/search.css |  2 +-
 public/assets/css/tfe.css    | 30 +++++++++++++++---------------
 public/index.php             |  6 +++---
 public/tfe.php               |  6 +++---
 6 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/TODO.md b/TODO.md
index 17a7c56..a72dca3 100644
--- a/TODO.md
+++ b/TODO.md
@@ -12,12 +12,12 @@
 - [ ] **`admin.css`**: Replace `.admin-hint` with `.admin-body form small` — use `<small>` instead of `<p class="admin-hint">`
 - [ ] **`admin.css`**: Replace `.admin-table` with `.admin-body table` — only one table per admin page
 - [ ] **`admin.css`**: Replace `.admin-fieldset` / `.admin-fieldset-legend` with `.admin-body fieldset` / `.admin-body legend`
-- [ ] **`main.css`**: Replace `.card__caption` with `.home-body .cards-container li p` or target `li > a > p` directly
-- [ ] **`main.css`**: Replace `.card__media` with `.home-body figure` — already uses `<figure>` elements
-- [ ] **`tfe.css`**: Replace `.tfe-meta-list` selectors with `article dl`, `article dt`, `article dd` — already using `<dl>` inside `<article>`
-- [ ] **`tfe.css`**: Replace `.tfe-media-block` with `aside figure` — already wrapped in `<figure>` inside `<aside>`
-- [ ] **`tfe.css`**: Replace `.tfe-file-caption` with `aside figcaption` — native `<figcaption>` element
-- [ ] **`search.css`**: Replace `.repertoire-col > h2` styling — already targets `section > h2`, can use `.repertoire-index section > h2`
+- [x] **`main.css`**: Replace `.card__caption` with `.home-body .cards-container li p` or target `li > a > p` directly
+- [x] **`main.css`**: Replace `.card__media` with `.home-body figure` — already uses `<figure>` elements
+- [x] **`tfe.css`**: Replace `.tfe-meta-list` selectors with `article dl`, `article dt`, `article dd` — already using `<dl>` inside `<article>`
+- [x] **`tfe.css`**: Replace `.tfe-media-block` with `aside figure` — already wrapped in `<figure>` inside `<aside>`
+- [x] **`tfe.css`**: Replace `.tfe-file-caption` with `aside figcaption` — native `<figcaption>` element
+- [x] **`search.css`**: Replace `.repertoire-col > h2` styling — already targets `section > h2`, can use `.repertoire-index section > h2`
 - [x] **`common.css`**: Replace `.site-search__icon` with `header form[role="search"] svg`
 - [x] **`common.css`**: Replace `.site-search__input` with `header form[role="search"] input`
 - [x] **`common.css`**: Replace `.site-search` with `header form[role="search"]`
@@ -25,10 +25,10 @@
 
 ### Template HTML changes to match
 - [ ] In all admin templates, replace `<p class="admin-hint">` with `<small>` elements
-- [ ] In `tfe.php`, remove `class="tfe-meta-list"` — target via `article dl`
-- [ ] In `tfe.php`, remove `class="tfe-media-block"` — target via `aside figure`
-- [ ] In `tfe.php`, remove `class="tfe-file-caption"` — target via `aside figcaption`
-- [ ] In `index.php`, remove `class="card__caption"` — target via `li > a > p`
+- [x] In `tfe.php`, remove `class="tfe-meta-list"` — target via `article dl`
+- [x] In `tfe.php`, remove `class="tfe-media-block"` — target via `aside figure`
+- [x] In `tfe.php`, remove `class="tfe-file-caption"` — target via `aside figcaption`
+- [x] In `index.php`, remove `class="card__caption"` — target via `li > a > p`
 - [x] In `search-bar.php` and `header.php`, remove `class="site-search"`, `class="site-search__icon"` and `class="site-search__input"`
 
 ## PHP Components (Reusable Partials/Includes)
diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index 3eaf52a..ee7d81a 100644
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@@ -57,8 +57,8 @@
   flex: 1;
 }
 
-/* card__media is a <figure> (with image) or <div> (gradient placeholder) */
-.card__media {
+/* Media wrapper: <figure> for real images/video, <div class="card__media--gradient"> for placeholders */
+.home-body figure {
   width: 100%;
   aspect-ratio: 4/3;
   overflow: hidden;
@@ -67,8 +67,8 @@
   margin: 0; /* reset <figure> default margin */
 }
 
-.card__media img,
-.card__media video {
+.home-body figure img,
+.home-body figure video {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -76,8 +76,8 @@
   transition: transform 0.3s ease;
 }
 
-.card:hover .card__media img,
-.card:hover .card__media video {
+.card:hover figure img,
+.card:hover figure video {
   transform: scale(1.02);
 }
 
@@ -127,8 +127,8 @@
   font-style: italic;
 }
 
-/* Card caption — <p> directly inside the <a>, below the media */
-.card__caption {
+/* Card caption — <p> directly inside the card <a> link, below the media */
+.home-body li > a > p {
   padding: 0.55rem 0.5rem 0.65rem;
   font-size: 0.88rem;
   line-height: 1.35;
@@ -226,12 +226,12 @@
 
 /* Suppress card hover scale for users who prefer reduced motion */
 @media (prefers-reduced-motion: reduce) {
-  .card__media img,
-  .card__media video {
+  .home-body figure img,
+  .home-body figure video {
     transition: none;
   }
-  .card:hover .card__media img,
-  .card:hover .card__media video {
+  .card:hover figure img,
+  .card:hover figure video {
     transform: none;
   }
   .card__media--gradient {
diff --git a/public/assets/css/search.css b/public/assets/css/search.css
index b768486..243f851 100644
--- a/public/assets/css/search.css
+++ b/public/assets/css/search.css
@@ -52,7 +52,7 @@
   border-right: none;
 }
 
-.repertoire-col > h2 {
+.repertoire-index section > h2 {
   font-size: 0.72rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
diff --git a/public/assets/css/tfe.css b/public/assets/css/tfe.css
index 1343635..4c249e7 100644
--- a/public/assets/css/tfe.css
+++ b/public/assets/css/tfe.css
@@ -58,8 +58,8 @@
   letter-spacing: -0.01em;
 }
 
-/* Metadata description list */
-.tfe-meta-list {
+/* Metadata description list — target <dl> directly inside article > header */
+article dl {
   display: flex;
   flex-direction: column;
   gap: 0.45rem;
@@ -69,25 +69,25 @@
 }
 
 /* Each dt/dd pair grouped in a <div> inside <dl> */
-.tfe-meta-list > div {
+article dl > div {
   display: flex;
   gap: 0.4rem;
   flex-wrap: wrap;
 }
 
-.tfe-meta-list dt {
+article dl dt {
   color: var(--black);
   font-weight: 400;
   flex-shrink: 0;
 }
 
-.tfe-meta-list dd {
+article dl dd {
   color: var(--black);
   font-weight: 700;
   margin: 0;
 }
 
-.tfe-meta-list dd a {
+article dl dd a {
   color: inherit;
   text-decoration: underline;
   text-underline-offset: 2px;
@@ -117,35 +117,35 @@
   gap: 1.5rem;
 }
 
-/* Each file display unit */
-.tfe-media-block {
+/* Each file display unit — target <figure> directly inside <aside> */
+aside figure {
   overflow: hidden;
   margin: 0;
 }
 
-.tfe-media-block img {
+aside figure img {
   width: 100%;
   height: auto;
   display: block;
 }
 
-.tfe-media-block embed,
-.tfe-media-block video {
+aside figure embed,
+aside figure video {
   width: 100%;
   display: block;
   border: none;
 }
 
-.tfe-media-block video {
+aside figure video {
   max-height: 500px;
 }
 
-.tfe-media-block embed {
+aside figure embed {
   height: clamp(300px, 80vh, 700px);
 }
 
-/* figcaption under media */
-.tfe-file-caption {
+/* figcaption under media — target <figcaption> inside <aside> */
+aside figcaption {
   font-size: 0.8rem;
   color: var(--text-muted);
   margin: 0.3rem 0 0;
diff --git a/public/index.php b/public/index.php
index 835ec12..37dcf28 100644
--- a/public/index.php
+++ b/public/index.php
@@ -99,7 +99,7 @@ $bodyClass = 'home-body';
                         // 3. Fall through to gradient
                         ?>
                         <?php if ($thumb): ?>
-                            <figure class="card__media">
+                            <figure>
                                 <img src="/media.php?path=<?= urlencode($thumb) ?>"
                                      alt="Couverture — <?= htmlspecialchars($item['title']) ?> par <?= htmlspecialchars($item['authors'] ?? '') ?>"
                                      loading="lazy">
@@ -109,14 +109,14 @@ $bodyClass = 'home-body';
                             $hue  = ($item['id'] * 47 + 160) % 360;
                             $hue2 = ($hue + 40) % 360;
                             ?>
-                            <div class="card__media card__media--gradient"
+                            <div class="card__media--gradient"
                                  style="background:linear-gradient(135deg,hsl(<?= $hue ?>,55%,40%),hsl(<?= $hue2 ?>,50%,28%));"
                                  aria-hidden="true">
                                 <span class="card__gradient-author"><?= htmlspecialchars($item['authors'] ?? '') ?></span>
                                 <span class="card__gradient-title"><?= htmlspecialchars($item['title']) ?></span>
                             </div>
                         <?php endif; ?>
-                        <p class="card__caption"><?= htmlspecialchars($item["authors"] ?? '') ?><?php if (!empty($item['authors']) && !empty($item['title'])): ?> – <?php endif; ?><?= htmlspecialchars($item["title"]) ?></p>
+                        <p><?= htmlspecialchars($item["authors"] ?? '') ?><?php if (!empty($item['authors']) && !empty($item['title'])): ?> – <?php endif; ?><?= htmlspecialchars($item["title"]) ?></p>
                     </a>
                 </li>
             <?php endforeach; ?>
diff --git a/public/tfe.php b/public/tfe.php
index 0979183..86e0703 100644
--- a/public/tfe.php
+++ b/public/tfe.php
@@ -79,7 +79,7 @@ $bodyClass = 'tfe-body';
 
                 <p class="tfe-author"><?= htmlspecialchars($data['authors'] ?? 'Auteur inconnu') ?></p>
 
-                <dl class="tfe-meta-list">
+                <dl>
                     <?php if (!empty($data['orientation'])): ?>
                     <div>
                         <dt>Orientation :</dt>
@@ -204,7 +204,7 @@ $bodyClass = 'tfe-body';
                 <?php elseif (!empty($data['files'])): ?>
                     <?php foreach ($data['files'] as $file): ?>
                         <?php $ext = strtolower(pathinfo($file['file_path'], PATHINFO_EXTENSION)); ?>
-                        <figure class="tfe-media-block">
+                        <figure>
                             <?php if ($ext === 'pdf'): ?>
                                 <embed src="/media.php?path=<?= urlencode($file['file_path']) ?>"
                                        type="application/pdf" width="100%" height="700px">
@@ -226,7 +226,7 @@ $bodyClass = 'tfe-body';
                                 </video>
                             <?php endif; ?>
                             <?php if (!empty($file['description'])): ?>
-                                <figcaption class="tfe-file-caption"><?= htmlspecialchars($file['description']) ?></figcaption>
+                                <figcaption><?= htmlspecialchars($file['description']) ?></figcaption>
                             <?php endif; ?>
                         </figure>
                     <?php endforeach; ?>