You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
711 lines
22 KiB
HTML
711 lines
22 KiB
HTML
12 hours ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="fr">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Foraminifères — Les Architectes des Abysses</title>
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garant:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--abyss: #0B1F2E;
|
||
|
|
--deep: #1A4A5E;
|
||
|
|
--sand: #C8A96E;
|
||
|
|
--limestone:#E8D5A3;
|
||
|
|
--cream: #F5EDD6;
|
||
|
|
--teal: #4ECDC4;
|
||
|
|
--text-main:#F5EDD6;
|
||
|
|
--text-dim: #A8C4CC;
|
||
|
|
}
|
||
|
|
|
||
|
|
html { scroll-behavior: smooth; }
|
||
|
|
|
||
|
|
body {
|
||
|
|
background: var(--abyss);
|
||
|
|
color: var(--text-main);
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
font-weight: 300;
|
||
|
|
line-height: 1.7;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── CANVAS BACKGROUND ── */
|
||
|
|
#bg-canvas {
|
||
|
|
position: fixed;
|
||
|
|
inset: 0;
|
||
|
|
z-index: 0;
|
||
|
|
opacity: 0.18;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── NAV ── */
|
||
|
|
nav {
|
||
|
|
position: fixed;
|
||
|
|
top: 0; left: 0; right: 0;
|
||
|
|
z-index: 100;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 1.2rem 3rem;
|
||
|
|
background: linear-gradient(to bottom, rgba(11,31,46,0.95), transparent);
|
||
|
|
backdrop-filter: blur(4px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-logo {
|
||
|
|
font-family: 'Cormorant Garant', serif;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
letter-spacing: 0.25em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--sand);
|
||
|
|
font-weight: 300;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav ul {
|
||
|
|
list-style: none;
|
||
|
|
display: flex;
|
||
|
|
gap: 2.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav a {
|
||
|
|
color: var(--text-dim);
|
||
|
|
text-decoration: none;
|
||
|
|
font-size: 0.78rem;
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
transition: color 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav a:hover { color: var(--teal); }
|
||
|
|
|
||
|
|
/* ── HERO ── */
|
||
|
|
.hero {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
min-height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
text-align: center;
|
||
|
|
padding: 8rem 2rem 4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-eyebrow {
|
||
|
|
font-size: 0.72rem;
|
||
|
|
letter-spacing: 0.35em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--teal);
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-family: 'Cormorant Garant', serif;
|
||
|
|
font-size: clamp(3rem, 8vw, 7rem);
|
||
|
|
font-weight: 300;
|
||
|
|
line-height: 1.05;
|
||
|
|
color: var(--cream);
|
||
|
|
margin-bottom: 0.3em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 em {
|
||
|
|
font-style: italic;
|
||
|
|
color: var(--sand);
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-sub {
|
||
|
|
font-size: clamp(1rem, 1.8vw, 1.25rem);
|
||
|
|
color: var(--text-dim);
|
||
|
|
max-width: 560px;
|
||
|
|
margin: 1.5rem auto 3rem;
|
||
|
|
font-weight: 300;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-stats {
|
||
|
|
display: flex;
|
||
|
|
gap: 3rem;
|
||
|
|
justify-content: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-num {
|
||
|
|
font-family: 'Cormorant Garant', serif;
|
||
|
|
font-size: 2.6rem;
|
||
|
|
font-weight: 300;
|
||
|
|
color: var(--sand);
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-label {
|
||
|
|
font-size: 0.68rem;
|
||
|
|
letter-spacing: 0.12em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--text-dim);
|
||
|
|
margin-top: 0.3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll-hint {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 2.5rem;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
color: var(--text-dim);
|
||
|
|
font-size: 0.65rem;
|
||
|
|
letter-spacing: 0.2em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
animation: bob 2s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll-arrow {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
border-right: 1px solid var(--text-dim);
|
||
|
|
border-bottom: 1px solid var(--text-dim);
|
||
|
|
transform: rotate(45deg);
|
||
|
|
margin-top: -4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bob {
|
||
|
|
0%, 100% { transform: translateX(-50%) translateY(0); }
|
||
|
|
50% { transform: translateX(-50%) translateY(6px); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── SECTIONS COMMUNES ── */
|
||
|
|
section {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
padding: 7rem 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
max-width: 1100px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-label {
|
||
|
|
font-size: 0.68rem;
|
||
|
|
letter-spacing: 0.3em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--teal);
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
font-family: 'Cormorant Garant', serif;
|
||
|
|
font-size: clamp(2rem, 4vw, 3.2rem);
|
||
|
|
font-weight: 300;
|
||
|
|
color: var(--cream);
|
||
|
|
line-height: 1.2;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
p { color: var(--text-dim); max-width: 68ch; }
|
||
|
|
|
||
|
|
/* ── DIVIDER ── */
|
||
|
|
.divider {
|
||
|
|
width: 100%;
|
||
|
|
height: 1px;
|
||
|
|
background: linear-gradient(to right, transparent, var(--deep), transparent);
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── INTRO ── */
|
||
|
|
.intro-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
gap: 5rem;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.foram-diagram {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
aspect-ratio: 1;
|
||
|
|
max-width: 380px;
|
||
|
|
justify-self: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── MORPHOLOGIE — cards ── */
|
||
|
|
.cards {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||
|
|
gap: 1.5rem;
|
||
|
|
margin-top: 3.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card {
|
||
|
|
background: rgba(26,74,94,0.25);
|
||
|
|
border: 1px solid rgba(200,169,110,0.15);
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 2rem;
|
||
|
|
transition: border-color 0.3s, transform 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card:hover {
|
||
|
|
border-color: rgba(78,205,196,0.35);
|
||
|
|
transform: translateY(-4px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-icon {
|
||
|
|
margin-bottom: 1.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card h3 {
|
||
|
|
font-family: 'Cormorant Garant', serif;
|
||
|
|
font-size: 1.4rem;
|
||
|
|
font-weight: 400;
|
||
|
|
color: var(--limestone);
|
||
|
|
margin-bottom: 0.6rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card p { font-size: 0.9rem; line-height: 1.6; }
|
||
|
|
|
||
|
|
/* ── TIMELINE ── */
|
||
|
|
.timeline {
|
||
|
|
margin-top: 4rem;
|
||
|
|
position: relative;
|
||
|
|
padding-left: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
left: 0; top: 0; bottom: 0;
|
||
|
|
width: 1px;
|
||
|
|
background: linear-gradient(to bottom, var(--teal), transparent);
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline-item {
|
||
|
|
position: relative;
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
padding-left: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline-item::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
left: -2rem;
|
||
|
|
top: 0.45rem;
|
||
|
|
width: 7px; height: 7px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: var(--teal);
|
||
|
|
box-shadow: 0 0 12px var(--teal);
|
||
|
|
}
|
||
|
|
|
||
|
|
.tl-date {
|
||
|
|
font-size: 0.7rem;
|
||
|
|
letter-spacing: 0.2em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--sand);
|
||
|
|
margin-bottom: 0.35rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tl-title {
|
||
|
|
font-family: 'Cormorant Garant', serif;
|
||
|
|
font-size: 1.3rem;
|
||
|
|
font-weight: 400;
|
||
|
|
color: var(--cream);
|
||
|
|
margin-bottom: 0.4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tl-desc { font-size: 0.88rem; }
|
||
|
|
|
||
|
|
/* ── USAGE SPLIT ── */
|
||
|
|
.usage-split {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
gap: 4rem;
|
||
|
|
margin-top: 3.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.usage-item {
|
||
|
|
border-top: 1px solid rgba(200,169,110,0.2);
|
||
|
|
padding-top: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.usage-item h3 {
|
||
|
|
font-family: 'Cormorant Garant', serif;
|
||
|
|
font-size: 1.5rem;
|
||
|
|
font-weight: 400;
|
||
|
|
color: var(--limestone);
|
||
|
|
margin-bottom: 0.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.usage-item p { font-size: 0.9rem; }
|
||
|
|
|
||
|
|
/* ── QUOTE ── */
|
||
|
|
.quote-block {
|
||
|
|
background: linear-gradient(135deg, rgba(26,74,94,0.4), rgba(11,31,46,0.6));
|
||
|
|
border-left: 3px solid var(--sand);
|
||
|
|
padding: 3rem 4rem;
|
||
|
|
margin: 0 auto;
|
||
|
|
max-width: 800px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.quote-block blockquote {
|
||
|
|
font-family: 'Cormorant Garant', serif;
|
||
|
|
font-size: clamp(1.3rem, 2.5vw, 1.9rem);
|
||
|
|
font-style: italic;
|
||
|
|
font-weight: 300;
|
||
|
|
color: var(--cream);
|
||
|
|
line-height: 1.5;
|
||
|
|
margin-bottom: 1.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.quote-attr {
|
||
|
|
font-size: 0.72rem;
|
||
|
|
letter-spacing: 0.2em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--sand);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── FOOTER ── */
|
||
|
|
footer {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
padding: 3rem;
|
||
|
|
text-align: center;
|
||
|
|
border-top: 1px solid rgba(26,74,94,0.6);
|
||
|
|
color: var(--text-dim);
|
||
|
|
font-size: 0.78rem;
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer span { color: var(--sand); }
|
||
|
|
|
||
|
|
/* ── RESPONSIVE ── */
|
||
|
|
@media (max-width: 700px) {
|
||
|
|
nav { padding: 1rem 1.5rem; }
|
||
|
|
nav ul { display: none; }
|
||
|
|
.intro-grid, .usage-split { grid-template-columns: 1fr; gap: 2.5rem; }
|
||
|
|
.quote-block { padding: 2rem 1.5rem; }
|
||
|
|
section { padding: 5rem 1.5rem; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-reduced-motion: reduce) {
|
||
|
|
.scroll-hint { animation: none; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- Canvas animé -->
|
||
|
|
<canvas id="bg-canvas"></canvas>
|
||
|
|
|
||
|
|
<!-- Nav -->
|
||
|
|
<nav>
|
||
|
|
<div class="nav-logo">Foram·Info</div>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#intro">Biologie</a></li>
|
||
|
|
<li><a href="#morpho">Morphologie</a></li>
|
||
|
|
<li><a href="#histoire">Histoire</a></li>
|
||
|
|
<li><a href="#usages">Usages</a></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- Hero -->
|
||
|
|
<section class="hero">
|
||
|
|
<p class="hero-eyebrow">Protistes marins · Rhizaria · Granuloréticulosés</p>
|
||
|
|
<h1>Les <em>Foraminifères</em><br>architectes du fond des mers</h1>
|
||
|
|
<p class="hero-sub">Des organismes unicellulaires microscopiques qui, depuis 540 millions d'années, sculptent des coquilles d'une précision étonnante — et réécrivent l'histoire de notre planète.</p>
|
||
|
|
<div class="hero-stats">
|
||
|
|
<div class="stat"><div class="stat-num">10 000+</div><div class="stat-label">espèces connues</div></div>
|
||
|
|
<div class="stat"><div class="stat-num">540 Ma</div><div class="stat-label">d'évolution</div></div>
|
||
|
|
<div class="stat"><div class="stat-num">25 %</div><div class="stat-label">des fonds marins</div></div>
|
||
|
|
</div>
|
||
|
|
<div class="scroll-hint">Défiler<div class="scroll-arrow"></div></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="divider"></div>
|
||
|
|
|
||
|
|
<!-- Intro -->
|
||
|
|
<section id="intro">
|
||
|
|
<div class="container">
|
||
|
|
<div class="intro-grid">
|
||
|
|
<div>
|
||
|
|
<p class="section-label">Qu'est-ce qu'un foraminifère ?</p>
|
||
|
|
<h2>Une cellule, une coquille, un monde</h2>
|
||
|
|
<p>Les foraminifères, ou « forams », sont des protistes unicellulaires marins appartenant au groupe des Rhizaria. Leur caractéristique la plus distinctive est la production d'une <strong style="color:var(--limestone)">coquille (test)</strong> composée de chambres reliées par de petites ouvertures — les foramen, qui donnent leur nom au groupe.</p>
|
||
|
|
<br>
|
||
|
|
<p>Ces organismes vivent aussi bien dans la colonne d'eau (espèces planctoniques) que sur les fonds marins (espèces benthiques). Leurs coquilles calcaires, après la mort, s'accumulent en couches sédimentaires riches en informations paléoclimatiques.</p>
|
||
|
|
</div>
|
||
|
|
<!-- Diagramme SVG d'un foram -->
|
||
|
|
<div class="foram-diagram">
|
||
|
|
<svg viewBox="0 0 380 380" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="gShell" cx="50%" cy="50%">
|
||
|
|
<stop offset="0%" stop-color="#C8A96E" stop-opacity="0.9"/>
|
||
|
|
<stop offset="100%" stop-color="#1A4A5E" stop-opacity="0.4"/>
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="gInner" cx="50%" cy="50%">
|
||
|
|
<stop offset="0%" stop-color="#4ECDC4" stop-opacity="0.3"/>
|
||
|
|
<stop offset="100%" stop-color="#0B1F2E" stop-opacity="0.1"/>
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
<!-- Chambres -->
|
||
|
|
<ellipse cx="190" cy="190" rx="130" ry="120" fill="url(#gShell)" stroke="#C8A96E" stroke-width="1.5" opacity="0.6"/>
|
||
|
|
<ellipse cx="190" cy="185" rx="95" ry="88" fill="url(#gInner)" stroke="#C8A96E" stroke-width="1" opacity="0.5"/>
|
||
|
|
<ellipse cx="190" cy="180" rx="65" ry="60" fill="rgba(78,205,196,0.12)" stroke="#C8A96E" stroke-width="1" opacity="0.5"/>
|
||
|
|
<ellipse cx="190" cy="178" rx="38" ry="35" fill="rgba(78,205,196,0.2)" stroke="#4ECDC4" stroke-width="1" opacity="0.7"/>
|
||
|
|
<circle cx="190" cy="178" r="14" fill="#4ECDC4" opacity="0.5"/>
|
||
|
|
<!-- Pseudopodes -->
|
||
|
|
<g stroke="#4ECDC4" stroke-width="0.8" opacity="0.6">
|
||
|
|
<line x1="320" y1="130" x2="288" y2="155"/>
|
||
|
|
<line x1="310" y1="230" x2="278" y2="215"/>
|
||
|
|
<line x1="190" y1="65" x2="190" y2="90"/>
|
||
|
|
<line x1="60" y1="140" x2="98" y2="160"/>
|
||
|
|
<line x1="55" y1="230" x2="94" y2="220"/>
|
||
|
|
<line x1="180" y1="310" x2="183" y2="278"/>
|
||
|
|
<line x1="340" y1="185" x2="318" y2="185"/>
|
||
|
|
<line x1="40" y1="185" x2="62" y2="185"/>
|
||
|
|
</g>
|
||
|
|
<!-- Labels -->
|
||
|
|
<text x="190" y="178" text-anchor="middle" dominant-baseline="middle" font-family="Inter" font-size="9" fill="#4ECDC4" letter-spacing="1">Proloculus</text>
|
||
|
|
<text x="340" y="85" font-family="Inter" font-size="9" fill="#E8D5A3" opacity="0.8">Pseudopodes</text>
|
||
|
|
<line x1="316" y1="98" x2="296" y2="140" stroke="#E8D5A3" stroke-width="0.5" opacity="0.5"/>
|
||
|
|
<text x="240" y="40" font-family="Inter" font-size="9" fill="#E8D5A3" opacity="0.8">Test (coquille)</text>
|
||
|
|
<line x1="252" y1="48" x2="230" y2="72" stroke="#E8D5A3" stroke-width="0.5" opacity="0.5"/>
|
||
|
|
<text x="22" y="100" font-family="Inter" font-size="9" fill="#E8D5A3" opacity="0.8">Ouverture</text>
|
||
|
|
<line x1="70" y1="108" x2="100" y2="155" stroke="#E8D5A3" stroke-width="0.5" opacity="0.5"/>
|
||
|
|
<text x="120" y="345" font-family="Inter" font-size="9" fill="#C8A96E" opacity="0.7" letter-spacing="0.5">Coupe transversale schématique</text>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="divider"></div>
|
||
|
|
|
||
|
|
<!-- Morphologie -->
|
||
|
|
<section id="morpho">
|
||
|
|
<div class="container">
|
||
|
|
<p class="section-label">Diversité des formes</p>
|
||
|
|
<h2>Architectures de calcaire</h2>
|
||
|
|
<p>La morphologie des coquilles reflète des millions d'années d'adaptation aux milieux marins. Leur diversité est stupéfiante — chaque espèce possède une architecture reconnaissable.</p>
|
||
|
|
<div class="cards">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-icon">
|
||
|
|
<svg viewBox="0 0 50 50" width="42" height="42"><circle cx="25" cy="25" r="20" fill="none" stroke="#4ECDC4" stroke-width="1.2"/><circle cx="25" cy="25" r="12" fill="none" stroke="#C8A96E" stroke-width="1"/><circle cx="25" cy="25" r="5" fill="#4ECDC4" opacity="0.5"/></svg>
|
||
|
|
</div>
|
||
|
|
<h3>Test planispiralé</h3>
|
||
|
|
<p>Coquille enroulée dans un plan unique, comme un nautile miniature. Très répandu chez les foraminifères benthiques.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-icon">
|
||
|
|
<svg viewBox="0 0 50 50" width="42" height="42"><path d="M25 8 Q40 20 40 35 Q32 44 25 44 Q18 44 10 35 Q10 20 25 8Z" fill="none" stroke="#4ECDC4" stroke-width="1.2"/><path d="M25 16 Q33 24 33 34 Q28 40 25 40 Q22 40 17 34 Q17 24 25 16Z" fill="none" stroke="#C8A96E" stroke-width="1"/></svg>
|
||
|
|
</div>
|
||
|
|
<h3>Test trochospiralé</h3>
|
||
|
|
<p>Enroulement hélicoïdal en 3D, formant un cône. Ce type inclut <em>Globigerina</em>, l'espèce planctonique la plus abondante.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-icon">
|
||
|
|
<svg viewBox="0 0 50 50" width="42" height="42"><rect x="10" y="18" width="10" height="14" rx="2" fill="none" stroke="#4ECDC4" stroke-width="1.2"/><rect x="20" y="15" width="10" height="20" rx="2" fill="none" stroke="#C8A96E" stroke-width="1"/><rect x="30" y="12" width="10" height="26" rx="2" fill="none" stroke="#4ECDC4" stroke-width="1.2"/></svg>
|
||
|
|
</div>
|
||
|
|
<h3>Test unisérié</h3>
|
||
|
|
<p>Chambres alignées en une seule rangée rectiligne. Structure simple mais efficace, comme chez <em>Nodosaria</em>.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-icon">
|
||
|
|
<svg viewBox="0 0 50 50" width="42" height="42"><ellipse cx="25" cy="25" rx="20" ry="8" fill="none" stroke="#4ECDC4" stroke-width="1.2"/><ellipse cx="25" cy="25" rx="13" ry="5" fill="none" stroke="#C8A96E" stroke-width="1"/><line x1="5" y1="25" x2="45" y2="25" stroke="#4ECDC4" stroke-width="0.6" stroke-dasharray="3,2"/></svg>
|
||
|
|
</div>
|
||
|
|
<h3>Test miliolidé</h3>
|
||
|
|
<p>Structure complexe avec des loges enroulées dans différents plans. Paroi porcellanoïde, blanc opaque caractéristique.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="divider"></div>
|
||
|
|
|
||
|
|
<!-- Timeline -->
|
||
|
|
<section id="histoire">
|
||
|
|
<div class="container">
|
||
|
|
<p class="section-label">Paléontologie</p>
|
||
|
|
<h2>540 millions d'années<br><em>de présence discrète</em></h2>
|
||
|
|
<div class="timeline">
|
||
|
|
<div class="timeline-item">
|
||
|
|
<p class="tl-date">~540 Ma — Cambrien</p>
|
||
|
|
<p class="tl-title">Premières apparitions</p>
|
||
|
|
<p>Les premiers foraminifères agglutinants apparaissent, construisant leurs coquilles à partir de particules sédimentaires. Ils sont agglutinés plutôt que calcifiés.</p>
|
||
|
|
</div>
|
||
|
|
<div class="timeline-item">
|
||
|
|
<p class="tl-date">~370 Ma — Dévonien</p>
|
||
|
|
<p class="tl-title">Essor des tests calcaires</p>
|
||
|
|
<p>Explosion de la diversité. Les coquilles calcaires deviennent dominantes, permettant une meilleure fossilisation et une explosion de formes architecturales.</p>
|
||
|
|
</div>
|
||
|
|
<div class="timeline-item">
|
||
|
|
<p class="tl-date">~252 Ma — Extinction du Permien</p>
|
||
|
|
<p class="tl-title">Survie et renouveau</p>
|
||
|
|
<p>La grande extinction décime la majorité des espèces. Seuls quelques groupes survivent et donnent naissance à une nouvelle radiation évolutive.</p>
|
||
|
|
</div>
|
||
|
|
<div class="timeline-item">
|
||
|
|
<p class="tl-date">Crétacé — 66 Ma</p>
|
||
|
|
<p class="tl-title">Âge d'or planctonique</p>
|
||
|
|
<p>Les foraminifères planctoniques atteignent une diversité maximale. Leur extinction partielle à la limite K-Pg est un marqueur biostratigraphique mondial.</p>
|
||
|
|
</div>
|
||
|
|
<div class="timeline-item">
|
||
|
|
<p class="tl-date">Aujourd'hui</p>
|
||
|
|
<p class="tl-title">Archives climatiques vivantes</p>
|
||
|
|
<p>Plus de 10 000 espèces vivantes. Leurs coquilles sont utilisées pour reconstituer les paléotempératures océaniques et comprendre les changements climatiques passés.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="divider"></div>
|
||
|
|
|
||
|
|
<!-- Quote -->
|
||
|
|
<section>
|
||
|
|
<div class="container">
|
||
|
|
<div class="quote-block">
|
||
|
|
<blockquote>
|
||
|
|
« Un gramme de sédiment marin peut contenir des milliers de coquilles de foraminifères — chacune est une capsule temporelle encodant les conditions de l'océan ancien. »
|
||
|
|
</blockquote>
|
||
|
|
<p class="quote-attr">Principe de la micropaléontologie marine</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="divider"></div>
|
||
|
|
|
||
|
|
<!-- Usages -->
|
||
|
|
<section id="usages">
|
||
|
|
<div class="container">
|
||
|
|
<p class="section-label">Applications scientifiques</p>
|
||
|
|
<h2>Des outils pour comprendre<br>la Terre et son avenir</h2>
|
||
|
|
<div class="usage-split">
|
||
|
|
<div class="usage-item">
|
||
|
|
<h3>Biostratigraphie</h3>
|
||
|
|
<p>Les assemblages de foraminifères fossiles permettent de dater avec précision les couches sédimentaires. Ils sont indispensables à l'industrie pétrolière pour corréler les forages à travers le monde.</p>
|
||
|
|
</div>
|
||
|
|
<div class="usage-item">
|
||
|
|
<h3>Paléoclimatologie</h3>
|
||
|
|
<p>Les rapports isotopiques (δ¹⁸O, Mg/Ca) dans les coquilles fossilisées enregistrent les températures passées des eaux de surface, reconstituant les courbes climatiques sur des millions d'années.</p>
|
||
|
|
</div>
|
||
|
|
<div class="usage-item">
|
||
|
|
<h3>Surveillance environnementale</h3>
|
||
|
|
<p>Les communautés de foraminifères benthiques vivants sont d'excellents bioindicateurs de la qualité des sédiments marins et de la pollution, répondant rapidement aux perturbations anthropiques.</p>
|
||
|
|
</div>
|
||
|
|
<div class="usage-item">
|
||
|
|
<h3>Changement climatique actuel</h3>
|
||
|
|
<p>L'acidification des océans menace la calcification des foraminifères. Leur étude permet de comprendre les effets du CO₂ sur les écosystèmes marins et d'anticiper les bouleversements à venir.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="divider"></div>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p>Page éducative sur les foraminifères · Données issues de la littérature scientifique · <span>Foram·Info</span></p>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// ── CANVAS : foraminifères flottants ──
|
||
|
|
const canvas = document.getElementById('bg-canvas');
|
||
|
|
const ctx = canvas.getContext('2d');
|
||
|
|
|
||
|
|
function resize() {
|
||
|
|
canvas.width = window.innerWidth;
|
||
|
|
canvas.height = window.innerHeight;
|
||
|
|
}
|
||
|
|
resize();
|
||
|
|
window.addEventListener('resize', resize);
|
||
|
|
|
||
|
|
const FORAM_COUNT = 18;
|
||
|
|
const forams = Array.from({ length: FORAM_COUNT }, () => ({
|
||
|
|
x: Math.random() * window.innerWidth,
|
||
|
|
y: Math.random() * window.innerHeight,
|
||
|
|
r: 20 + Math.random() * 55,
|
||
|
|
vx: (Math.random() - 0.5) * 0.22,
|
||
|
|
vy: (Math.random() - 0.5) * 0.22,
|
||
|
|
rot: Math.random() * Math.PI * 2,
|
||
|
|
vr: (Math.random() - 0.5) * 0.003,
|
||
|
|
chambers: 3 + Math.floor(Math.random() * 4),
|
||
|
|
hue: Math.random() > 0.5 ? '#C8A96E' : '#4ECDC4'
|
||
|
|
}));
|
||
|
|
|
||
|
|
function drawForam(f) {
|
||
|
|
const { x, y, r, rot, chambers, hue } = f;
|
||
|
|
ctx.save();
|
||
|
|
ctx.translate(x, y);
|
||
|
|
ctx.rotate(rot);
|
||
|
|
ctx.strokeStyle = hue;
|
||
|
|
ctx.lineWidth = 0.8;
|
||
|
|
ctx.globalAlpha = 0.7;
|
||
|
|
|
||
|
|
// Spirale de chambres
|
||
|
|
for (let i = chambers; i >= 1; i--) {
|
||
|
|
const fr = r * (i / chambers);
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.ellipse(0, 0, fr, fr * 0.82, 0, 0, Math.PI * 2);
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Pseudopodes
|
||
|
|
const spines = 8;
|
||
|
|
for (let i = 0; i < spines; i++) {
|
||
|
|
const ang = (i / spines) * Math.PI * 2;
|
||
|
|
const len = r * 0.45;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(Math.cos(ang) * r, Math.sin(ang) * r);
|
||
|
|
ctx.lineTo(Math.cos(ang) * (r + len), Math.sin(ang) * (r + len));
|
||
|
|
ctx.globalAlpha = 0.3;
|
||
|
|
ctx.stroke();
|
||
|
|
ctx.globalAlpha = 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
ctx.restore();
|
||
|
|
}
|
||
|
|
|
||
|
|
function tick() {
|
||
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
|
forams.forEach(f => {
|
||
|
|
f.x += f.vx;
|
||
|
|
f.y += f.vy;
|
||
|
|
f.rot += f.vr;
|
||
|
|
if (f.x < -f.r * 2) f.x = canvas.width + f.r;
|
||
|
|
if (f.x > canvas.width + f.r * 2) f.x = -f.r;
|
||
|
|
if (f.y < -f.r * 2) f.y = canvas.height + f.r;
|
||
|
|
if (f.y > canvas.height + f.r * 2) f.y = -f.r;
|
||
|
|
drawForam(f);
|
||
|
|
});
|
||
|
|
requestAnimationFrame(tick);
|
||
|
|
}
|
||
|
|
tick();
|
||
|
|
|
||
|
|
// ── SCROLL REVEAL ──
|
||
|
|
const observer = new IntersectionObserver(entries => {
|
||
|
|
entries.forEach(e => {
|
||
|
|
if (e.isIntersecting) {
|
||
|
|
e.target.style.opacity = '1';
|
||
|
|
e.target.style.transform = 'translateY(0)';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}, { threshold: 0.1 });
|
||
|
|
|
||
|
|
document.querySelectorAll('.card, .timeline-item, .usage-item').forEach(el => {
|
||
|
|
el.style.opacity = '0';
|
||
|
|
el.style.transform = 'translateY(24px)';
|
||
|
|
el.style.transition = 'opacity 0.7s ease, transform 0.7s ease';
|
||
|
|
observer.observe(el);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|