/* =============================================================================
COPEPODES - TEMPLATE ARTISTIQUE MODERNE RESPONSIVE
Observatoire Oc�anologique de Banyuls sur Mer
Sorbonne Universit� � CNRS
Design : Deep Ocean � Bioluminescence � Glassmorphism
============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500&display=swap');
/* =============================================================================
VARIABLES CSS
============================================================================= */
:root {
/* Palette Oc�an Profond */
--ocean-1: #020b18;
/* abyssal */
--ocean-2: #051c35;
--ocean-3: #0a2d54;
--ocean-4: #0f3d72;
--ocean-mid: #1a6ea8;
--ocean-light: #2196f3;
/* Bioluminescence */
--biolum-1: #00e5ff;
/* cyan vif */
--biolum-2: #18ffff;
--biolum-3: #40c4ff;
--biolum-glow: rgba(0, 229, 255, 0.35);
/* Accent corail */
--coral: #ff7043;
--coral-light: #ff8a65;
/* Couleurs fonctionnelles */
--color-primary: #1976D2;
--color-primary-dark: #0d47a1;
--color-primary-light: #64B5F6;
--color-accent: #00e5ff;
--color-accent-dark: #0097a7;
--color-header-from: var(--ocean-2);
--color-header-to: var(--ocean-3);
--color-text: #1c2b3a;
--color-text-light: #4a6275;
--color-text-muted: #7b97ab;
--color-heading: #0a2d54;
--color-bg: #f0f7ff;
--color-bg-white: #ffffff;
--color-border: #c8ddf0;
/* Surface glassmorphism */
--glass-bg: rgba(255, 255, 255, 0.65);
--glass-border: rgba(255, 255, 255, 0.45);
--glass-shadow: 0 8px 32px rgba(10, 45, 84, 0.15);
/* Typo */
--font-main: 'Inter', 'DM Sans', Arial, sans-serif;
--font-heading: 'Playfair Display', Georgia, serif;
--font-dm: 'DM Sans', 'Inter', sans-serif;
/* Espacements */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 36px;
--space-2xl: 56px;
--header-height: 68px;
--max-width: 1300px;
/* Ombres & Rayons */
--shadow-sm: 0 2px 8px rgba(10, 45, 84, 0.08);
--shadow-md: 0 6px 20px rgba(10, 45, 84, 0.14);
--shadow-lg: 0 16px 48px rgba(10, 45, 84, 0.22);
--shadow-glow: 0 0 24px var(--biolum-glow);
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: all 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
/* =============================================================================
RESET & BASE
============================================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-main);
font-size: 14.5px;
color: var(--color-text);
background:
radial-gradient(ellipse 80% 40% at 0% 0%, rgba(0, 229, 255, 0.04) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 100% 100%, rgba(26, 110, 168, 0.08) 0%, transparent 60%),
var(--color-bg);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: var(--transition);
}
a:hover {
color: var(--color-primary-dark);
text-decoration: underline;
}
a:visited {
color: var(--color-primary);
}
img {
max-width: 100%;
height: auto;
display: block;
}
.site-content p img,
.site-content p a img {
display: inline;
vertical-align: middle;
}
/* Galerie de figures centr�es */
.figure-gallery {
display: flex;
gap: 1.5em;
justify-content: center;
flex-wrap: wrap;
margin: 1.2em auto;
}
.figure-gallery img {
display: block;
border-radius: 4px;
transition: transform 0.2s ease;
border: 1px solid #dde8ee;
}
.figure-gallery img:hover {
transform: scale(1.04);
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
/* Termes scientifiques ( existants + classe future .term-sci) */
.site-content p u,
.site-content li u,
.term-sci {
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: var(--color-primary, #6fafc7);
text-underline-offset: 3px;
font-style: normal;
}
/* Images flottantes dans le contenu */
.site-content img[style*="float"] {
border-radius: 4px;
border: 1px solid #dde8ee;
}
/* Badge de groupe taxinomique num�rot� */
.taxo-badge {
display: inline-block;
background: #e8f4f8;
border-left: 3px solid #6fafc7;
padding: 0.15em 0.6em;
margin-right: 0.4em;
font-weight: 700;
border-radius: 0 4px 4px 0;
color: #1a5c70;
}
/* =============================================================================
HEADER - glassmorphism + gradient oc�an
============================================================================= */
.site-header {
background: linear-gradient(135deg, var(--ocean-2) 0%, var(--ocean-3) 60%, var(--ocean-4) 100%);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
/* Ligne lumineuse bioluminescente en bas du header */
.site-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--biolum-3) 30%,
var(--biolum-1) 50%,
var(--biolum-3) 70%,
transparent 100%);
opacity: 0.6;
}
.header-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--space-lg);
height: var(--header-height);
display: flex;
align-items: center;
gap: var(--space-lg);
}
/* ---- Logo ---- */
.header-logo {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
text-decoration: none;
}
.header-logo:hover {
text-decoration: none;
}
.header-logo-icon {
width: auto;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: var(--transition);
}
.header-logo-icon img {
height: 100%;
width: auto;
object-fit: contain;
display: block;
}
.header-logo:hover .header-logo-icon {
box-shadow:
0 0 0 3px rgba(0, 229, 255, 0.45),
0 0 28px rgba(0, 229, 255, 0.55);
transform: rotate(-8deg) scale(1.08);
}
.header-logo-text {
display: flex;
flex-direction: column;
}
.header-logo-title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
color: #fff;
line-height: 1;
letter-spacing: -0.01em;
}
.header-logo-subtitle {
font-size: 9.5px;
color: var(--biolum-1);
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 500;
margin-top: 3px;
opacity: 0.85;
}
/* =============================================================================
NAVIGATION MEGA-MENU
============================================================================= */
.header-nav {
flex: 1;
display: flex;
align-items: center;
height: 100%;
}
.header-nav>ul {
display: flex;
align-items: stretch;
height: 100%;
list-style: none;
gap: 0;
}
/* Niveau 1 */
.header-nav>ul>li {
position: relative;
display: flex;
align-items: center;
}
.header-nav>ul>li>a,
.header-nav>ul>li>span {
display: flex;
align-items: center;
gap: 4px;
padding: 0 15px;
height: 100%;
color: rgba(255, 255, 255, 0.82);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition: var(--transition);
border-bottom: 2px solid transparent;
text-decoration: none;
user-select: none;
letter-spacing: 0.01em;
}
.header-nav>ul>li>a:hover,
.header-nav>ul>li>span:hover,
.header-nav>ul>li:hover>a,
.header-nav>ul>li:hover>span {
color: #fff;
background: rgba(0, 229, 255, 0.08);
border-bottom-color: var(--biolum-1);
text-decoration: none;
}
.header-nav>ul>li>a.active {
color: var(--biolum-1);
border-bottom-color: var(--biolum-1);
}
/* Fl�che dropdown */
.has-dropdown>a::after,
.has-dropdown>span::after {
content: '\25BE';
font-size: 9px;
margin-left: 4px;
opacity: 0.6;
transition: transform 0.25s ease;
display: inline-block;
}
.has-dropdown:hover>a::after,
.has-dropdown:hover>span::after {
transform: rotate(180deg);
opacity: 1;
}
/* Panneau dropdown */
.dropdown {
position: absolute;
top: calc(100% + 2px);
left: 0;
min-width: 250px;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
box-shadow: var(--shadow-lg);
border-top: 2px solid var(--biolum-1);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
z-index: 2000;
list-style: none;
padding: 8px 0;
}
.dropdown.wide {
min-width: 390px;
}
.has-dropdown:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Items dropdown */
.dropdown li a {
display: flex;
align-items: center;
padding: 9px 18px;
font-size: 13px;
color: var(--color-text);
font-weight: 400;
line-height: 1.45;
transition: var(--transition);
border-left: 2px solid transparent;
text-decoration: none;
}
.dropdown li a:hover {
background: rgba(0, 100, 210, 0.05);
color: var(--color-primary);
border-left-color: var(--biolum-1);
padding-left: 22px;
text-decoration: none;
}
.dropdown .dropdown-heading {
padding: 6px 18px;
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--color-text-muted);
pointer-events: none;
}
/* S�lecteur de langue */
.header-lang {
display: flex;
gap: 6px;
align-items: center;
flex-shrink: 0;
margin-left: auto;
}
.header-lang a {
display: flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: var(--radius-sm);
border: 1px solid rgba(0, 229, 255, 0.25);
color: rgba(255, 255, 255, 0.75);
font-size: 11px;
font-weight: 500;
transition: var(--transition);
letter-spacing: 0.04em;
}
.header-lang a:hover {
background: rgba(0, 229, 255, 0.12);
border-color: rgba(0, 229, 255, 0.55);
color: #fff;
text-decoration: none;
}
.header-lang img {
width: 18px;
height: 12px;
border-radius: 2px;
display: inline-block;
}
/* Hamburger mobile */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: var(--space-sm);
background: none;
border: none;
margin-left: auto;
}
.hamburger span {
display: block;
width: 24px;
height: 2px;
background: rgba(255, 255, 255, 0.9);
border-radius: 2px;
transition: var(--transition);
}
/* =============================================================================
BANNI�RE HERO - artistique avec overlay ondul�
============================================================================= */
.site-banner {
width: 100%;
overflow: hidden;
position: relative;
background: var(--ocean-2);
max-height: 220px;
}
.site-banner img {
width: 100%;
height: 220px;
object-fit: cover;
object-position: center 40%;
opacity: 0.72;
display: block;
filter: saturate(1.15) contrast(1.05);
transition: transform 8s ease;
}
.site-banner:hover img {
transform: scale(1.03);
}
/* Overlay gradient multi-couches */
.site-banner-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(to right, rgba(5, 28, 53, 0.72) 0%, transparent 55%),
linear-gradient(to top, rgba(2, 11, 24, 0.6) 0%, transparent 50%);
pointer-events: none;
}
/* Onde bioluminescente d�corative */
.site-banner::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(to top, var(--color-bg-white), transparent);
pointer-events: none;
}
/* =============================================================================
PAGE WRAPPER
============================================================================= */
.page-wrapper {
width: 100%;
background: var(--color-bg-white);
min-height: calc(100vh - var(--header-height));
display: flex;
flex-direction: column;
}
/* =============================================================================
CONTENU PRINCIPAL
============================================================================= */
.site-content {
flex: 1;
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: var(--space-xl) var(--space-2xl);
background: var(--color-bg-white);
}
/* Breadcrumb */
.breadcrumb {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: 11px;
color: var(--color-text-muted);
margin-bottom: var(--space-lg);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--color-border);
}
.breadcrumb a {
color: var(--color-text-muted);
}
.breadcrumb a:hover {
color: var(--color-primary);
}
/* =============================================================================
TYPOGRAPHIE
============================================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
color: var(--color-heading);
line-height: 1.28;
}
.main-title-container {
margin-bottom: var(--space-xl);
padding-bottom: var(--space-md);
position: relative;
}
.main-title-container::after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, var(--biolum-1), var(--ocean-mid), transparent);
}
.main-title {
font-size: 32px;
font-weight: 700;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 0;
}
.main-title::before {
content: '';
display: inline-block;
width: 5px;
height: 32px;
background: linear-gradient(to bottom, var(--biolum-1), var(--ocean-mid));
border-radius: 3px;
flex-shrink: 0;
margin-right: 12px;
vertical-align: middle;
box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}
.subtitle-medium {
font-family: var(--font-heading);
font-size: 18px;
color: var(--color-text-light);
margin-bottom: 12px;
font-weight: 600;
padding-left: 17px;
}
.subtitle-small {
font-size: 13px;
color: var(--color-text-muted);
line-height: 1.5;
padding-left: 17px;
font-weight: 400;
}
h2 {
font-size: 22px;
font-weight: 600;
margin: var(--space-xl) 0 var(--space-md);
color: var(--color-primary-dark);
font-style: italic;
position: relative;
padding-left: 18px;
}
h2::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 4px;
height: calc(100% - 8px);
background: var(--biolum-1);
border-radius: 2px;
opacity: 0.7;
}
h3 {
font-family: var(--font-main);
font-size: 15px;
font-weight: 600;
margin: var(--space-lg) 0 var(--space-sm);
letter-spacing: 0.01em;
}
p {
margin-bottom: var(--space-md);
line-height: 1.78;
}
/* =============================================================================
BARRE DE MISE � JOUR DISCR�TE
============================================================================= */
.update-bar-discreet {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
margin-top: var(--space-2xl);
padding: var(--space-md) 0;
font-size: 11px;
color: var(--color-text-muted);
border-top: 1px solid var(--color-border);
}
.update-bar-discreet a {
color: var(--color-text-muted);
text-decoration: underline;
font-weight: 400;
}
.update-bar-discreet a:hover {
color: var(--color-primary);
}
/* =============================================================================
BLOC AUTEURS - style carte glac�
============================================================================= */
.authors-block {
background: linear-gradient(135deg,
rgba(240, 248, 255, 0.9) 0%,
rgba(224, 242, 254, 0.6) 100%);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-lg) var(--space-xl);
margin: var(--space-lg) 0;
position: relative;
overflow: hidden;
}
/* Motif d�coratif */
.authors-block::before {
content: '~';
position: absolute;
right: 20px;
top: -10px;
font-family: var(--font-heading);
font-size: 120px;
color: rgba(0, 150, 220, 0.06);
line-height: 1;
pointer-events: none;
user-select: none;
}
.authors-block h3 {
margin-top: 0;
font-family: var(--font-main);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--color-text-muted);
margin-bottom: var(--space-md);
font-weight: 700;
}
.authors-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
.author-chip {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
background: rgba(25, 118, 210, 0.09);
color: var(--ocean-4);
border-radius: 40px;
padding: 6px 16px;
font-size: 13px;
font-weight: 500;
transition: var(--transition);
border: 1px solid rgba(25, 118, 210, 0.12);
}
.author-chip:hover {
background: var(--ocean-mid);
color: #fff;
text-decoration: none;
box-shadow: 0 4px 16px rgba(26, 110, 168, 0.3);
transform: translateY(-2px);
}
/* =============================================================================
STATS GRID - cartes avec lueur bioluminescente
============================================================================= */
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: var(--space-xl) 0;
}
.stat-card {
border-radius: var(--radius-lg);
padding: var(--space-xl) var(--space-lg);
text-align: center;
transition: var(--transition);
position: relative;
overflow: hidden;
cursor: pointer;
text-decoration: none !important;
color: inherit;
display: block;
}
.stat-card:hover {
text-decoration: none !important;
color: #fff;
transform: translateY(-6px) scale(1.02);
box-shadow:
0 16px 48px rgba(10, 45, 84, 0.35),
0 0 30px rgba(0, 229, 255, 0.15);
}
/* Fond carte 1 */
.stat-card:nth-child(1) {
background: linear-gradient(145deg, var(--ocean-3) 0%, var(--ocean-4) 100%);
box-shadow:
0 8px 32px rgba(10, 45, 84, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* Fond carte 2 */
.stat-card:nth-child(2) {
background: linear-gradient(145deg, #004d7a 0%, var(--ocean-mid) 100%);
box-shadow:
0 8px 32px rgba(26, 110, 168, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* Fond carte 3 */
.stat-card:nth-child(3) {
background: linear-gradient(145deg, var(--ocean-2) 0%, #083f6e 100%);
box-shadow:
0 8px 32px rgba(2, 11, 24, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* Orbe lumineux d�coratif */
.stat-card::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 229, 255, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.stat-number {
font-family: var(--font-heading);
font-size: 42px;
font-weight: 700;
line-height: 1;
margin-bottom: 8px;
color: #fff;
letter-spacing: -0.02em;
text-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
text-decoration: none !important;
}
.stat-number:hover {
text-decoration: none !important;
}
.stat-label {
font-size: 11px;
color: rgba(255, 255, 255, 0.72);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 1.4;
}
/* =============================================================================
BLOC ABSTRACT - style parchemin encadr�
============================================================================= */
.abstract-block {
background: linear-gradient(135deg,
rgba(224, 242, 254, 0.7) 0%,
rgba(240, 248, 255, 0.5) 100%);
border-left: 3px solid var(--biolum-1);
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
padding: var(--space-lg) var(--space-xl);
margin: var(--space-xl) 0;
font-style: italic;
color: var(--color-text-light);
position: relative;
}
.abstract-block::before {
content: '"';
position: absolute;
top: 0;
left: 20px;
font-family: var(--font-heading);
font-size: 80px;
line-height: 1;
color: rgba(0, 150, 220, 0.12);
pointer-events: none;
}
.abstract-block strong {
font-style: normal;
color: var(--color-primary-dark);
font-weight: 600;
}
/* =============================================================================
LISTES CONTENU
============================================================================= */
ul.content-list {
list-style: none;
padding: 0;
margin: var(--space-md) 0 var(--space-lg);
}
ul.content-list li {
padding: 8px 0 8px var(--space-xl);
position: relative;
border-bottom: 1px solid rgba(197, 216, 240, 0.45);
transition: background 0.2s;
}
ul.content-list li:last-child {
border-bottom: none;
}
ul.content-list li:hover {
background: rgba(0, 229, 255, 0.03);
}
ul.content-list li::before {
content: '\25C6';
position: absolute;
left: 2px;
color: var(--biolum-1);
font-size: 8px;
top: 12px;
opacity: 0.7;
}
/* =============================================================================
BOUTONS
============================================================================= */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 22px;
border-radius: var(--radius-md);
font-size: 13px;
font-weight: 600;
font-family: var(--font-main);
cursor: pointer;
transition: var(--transition);
text-decoration: none;
border: none;
letter-spacing: 0.02em;
}
.btn-primary {
background: linear-gradient(135deg, var(--ocean-mid), var(--ocean-4));
color: #fff;
box-shadow: 0 4px 16px rgba(26, 110, 168, 0.3);
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--ocean-4), var(--ocean-mid));
color: #fff;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(26, 110, 168, 0.42);
}
.btn-outline {
background: transparent;
color: var(--color-primary);
border: 1.5px solid var(--color-primary);
}
.btn-outline:hover {
background: var(--color-primary);
color: #fff;
text-decoration: none;
}
/* =============================================================================
S�PARATEUR ARTISTIQUE
============================================================================= */
hr.separator {
height: 1px;
border: none;
margin: var(--space-xl) 0;
background: linear-gradient(to right,
transparent 0%,
var(--biolum-1) 20%,
var(--ocean-mid) 50%,
var(--biolum-3) 80%,
transparent 100%);
opacity: 0.35;
position: relative;
}
/* =============================================================================
TABLEAUX
============================================================================= */
table.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 13px;
margin: var(--space-lg) 0;
box-shadow: var(--shadow-md);
border-radius: var(--radius-md);
overflow: hidden;
}
table.data-table th {
background: linear-gradient(135deg, var(--ocean-3) 0%, var(--ocean-4) 100%);
color: rgba(255, 255, 255, 0.9);
padding: 11px var(--space-md);
text-align: left;
font-weight: 600;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
table.data-table td {
padding: 9px var(--space-md);
border-bottom: 1px solid var(--color-border);
color: var(--color-text);
vertical-align: top;
}
table.data-table tr:last-child td {
border-bottom: none;
}
table.data-table tr:hover td {
background: rgba(0, 229, 255, 0.03);
}
/* =============================================================================
CARTE ESP�CE EN VEDETTE - glassmorphism
============================================================================= */
.featured-species {
display: flex;
gap: var(--space-xl);
align-items: flex-start;
flex-wrap: wrap;
margin: var(--space-lg) 0 var(--space-xl);
background: linear-gradient(135deg,
rgba(11, 55, 100, 0.04) 0%,
rgba(0, 229, 255, 0.03) 100%);
border: 1px solid rgba(0, 229, 255, 0.15);
border-radius: var(--radius-xl);
padding: 10px 16px;
position: relative;
overflow: hidden;
}
.featured-species::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
pointer-events: none;
}
.featured-species img {
border-radius: var(--radius-md);
box-shadow:
0 8px 24px rgba(10, 45, 84, 0.2),
0 0 0 1px rgba(0, 229, 255, 0.15);
width: 140px;
height: auto;
flex-shrink: 0;
transition: var(--transition);
}
.featured-species img:hover {
transform: scale(1.04) rotate(-1deg);
box-shadow: 0 12px 32px rgba(10, 45, 84, 0.3);
}
/* =============================================================================
BLOC FINANCEMENT
============================================================================= */
.funding-bar {
display: flex;
align-items: center;
gap: var(--space-lg);
flex-wrap: wrap;
padding: var(--space-md) var(--space-lg);
background: linear-gradient(135deg,
rgba(240, 248, 255, 0.8) 0%,
rgba(224, 242, 254, 0.6) 100%);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
}
.funding-bar p {
margin: 0;
font-size: 12.5px;
color: var(--color-text-muted);
flex: 1;
}
/* =============================================================================
FOOTER - Deep ocean
============================================================================= */
.site-footer {
background: linear-gradient(160deg,
var(--ocean-1) 0%,
var(--ocean-2) 40%,
var(--ocean-3) 100%);
color: rgba(255, 255, 255, 0.78);
padding: var(--space-xl) var(--space-2xl) var(--space-lg);
position: relative;
overflow: hidden;
}
/* Effet particule d'eau d�coratif */
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
var(--biolum-3) 35%,
var(--biolum-1) 50%,
var(--biolum-3) 65%,
transparent);
opacity: 0.5;
}
.site-footer::after {
content: '';
position: absolute;
bottom: -80px;
right: -60px;
width: 280px;
height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 229, 255, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-xl);
align-items: start;
position: relative;
z-index: 1;
}
.footer-citation {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
font-size: 13px;
line-height: 1.65;
backdrop-filter: blur(4px);
transition: var(--transition);
}
.footer-citation:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(0, 229, 255, 0.25);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.footer-citation strong {
display: block;
color: var(--biolum-1);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
margin-bottom: var(--space-sm);
}
.footer-citation p {
color: rgba(255, 255, 255, 0.82);
margin: 0;
}
.footer-citation a {
color: var(--biolum-3);
text-decoration: underline;
text-decoration-color: rgba(64, 196, 255, 0.3);
}
.footer-citation a:hover {
color: #fff;
}
.footer-logos {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
justify-content: center;
}
.footer-logos-row {
display: flex;
gap: var(--space-lg);
justify-content: center;
}
.footer-logos img {
height: 40px;
width: auto;
opacity: 0.75;
transition: var(--transition);
}
.footer-logos img:hover {
opacity: 1;
}
.footer-copyright {
text-align: center;
font-size: 11px;
color: rgba(255, 255, 255, 0.38);
padding-top: var(--space-lg);
border-top: 1px solid rgba(255, 255, 255, 0.07);
margin-top: var(--space-lg);
position: relative;
z-index: 1;
letter-spacing: 0.04em;
}
/* =============================================================================
MENU MOBILE
============================================================================= */
@media (max-width: 960px) {
.header-nav {
display: none;
}
.header-nav.open {
display: flex;
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
background: linear-gradient(180deg, var(--ocean-2) 0%, var(--ocean-3) 100%);
flex-direction: column;
align-items: flex-start;
padding: var(--space-md) 0;
box-shadow: var(--shadow-lg);
max-height: calc(100vh - var(--header-height));
overflow-y: auto;
z-index: 999;
border-top: 1px solid rgba(0, 229, 255, 0.15);
}
.header-nav.open>ul {
flex-direction: column;
width: 100%;
height: auto;
}
.header-nav.open>ul>li {
width: 100%;
flex-direction: column;
align-items: flex-start;
}
.header-nav.open>ul>li>a,
.header-nav.open>ul>li>span {
width: 100%;
padding: 13px var(--space-lg);
border-bottom: 1px solid rgba(0, 229, 255, 0.08);
height: auto;
font-size: 14px;
}
.dropdown {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
border-radius: 0;
background: rgba(0, 229, 255, 0.04);
padding: 0;
display: none;
width: 100%;
border-top: none;
backdrop-filter: none;
}
.has-dropdown:hover .dropdown,
.has-dropdown.open .dropdown {
display: block;
}
.dropdown li a {
color: rgba(255, 255, 255, 0.75);
border-left-color: transparent;
padding-left: var(--space-2xl);
font-size: 13px;
}
.dropdown li a:hover {
color: #fff;
background: rgba(0, 229, 255, 0.07);
padding-left: var(--space-2xl);
border-left-color: var(--biolum-1);
}
.hamburger {
display: flex;
margin-left: var(--space-sm);
}
.header-lang {
margin-left: 0;
gap: 4px;
}
.header-lang a {
padding: 3px 6px;
}
.header-lang img {
width: 20px;
height: 14px;
}
}
@media (max-width: 768px) {
.site-content {
padding: var(--space-lg) var(--space-md);
}
.stats-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.footer-inner {
grid-template-columns: 1fr;
}
.footer-logos {
flex-direction: row;
justify-content: center;
align-items: center;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 18px;
}
.site-banner {
max-height: 130px;
}
.site-banner img {
height: 130px;
}
.stat-number {
font-size: 34px;
}
.featured-species {
flex-direction: column;
gap: 8px;
}
.featured-species img {
width: 100%;
max-width: 260px;
}
.taxo-featured-image {
flex-direction: column;
gap: 8px;
}
.taxo-featured-image img {
width: 100%;
max-width: 260px;
}
}
@media (max-width: 480px) {
.header-logo-subtitle {
display: none;
}
h1 {
font-size: 20px;
}
.stat-number {
font-size: 30px;
}
}
/* =============================================================================
FORMULAIRES & CARTES MODERNE
============================================================================= */
.form-card {
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
box-shadow: var(--glass-shadow);
padding: var(--space-xl);
margin: var(--space-xl) 0;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.form-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--biolum-1), var(--biolum-3));
opacity: 0.8;
}
.form-card:hover {
box-shadow: 0 12px 40px rgba(10, 45, 84, 0.2);
transform: translateY(-2px);
}
.form-title {
font-family: var(--font-heading);
font-size: 22px;
color: var(--ocean-4);
margin-bottom: var(--space-lg);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.form-title i {
color: var(--biolum-1);
}
.form-group {
margin-bottom: var(--space-lg);
}
.form-group label {
display: block;
font-family: var(--font-main);
font-weight: 600;
color: var(--ocean-4);
margin-bottom: var(--space-sm);
font-size: 14px;
letter-spacing: 0.02em;
}
.form-control {
width: 100%;
padding: 14px 18px;
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.9);
font-family: var(--font-main);
font-size: 15px;
color: var(--color-text);
transition: var(--transition);
appearance: none;
cursor: pointer;
}
select.form-control {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230a2d54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 18px;
padding-right: 45px;
}
.form-control:focus {
outline: none;
border-color: var(--biolum-1);
box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.15);
background: #fff;
}
.form-helper {
display: block;
margin-top: var(--space-xs);
font-size: 11px;
color: var(--color-text-muted);
}
/* Version compacte et discr�te pour le menu de s�lection rapide */
.form-card-compact {
padding: var(--space-sm) var(--space-lg);
margin: var(--space-md) 0;
}
.form-card-compact .form-title {
display: none;
}
.form-card-compact .form-group {
margin-bottom: 0;
}
.form-card-compact label {
display: none;
}
.form-card-compact .form-control {
padding: 8px 14px;
font-size: 14px;
box-shadow: none;
background-color: rgba(255, 255, 255, 0.7);
}
/* =============================================================================
TAXONOMIE & LISTES
============================================================================= */
.taxonomy-card {
background: var(--glass-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
margin: var(--space-xl) 0;
overflow: hidden;
}
.taxonomy-header {
background: #a6adb0;
color: #fff;
padding: var(--space-md) var(--space-xl);
font-family: var(--font-heading);
font-size: 18px;
display: flex;
justify-content: space-between;
align-items: center;
}
.taxonomy-list {
padding: 0;
margin: 0;
list-style: none;
}
.taxonomy-item {
display: grid;
grid-template-columns: 140px 1fr auto;
align-items: center;
padding: 12px var(--space-xl);
border-bottom: 1px solid rgba(197, 216, 240, 0.4);
transition: var(--transition);
gap: 8px;
}
.taxonomy-item:last-child {
border-bottom: none;
}
.taxonomy-item:hover {
background: rgba(0, 229, 255, 0.03);
}
.taxonomy-item .rank {
display: inline-block;
justify-self: start;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text);
font-weight: 700;
background: rgba(255, 255, 255, 0.6);
padding: 3px 9px;
border-radius: 999px;
white-space: nowrap;
}
.taxonomy-item .name {
font-size: 16px;
font-weight: 600;
color: var(--ocean-4);
}
.taxonomy-item .name em {
font-style: italic;
}
.taxonomy-item .actions {
display: flex;
gap: var(--space-sm);
}
.btn-inline {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
padding: 6px 14px;
border-radius: var(--radius-sm);
text-decoration: none;
transition: var(--transition);
border: 1px solid transparent;
font-weight: 500;
}
.btn-inline-primary {
background: rgba(25, 118, 210, 0.08);
color: var(--color-primary);
}
.btn-inline-primary:hover {
background: var(--color-primary);
color: #fff;
}
@media (max-width: 600px) {
.taxonomy-item {
grid-template-columns: 1fr;
gap: var(--space-xs);
padding: var(--space-md);
}
.taxonomy-item .actions {
margin-top: var(--space-sm);
}
}
/* Species result list (search / zone / comparison results) */
.species-result-card {
background: var(--color-bg-white);
border: 1px solid rgba(184, 184, 0, 0.25);
border-radius: var(--radius-md);
overflow: hidden;
margin: var(--space-lg) 0;
box-shadow: var(--shadow-sm);
}
.species-result-list {
display: flex;
flex-direction: column;
}
.species-result-row {
position: relative;
display: grid;
grid-template-columns: 1fr auto auto;
align-items: baseline;
gap: 20px;
padding: 7px var(--space-lg);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
font-size: 13.5px;
transition: var(--transition);
}
.species-result-row:last-child {
border-bottom: none;
}
.species-result-row::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(to bottom, var(--biolum-1), var(--ocean-mid));
opacity: 0;
transition: var(--transition);
}
.species-result-row:nth-child(even) {
background: rgba(10, 45, 84, 0.025);
}
.species-result-row:hover {
background: rgba(0, 229, 255, 0.07);
}
.species-result-row:hover::before {
opacity: 1;
}
.species-result-row .name em {
font-style: italic;
}
.species-result-row .count {
display: inline-flex;
align-items: center;
background: rgba(111, 175, 199, 0.15);
color: var(--ocean-mid);
font-size: 11.5px;
font-weight: 600;
padding: 2px 10px;
border-radius: 999px;
white-space: nowrap;
}
.species-result-row .btn-inline-primary {
background: var(--color-primary);
color: #fff;
}
.species-result-row .btn-inline-primary:hover {
background: var(--color-primary-dark);
}
.species-result-footer {
padding: 8px var(--space-lg);
text-align: right;
font-size: 13px;
color: var(--color-text-muted);
background: var(--color-bg);
border-top: 1px solid var(--color-border);
}
.species-result-footer b {
color: var(--color-text);
}
@media (max-width: 600px) {
.species-result-row {
grid-template-columns: 1fr auto;
grid-template-areas:
"name actions"
"count actions";
row-gap: 2px;
}
.species-result-row .name {
grid-area: name;
}
.species-result-row .count {
grid-area: count;
text-align: left;
}
.species-result-row .actions {
grid-area: actions;
}
}
/* Liste d'abréviations / glossaire de symboles */
.abbrev-card {
background: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
margin: var(--space-lg) 0;
box-shadow: var(--shadow-sm);
}
.abbrev-group-title {
background: linear-gradient(180deg, #EBF4F7, #DCEAF0);
border-bottom: 2px solid #6fafc7;
padding: 8px var(--space-lg);
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text);
}
.abbrev-row {
display: grid;
grid-template-columns: 110px 1fr;
gap: 12px;
padding: 8px var(--space-lg);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
align-items: baseline;
}
.abbrev-row:last-child {
border-bottom: none;
}
.abbrev-row:nth-child(even) {
background: rgba(111, 175, 199, 0.06);
}
.abbrev-row:hover {
background: rgba(0, 229, 255, 0.06);
}
.abbrev-label {
font-weight: 700;
color: var(--color-primary);
font-size: 13px;
white-space: nowrap;
}
.abbrev-value {
color: var(--color-text);
font-size: 13.5px;
line-height: 1.5;
}
@media (max-width: 480px) {
.abbrev-row {
grid-template-columns: 1fr;
gap: 2px;
}
}
/* =============================================================================
BANDEAU NOUVELLE VERSION + NOTATION 5 ÉTOILES
============================================================================= */
.version-banner {
background: linear-gradient(135deg, var(--ocean-3) 0%, var(--ocean-mid) 100%);
color: #fff;
padding: 10px var(--space-lg);
}
.version-banner-inner {
max-width: var(--max-width);
margin: 0 auto;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
font-size: 13.5px;
}
.version-banner-icon {
flex-shrink: 0;
font-size: 16px;
}
.version-banner-text {
flex: 1;
min-width: 220px;
}
.version-banner-text a {
color: #fff;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.5);
}
.version-banner-text a:hover {
text-decoration-color: #fff;
}
.version-banner-rating {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.version-banner-stars-wrap {
position: relative;
display: inline-block;
font-size: 19px;
line-height: 1;
}
.version-banner-stars-track {
display: block;
white-space: nowrap;
color: rgba(255, 255, 255, 0.3);
}
.version-banner-stars-fill {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
color: #ffd400;
pointer-events: none;
transition: width 0.4s ease;
}
.version-banner-stars {
position: absolute;
top: 0;
left: 0;
display: inline-flex;
flex-direction: row-reverse;
gap: 0;
}
.version-banner-star {
cursor: pointer;
color: transparent;
transition: var(--transition);
user-select: none;
}
.version-banner-star:hover,
.version-banner-star:hover ~ .version-banner-star {
color: #ffd400;
}
.version-banner-average {
font-size: 12px;
color: rgba(255, 255, 255, 0.85);
white-space: nowrap;
}
.version-banner-close {
flex-shrink: 0;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.75);
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 4px;
}
.version-banner-close:hover {
color: #fff;
}
@media (max-width: 700px) {
.version-banner-inner {
font-size: 12.5px;
}
.version-banner-star {
font-size: 17px;
}
}
/* =============================================================================
UTILITAIRES
============================================================================= */
.text-muted {
color: var(--color-text-muted);
}
.text-primary {
color: var(--color-primary);
}
em.taxon {
font-style: italic;
color: var(--ocean-4);
font-weight: 500;
font-family: var(--font-heading);
}
/* =============================================================================
REMARK & ACTION BUTTONS
============================================================================= */
.action-box {
margin: var(--space-md) 0;
padding: 10px 16px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 248, 255, 0.7));
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
box-shadow: var(--shadow-sm);
}
.action-form {
display: flex;
align-items: center;
gap: 15px;
}
.btn-action {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
border-radius: 40px;
background: var(--ocean-3);
color: #fff;
font-weight: 600;
font-size: 13.5px;
transition: var(--transition);
border: none;
cursor: pointer;
box-shadow: 0 3px 10px rgba(10, 45, 84, 0.12);
}
.btn-action:hover {
background: var(--ocean-mid);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(26, 110, 168, 0.25);
text-decoration: none;
color: #fff;
}
.btn-action.register {
background: var(--biolum-1);
color: var(--ocean-1);
}
.btn-action.register:hover {
background: var(--biolum-2);
}
.action-label {
font-size: 13px;
color: var(--color-text-light);
font-weight: 500;
}
@media (max-width: 600px) {
.action-box {
flex-direction: column;
gap: var(--space-lg);
}
}
/* =============================================================================
CARDS D'INFORMATION & FIGURES
============================================================================= */
.info-card {
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
box-shadow: var(--glass-shadow);
padding: var(--space-xl);
margin: var(--space-xl) 0;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.info-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--ocean-mid), var(--biolum-1));
opacity: 0.6;
}
.info-card:hover {
box-shadow: 0 12px 40px rgba(10, 45, 84, 0.2);
transform: translateY(-2px);
}
.info-card-header {
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 2px solid rgba(0, 229, 255, 0.15);
}
.info-card-title {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 600;
color: var(--color-primary-dark);
margin: 0;
}
/* Tables de donn�es container */
.data-table-container {
overflow-x: auto;
margin: var(--space-md) 0;
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
}
/* Figures et Captions */
.figure-container {
margin: var(--space-xl) 0;
display: flex;
flex-direction: column;
gap: 8px;
background: rgba(25, 118, 210, 0.03);
padding: var(--space-md);
border-radius: var(--radius-md);
border: 1px solid rgba(25, 118, 210, 0.08);
}
.figure-image-link {
display: block;
cursor: zoom-in;
transition: var(--transition);
}
.figure-image-link:hover {
transform: scale(1.01);
box-shadow: var(--shadow-md);
}
.figure-caption {
font-size: 13px;
color: var(--color-text-light);
line-height: 1.55;
font-style: italic;
border-left: 3px solid var(--biolum-1);
padding-left: 14px;
}
@media (min-width: 960px) {
.figure-container.side-by-side {
flex-direction: row;
align-items: flex-start;
}
.figure-container.side-by-side .figure-image-link {
flex: 0 0 300px;
}
.figure-container.side-by-side .figure-caption {
flex: 1;
}
}
/* Scroll-to-top */
.scroll-top {
position: fixed;
bottom: var(--space-lg);
right: var(--space-lg);
width: 44px;
height: 44px;
background: linear-gradient(135deg, var(--ocean-mid), var(--ocean-4));
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
var(--shadow-md),
0 0 18px rgba(0, 229, 255, 0.25);
cursor: pointer;
transition: var(--transition);
opacity: 0;
pointer-events: none;
font-size: 18px;
border: 1px solid rgba(0, 229, 255, 0.3);
z-index: 999;
}
.scroll-top.visible {
opacity: 1;
pointer-events: all;
}
.scroll-top:hover {
transform: translateY(-4px);
box-shadow:
var(--shadow-lg),
0 0 24px rgba(0, 229, 255, 0.4);
}
/* =============================================================================
HORIZONTAL FIGURE LAYOUT (Species Card)
============================================================================= */
.figures-list {
display: flex;
flex-direction: column;
gap: var(--space-xl);
margin-top: var(--space-lg);
}
.figure-row {
display: flex;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
transition: var(--transition);
}
.figure-row:hover {
transform: translateX(4px);
box-shadow: var(--shadow-sm);
}
.figure-row .figure-thumb {
flex: 0 0 200px;
/* Fixed width for the image part */
height: auto;
background: #f8f9fa;
border-right: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.figure-row .figure-thumb img {
max-width: 100%;
height: auto;
object-fit: contain;
}
.figure-row .figure-caption {
flex: 1;
padding: 10px 16px;
font-size: 13.5px;
line-height: 1.6;
font-style: normal;
/* Override italic if needed */
border-left: none;
/* Override legacy border */
}
.figure-row .figure-caption strong {
display: block;
font-size: 15px;
color: var(--ocean-4);
margin-bottom: 8px;
}
.figure-row .nota {
background: rgba(0, 229, 255, 0.05);
padding: 10px 15px;
border-radius: var(--radius-sm);
margin-top: 15px;
font-size: 12.5px;
border-left: 3px solid var(--biolum-1);
font-style: italic;
}
/* =============================================================================
SPECIES TITLE PROMINENCE
============================================================================= */
.species-title-prominent {
font-size: 38px !important;
letter-spacing: -0.02em;
color: #fff;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.species-title-prominent em {
font-style: italic;
font-weight: 700;
}
.species-title-prominent .author {
font-weight: 400;
opacity: 0.9;
font-size: 0.75em;
margin-left: 15px;
}
.species-display-title {
font-size: 2em;
}
.species-display-title .author {
font-weight: normal;
}
@media (max-width: 768px) {
.figure-row .taxo-figure-row {
flex-direction: column;
}
.figure-row .taxo-figure-row .figure-thumb {
flex: 0 0 auto;
border-right: none;
border-bottom: 1px solid var(--color-border);
}
.species-title-prominent {
font-size: 28px !important;
}
}
/* =============================================================================
LISTE TAXONOMIQUE - Colinne unique, align�e � gauche
============================================================================= */
.taxonomy-container {
margin-top: var(--space-xl);
padding: var(--space-lg) var(--space-xl);
background: rgba(240, 248, 255, 0.4);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
overflow-x: auto;
columns: 270px auto;
column-gap: 32px;
line-height: 1.85;
font-size: 14px;
}
.taxonomy-container a {
color: var(--ocean-4);
transition: var(--transition);
}
.taxonomy-container a:hover {
color: var(--biolum-1);
text-decoration: none;
}
@media (max-width: 560px) {
.taxonomy-container {
columns: 1;
}
}
/* =============================================================================
SKELETON & SECTIONS (Species Card)
============================================================================= */
.species-section {
margin: var(--space-md) 0 var(--space-lg);
position: relative;
}
.species-section h2 {
margin-bottom: var(--space-sm);
font-size: 1.15rem;
color: var(--ocean-4);
display: flex;
align-items: center;
gap: 10px;
}
.species-section h2 i {
color: var(--biolum-1);
font-size: 0.9em;
}
.content-box {
background: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 10px 16px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.content-box p {
margin-bottom: 6px;
line-height: 1.5;
}
.content-box p:last-child {
margin-bottom: 0;
}
.content-box:hover {
box-shadow: var(--shadow-md);
}
.section-title {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 600;
color: var(--color-primary-dark);
margin-bottom: var(--space-md);
display: flex;
align-items: center;
gap: 12px;
}
.section-title::before {
content: '';
width: 4px;
height: 24px;
background: var(--biolum-1);
border-radius: 2px;
}
/* Figures Grid */
.figures-grid {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
/* Map Wrapper */
.map-wrapper {
margin: var(--space-md) auto;
text-align: center;
max-width: 100%;
}
.map-caption {
font-size: 13px;
color: var(--color-text-muted);
margin-top: 4px;
font-style: italic;
}
/* Info Item */
.info-item {
margin-bottom: var(--space-md);
line-height: 1.6;
}
/* Species Selector Wrapper */
.species-selector-wrapper {
display: flex;
justify-content: flex-end;
margin-bottom: var(--space-xl);
}
/* Section Link (e.g. abbreviations, lists) */
.section-link {
margin: var(--space-md) 0;
font-size: 13.5px;
display: flex;
align-items: center;
gap: 8px;
}
.section-link img {
width: 16px;
height: 16px;
opacity: 0.8;
}
/* =============================================================================
CONTRIBUTOR REMARKS MODERNIZATION
============================================================================= */
.contributor-remarks {
background: #f8fbff;
border: 1px dashed var(--color-border);
border-radius: var(--radius-lg);
padding: 12px 20px;
margin: var(--space-md) 0;
}
.contributor-remarks h2 {
margin: 0 0 var(--space-sm) 0 !important;
}
.contributor-actions {
display: flex;
gap: 8px;
margin-bottom: 0;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.contributor-remarks-list {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.contributor-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-sm);
font-size: 13px;
color: var(--color-text-muted);
border-bottom: 1px solid rgba(16, 45, 84, 0.05);
padding-bottom: 4px;
}
.contributor-header strong {
color: var(--ocean-4);
font-size: 14px;
}
.contributor-remark-text {
font-size: 14.5px;
line-height: 1.7;
color: var(--color-text);
}
.contributor-edit-actions {
margin-top: var(--space-sm);
display: flex;
gap: 12px;
}
.contributor-separator {
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-border), transparent);
margin: var(--space-md) 0;
}
/* =============================================================================
BIBLIOGRAPHY MODERNIZATION
============================================================================= */
.biblio-section {
margin-bottom: var(--space-2xl);
}
.biblio-group-title {
font-size: 28px;
font-weight: 700;
color: var(--ocean-4);
border-bottom: 2px solid var(--biolum-1);
display: inline-block;
padding-right: 20px;
margin-bottom: var(--space-xl);
position: relative;
}
.biblio-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.biblio-item {
background: var(--glass-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: 10px 16px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
line-height: 1.5;
color: var(--color-text);
position: relative;
overflow: hidden;
}
.biblio-item:hover {
transform: translateX(8px);
border-color: var(--biolum-3);
box-shadow: var(--shadow-md), 0 0 15px rgba(0, 229, 255, 0.1);
background: #fff;
}
.biblio-item::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, var(--biolum-1), var(--ocean-mid));
opacity: 0;
transition: var(--transition);
}
.biblio-item:hover::after {
opacity: 1;
}
.doi-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
padding: 3px 10px;
background: rgba(26, 110, 168, 0.08);
color: var(--ocean-mid) !important;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
text-decoration: none !important;
transition: var(--transition);
border: 1px solid transparent;
}
.doi-link {
display: inline-flex;
align-items: center;
margin-top: 4px;
font-size: 11px;
font-weight: 500;
color: var(--ocean-mid) !important;
gap: 6px;
padding: 3px 10px;
background: rgba(26, 110, 168, 0.08);
border-radius: 4px;
transition: var(--transition);
border-width: 1px;
border-style: solid;
border-color: transparent;
border-image: initial;
text-decoration: none !important;
}
.doi-link::before {
content: 'DOI';
display: inline-block;
background: #005a9c;
color: #fff;
font-weight: 800;
font-size: 9px;
padding: 1px 4px;
border-radius: 2px;
text-transform: uppercase;
}
.doi-link:hover {
background: rgba(26, 110, 168, 0.15);
border-color: var(--ocean-mid);
}
/* =============================================================================
TAXONOMIC SECTIONS - POUR ORDERS etc.
Respect des couleurs historiques avec une esth�tique moderne
============================================================================= */
.taxo-section {
border-radius: 4px;
margin: 2px 0;
padding: 2px 16px;
border-left: 3px solid transparent;
transition: var(--transition);
}
.taxo-section.figures h2 {
font-size: 18px;
margin-top: var(--space-lg);
}
.taxo-value {
color: var(--color-text);
overflow: hidden;
line-height: 1.2;
}
.taxo-value div[align="right"] {
display: inline;
margin: 0;
}
/* Order level : Legacy #C6FFE2 -> New #E9FFE5 */
.taxo-section-order {
background: #E9FFE5;
border-left-color: #00c853;
border: 1px solid rgba(0, 200, 83, 0.1);
}
/* Superfamily Type A : Legacy #E5F4F8 -> New #EBF4F7 */
.taxo-section-superf-a {
background: #EBF4F7;
border-left-color: #6fafc7;
border: 1px solid rgba(111, 175, 199, 0.25);
}
/* Family */
.taxo-section-family {
background: #EBF4F7;
border-left-color: #6fafc7;
border: 1px solid rgba(111, 175, 199, 0.25);
}
/* Sub-Family */
.taxo-section-sub-family {
background: #EBF4F7;
border-left-color: #6fafc7;
border: 1px solid rgba(111, 175, 199, 0.25);
}
/* Genus */
.taxo-section-genus {
background: #ffffd4;
border-left-color: #b8b800;
border: 1px solid rgba(184, 184, 0, 0.25);
}
/* Sub-Genus */
.taxo-section-sub-genus {
background: #ffffd4;
border-left-color: #b8b800;
border: 1px solid rgba(184, 184, 0, 0.25);
}
/* Obsolete Genus */
.taxo-section-obsolete-genus {
background: #c3c8ca;
border-left-color: #6e757a;
border: 1px solid rgba(110, 117, 122, 0.35);
}
/* Superfamily Type B : Legacy #C4DEEC -> New #EBF4F7 */
.taxo-section-superf-b {
background: #EBF4F7;
border-left-color: #3a7db5;
border: 1px solid rgba(58, 125, 181, 0.2);
}
.taxo-content-grid {
display: grid;
grid-template-columns: 130px 1fr;
gap: 15px;
font-size: 14px;
}
.taxo-label {
font-weight: 700;
color: var(--color-text-light);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.5;
}
.taxo-value {
color: var(--color-text);
line-height: 1.5;
}
.taxo-highlight {
font-weight: 700;
color: var(--color-primary-dark);
}
.taxo-family-list .taxo-content-inline {
display: block;
width: 100%;
font-size: 14px;
padding: 6px 12px;
text-align: left;
transition: var(--transition);
border-radius: var(--radius-sm);
background: rgba(25, 118, 210, 0.04);
margin: 2px 0;
border: 1px solid rgba(25, 118, 210, 0.05);
}
.taxo-family-list .taxo-content-inline:hover {
background: rgba(25, 118, 210, 0.12);
box-shadow: 0 2px 8px rgba(25, 118, 210, 0.15);
border-color: rgba(25, 118, 210, 0.2);
transform: translateX(4px);
}
.taxo-content-inline {
display: block;
width: 100%;
font-size: 14px;
padding: 4px 0;
text-align: left;
}
.taxo-nowrap {
display: flex;
align-items: center;
flex-wrap: wrap;
/* Allow wrapping between blocks */
width: 100%;
justify-content: flex-start;
gap: 4px 12px;
/* Vertical gap 4px, Horizontal gap 12px */
}
/* Ensure each immediate child (block) doesn't wrap its internal content */
.taxo-nowrap>span,
.taxo-nowrap>div {
white-space: nowrap;
display: inline-flex;
align-items: center;
}
/* Responsive adjustment for small screens */
@media (max-width: 768px) {
.taxo-nowrap {
gap: 8px 16px;
}
.taxo-nowrap>span,
.taxo-nowrap>div {
white-space: normal;
/* Allow some internal flexibility if the screen is very small */
}
}
/* Global alignment for all taxonomic grids and flex containers */
.taxo-content-grid,
.taxo-content-compact-grid {
align-items: flex-start !important;
padding: 2px 0;
}
.taxo-content-grid {
display: grid;
grid-template-columns: 130px 1fr;
gap: 8px;
}
.taxo-content-compact-grid {
display: flex;
gap: 4px;
}
.taxo-content-compact-grid .taxo-label {
flex: 0 0 50px;
}
.taxo-content-compact-grid .taxo-value {
flex: 1;
}
/* Taxo Figures Grid */
.taxo-figures-grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.taxo-figure-row {
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: var(--radius-lg);
padding: 16px 20px;
margin: 16px 0;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 20px;
}
.taxo-figure-row>a.figure-thumb:empty {
display: none;
}
.taxo-figure-row .taxo-featured-image {
margin: 0;
padding: 12px;
flex-shrink: 0;
width: 180px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: var(--radius-lg);
display: flex;
justify-content: center;
align-items: center;
}
/* Center if only image is present or caption is empty */
.taxo-figure-row:not(:has(.taxo-figure-caption:not(:empty))) {
justify-content: center;
}
/* Taxo Figure Card (Horizontal Layout like Row) */
.taxo-figure-row {
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: var(--radius-lg);
padding: 14px 20px;
margin: 4px 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
}
.taxo-figure-row>a:first-child {
flex-shrink: 0;
width: 180px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: var(--radius-lg);
padding: 12px;
display: flex;
justify-content: center;
align-items: center;
}
.taxo-figure-row>a:first-child img {
max-width: 100%;
height: auto;
}
.taxo-figure-row:not(:has(.taxo-figure-caption:not(:empty))) {
justify-content: center;
}
.taxo-figure-row .taxo-figure-caption {
width: 100%;
text-align: left;
margin-top: 0;
}
.taxo-figure-img {
flex-shrink: 0;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
border: 2px solid #fff;
transition: var(--transition);
}
.taxo-figure-img:hover {
transform: scale(1.05);
box-shadow: var(--shadow-md);
}
.taxo-figure-caption {
font-size: 13px;
line-height: 1.6;
color: var(--color-text-light);
flex: 1;
text-align: left !important;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0;
}
.taxo-figure-caption>div[align="center"],
.taxo-figure-caption div,
.taxo-figure-caption p {
text-align: left !important;
display: block !important;
margin-left: 0 !important;
}
.taxo-featured-image {
display: flex;
gap: var(--space-xl);
align-items: flex-start;
flex-wrap: wrap;
margin: var(--space-lg) 0 var(--space-xl);
background: linear-gradient(135deg,
rgba(11, 55, 100, 0.04) 0%,
rgba(0, 229, 255, 0.03) 100%);
border: 1px solid rgba(0, 229, 255, 0.15);
border-radius: var(--radius-xl);
padding: 10px 16px;
position: relative;
overflow: hidden;
}
.taxo-featured-image::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
pointer-events: none;
}
.taxo-featured-image img {
border-radius: var(--radius-md);
box-shadow:
0 8px 24px rgba(10, 45, 84, 0.2),
0 0 0 1px rgba(0, 229, 255, 0.15);
width: 100% !important;
max-width: 140px;
height: auto !important;
flex-shrink: 0;
transition: var(--transition);
}
.taxo-featured-image img:hover {
transform: scale(1.04) rotate(-1deg);
box-shadow: 0 12px 32px rgba(10, 45, 84, 0.3);
}
/* =============================================================================
PAGES DE LIENS / RESSOURCES (.links-card, .links-intro)
============================================================================= */
.links-intro {
background: #ebf4f7;
border-left: 4px solid #6fafc7;
padding: 14px 20px;
border-radius: 4px;
margin-bottom: 2em;
font-size: .96em;
line-height: 1.65;
}
.links-card {
border-radius: 6px;
padding: 16px 22px;
margin-bottom: 1.6em;
background: #fff;
box-shadow: 0 2px 7px rgba(0,0,0,0.09);
border: 1px solid #e8e8e8;
}
.links-card h3 {
font-size: .85em;
font-weight: 700;
margin: 0 0 12px 0;
padding-bottom: 8px;
border-bottom: 2px solid;
letter-spacing: .07em;
text-transform: uppercase;
}
.links-card ul {
margin: 0;
padding-left: 1.3em;
}
.links-card li {
margin-bottom: 7px;
line-height: 1.55;
}
/* =============================================================================
NAVIGATION - BARRE SCROLLABLE HORIZONTALEMENT (.chap-nav)
============================================================================= */
.chap-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
padding: 0.5em 0 0.9em;
margin: 0;
}
.chap-nav-item {
display: inline-block;
padding: 5px 12px;
border-radius: 20px;
background: #e8f4f4;
color: #2c7a7b;
text-decoration: none;
font-size: 0.82em;
font-weight: 500;
border: 1.5px solid #9ecfcf;
white-space: nowrap;
flex-shrink: 0;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.chap-nav-item:hover {
background: #2c7a7b;
color: #fff;
border-color: #2c7a7b;
text-decoration: none;
}
.chap-nav-item.active {
background: #2c7a7b;
color: #fff;
border-color: #2c7a7b;
font-weight: 700;
}
/* =============================================================================
TABLE DES ZONES G�OGRAPHIQUES (.zone-table)
============================================================================= */
.zone-table {
width: 100%;
border-collapse: collapse;
font-size: 0.92em;
margin: 1em 0 1.5em;
}
.zone-table tr:nth-child(even) {
background: #f5fafa;
}
.zone-table td {
padding: 5px 10px;
vertical-align: top;
line-height: 1.5;
}
.zone-table td:first-child div {
text-align: right;
white-space: nowrap;
font-weight: 700;
color: #2c7a7b;
padding-right: 4px;
}
/* =============================================================================
TABLE STATS PAR ZONE (.zone-stats-table)
============================================================================= */
.zone-stats-table {
border-collapse: collapse;
margin: 1em auto 2em;
font-size: 0.92em;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 14px rgba(44, 122, 123, 0.18);
width: 72%;
min-width: 380px;
table-layout: auto;
}
.zone-stats-table td {
padding: 10px 24px;
border: 1px solid #cde8ea;
text-align: center;
width: auto;
}
.zone-stats-table td:first-child {
text-align: left;
min-width: 160px;
}
.zone-stats-table tr:first-child td {
background: #2c7a7b;
color: #fff;
font-weight: 700;
font-size: 1.05em;
border-color: #2c7a7b;
letter-spacing: 0.03em;
}
.zone-stats-table tr:not(:first-child):nth-child(even) td {
background: #eef7f7;
}
.zone-stats-table tr:not(:first-child):nth-child(odd) td {
background: #f8fcfc;
}
/* =============================================================================
IC�NES, ZONE HEADINGS, CARD STATS, LISIBILIT� (e_texte + autres)
============================================================================= */
img[src*="lirelasuite2.gif"] {
display: inline !important;
vertical-align: middle;
opacity: 0.7;
}
.zone-label {
text-align: left !important;
font-weight: 600;
color: #2c7a7b;
padding-left: 12px !important;
white-space: nowrap;
}
/* Zone section banners - gradient teal avec ic�ne SVG */
.zone-heading {
font-size: 1.0em;
font-weight: 700;
color: #fff;
background: linear-gradient(100deg, #1a5f61 0%, #2c7a7b 30%, #3da5a7 70%, #56c4c5 100%);
margin: 2.8em 0 1.4em;
padding: 12px 20px 12px 16px;
border-radius: 10px;
box-shadow: 0 4px 14px rgba(26, 95, 97, 0.30), inset 0 1px 0 rgba(255,255,255,0.14);
line-height: 1.5;
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 6px;
row-gap: 4px;
}
/* Ic�ne globe SVG avant chaque banni�re */
.zone-heading::before {
content: '';
display: inline-block;
flex-shrink: 0;
width: 20px;
height: 20px;
margin-right: 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
opacity: 0.9;
}
/* Liens de zone dans la banni�re */
.zone-heading a {
color: #c8f0f0;
text-decoration: none;
font-weight: 700;
}
.zone-heading a:hover {
color: #fff;
text-decoration: underline;
}
/* Masquer l'ancre qui ne contient que le gif (PHP g�n�re 2 ancres par zone) */
.zone-heading a:has(img[src*="lirelasuite2.gif"]) {
display: none !important;
}
/* Ic�ne externe SVG sur les ancres de texte uniquement (pas les ancres-image) */
.zone-heading a[href*="loc.php"]:not(:has(img))::after {
content: '';
display: inline-block;
width: 11px;
height: 11px;
margin-left: 5px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23c8f0f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
opacity: 0.85;
}
/* Card statistiques synth�se */
.stats-card {
background: linear-gradient(135deg, #f0f9f9 0%, #f8fdfd 100%);
border: 1px solid #cde8ea;
border-left: 4px solid #2c7a7b;
border-radius: 0 8px 8px 0;
padding: 1.3em 1.6em 0.7em;
margin: 1.5em 0 2em;
line-height: 1.75;
}
.stats-card p {
margin-top: 0;
margin-bottom: 0.55em;
}
.stats-card p:last-child {
margin-bottom: 0;
}
/* Meilleure lisibilit� des paragraphes de contenu */
.site-content p {
line-height: 1.75;
margin-bottom: 0.9em;
}
/* Clearfix automatique pour les images flottantes dans les paragraphes */
.site-content p::after {
content: '';
display: block;
clear: both;
}
/* =============================================================================
CONTENU TEXTUEL DES G�N�RALIT�S
(.content-text � .chap-section-title � .intertitre)
============================================================================= */
/* Wrapper du contenu textuel */
.content-text {
max-width: 860px;
margin: 0 auto;
padding: 0 0.5rem;
}
/* Justification CSS (remplace align="justify" d�pr�ci�) */
.content-text p {
text-align: justify;
}
/* Sur petits �crans : justification d�sactiv�e pour �viter espaces in�gaux */
@media (max-width: 640px) {
.content-text p {
text-align: left;
}
.content-text {
padding: 0;
}
}
/* Listes dans le contenu textuel */
.content-text ul,
.content-text ol {
margin: 0.5em 0 1em 1.4em;
padding: 0;
}
.content-text li {
margin-bottom: 0.45em;
line-height: 1.7;
}
/* Titre de chapitre principal (remplace ) */
.chap-section-title {
font-size: 1.4em;
font-weight: 700;
margin-top: 1.5em;
margin-bottom: 0.8em;
color: var(--color-heading);
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 0.4em;
border-bottom: 2px solid var(--color-border);
text-align: left;
}
/* Sous-titres num�rot�s inline (1- Titre:, 2/ Titre:, Remarques:, etc.) */
.intertitre {
font-weight: 700;
color: var(--color-primary-dark, #0d47a1);
font-size: 0.98em;
}
/* Tableau de donn�es num�riques compact */
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9em;
margin: 0.8em 0 1.2em;
}
.data-table th {
background: #e8f4f8;
color: #1a5c70;
font-weight: 600;
padding: 0.45em 0.9em;
text-align: left;
border-bottom: 2px solid #6fafc7;
}
.data-table td {
padding: 0.4em 0.9em;
border-bottom: 1px solid #dde8ee;
vertical-align: top;
}
.data-table tr:last-child td {
border-bottom: none;
}
.data-table tr:nth-child(even) td {
background: #f7fbfd;
}
/* Paragraphe contenant uniquement un ? bandeau section */
p:has(> .intertitre:only-child) {
background: linear-gradient(90deg, rgba(26, 110, 168, 0.07) 0%, transparent 60%);
border-left: 3px solid var(--color-primary, #1976D2);
padding: 0.4em 0.9em;
margin: 1.3em 0 0.5em;
border-radius: 0 6px 6px 0;
text-align: left !important;
}
/* =============================================================================
NAVIGATION CHAPITRES - TOC ACCORD�ON (.chap-toc)
Remplace .chap-nav sur les pages generalites_*.php
============================================================================= */
.chap-toc {
margin: 0.6em 0 1.4em;
border: 1.5px solid #9ecfcf;
border-radius: 8px;
overflow: hidden;
font-size: 0.9em;
}
.chap-toc-toggle {
display: flex;
align-items: center;
gap: 0.5em;
width: 100%;
padding: 0.65em 1em;
background: #e8f4f4;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 1em;
font-weight: 600;
color: #2c7a7b;
text-align: left;
transition: background 0.2s, color 0.2s;
}
.chap-toc-toggle:hover { background: #cde8e8; }
.chap-toc-toggle[aria-expanded="true"] { background: #2c7a7b; color: #fff; }
.chap-toc-icon { flex-shrink: 0; }
.chap-toc-label { flex-shrink: 0; }
.chap-toc-current {
flex: 1;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.85;
}
.chap-toc-arrow {
flex-shrink: 0;
transition: transform 0.25s;
display: inline-block;
}
.chap-toc-toggle[aria-expanded="true"] .chap-toc-arrow { transform: rotate(180deg); }
.chap-toc-panel {
display: none;
border-top: 1.5px solid #9ecfcf;
}
.chap-toc-panel.open { display: block; }
.chap-toc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.chap-toc-item {
display: block;
padding: 0.42em 0.9em;
color: #2c7a7b;
text-decoration: none;
border-bottom: 1px solid #e0f0f0;
line-height: 1.4;
transition: background 0.15s;
}
.chap-toc-item:nth-child(odd) { border-right: 1px solid #e0f0f0; }
.chap-toc-item:hover { background: #e8f4f4; text-decoration: none; }
.chap-toc-item.active { background: #2c7a7b; color: #fff; font-weight: 600; cursor: default; }
.chap-toc-item.active:hover { background: #245f5f; }
@media (max-width: 640px) {
.chap-toc-grid { grid-template-columns: 1fr; }
.chap-toc-item:nth-child(odd) { border-right: none; }
}
/* ===== POPUP ===== */
.popup-body { margin: 0; padding: 0; background: #fff; }
.popup-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5em 1em;
background: #2c7a7b;
color: #fff;
position: sticky;
top: 0;
z-index: 100;
gap: 1em;
}
.popup-logo-link {
display: flex;
align-items: center;
gap: 0.6em;
text-decoration: none;
color: #fff;
}
.popup-logo-img { height: 32px; width: auto; }
.popup-site-name {
font-size: 0.9em;
font-weight: 600;
font-style: italic;
}
.popup-header .popup-logo-link,
.popup-header .popup-site-name {
color: #fff;
}
.popup-actions { display: flex; gap: 0.5em; align-items: center; flex-shrink: 0; }
.popup-btn {
display: inline-flex;
align-items: center;
gap: 0.35em;
padding: 0.32em 0.75em;
border: 1.5px solid rgba(255,255,255,0.55);
border-radius: 4px;
background: transparent;
color: #fff;
cursor: pointer;
font-size: 0.82em;
font-family: inherit;
transition: background 0.2s;
}
.popup-btn:hover { background: rgba(255,255,255,0.18); }
.popup-btn-close { border-color: rgba(255,180,180,0.6); }
.popup-btn-close:hover { background: rgba(200,50,50,0.22); }
.popup-content { padding: 1em 1.5em; }
.popup-footer {
position: relative;
padding: var(--space-lg) 1.5em var(--space-md);
background: linear-gradient(180deg, #eef8f8 0%, #e4f2f2 100%);
}
.popup-footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--biolum-1) 25%, var(--biolum-3) 50%, var(--biolum-1) 75%, transparent);
opacity: 0.6;
}
.popup-footer p { margin: 0 0 var(--space-sm); }
.popup-footer p:last-child { margin-bottom: 0; }
/* p:nth-of-type(1) is an empty the browser inserts for the stray
leading
in $paragraphe_copyright_type1 (librairie_template.php) */
.popup-footer p:nth-of-type(1) { display: none; }
.popup-footer p:nth-of-type(2) {
display: flex;
align-items: center;
gap: 0.55em;
font-size: 0.76em;
font-weight: 600;
color: var(--ocean-4);
}
.popup-footer p:nth-of-type(2) img { display: none; }
.popup-footer p:nth-of-type(2)::before {
content: "i";
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--ocean-mid);
color: #fff;
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-weight: 700;
font-size: 0.78em;
box-shadow: 0 0 0 3px rgba(26, 110, 168, 0.12);
}
.popup-footer p:nth-of-type(3) {
position: relative;
background: var(--glass-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: 0.85em 1.1em 0.85em 1.3em;
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: var(--transition);
}
.popup-footer p:nth-of-type(3)::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(to bottom, var(--biolum-1), var(--ocean-mid));
}
.popup-footer p:nth-of-type(3):hover {
box-shadow: var(--shadow-md), 0 0 15px rgba(0, 229, 255, 0.12);
border-color: var(--biolum-3);
}
.popup-footer p:nth-of-type(3) b {
font-weight: 500;
color: var(--color-text);
font-size: 0.85em;
line-height: 1.55;
}
.popup-footer p:nth-of-type(3) a {
color: var(--ocean-mid);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid var(--glass-border);
transition: var(--transition);
}
.popup-footer p:nth-of-type(3) a:hover {
color: var(--biolum-1);
border-bottom-color: var(--biolum-1);
}
.popup-footer p:nth-of-type(3) a::after {
content: " \2197";
font-weight: 400;
}
.popup-footer p:nth-of-type(4) {
font-size: 0.72em;
color: var(--color-text-muted);
text-align: right;
margin-bottom: 0;
}
/* EN popup footer: $paragraphe_copyright_type1_bis outputs a single clean
, unlike the FR variable's stray leading
. .popup-footer-notice is
itself the 1st and the citation is the 2nd
in this case, so these
selectors are qualified with ".popup-footer p.popup-footer-notice" to
out-specificity (or tie-and-follow) the FR ".popup-footer p:nth-of-type()"
rules above instead of being silently overridden by them. */
.popup-footer p.popup-footer-notice {
display: flex;
align-items: center;
gap: 0.55em;
font-size: 0.76em;
font-weight: 600;
color: var(--ocean-4);
margin: 0 0 var(--space-sm);
}
.popup-footer p.popup-footer-notice::before {
content: "i";
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--ocean-mid);
color: #fff;
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-weight: 700;
font-size: 0.78em;
box-shadow: 0 0 0 3px rgba(26, 110, 168, 0.12);
}
.popup-footer p.popup-footer-notice + p {
display: block;
position: relative;
background: var(--glass-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: 0.85em 1.1em 0.85em 1.3em;
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: var(--transition);
margin: 0;
font-size: 1em;
font-weight: 400;
color: inherit;
}
.popup-footer p.popup-footer-notice + p::before {
content: '';
display: block;
position: absolute;
left: 0; top: 0; bottom: 0;
height: auto;
width: 3px;
border-radius: 0;
box-shadow: none;
background: linear-gradient(to bottom, var(--biolum-1), var(--ocean-mid));
}
.popup-footer p.popup-footer-notice + p:hover {
box-shadow: var(--shadow-md), 0 0 15px rgba(0, 229, 255, 0.12);
border-color: var(--biolum-3);
}
.popup-footer p.popup-footer-notice + p b {
font-weight: 500;
color: var(--color-text);
font-size: 0.85em;
line-height: 1.55;
}
.popup-footer p.popup-footer-notice + p a {
color: var(--ocean-mid);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid var(--glass-border);
transition: var(--transition);
}
.popup-footer p.popup-footer-notice + p a:hover {
color: var(--biolum-1);
border-bottom-color: var(--biolum-1);
}
.popup-footer p.popup-footer-notice + p a::after {
content: " \2197";
font-weight: 400;
}
.popup-footer p.popup-footer-copyright {
/* This is the 3rd
in the EN footer, same position as the FR citation
card (.popup-footer p:nth-of-type(3)) — reset its card look explicitly
since that rule matches by position and would otherwise still apply. */
position: static;
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
border-radius: 0;
box-shadow: none;
overflow: visible;
padding: 0;
font-size: 0.72em;
font-weight: 400;
color: var(--color-text-muted);
text-align: right;
margin: var(--space-sm) 0 0;
}
.popup-footer p.popup-footer-copyright::before {
content: none;
}
.popup-footer p.popup-footer-copyright:hover {
/* Same 3rd-
position clash as the base rule above: FR's
nth-of-type(3):hover glow must not leak onto the EN copyright line. */
box-shadow: none;
border-color: transparent;
}
.popup-figure { text-align: center; margin: 1em 0; }
.popup-figure img { max-width: 100%; height: auto; margin: 0 auto; }
.popup-caption { font-size: 0.88em; color: #444; text-align: justify; margin: 0.5em auto; max-width: 640px; }
.popup-title { font-size: 1.3em; font-weight: 700; color: var(--ocean-4); text-align: center; margin: 0 0 var(--space-md); }
.popup-subtitle { font-size: 0.95em; font-weight: 500; color: var(--color-text-muted); text-align: center; margin: -0.6em 0 var(--space-md); }
.table-update-note { text-align: center; font-style: italic; color: var(--color-text-muted); font-size: 0.9em; margin: var(--space-md) 0 0; }
.popup-content .popup-list { text-align: left; max-width: 640px; margin: 1em auto; }
.popup-content .popup-list:has(table.data-table) { max-width: 900px; }
.popup-content .popup-list:has(.reference-list) { max-width: 1100px; }
.popup-content .popup-list:has(.ref-dim-grid) { max-width: 1100px; }
.popup-content .popup-list:has(.glossary-grid) { max-width: 1100px; }
/* Citation d'une remarque de contributeur (remcc.php) */
.remark-notice {
display: flex;
align-items: center;
gap: 0.5em;
font-size: 0.85em;
font-weight: 600;
color: var(--ocean-4);
margin: 0 0 0.9em;
}
.remark-notice img {
flex-shrink: 0;
}
.remark-citation {
position: relative;
background: var(--glass-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: 0.9em 1.1em 0.9em 1.3em;
box-shadow: var(--shadow-sm);
line-height: 1.6;
transition: var(--transition);
}
.remark-citation::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(to bottom, var(--biolum-1), var(--ocean-mid));
}
.remark-citation:hover {
box-shadow: var(--shadow-md), 0 0 15px rgba(0, 229, 255, 0.1);
border-color: var(--biolum-3);
}
.remark-citation a {
color: var(--ocean-mid);
font-weight: 600;
}
/* Glossaire géographique / stations caractéristiques (glossary.php) */
.glossary-section-title {
font-size: 1.05em;
font-weight: 700;
color: var(--ocean-4);
margin: 1.6em 0 0.5em;
padding-bottom: 4px;
border-bottom: 2px solid var(--biolum-1);
display: inline-block;
}
.glossary-note {
font-size: 0.85em;
color: var(--color-text-muted);
margin: 0 0 1em;
}
.glossary-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 3px 14px;
margin-bottom: 1.2em;
}
.glossary-item {
padding: 4px 8px;
border-radius: 6px;
font-size: 0.9em;
line-height: 1.4;
transition: var(--transition);
}
.glossary-item:hover {
background: rgba(0, 229, 255, 0.07);
}
.glossary-fr {
color: var(--color-text);
}
.glossary-eq {
color: var(--color-text-muted);
margin: 0 1px;
}
.glossary-en {
color: var(--ocean-mid);
font-weight: 500;
}
/* Grille compacte de références numérotées (ref_auteursd.php) */
.ref-dim-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 3px 12px;
}
.ref-dim-item {
padding: 5px 8px;
border-radius: 6px;
font-size: 0.88em;
line-height: 1.4;
transition: var(--transition);
}
.ref-dim-item:hover {
background: rgba(0, 229, 255, 0.07);
}
.ref-dim-num {
color: var(--color-primary);
font-weight: 700;
margin-right: 2px;
}
/* Liste de références bibliographiques (references.php) */
.reference-note {
font-size: 0.85em;
color: var(--color-text-muted);
margin: 0 0 var(--space-md);
}
.reference-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.reference-list p {
position: relative;
background: var(--glass-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: 0.7em 1.1em 0.7em 1.9em;
text-indent: -0.75em;
margin: 0;
box-shadow: var(--shadow-sm);
line-height: 1.55;
font-size: 0.92em;
transition: var(--transition);
}
.reference-list p::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
border-radius: var(--radius-md) 0 0 var(--radius-md);
background: linear-gradient(to bottom, var(--biolum-1), var(--ocean-mid));
opacity: 0;
transition: var(--transition);
}
.reference-list p:hover {
background: #fff;
border-color: var(--biolum-3);
box-shadow: var(--shadow-md), 0 0 15px rgba(0, 229, 255, 0.1);
}
.reference-list p:hover::before {
opacity: 1;
}
.reference-list p a {
color: var(--ocean-mid);
font-weight: 500;
}
.ref-fauna-mark {
display: inline-block;
color: var(--biolum-1, #00b8d4);
font-weight: 800;
font-size: 1.15em;
margin-right: 2px;
}
.popup-content .popup-list p { margin: 0.3em 0; }