704 lines
28 KiB
HTML
704 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Round</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ─── Header ──────────────────────────────────────── -->
|
||
<header class="site-header">
|
||
<a href="/index.html" class="site-logo">CERAMIC+</a>
|
||
|
||
<nav class="header-nav">
|
||
<ul>
|
||
<li>Bibliothèque</li>
|
||
<li>Écosystème</li>
|
||
<li>Évènements</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<div class="header-actions">
|
||
<div class="search-wrap">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
|
||
</svg>
|
||
<input type="text" placeholder="Rechercher une publication…">
|
||
</div>
|
||
<button class="btn-account btn-account--primary">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||
</svg>
|
||
Se connecter
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
<!-- ─── Page hero ──────────────────────────────────── -->
|
||
<div class="page-hero">
|
||
<h1>Bibliothèque numérique</h1>
|
||
</div>
|
||
|
||
<!-- ─── Sélecteur de section ──────────────────────── -->
|
||
<div class="section-switcher">
|
||
|
||
<a href="#" class="section-tile active">
|
||
<strong class="tile-name">Pièces</strong>
|
||
<ul class="tile-items">
|
||
<li class="tile-item-sub active">Céramique traditionnelle</li>
|
||
<li class="tile-item-sub">Céramique contemporaine</li>
|
||
<li class="tile-item-sub">Céramique artistique</li>
|
||
<li class="tile-item-sub">Céramique et design</li>
|
||
<li class="tile-item-sub">Faïence</li>
|
||
</ul>
|
||
</a>
|
||
|
||
<a href="#" class="section-tile">
|
||
<strong class="tile-name">Moules</strong>
|
||
<ul class="tile-items">
|
||
<li class="tile-item-sub">Céramique</li>
|
||
<li class="tile-item-sub">Faïence</li>
|
||
</ul>
|
||
</a>
|
||
|
||
<a href="#" class="section-tile">
|
||
<strong class="tile-name">Décorations</strong>
|
||
<ul class="tile-items">
|
||
<li class="tile-item-sub">Dessin</li>
|
||
<li class="tile-item-sub">Peinture au pinceau</li>
|
||
<li class="tile-item-sub">Coulée robotisée</li>
|
||
<li class="tile-item-sub">Séparation des couleurs</li>
|
||
<li class="tile-item-sub">Emaillage au pinceau</li>
|
||
<li class="tile-item-sub">Cordon émaillé</li>
|
||
</ul>
|
||
</a>
|
||
|
||
<a href="#" class="section-tile">
|
||
<strong class="tile-name">Carreaux</strong>
|
||
<ul class="tile-items">
|
||
<li class="tile-item-sub">Céramique</li>
|
||
<li class="tile-item-sub">Faïence</li>
|
||
<li class="tile-item-sub">Traditionnel</li>
|
||
<li class="tile-item-sub">Innovant</li>
|
||
<li class="tile-item-sub">Bactéricide</li>
|
||
</ul>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
<!-- ─── Catalogue ──────────────────────────────────── -->
|
||
<div class="catalogue-wrap">
|
||
|
||
<!-- ─── Sidebar filtres ──────────────────────────── -->
|
||
<aside class="sidebar">
|
||
<p class="sidebar-title">Filtres avancés</p>
|
||
|
||
<!-- Matériaux -->
|
||
<details class="filter-accordion" open>
|
||
<summary class="filter-accordion-title">Matériaux</summary>
|
||
<div class="filter-accordion-body">
|
||
|
||
<div class="filter-subgroup">
|
||
<div class="filter-subgroup-label">Traditionnels</div>
|
||
<ul class="filter-checkbox-list filter-checkbox-list--sub">
|
||
<li><label><input type="checkbox" checked> Argile</label></li>
|
||
<li><label><input type="checkbox"> Silice</label></li>
|
||
<li><label><input type="checkbox"> Feldspath</label></li>
|
||
<li><label><input type="checkbox"> Kaolin</label></li>
|
||
<li><label><input type="checkbox"> Andalousite</label></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="filter-subgroup">
|
||
<div class="filter-subgroup-label">Carbonates</div>
|
||
<ul class="filter-checkbox-list filter-checkbox-list--sub">
|
||
<li><label><input type="checkbox"> La dolomite</label></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="filter-subgroup">
|
||
<div class="filter-subgroup-label">Aluminates</div>
|
||
<ul class="filter-checkbox-list filter-checkbox-list--sub">
|
||
<li><label><input type="checkbox"> Chamottes</label></li>
|
||
<li><label><input type="checkbox"> Alumines calcinées</label></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="filter-subgroup">
|
||
<div class="filter-subgroup-label">Chimiques</div>
|
||
<ul class="filter-checkbox-list filter-checkbox-list--sub">
|
||
<li><label><input type="checkbox"> Zirconium</label></li>
|
||
<li><label><input type="checkbox"> Carbure de silicium</label></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<ul class="filter-checkbox-list" style="margin-top:8px">
|
||
<li><label><input type="checkbox"> Les moins durables</label></li>
|
||
<li><label><input type="checkbox"> Conformes à la DNSH</label></li>
|
||
</ul>
|
||
|
||
</div>
|
||
</details>
|
||
|
||
<hr class="sidebar-divider">
|
||
|
||
<!-- Techniques -->
|
||
<details class="filter-accordion">
|
||
<summary class="filter-accordion-title">Techniques</summary>
|
||
<div class="filter-accordion-body">
|
||
<ul class="filter-checkbox-list">
|
||
<li><label><input type="checkbox"> Moulage</label></li>
|
||
<li><label><input type="checkbox"> Coulage</label></li>
|
||
<li><label><input type="checkbox"> Décoration traditionnelle</label></li>
|
||
<li><label><input type="checkbox"> Décoration manuelle</label></li>
|
||
<li><label><input type="checkbox"> Impression 3D</label></li>
|
||
<li><label><input type="checkbox"> Robotcasting</label></li>
|
||
<li><label><input type="checkbox"> Séparation des couleurs plates</label></li>
|
||
<li><label><input type="checkbox"> Emaillage au pinceau</label></li>
|
||
<li><label><input type="checkbox"> Cordon émaillé (boîtier)</label></li>
|
||
<li><label><input type="checkbox"> Carreaux bactéricides</label></li>
|
||
</ul>
|
||
</div>
|
||
</details>
|
||
|
||
<hr class="sidebar-divider">
|
||
|
||
<!-- Technologies -->
|
||
<details class="filter-accordion">
|
||
<summary class="filter-accordion-title">Technologies</summary>
|
||
<div class="filter-accordion-body">
|
||
<ul class="filter-checkbox-list">
|
||
<li><label><input type="checkbox"> Numérisation 3D</label></li>
|
||
<li><label><input type="checkbox"> Gaussian Splatting</label></li>
|
||
<li><label><input type="checkbox"> Les cobots</label></li>
|
||
<li><label><input type="checkbox"> Impression jet d'encre</label></li>
|
||
<li><label><input type="checkbox"> Impression 3D</label></li>
|
||
<li><label><input type="checkbox"> Robocasting</label></li>
|
||
<li><label><input type="checkbox"> Usinage CNC (mullite)</label></li>
|
||
</ul>
|
||
</div>
|
||
</details>
|
||
|
||
<hr class="sidebar-divider">
|
||
|
||
<!-- Méthodologies -->
|
||
<details class="filter-accordion">
|
||
<summary class="filter-accordion-title">Méthodologies</summary>
|
||
<div class="filter-accordion-body">
|
||
<ul class="filter-checkbox-list">
|
||
<li><label><input type="checkbox"> Céramique contemporaine</label></li>
|
||
<li><label><input type="checkbox"> Technique traditionnelle</label></li>
|
||
<li><label><input type="checkbox"> Technologies de pointe</label></li>
|
||
<li><label><input type="checkbox"> Fabrication durable</label></li>
|
||
</ul>
|
||
</div>
|
||
</details>
|
||
|
||
<hr class="sidebar-divider">
|
||
|
||
<!-- Transfert de connaissances -->
|
||
<details class="filter-accordion">
|
||
<summary class="filter-accordion-title">Transfert de connaissances</summary>
|
||
<div class="filter-accordion-body">
|
||
<ul class="filter-checkbox-list">
|
||
<li><label><input type="checkbox"> Céramique contemporaine</label></li>
|
||
<li><label><input type="checkbox"> Céramique traditionnelle</label></li>
|
||
<li><label><input type="checkbox"> Techniques traditionnelles</label></li>
|
||
<li><label><input type="checkbox"> Technologies de pointe</label></li>
|
||
<li><label><input type="checkbox"> Carreaux bactéricides</label></li>
|
||
<li><label><input type="checkbox"> Séparation des couleurs</label></li>
|
||
</ul>
|
||
</div>
|
||
</details>
|
||
|
||
<hr class="sidebar-divider">
|
||
|
||
<!-- Innovations -->
|
||
<details class="filter-accordion">
|
||
<summary class="filter-accordion-title">Innovations</summary>
|
||
<div class="filter-accordion-body">
|
||
<ul class="filter-checkbox-list">
|
||
<li><label><input type="checkbox"> Robotcasting (réduction des déchets)</label></li>
|
||
<li><label><input type="checkbox"> Écosystème numérique & vert</label></li>
|
||
</ul>
|
||
</div>
|
||
</details>
|
||
|
||
<hr class="sidebar-divider">
|
||
|
||
<!-- Témoignages -->
|
||
<details class="filter-accordion">
|
||
<summary class="filter-accordion-title">Témoignages</summary>
|
||
<div class="filter-accordion-body">
|
||
<ul class="filter-checkbox-list">
|
||
<li><label><input type="checkbox"> Artisans de la faïence ancienne</label></li>
|
||
<li><label><input type="checkbox"> Craft design</label></li>
|
||
</ul>
|
||
</div>
|
||
</details>
|
||
|
||
<hr class="sidebar-divider">
|
||
|
||
<!-- Pays -->
|
||
<details class="filter-accordion" open>
|
||
<summary class="filter-accordion-title">Pays</summary>
|
||
<div class="filter-accordion-body">
|
||
<ul class="filter-checkbox-list">
|
||
<li><label><input type="checkbox"> Espagne</label></li>
|
||
<li><label><input type="checkbox"> Portugal</label></li>
|
||
<li><label><input type="checkbox"> Nouvelle-Aquitaine</label></li>
|
||
<li><label><input type="checkbox"> Occitanie</label></li>
|
||
</ul>
|
||
</div>
|
||
</details>
|
||
|
||
<hr class="sidebar-divider">
|
||
|
||
<!-- Auteurs -->
|
||
<details class="filter-accordion">
|
||
<summary class="filter-accordion-title">Auteurs</summary>
|
||
<div class="filter-accordion-body">
|
||
<select class="filter-select">
|
||
<option value="">Tous les auteurs</option>
|
||
<optgroup label="Individus">
|
||
<option>Artisans</option>
|
||
<option>Artistes</option>
|
||
<option>Designers</option>
|
||
<option>Céramistes</option>
|
||
</optgroup>
|
||
<optgroup label="Structures">
|
||
<option>Entreprises du secteur</option>
|
||
<option>Écoles secondaires</option>
|
||
<option>Écoles professionnelles</option>
|
||
<option>Écoles supérieures — art & design</option>
|
||
<option>Centres technologiques</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
</details>
|
||
|
||
<hr class="sidebar-divider">
|
||
|
||
<button class="btn-reset">Réinitialiser les filtres</button>
|
||
</aside>
|
||
|
||
<!-- ─── Contenu principal ──────────────────────── -->
|
||
<main class="catalogue-main">
|
||
|
||
<!-- Toolbar -->
|
||
<div class="catalogue-toolbar">
|
||
<div class="toolbar-section">
|
||
<span class="toolbar-section-name">Pièces</span>
|
||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 2l3 3-3 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
<span class="toolbar-section-sub">Céramique traditionnelle</span>
|
||
</div>
|
||
<div class="num-results">
|
||
<p><span>24</span> résultats</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Filtres actifs -->
|
||
<div class="active-filters">
|
||
<div class="filter-tag">Céramique traditionnelle <button>×</button></div>
|
||
<div class="filter-tag">Argile <button>×</button></div>
|
||
<div class="filter-tag">Espagne <button>×</button></div>
|
||
<div class="filter-tag">Portugal <button>×</button></div>
|
||
</div>
|
||
|
||
<!-- Grille pièces -->
|
||
<div class="pieces-grid">
|
||
|
||
<article class="piece-card">
|
||
<a href="assiette.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<path d="M12 2C8 2 5 8 5 12s3 8 7 8 7-4 7-8-3-10-7-10z"/>
|
||
<path d="M8 12c0-2 1.8-4 4-4s4 2 4 4"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Argile</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Assiette complète</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Moulage</span>
|
||
<span class="meta-pill">Traditionnel</span>
|
||
<span class="meta-pill country">Espagne</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="piece-card">
|
||
<a href="moule-asperges.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<path d="M6 20h12M7 20V8l5-6 5 6v12"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Argile</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Moule à asperges</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Moulage</span>
|
||
<span class="meta-pill">Traditionnel</span>
|
||
<span class="meta-pill country">Espagne</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="piece-card">
|
||
<a href="round-object.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<ellipse cx="12" cy="8" rx="6" ry="4"/>
|
||
<path d="M6 8v8c0 2.2 2.7 4 6 4s6-1.8 6-4V8"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Argile</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Cruche à bec verseur</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Moulage</span>
|
||
<span class="meta-pill">Traditionnel</span>
|
||
<span class="meta-pill country">Occitanie</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="piece-card">
|
||
<a href="round-object.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<rect x="5" y="4" width="14" height="16" rx="2"/>
|
||
<path d="M9 9h6M9 13h4"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Feldspath</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Carreau de pavement</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Impression 3D</span>
|
||
<span class="meta-pill">Innovant</span>
|
||
<span class="meta-pill country">Espagne</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="piece-card">
|
||
<a href="round-object.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<path d="M12 3c-4.4 0-8 4-8 9s3.6 9 8 9 8-4 8-9-3.6-9-8-9z"/>
|
||
<path d="M9 12c0-1.7 1.3-3 3-3s3 1.3 3 3"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Argile</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Pot à tabac</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Moulage</span>
|
||
<span class="meta-pill">Traditionnel</span>
|
||
<span class="meta-pill country">Portugal</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="piece-card">
|
||
<a href="round-object.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<path d="M7 20h10M8 20V10L12 4l4 6v10"/>
|
||
<path d="M10 14h4"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Kaolin</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Théière à poignée</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Coulage</span>
|
||
<span class="meta-pill">Contemporain</span>
|
||
<span class="meta-pill country">Nouvelle-Aquitaine</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="piece-card">
|
||
<a href="round-object.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<circle cx="12" cy="12" r="7"/>
|
||
<circle cx="12" cy="12" r="3"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Argile</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Assiette à rebord</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Robotcasting</span>
|
||
<span class="meta-pill">Innovant</span>
|
||
<span class="meta-pill country">Espagne</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="piece-card">
|
||
<a href="round-object.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<path d="M5 7h14v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7z"/>
|
||
<path d="M9 7V4h6v3"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Silice</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Soupière couverte</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Moulage</span>
|
||
<span class="meta-pill">Traditionnel</span>
|
||
<span class="meta-pill country">Portugal</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
|
||
<article class="piece-card">
|
||
<a href="round-object.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<path d="M12 2C8 2 5 8 5 12s3 8 7 8 7-4 7-8-3-10-7-10z"/>
|
||
<path d="M8 12c0-2 1.8-4 4-4s4 2 4 4"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Argile</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Bol à oreilles</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Moulage</span>
|
||
<span class="meta-pill">Traditionnel</span>
|
||
<span class="meta-pill country">Espagne</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="piece-card">
|
||
<a href="round-object.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<path d="M6 20h12M7 20V8l5-6 5 6v12"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Kaolin</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Vase soliflore</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Coulage</span>
|
||
<span class="meta-pill">Contemporain</span>
|
||
<span class="meta-pill country">Portugal</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="piece-card">
|
||
<a href="round-object.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<ellipse cx="12" cy="8" rx="6" ry="4"/>
|
||
<path d="M6 8v8c0 2.2 2.7 4 6 4s6-1.8 6-4V8"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Argile</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Cruche à bec verseur</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Moulage</span>
|
||
<span class="meta-pill">Traditionnel</span>
|
||
<span class="meta-pill country">Occitanie</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="piece-card">
|
||
<a href="round-object.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<rect x="5" y="4" width="14" height="16" rx="2"/>
|
||
<path d="M9 9h6M9 13h4"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Feldspath</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Carreau de pavement</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Impression 3D</span>
|
||
<span class="meta-pill">Innovant</span>
|
||
<span class="meta-pill country">Espagne</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="piece-card">
|
||
<a href="round-object.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<path d="M12 3c-4.4 0-8 4-8 9s3.6 9 8 9 8-4 8-9-3.6-9-8-9z"/>
|
||
<path d="M9 12c0-1.7 1.3-3 3-3s3 1.3 3 3"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Argile</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Pot à tabac</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Moulage</span>
|
||
<span class="meta-pill">Traditionnel</span>
|
||
<span class="meta-pill country">Portugal</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="piece-card">
|
||
<a href="round-object.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<path d="M7 20h10M8 20V10L12 4l4 6v10"/>
|
||
<path d="M10 14h4"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Kaolin</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Théière à poignée</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Coulage</span>
|
||
<span class="meta-pill">Contemporain</span>
|
||
<span class="meta-pill country">Nouvelle-Aquitaine</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="piece-card">
|
||
<a href="round-object.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<circle cx="12" cy="12" r="7"/>
|
||
<circle cx="12" cy="12" r="3"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Argile</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Assiette à rebord</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Robotcasting</span>
|
||
<span class="meta-pill">Innovant</span>
|
||
<span class="meta-pill country">Espagne</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="piece-card">
|
||
<a href="round-object.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<path d="M5 7h14v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7z"/>
|
||
<path d="M9 7V4h6v3"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Silice</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Soupière couverte</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Moulage</span>
|
||
<span class="meta-pill">Traditionnel</span>
|
||
<span class="meta-pill country">Portugal</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="piece-card">
|
||
<a href="round-object.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<rect x="5" y="4" width="14" height="16" rx="2"/>
|
||
<path d="M9 9h6M9 13h4"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Feldspath</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Carreau de pavement</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Impression 3D</span>
|
||
<span class="meta-pill">Innovant</span>
|
||
<span class="meta-pill country">Espagne</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="piece-card">
|
||
<a href="round-object.html" class="card-image">
|
||
<div class="card-image-placeholder">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||
<path d="M12 3c-4.4 0-8 4-8 9s3.6 9 8 9 8-4 8-9-3.6-9-8-9z"/>
|
||
<path d="M9 12c0-1.7 1.3-3 3-3s3 1.3 3 3"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-tag">Argile</span>
|
||
</a>
|
||
<div class="card-body">
|
||
<h2 class="card-name">Pot à tabac</h2>
|
||
<div class="card-meta">
|
||
<span class="meta-pill technique">Moulage</span>
|
||
<span class="meta-pill">Traditionnel</span>
|
||
<span class="meta-pill country">Portugal</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<nav class="pagination" aria-label="Pagination">
|
||
<button class="page-btn" aria-label="Page précédente">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="15 18 9 12 15 6"/>
|
||
</svg>
|
||
</button>
|
||
<button class="page-btn active">1</button>
|
||
<button class="page-btn">2</button>
|
||
<button class="page-btn">3</button>
|
||
<button class="page-btn">4</button>
|
||
<button class="page-btn">5</button>
|
||
<button class="page-btn ellipsis">…</button>
|
||
<button class="page-btn">18</button>
|
||
<button class="page-btn" aria-label="Page suivante">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="9 18 15 12 9 6"/>
|
||
</svg>
|
||
</button>
|
||
</nav>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<!-- ─── Footer ──────────────────────────────────────── -->
|
||
|
||
</body>
|
||
</html>
|