/* Polices Google chargées via dans le (index.php) — évite le @import rendu-bloquant. */
/* =========================================================================
Demain, la Biologie — feuille de style principale
Esthétique "botanique / naturaliste" mint, clinique et rassurante.
Le fond animé (PC uniquement) vit dans assets/background/ pour rester
modifiable indépendamment de cette feuille.
========================================================================= */
:root {
/* Palette — vert nature / bio-santé */
--moss: #1F3A2E; /* texte principal, titres */
--fern: #2F6B4F; /* accent primaire : liens, boutons */
--fern-dark: #234F3B;
--lichen: #7FB69E; /* accent secondaire : pastilles, survols */
--sage-mist: #E7F0E9; /* fond des cartes, sections alternées */
--paper: #FBFAF6; /* fond de page, légèrement teinté */
--clay-warn: #B5652D; /* accent d'alerte */
--line: #D7E4DB;
/* Typographie */
--font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
/* Échelle */
--step-0: 1rem;
--step-1: 1.25rem;
--step-2: 1.6rem;
--step-3: 2.1rem;
--step-4: 2.8rem;
--radius: 14px;
--content-width: 640px;
}
* { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--paper);
color: var(--moss);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
/* Fond mobile : dégradé doux et statique, léger et peu coûteux */
body {
background-image: radial-gradient(circle at 12% 0%, rgba(127,182,158,0.16), transparent 55%),
radial-gradient(circle at 100% 20%, rgba(47,107,79,0.10), transparent 45%);
background-repeat: no-repeat;
background-attachment: fixed;
}
a { color: var(--fern); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--fern-dark); }
:focus-visible {
outline: 2.5px solid var(--fern);
outline-offset: 2px;
border-radius: 4px;
}
h1, h2, h3 {
font-family: var(--font-display);
color: var(--moss);
line-height: 1.18;
font-weight: 560;
letter-spacing: -0.01em;
margin: 0 0 0.6em;
}
p { margin: 0 0 1.1em; }
.wrap {
max-width: var(--content-width);
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
/* ---------- Header ---------- */
.site-header {
padding: 28px 0 18px;
}
.site-header__row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.site-title {
font-size: var(--step-3);
margin: 0;
}
.site-title a { color: var(--moss); text-decoration: none; }
.site-tagline {
font-family: var(--font-body);
font-style: italic;
color: var(--fern-dark);
font-size: 0.95rem;
margin: 6px 0 0;
}
.breadcrumb {
font-family: var(--font-mono);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 18px 0 0;
}
.breadcrumb a { color: var(--fern-dark); }
/* ---------- Sélecteur de langue ---------- */
.lang-switch {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.lang-switch a {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
text-decoration: none;
color: var(--fern-dark);
border: 1.5px solid var(--line);
background: #fff;
padding: 5px 9px;
border-radius: 999px;
line-height: 1;
}
.lang-switch a[aria-current="true"] {
background: var(--fern);
border-color: var(--fern);
color: #fff;
}
.lang-switch a:hover:not([aria-current="true"]) {
border-color: var(--lichen);
color: var(--fern-dark);
}
/* ---------- Intro (page d'accueil) ---------- */
.intro {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px 24px;
margin: 22px 0 32px;
box-shadow: 0 1px 2px rgba(31,58,46,0.04);
}
.intro h1 { font-size: var(--step-2); }
.intro :last-child { margin-bottom: 0; }
.hero-image {
display: block;
box-sizing: border-box;
width: 100%;
max-width: 100%;
height: auto;
object-fit: cover;
border-radius: calc(var(--radius) - 4px);
margin: 0 0 20px;
border: 1px solid var(--line);
overflow: hidden;
}
/* Images insérées au fil du texte via  dans un fichier .md
(différentes de l'image de couverture .hero-image ci-dessus, qui est
toujours unique et placée en haut). Sans cette règle, une image plus
large que la carte déborderait de son conteneur. */
.article img:not(.hero-image),
.intro img:not(.hero-image) {
display: block;
box-sizing: border-box;
max-width: 100%;
height: auto;
border-radius: calc(var(--radius) - 4px);
border: 1px solid var(--line);
margin: 20px auto;
}
/* ---------- Sommaire / menu ---------- */
.menu-title {
font-size: var(--step-1);
margin: 0 0 4px;
}
.category-page-title {
font-family: var(--font-display);
font-size: var(--step-2);
color: var(--moss);
margin: 4px 0 16px;
}
.menu-empty {
color: var(--fern-dark);
font-style: italic;
}
/* ---------- Filtres par catégorie ---------- */
/* ---------- Menu principal (accueil, gestion, langues) ----------
Utilisé identiquement sur le site ET sur toutes les pages d'outils
(gestion.php, categories.php...) via render_main_menu(). */
.main-menu {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 14px;
margin: 10px 0;
}
.main-menu__link {
font-family: var(--font-mono);
font-size: 0.8rem;
text-decoration: underline;
color: var(--fern-dark);
}
.main-menu__link--gestion {
text-decoration: none;
border: 1.5px solid var(--line);
border-radius: 3px;
padding: 4px 10px;
}
.main-menu .lang-switch {
margin-left: auto;
}
/* ---------- Menu des catégories, un mini-menu déroulant par groupe ----------
/ natif par groupe : fonctionne sans JavaScript.
Le nom du groupe lui-même n'est jamais affiché (texte libre non
traduit) — voir le commentaire de render_category_menu(). */
.cat-menu {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 8px;
margin: 14px 0 8px;
}
.cat-menu__all {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 0.85rem;
padding: 8px 14px;
border-radius: 3px;
border: 1.5px solid var(--line);
background: #fff;
color: var(--fern-dark);
text-decoration: none;
}
.cat-menu__all:hover {
border-color: var(--fern);
}
.cat-menu__all.is-active {
background: var(--fern);
border-color: var(--fern);
color: #fff;
}
.cat-group__count {
opacity: 0.65;
font-size: 0.82em;
}
/* Groupe à une seule catégorie : rendu identique à .cat-menu__all,
simple lien direct sans rien à dérouler. */
.cat-group__single {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 0.85rem;
padding: 8px 14px;
border-radius: 3px;
border: 1.5px solid var(--line);
background: #fff;
color: var(--fern-dark);
text-decoration: none;
}
.cat-group__single:hover {
border-color: var(--cat-color, var(--fern));
}
.cat-group__single.is-active {
background: var(--cat-color, var(--fern));
border-color: var(--cat-color, var(--fern));
color: #fff;
}
/* Groupe à plusieurs catégories : son propre , positionné
individuellement (pas un seul grand panneau commun). */
.cat-group {
position: relative;
}
.cat-group__trigger {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 0.85rem;
padding: 8px 14px;
border-radius: 3px;
border: 1.5px solid var(--line);
background: #fff;
color: var(--fern-dark);
cursor: pointer;
list-style: none;
user-select: none;
}
.cat-group__trigger::-webkit-details-marker {
display: none;
}
.cat-group__chevron::after {
content: "▾";
opacity: 0.6;
}
.cat-group[open] > .cat-group__trigger .cat-group__chevron::after {
content: "▴";
}
.cat-group__trigger:hover {
border-color: var(--fern);
}
.cat-group__panel {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 6px;
padding: 8px;
border: 1.5px solid var(--line);
border-radius: 6px;
background: #fff;
}
.cat-group__item {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-radius: 4px;
text-decoration: none;
color: var(--fern-dark);
font-size: 0.88rem;
white-space: nowrap;
}
.cat-group__item:hover {
background: var(--sage-mist);
}
.cat-group__item.is-active {
background: var(--cat-color, var(--fern));
color: #fff;
}
.cat-group__item .cat-group__count {
margin-left: auto;
padding-left: 12px;
}
.cat-group__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cat-color, var(--fern));
flex-shrink: 0;
}
/* Sur mobile, chaque panneau de groupe s'étale en bloc pleine largeur
sous son bouton (comportement natif de ). À partir d'un
écran assez large, chaque panneau devient flottant individuellement
sous SON bouton, sans dépendre des autres groupes. */
@media (min-width: 640px) {
.cat-group__panel {
position: absolute;
top: 100%;
left: 0;
z-index: 20;
margin-top: 4px;
min-width: 220px;
max-height: 70vh;
overflow-y: auto;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
}
.category-group__title {
font-family: var(--font-display);
font-size: 1.1rem;
color: var(--moss);
margin: 30px 0 6px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.category-group__title:first-of-type {
margin-top: 18px;
padding-top: 0;
border-top: none;
}
.article-list {
list-style: none;
margin: 14px 0 36px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.article-card {
display: block;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 16px 18px;
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
position: relative;
}
.article-card:hover,
.article-card:focus-visible {
border-color: var(--art-primary, var(--fern));
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(31,58,46,0.08);
}
.article-card__marker {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--art-primary, var(--lichen));
margin-right: 8px;
vertical-align: middle;
}
.article-card__title {
font-family: var(--font-display);
font-size: 1.15rem;
color: var(--moss);
margin: 0 0 4px;
display: inline;
}
.article-card__excerpt {
color: #445A4E;
font-size: 0.92rem;
margin: 6px 0 10px;
}
.article-card__langs {
display: flex;
gap: 6px;
}
.pill {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.04em;
padding: 2px 7px;
border-radius: 999px;
background: var(--sage-mist);
color: var(--fern-dark);
border: 1px solid var(--line);
}
.pill--muted {
opacity: 0.45;
}
/* ---------- Article ---------- */
.article {
background: var(--art-bg, var(--sage-mist));
color: var(--art-text, var(--moss));
border: 1px solid var(--line);
border-top: 4px solid var(--art-primary, var(--fern));
border-radius: var(--radius);
padding: 28px 24px;
margin: 20px 0 28px;
box-shadow: 0 1px 2px rgba(31,58,46,0.04);
}
.article h1 { font-size: var(--step-2); color: var(--art-primary, var(--moss)); }
.article h2 { font-size: var(--step-1); margin-top: 1.4em; color: var(--art-text, var(--moss)); }
.article :last-child { margin-bottom: 0; }
.article hr {
border: none;
border-top: 1px solid var(--art-text, var(--line));
opacity: 0.2;
margin: 28px 0;
}
.article a { color: var(--art-primary, var(--fern)); }
.article-byline {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 0.76rem;
color: var(--art-primary, var(--fern-dark));
text-transform: uppercase;
letter-spacing: 0.04em;
margin: -6px 0 18px;
}
.pill--category {
background: var(--art-accent, var(--cat-color, var(--lichen)));
border-color: transparent;
color: #fff;
text-transform: none;
letter-spacing: 0.02em;
}
.notice {
font-family: var(--font-body);
font-size: 0.86rem;
background: var(--sage-mist);
border-left: 3px solid var(--lichen);
padding: 10px 14px;
border-radius: 6px;
margin: 0 0 20px;
color: var(--fern-dark);
}
.back-link {
display: inline-block;
margin: 4px 0 0;
font-size: 0.9rem;
}
/* ---------- Disclaimer ---------- */
.disclaimer {
border: 1px solid #E7D2C0;
background: #FBF3EC;
border-left: 3px solid var(--clay-warn);
border-radius: 10px;
padding: 16px 18px;
margin: 10px 0 24px;
}
.disclaimer__title {
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.72rem;
color: var(--clay-warn);
margin: 0 0 6px;
font-weight: 700;
}
.disclaimer p {
font-size: 0.88rem;
color: #6B4A34;
margin: 0;
}
.disclaimer p + p {
margin-top: 8px;
}
/* ---------- Footer / compteurs ---------- */
.site-footer {
padding: 18px 0 48px;
border-top: 1px solid var(--line);
margin-top: 12px;
}
.counters {
display: flex;
gap: 18px;
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--fern-dark);
margin: 14px 0 10px;
}
.counters strong {
color: var(--moss);
font-weight: 700;
}
.footer-note {
font-size: 0.78rem;
color: #6E8478;
}
/* ---------- Non trouvé ---------- */
.not-found {
padding: 60px 0;
text-align: center;
}
/* =========================================================================
Version « confortable » PC : largeur augmentée + fond animé (ambiance)
========================================================================= */
@media (min-width: 860px) {
:root { --content-width: 760px; }
body { font-size: 17px; }
.site-title { font-size: var(--step-4); }
.intro, .article {
padding: 40px 48px;
}
.article-card {
padding: 20px 24px;
}
/* Le fond dégradé mobile est neutralisé : le canevas animé prend le relais
(voir assets/background/background.css) */
body { background-image: none; }
}
@media (prefers-reduced-motion: reduce) {
.article-card { transition: none; }
}
/* Filet de sécurité pour les très vieux navigateurs sans support de "gap"
en flexbox (Safari < 14.1, Chrome < 84...). Scopé via @supports pour ne
jamais s'additionner au gap sur les navigateurs qui le supportent. */
@supports not (gap: 1px) {
.lang-switch > * + *,
.article-card__langs > * + *,
.article-byline > * + * {
margin-left: 6px;
}
.counters > * + * {
margin-left: 18px;
}
}
/* =========================================================================
Panneau de mode debug (?d=0524) — volontairement distinct du reste du
site ("console"), jamais visible sans le cookie de debug.
========================================================================= */
.debug-panel {
max-width: var(--content-width);
margin: 0 auto 40px;
padding: 0 20px;
font-family: var(--font-mono);
font-size: 0.82rem;
}
.debug-panel__title {
font-weight: 700;
color: #e6edf3;
background: #1a1f26;
display: inline-block;
padding: 6px 12px;
border-radius: 6px 6px 0 0;
margin: 0;
}
.debug-panel ul {
list-style: none;
margin: 0;
padding: 14px 16px;
background: #0d1117;
border-radius: 0 8px 8px 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
.debug-panel__notice {
padding-left: 20px;
position: relative;
color: #c9d1d9;
line-height: 1.5;
}
.debug-panel__notice::before {
position: absolute;
left: 0;
}
.debug-panel__notice--info::before {
content: "ℹ";
color: #58a6ff;
}
.debug-panel__notice--warning {
color: #f0d68a;
}
.debug-panel__notice--warning::before {
content: "⚠";
color: #d29922;
}
.debug-panel__meta {
background: #0d1117;
color: #8b949e;
border-radius: 8px;
padding: 10px 16px;
margin: 8px 0 0;
word-break: break-word;
}
.debug-panel__meta code {
color: #a5d6ff;
}
/* =========================================================================
Bouton d'appel à l'action / affiliation (frontmatter: cta_url,
cta_label, cta_style), inséré automatiquement entre les chapitres d'un
article. Deux styles au choix (cta_style: 1 ou 2), pour varier d'un
article à l'autre plutôt que d'avoir toujours le même bouton.
========================================================================= */
.cta-button {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin: 36px 0;
}
.cta-button__link {
position: relative;
overflow: hidden;
isolation: isolate;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.02em;
text-decoration: none;
padding: 13px 26px;
border-radius: 3px;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.cta-button__icon {
font-size: 1.1em;
}
/* Style 1 : "bon plan" — fond plein chaleureux, façon étiquette de prix */
.cta-button--style1 .cta-button__link {
background: linear-gradient(135deg, #ffa41c, #ff8f00);
color: #14110d;
box-shadow: 0 4px 14px rgba(255, 143, 0, 0.35);
}
.cta-button--style1 .cta-button__link:hover,
.cta-button--style1 .cta-button__link:focus-visible {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(255, 143, 0, 0.45);
}
/* Effet de brillance qui balaie le bouton au survol */
.cta-button--style1 .cta-button__link::after {
content: "";
position: absolute;
inset: 0;
left: -75%;
width: 45%;
background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.75), transparent);
transform: skewX(-20deg);
transition: left 0.65s ease;
z-index: -1;
}
.cta-button--style1 .cta-button__link:hover::after,
.cta-button--style1 .cta-button__link:focus-visible::after {
left: 125%;
}
/* Style 2 : "éditorial" — contour dans la couleur du site, plus discret,
pour une recommandation qui se veut moins "vitrine de magasin" */
.cta-button--style2 .cta-button__link {
background: transparent;
color: var(--art-primary, var(--fern));
border: 2px solid var(--art-primary, var(--fern));
padding: 11px 24px;
}
.cta-button--style2 .cta-button__link:hover,
.cta-button--style2 .cta-button__link:focus-visible {
background: var(--art-primary, var(--fern));
color: #fff;
transform: translateY(-2px);
}
.cta-button__disclosure {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--art-text, var(--fern-dark));
opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
.cta-button__link,
.cta-button__link::after {
transition: none;
}
}
/* =========================================================================
Newsletter / formulaire de question (footer)
========================================================================= */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.newsletter {
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 20px 22px;
margin: 10px 0 24px;
background: var(--sage-mist);
}
.newsletter__title {
font-size: var(--step-1);
margin: 0 0 4px;
}
.newsletter__intro {
font-size: 0.92rem;
color: var(--fern-dark);
margin: 0 0 14px;
}
.newsletter__message {
font-size: 0.88rem;
padding: 9px 12px;
border-radius: 6px;
background: #fff;
border: 1px solid var(--line);
margin: 0 0 14px;
}
.newsletter__message--error {
border-color: var(--clay-warn);
color: var(--clay-warn);
}
/* Piège à robots (honeypot) : invisible pour un humain, un bot le remplit souvent quand même */
.newsletter__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.newsletter__row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.newsletter__row input[type="email"] {
flex: 1 1 220px;
min-width: 0;
font-family: var(--font-body);
font-size: 0.95rem;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 4px;
background: #fff;
color: var(--moss);
}
.newsletter__row input[type="email"]:focus-visible {
outline: 2.5px solid var(--fern);
outline-offset: 1px;
}
.newsletter__row button {
font-family: var(--font-mono);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 10px 20px;
border: none;
border-radius: 4px;
background: var(--fern);
color: #fff;
cursor: pointer;
transition: background 0.15s ease;
}
.newsletter__row button:hover {
background: var(--fern-dark);
}
.newsletter textarea {
display: block;
width: 100%;
font-family: var(--font-body);
font-size: 0.92rem;
padding: 9px 12px;
border: 1px solid var(--line);
border-radius: 4px;
background: #fff;
color: var(--moss);
resize: vertical;
margin: 8px 0 0;
}
.newsletter textarea:focus-visible {
outline: 2.5px solid var(--fern);
outline-offset: 1px;
}
.newsletter__privacy {
font-size: 0.74rem;
color: var(--fern-dark);
opacity: 0.75;
margin: 8px 0 0;
}
/* =========================================================================
Articles liés (recoupement de mots-clés du frontmatter)
========================================================================= */
.related {
margin: 8px 0 20px;
}
.related__title {
font-size: var(--step-1);
margin: 0 0 10px;
}
.related__shared {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--fern-dark);
opacity: 0.75;
margin: 4px 0 10px;
}
/* =========================================================================
Rapport de diagnostic global (mode debug, page d'accueil) : tableau de
tous les fichiers, langues manquantes, complétude par article.
========================================================================= */
.debug-panel--wide {
max-width: none;
padding: 0 20px;
}
@media (min-width: 860px) {
.debug-panel--wide { padding: 0 40px; }
}
.debug-report {
background: #0d1117;
border-radius: 0 8px 8px 8px;
padding: 16px 18px;
overflow-x: auto;
}
.debug-report__summary {
color: #c9d1d9;
font-size: 0.8rem;
margin: 0 0 14px;
}
.debug-report__table {
border-collapse: collapse;
width: 100%;
font-size: 0.8rem;
color: #c9d1d9;
}
.debug-report__table th,
.debug-report__table td {
text-align: left;
padding: 6px 12px;
border-bottom: 1px solid #21262d;
white-space: nowrap;
}
.debug-report__table th {
color: #8b949e;
font-weight: 600;
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.04em;
}
.debug-report__good { color: #3fb950; }
.debug-report__warn { color: #d29922; cursor: help; }
.debug-report__bad { color: #f85149; }
.debug-report__hint {
color: #6e7681;
font-size: 0.72rem;
margin: 12px 0 0;
}
/* =========================================================================
Dernier article en évidence (page d'accueil, trié par date_publication)
========================================================================= */
.featured {
margin: 4px 0 28px;
}
.featured__eyebrow {
font-family: var(--font-mono);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fern-dark);
margin: 0 0 8px;
}
.featured__card {
display: flex;
gap: 20px;
align-items: stretch;
text-decoration: none;
color: inherit;
background: #fff;
border: 1px solid var(--line);
border-left: 5px solid var(--art-primary, var(--fern));
border-radius: var(--radius);
padding: 18px 20px;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.featured__card:hover,
.featured__card:focus-visible {
box-shadow: 0 8px 20px rgba(31, 58, 46, 0.08);
transform: translateY(-1px);
}
/* Volontairement SANS hauteur fixe (ni object-fit) : une contrainte de
hauteur en pixels combinée à d'autres propriétés CSS a déjà cassé
l'affichage de certaines images par le passé sur ce site (voir
.hero-image et widgets/image.php) — largeur seule, hauteur naturelle. */
.featured__image {
width: 160px;
min-width: 160px;
height: auto;
border-radius: calc(var(--radius) - 4px);
border: 1px solid var(--line);
}
.featured__body {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.featured__card-title {
font-family: var(--font-display);
font-size: 1.2rem;
color: var(--art-primary, var(--moss));
font-weight: 600;
line-height: 1.3;
}
.featured__excerpt {
color: #445A4E;
font-size: 0.92rem;
margin: 6px 0 10px;
}
.featured__cats {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
@media (max-width: 540px) {
.featured__card { flex-direction: column; }
.featured__image { width: 100%; height: auto; }
}
/* Widget !!imagetexte : image avec texte superposé (voir
widgets/imagetexte.php) — le texte reste du Markdown normal, traduit
comme le reste de l'article, contrairement à un texte gravé dans
l'image. Fond sombre fixe (pas une variable de couleur du site) pour
rester lisible sur n'importe quelle photo, quel que soit le thème du
blog. */
.widget-imagetexte {
position: relative;
display: block;
margin: 20px 0;
overflow: hidden;
border-radius: var(--radius);
}
.widget-imagetexte__image {
display: block;
width: 100%;
height: auto;
}
.widget-imagetexte__caption {
position: absolute;
margin: 16px;
padding: 6px 14px;
max-width: calc(100% - 32px);
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-family: var(--font-body);
font-weight: 600;
line-height: 1.3;
border-radius: calc(var(--radius) - 2px);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
/* --pos-transform (position ci-dessous) et --effet-transform/-opacity
(effet optionnel, injectés par widgets/imagetexte.php) se combinent
ici sans se marcher dessus — chacune vaut "none"/"1" quand elle
n'est pas définie, donc ceci ne change rien pour un !!imagetexte
sans effet. */
transform: var(--pos-transform, none) var(--effet-transform, none);
opacity: var(--effet-opacity, 1);
}
.widget-imagetexte__caption--haut-gauche { top: 0; left: 0; }
.widget-imagetexte__caption--haut { top: 0; left: 50%; --pos-transform: translateX(-50%); text-align: center; }
.widget-imagetexte__caption--haut-droite { top: 0; right: 0; }
.widget-imagetexte__caption--centre { top: 50%; left: 50%; --pos-transform: translate(-50%, -50%); text-align: center; }
.widget-imagetexte__caption--bas-gauche { bottom: 0; left: 0; }
.widget-imagetexte__caption--bas { bottom: 0; left: 50%; --pos-transform: translateX(-50%); text-align: center; }
.widget-imagetexte__caption--bas-droite { bottom: 0; right: 0; }
@media (max-width: 480px) {
.widget-imagetexte__caption {
margin: 10px;
padding: 5px 10px;
}
}
/* =========================================================================
ZONE GÉRÉE PAR css.php
========================================================================= */
/* regle 1 : Tableaux, citations, code, texte barré (Markdown enrichi) */
.article table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 0.95rem;
}
.article th, .article td {
padding: 8px 12px;
border: 1px solid var(--line);
text-align: left;
}
.article th {
background: var(--sage-mist);
color: var(--moss);
font-weight: 700;
}
.article tr:nth-child(even) td {
background: rgba(127, 127, 127, 0.06);
}
.article blockquote {
margin: 20px 0;
padding: 12px 20px;
border-left: 3px solid var(--art-primary, var(--fern));
background: var(--sage-mist);
border-radius: 0 var(--radius) var(--radius) 0;
font-style: italic;
color: var(--moss);
}
.article blockquote p:last-child { margin-bottom: 0; }
.article code {
font-family: var(--font-mono);
font-size: 0.88em;
background: var(--sage-mist);
padding: 2px 6px;
border-radius: 4px;
}
.article pre {
background: #21252b;
color: #e6e6e6;
padding: 16px 18px;
border-radius: var(--radius);
overflow-x: auto;
margin: 20px 0;
font-size: 0.88rem;
line-height: 1.5;
}
.article pre code {
background: none;
padding: 0;
color: inherit;
}
.article del {
color: var(--clay-warn);
opacity: 0.75;
}
/* regle 2 : Widget !!attention */
.widget-attention {
position: relative;
display: flex;
align-items: flex-start;
margin: 20px 0;
padding: 14px 18px;
background: var(--sage-mist);
border: 2px solid var(--art-primary, var(--fern));
border-radius: var(--radius);
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.widget-attention__icon {
font-size: 1.1rem;
color: var(--art-primary, var(--fern));
line-height: 1.4;
flex-shrink: 0;
margin-right: 12px;
}
.widget-attention p {
margin: 0;
font-weight: 600;
color: var(--moss);
}
/* Variante cliquable (!!attention:"texte"|lien) : même principe que
.widget-ctaplus__link — un vide superposé en position absolute
recouvre toute la carte, sans zone morte, quel que soit son contenu. */
.widget-attention--link {
cursor: pointer;
}
.widget-attention--link:hover {
border-color: var(--fern-dark);
}
.widget-attention__link {
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
}
.widget-attention__link:focus-visible {
outline: 2px solid var(--fern);
outline-offset: 2px;
}
/* regle 3 : Widget !!facebook */
.widget-facebook {
margin: 20px 0;
display: flex;
justify-content: center;
}
.widget-facebook iframe {
max-width: 100%;
border-radius: var(--radius);
border: 1px solid var(--line);
}
/* regle 4 : Bouton j'aime (like) */
.like-button {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 4px 0 20px;
padding: 8px 16px;
background: var(--sage-mist);
border: 1.5px solid var(--line);
border-radius: 999px;
color: var(--moss);
font-family: var(--font-mono);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.like-button:hover {
border-color: var(--art-primary, var(--fern));
}
.like-button:active {
transform: scale(0.96);
}
.like-button--active {
background: var(--art-primary, var(--fern));
border-color: var(--art-primary, var(--fern));
color: #fff;
}
.like-button__icon {
flex-shrink: 0;
}
/* regle 5 : Widget !!image */
.widget-image {
margin: 24px 0;
text-align: center;
}
.widget-image img {
max-width: 100%;
height: auto;
border-radius: var(--radius);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}
/* regle 6 : Édition de chapitre (mode debug) */
.chapter-edit-btn {
background: none;
border: none;
cursor: pointer;
font-size: 0.8em;
opacity: 0.5;
margin-left: 8px;
vertical-align: middle;
padding: 2px;
}
.chapter-edit-btn:hover {
opacity: 1;
}
.chapter-edit-modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.chapter-edit-modal[hidden] {
display: none; /* sans cette règle, "display: flex" ci-dessus l'emportait
toujours sur l'attribut hidden natif — la fenêtre
restait affichée en permanence, jamais cachée */
}
.chapter-edit-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
}
.chapter-edit-modal__box {
position: relative;
background: var(--paper);
border-radius: var(--radius);
padding: 20px;
max-width: 600px;
width: 100%;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.chapter-edit-modal__label {
margin: 0 0 10px;
font-weight: 700;
color: var(--moss);
}
#chapter-edit-textarea {
width: 100%;
box-sizing: border-box;
min-height: 200px;
font-family: var(--font-mono);
font-size: 0.9rem;
padding: 10px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--sage-mist);
color: var(--moss);
}
.chapter-edit-modal__error {
color: var(--clay-warn);
font-size: 0.85rem;
margin: 8px 0 0;
}
.chapter-edit-modal__buttons {
display: flex;
gap: 10px;
margin-top: 12px;
justify-content: flex-end;
}
.chapter-edit-modal__buttons button {
padding: 8px 16px;
border-radius: 6px;
border: none;
cursor: pointer;
font-size: 0.9rem;
}
#chapter-edit-cancel {
background: var(--sage-mist);
color: var(--moss);
}
#chapter-edit-save {
background: var(--art-primary, var(--fern));
color: #fff;
}
#chapter-edit-save:disabled {
opacity: 0.6;
cursor: default;
}
/* Popup d'engagement en fin d'article (newsletter / question / lien
affilié) — même piège que .chapter-edit-modal : sans la règle [hidden]
ci-dessous, "display: flex" gagnerait toujours sur l'attribut hidden. */
.engagement-popup {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.engagement-popup[hidden] {
display: none;
}
.engagement-popup__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
}
.engagement-popup__box {
position: relative;
background: var(--paper);
border-radius: var(--radius);
padding: 28px 24px 24px;
max-width: 420px;
width: 100%;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
text-align: center;
}
.engagement-popup__close {
position: absolute;
top: 6px;
right: 6px;
border: none;
background: none;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
color: var(--moss);
padding: 6px 10px;
}
.engagement-popup__title {
margin: 0 0 8px;
font-weight: 700;
font-size: 1.1rem;
color: var(--moss);
}
.engagement-popup__text {
margin: 0 0 18px;
font-size: 0.92rem;
line-height: 1.5;
color: var(--moss);
}
.engagement-popup__actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.engagement-popup__btn {
display: block;
padding: 10px 16px;
border-radius: var(--radius);
background: var(--sage-mist);
color: var(--moss);
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
}
.engagement-popup__btn:hover {
background: var(--line);
}
.engagement-popup__btn--primary {
background: var(--fern);
color: var(--paper);
}
.engagement-popup__btn--primary:hover {
background: var(--fern-dark);
}
/* regle 7 : Widget !!sponsor */
.widget-sponsor {
display: inline-flex;
flex-direction: column;
gap: 4px;
margin: 20px 0;
padding: 14px 20px;
background: var(--sage-mist);
border: 2px solid var(--art-primary, var(--fern));
border-radius: var(--radius);
}
.widget-sponsor__badge {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--art-primary, var(--fern));
}
.widget-sponsor__name {
margin: 0;
font-weight: 700;
font-size: 1.05rem;
color: var(--moss);
}
/* regle 8 : Widget !!ctaplus (lien externe/affiliation) — carte entièrement
cliquable via un calque en position absolute qui recouvre toute la
carte (voir widgets/ctaplus.php) : aucune zone morte, quelle que soit la
mise en page flex du contenu à l'intérieur. */
.widget-ctaplus {
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding: 14px;
margin: 20px 0;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--sage-mist);
overflow: hidden;
}
.widget-ctaplus__link {
position: absolute;
inset: 0;
z-index: 1;
}
.widget-ctaplus__link:focus-visible {
outline: 2px solid var(--fern);
outline-offset: 2px;
}
.widget-ctaplus__image {
flex: 0 0 25%;
width: 25%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: calc(var(--radius) - 4px);
display: block;
}
.widget-ctaplus__body {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.widget-ctaplus__text {
font-size: 0.95rem;
line-height: 1.5;
color: var(--moss);
}
.widget-ctaplus__button {
align-self: flex-start;
padding: 8px 16px;
border-radius: var(--radius);
background: var(--fern);
color: var(--paper);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.9rem;
}
.widget-ctaplus:hover .widget-ctaplus__button {
background: var(--fern-dark);
}
.widget-ctaplus__disclosure {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.6;
}
@media (max-width: 480px) {
.widget-ctaplus {
flex-direction: column;
align-items: stretch;
}
.widget-ctaplus__image {
width: 100%;
flex-basis: auto;
aspect-ratio: 16 / 9;
}
}
/* ---- Pied de page : liens légaux ---- */
.footer-legal {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
justify-content: center;
margin: 18px 0 12px;
font-size: 0.85rem;
}
.footer-legal a {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted currentColor;
}
.footer-legal a:hover {
border-bottom-style: solid;
}
/* ---- Bandeau de consentement cookies ---- */
.cookie-banner {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 16px;
padding: 14px 20px;
background: #1a1a1a;
color: #fff;
font-size: 0.85rem;
line-height: 1.5;
z-index: 9999;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
}
/* Sans cette règle, `display: flex` prime sur l'attribut HTML `hidden` et le
bandeau resterait visible même après acceptation/refus. */
.cookie-banner[hidden] {
display: none;
}
.cookie-banner__text {
margin: 0;
max-width: 62ch;
}
.cookie-banner__text a {
color: #fff;
text-decoration: underline;
}
.cookie-banner__actions {
display: flex;
gap: 8px;
}
.cookie-banner__btn {
border: 1px solid #fff;
background: transparent;
color: #fff;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font: inherit;
}
.cookie-banner__btn:hover {
background: rgba(255, 255, 255, 0.12);
}
.cookie-banner__btn--accept {
background: #2E7D32;
border-color: #2E7D32;
}
.cookie-banner__btn--accept:hover {
background: #256428;
}