/*
Theme Name: Ventabren Galerie
Theme URI: https://www.52chemindeventabren.com/
Author: Guilhem Drullion
Description: Thème galerie sombre pour le site de Didier Ventabren. Les œuvres (articles) sont présentées comme dans une salle d'exposition : pénombre, éclairage au survol, cartels. Deux mises en page d'accueil au choix dans Apparence › Personnaliser › Galerie Ventabren : « Salle d'exposition » (dernière œuvre en grand puis accrochage à l'échelle sous des faisceaux de lumière) ou « Mosaïque » (toutes les œuvres dans leur vraie forme, éclairées au survol).
Version: 1.2.9
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ventabren
*/

:root {
	--fond: #070707;
	--fond-salle: #0b0a09;
	--texte: #ece6dc;
	--texte-doux: #c9bfb0;
	--doux: #a69d90;
	--discret: #8f877b;
	--trait: #1f1c19;
	--bord: #2e2a25;
	--dim: .5;
	--lamp: rgba(255, 226, 180, .45);
	--lamp-coeur: rgba(255, 236, 205, .7);
	--lamp-salle: rgba(255, 226, 180, .16);
	--lamp-salle-mid: rgba(255, 226, 180, .056);
	--serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--sans: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--gouttiere: clamp(16px, 3vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--sans); font-size: 16px; line-height: 1.6; }
body.mise-en-page-salle.home { background: var(--fond-salle); }
a { color: #e9dcc4; text-decoration: none; }
a:hover, a:focus-visible { color: #fff; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid #e9dcc4; outline-offset: 3px; }
button { font: inherit; }

.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }
.skip-link:focus { clip: auto; clip-path: none; height: auto; width: auto; left: 12px; top: 12px; padding: 12px 18px; background: var(--texte); color: var(--fond); z-index: 100; }

.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; }

/* ---------- En-tête ---------- */
.site-header { position: relative; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px; padding: 20px var(--gouttiere); }
.site-logo { display: flex; align-items: center; }
.site-logo img { height: 50px; width: auto; display: block; }
.site-logo .site-title { font-family: var(--serif); font-size: 30px; font-weight: 500; color: var(--texte); line-height: 1; }
.menu-principal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.menu-principal ul { list-style: none; margin: 0; padding: 0; }
.menu-principal > ul:first-child, .menu-principal .menu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 30px; }
.menu-principal li { position: relative; }
.menu-principal a { display: inline-flex; align-items: center; gap: 6px; padding: 12px 0; font-size: 14px; }
.menu-principal .menu-item-has-children, .menu-principal .page_item_has_children { display: flex; flex-wrap: wrap; align-items: center; }
.sous-bouton { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 44px; margin-left: 2px; padding: 0; background: transparent; border: 0; color: inherit; cursor: pointer; opacity: .75; }
.sous-bouton:hover { opacity: 1; }
.sous-bouton svg { transition: transform .25s ease; }
.ouvert > .sous-bouton svg { transform: rotate(180deg); }
.menu-principal .current-menu-item > a, .menu-principal .current-menu-ancestor > a, .menu-principal .current-cat > a, .menu-principal .current_page_item > a, .menu-principal .current-menu-parent > a { color: #fff; }
.menu-principal .sub-menu, .menu-principal .children { position: absolute; left: -18px; top: 100%; min-width: 240px; display: flex; flex-direction: column; padding: 10px 0; background: #0e0d0c; border: 1px solid var(--bord); box-shadow: 0 18px 40px rgba(0, 0, 0, .6); z-index: 30; visibility: hidden; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.menu-principal li.ouvert > .sub-menu, .menu-principal li.ouvert > .children { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
@media (min-width: 821px) {
	.menu-principal li.survol > .sub-menu, .menu-principal li.survol > .children { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
}
.menu-principal .sub-menu a, .menu-principal .children a { display: block; padding: 9px 18px; color: #cfc5b6; }
.menu-principal .sub-menu a:hover, .menu-principal .children a:hover { color: #fff; background: #151311; }
.menu-principal .sub-menu .tout a { color: var(--texte); border-bottom: 1px solid #221f1b; margin-bottom: 6px; padding-bottom: 12px; }
.langues { display: flex; gap: 2px; padding-left: 20px; border-left: 1px solid #2a2622; font-size: 13px; letter-spacing: .08em; }
.langues a { padding: 12px 6px !important; color: var(--discret); }
.langues a[aria-current="true"], .langues .current-lang a { color: var(--texte); }
.bouton-menu { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--texte); cursor: pointer; margin-right: -12px; }

@media (max-width: 820px) {
	.site-header { padding-top: 12px; padding-bottom: 12px; }
	.site-logo img { height: 42px; }
	.bouton-menu { display: flex; }
	.menu-principal { display: none; width: 100%; padding: 8px 0 16px; flex-direction: column; align-items: stretch; }
	.menu-principal.ouvert { display: flex; }
	.menu-principal > ul:first-child, .menu-principal .menu { flex-direction: column; align-items: stretch; gap: 0; }
	.menu-principal .menu > li > a, .menu-principal > ul:first-child > li > a { display: flex; min-height: 56px; font-family: var(--serif); font-size: 28px; color: var(--texte); border-bottom: 1px solid #1c1a17; }
	.menu-principal .menu-item-has-children, .menu-principal .page_item_has_children { border-bottom: 1px solid #1c1a17; }
	.menu-principal .menu-item-has-children > a, .menu-principal .page_item_has_children > a { flex: 1; border-bottom: 0 !important; }
	.sous-bouton { width: 48px; height: 56px; }
	.menu-principal .sub-menu, .menu-principal .children { position: static; display: none; width: 100%; border: 0; background: none; box-shadow: none; padding: 0 0 12px; min-width: 0; visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: none; }
	.menu-principal li.ouvert > .sub-menu, .menu-principal li.ouvert > .children { display: flex; }
	.menu-principal .sub-menu a, .menu-principal .children a { padding: 10px 2px; font-size: 16px; color: var(--doux); }
	.menu-principal .sub-menu .tout a { border: 0; margin: 0; padding-bottom: 10px; }
	.langues { border: 0; padding: 16px 0 0; gap: 8px; }
	.langues a { min-width: 52px; justify-content: center; border: 1px solid var(--bord); border-radius: 999px; padding: 10px 14px !important; }
	.langues a[aria-current="true"] { border-color: var(--texte); }
}

/* ---------- Boutons, étiquettes ---------- */
.bouton-contour { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border: 1px solid #4a433a; border-radius: 999px; font-size: 14px; font-weight: 500; }
.bouton-contour:hover { border-color: #8a7f6e; }
.bouton-plein { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; background: var(--texte); color: var(--fond); border-radius: 999px; font-weight: 600; font-size: 15px; text-align: center; }
.bouton-plein:hover { background: #fff; color: var(--fond); }
.bouton-petit { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; background: transparent; color: #cfc5b6; border: 1px solid var(--bord); border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; }
.bouton-petit:hover { border-color: #7d7366; color: #fff; }
.surtitre { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--doux); }

/* ---------- Introduction et séries ---------- */
.intro { padding: 40px var(--gouttiere) 36px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.intro-texte { max-width: 680px; }
.intro h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4vw, 54px); line-height: 1.05; }
.intro h1 em { color: #d9cfc0; }
.intro p { margin: 14px 0 0; color: var(--doux); font-size: 15px; }
.series { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 680px; }
.series a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--bord); border-radius: 999px; font-size: 13px; color: #bfb5a6; white-space: nowrap; }
.series a:hover { border-color: #7d7366; color: #fff; }
.series .actif a { background: var(--texte); color: var(--fond); border-color: var(--texte); }
@media (max-width: 600px) {
	.intro { padding-top: 20px; padding-bottom: 20px; }
	.series { flex-wrap: nowrap; overflow-x: auto; max-width: none; width: calc(100% + 2 * var(--gouttiere)); margin: 0 calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere); scrollbar-width: none; }
}

/* ---------- Mosaïque ---------- */
.mosaique { padding: 0 var(--gouttiere) 40px; columns: 5 240px; column-gap: 24px; }
.mosaique.js-colonnes { columns: auto; display: flex; align-items: flex-start; gap: 24px; }
.mosaique .colonne { flex: 1 1 0; min-width: 0; }
.oeuvre { display: block; break-inside: avoid; margin: 0 0 28px; color: var(--texte); }
/* ---------- Jeu de lumière ----------
   Chaque toile porte la classe .lumiere : un faisceau chaud (::after) éclaire la toile
   là où se trouve le projecteur (--mx, --my), et une pénombre (::before) assombrit les bords.
   Le projecteur suit doucement la souris ; sans souris, il « respire » lentement. */
@property --mx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --my { syntax: '<percentage>'; inherits: true; initial-value: 12%; }
.lumiere { position: relative; display: block; overflow: hidden; line-height: 0; --mx: 50%; --my: 12%; --allume: 0; transition: --mx .9s cubic-bezier(.2, .7, .2, 1), --my .9s cubic-bezier(.2, .7, .2, 1); }
.lumiere::before, .lumiere::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--allume); transition: opacity .9s ease; }
.lumiere::before { z-index: 1; background: radial-gradient(ellipse 120% 110% at var(--mx) var(--my), transparent 45%, rgba(0, 0, 0, .32) 100%); }
.lumiere::after { z-index: 2; mix-blend-mode: soft-light; background: radial-gradient(circle at var(--mx) var(--my), var(--lamp-coeur) 0%, var(--lamp) 38%, transparent 85%); }
.lumiere img { position: relative; z-index: 0; }
.lumiere .reflet { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: calc(var(--allume) * .9); transition: opacity .9s ease; mix-blend-mode: screen; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 248, 235, .12) 0%, rgba(255, 248, 235, 0) 24%); }
.lumiere.toujours { --allume: 1; animation: respire 14s ease-in-out infinite; }
.lumiere.toujours:hover { animation: none; }
@keyframes respire {
	0%, 100% { --mx: 44%; --my: 10%; }
	50% { --mx: 57%; --my: 24%; }
}

.cadre { background: #000; }
.cadre img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(var(--dim)) saturate(.8); transition: filter .8s ease, transform 1.2s ease; }
.oeuvre:hover .lumiere, .oeuvre:focus-visible .lumiere, .oeuvre.allumee .lumiere,
.toile:hover .lumiere, .toile:focus-visible .lumiere, .toile.allumee .lumiere { --allume: 1; }
.oeuvre.allumee .lumiere, .toile.allumee .lumiere { animation: respire 9s ease-in-out infinite; }
.cartel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; opacity: .6; transition: opacity .5s ease; }
.cartel-titre { font-family: var(--serif); font-size: 19px; font-style: italic; line-height: 1.15; }
.cartel-meta { font-size: 12px; color: var(--doux); white-space: nowrap; }
.oeuvre:hover .cadre img, .oeuvre:focus-visible .cadre img, .oeuvre.allumee .cadre img { filter: brightness(1.04) saturate(1); transform: scale(1.025); }
.oeuvre:hover .cartel, .oeuvre:focus-visible .cartel, .oeuvre.allumee .cartel { opacity: 1; }
@media (max-width: 600px) {
	.mosaique { columns: 2; column-gap: 12px; }
	.mosaique.js-colonnes { gap: 12px; }
	.oeuvre { margin-bottom: 20px; }
	.cartel { flex-direction: column; gap: 2px; padding-top: 7px; }
	.cartel-titre { font-size: 16px; }
	.cartel-meta { font-size: 11px; }
}

/* ---------- Salle d'exposition ----------
   Murs successifs (un par année, N toiles par mur), séparés par une bande de sol.
   Lumière diffuse sur le mur (.lavis), ombre portée, étiquette noire sous chaque toile.
   Les centres des toiles d'un même mur sont alignés, comme dans une galerie. */
.rampe { display: none; }
.ombre { box-shadow: 0 1px 0 rgba(255, 240, 220, .08), 0 3px 5px rgba(0, 0, 0, .5), 0 16px 26px -8px rgba(0, 0, 0, .6), 0 40px 70px -20px rgba(0, 0, 0, .75); }
.mur { position: relative; background: var(--mur, #1f1d1a); overflow: hidden; }
.mur-rail { height: 1px; background: rgba(255, 240, 220, .1); }
.mur-titre { position: absolute; left: var(--gouttiere); top: 24px; z-index: 2; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #9c9387; }
.sol { height: 56px; background: #0d0c0b; border-top: 1px solid rgba(255, 240, 220, .08); }
.accrochage { --echelle: 2.4; --hmax: 60; position: relative; max-width: 1360px; margin: 0 auto; padding: 0 var(--gouttiere) 40px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.toile { --fil: calc((var(--hmax) - var(--h)) * var(--echelle) * .5px + 48px); position: relative; display: flex; flex-direction: column; align-items: center; max-width: 100%; padding: 0 40px; color: var(--texte); }
.toile .lavis { position: absolute; left: 50%; top: calc(var(--fil) + var(--h) * var(--echelle) * .38px); width: calc(var(--l) * var(--echelle) * 3.2px + 220px); height: calc(var(--h) * var(--echelle) * 2.7px + 180px); transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, var(--wash) 0%, var(--wash) 30%, var(--wash-mid) 62%, rgba(0, 0, 0, 0) 100%); opacity: .85; transition: opacity 1s ease; }
.toile:hover .lavis, .toile:focus-visible .lavis, .toile.allumee .lavis { opacity: 1; }
.fil-haut { display: block; height: var(--fil); }
.fil-bas { display: block; height: calc((var(--hmax) - var(--h)) * var(--echelle) * .5px + 78px); }
.accroc { position: relative; display: block; width: calc(var(--l) * var(--echelle) * 1px); max-width: 100%; aspect-ratio: var(--l) / var(--h); }
.accroc .lumiere { width: 100%; height: 100%; }
.accroc img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.96) saturate(.96); transition: filter .8s ease; }
.toile:hover .accroc img, .toile:focus-visible .accroc img, .toile.allumee .accroc img, .lumiere.toujours img { filter: brightness(1.03) saturate(1); }
.etiquette { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 11px 7px; background: #050505; border: 1px solid #221f1b; color: #e6e0d6; text-align: center; line-height: 1.25; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.et-titre { margin: 0; font-family: var(--serif); font-weight: 500; font-style: italic; font-size: 14px; line-height: 1.15; color: var(--texte); }
.et-meta { font-size: 10px; color: var(--doux); }
.etiquette.grande { gap: 3px; padding: 9px 16px 10px; }
.grande .et-titre { font-size: 20px; }
.grande .et-meta { font-size: 11px; }

.vedette { --fil: 80px; padding: 0; }
.vedette .accroc { width: min(700px, 100%); }
.vedette .lavis { width: 1800px; height: 1150px; }
.vedette .fil-bas { height: 120px; }

.intro-salle h2 { margin: 8px 0 0; font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1; }
.intro-salle { padding-top: 48px; }

@media (max-width: 900px) { .accrochage { --echelle: 2; } }
@media (max-width: 600px) {
	.accrochage { --echelle: 2.6; padding-bottom: 24px; }
	.toile { padding: 0 8px; }
	.mur-titre { top: 16px; }
	.toile { --fil: calc((var(--hmax) - var(--h)) * var(--echelle) * .5px + 48px); }
	.etiquette { white-space: normal; width: max-content; max-width: min(260px, 80vw); }
	.vedette { --fil: 64px; }
	.vedette .fil-bas { height: 110px; }
	.intro-salle h2 { font-size: 34px; }
}

/* ---------- Navigation entre pages de liste ---------- */
.pagination-oeuvres { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0 var(--gouttiere) 56px; }

/* ---------- En-tête d'archive ---------- */
.archive-entete { padding: 40px var(--gouttiere) 28px; display: flex; flex-direction: column; gap: 20px; }
.archive-entete h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4vw, 54px); line-height: 1.05; }
.archive-entete .description { max-width: 680px; color: var(--doux); font-size: 15px; }
.archive-entete .description p { margin: 0; }

/* ---------- Page d'une œuvre ---------- */
.oeuvre-page { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 56px; padding: 8px var(--gouttiere) 64px; }
.salle { flex: 999 1 720px; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 72px clamp(16px, 4vw, 72px) 40px; background: radial-gradient(ellipse 60% 70% at 50% 0%, var(--lamp-salle) 0%, var(--lamp-salle-mid) 42%, transparent 75%); }
.salle { transition: background-color .9s ease; }
.salle.eteinte { background: #050505; }
.salle .lumiere { max-width: min(920px, 100%); }
.salle .principale { width: auto; max-width: 100%; max-height: 78vh; height: auto; display: block; }
/* Salle éteinte : la souris (ou le doigt) devient une lampe de poche. */
.salle.eteinte .lumiere { animation: none; transition-duration: .18s; touch-action: none; cursor: crosshair; }
.salle.eteinte .lumiere::before { background: radial-gradient(circle at var(--mx) var(--my), transparent 0%, transparent 9%, rgba(0, 0, 0, .9) 30%); }
.salle-astuce { margin: 18px 0 0; min-height: 1.6em; font-size: 13px; color: var(--discret); text-align: center; opacity: 0; transition: opacity .6s ease; }
.salle.eteinte .salle-astuce { opacity: 1; }
.salle-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.principale:fullscreen { max-width: none; max-height: none; width: 100vw; height: 100vh; object-fit: contain; background: #000; box-shadow: none; filter: none; }

.cartel-page { flex: 1 1 340px; max-width: 460px; display: flex; flex-direction: column; gap: 22px; padding-top: 24px; }
.fil { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--discret); }
.fil a { color: var(--discret); }
.fil a:hover { color: #fff; }
.cartel-page h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 56px; line-height: 1; }
.cartel-page .date { display: block; margin-top: 10px; font-size: 14px; color: var(--doux); }
.fiche { margin: 0; font-size: 15px; }
.fiche div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--trait); }
.fiche div:last-child { border-bottom: 1px solid var(--trait); }
.fiche dt { color: var(--doux); }
.fiche dd { margin: 0; text-align: right; }
.fiche .pouces { color: var(--discret); }
.texte-oeuvre { font-size: 15px; line-height: 1.75; color: var(--texte-doux); }
.texte-oeuvre > :first-child { margin-top: 0; }
.texte-oeuvre > :last-child { margin-bottom: 0; }
.texte-oeuvre a { text-decoration: underline; text-underline-offset: 3px; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.etiquettes a { font-size: 13px; color: #bfb5a6; border: 1px solid var(--bord); border-radius: 999px; padding: 7px 13px; }
.etiquettes a:hover { border-color: #7d7366; color: #fff; }
.voisines { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--trait); }
.voisine { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.voisine.suivante { flex-direction: row-reverse; text-align: right; }
.voisine img { width: 52px; height: 52px; object-fit: cover; display: block; flex: none; }
.voisine .libelle { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--discret); }
.voisine .titre { display: block; font-family: var(--serif); font-size: 18px; font-style: italic; line-height: 1.2; }

.veine { border-top: 1px solid #1a1815; padding: 48px var(--gouttiere); }
.veine-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 28px; }
.veine-entete h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 36px; }
.veine-entete a { font-size: 14px; color: var(--doux); padding: 12px 0; }
.veine .mosaique { padding: 0; columns: 4 220px; }
@media (max-width: 600px) {
	.salle { padding: 40px 0 28px; }
	.cartel-page { padding-top: 0; }
	.cartel-page h1 { font-size: 42px; }
	.veine-entete h2 { font-size: 30px; }
	.veine .mosaique { columns: 2; }
}

/* ---------- Pages et actualités ---------- */
.page-contenu { max-width: 1080px; margin: 0 auto; padding: 40px var(--gouttiere) 80px; }
.page-contenu .contenu::after { content: ""; display: table; clear: both; }
.contenu .alignleft, .contenu .alignright { max-width: 42%; }
.page-contenu h1 { margin: 0 0 28px; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 56px); line-height: 1.05; }
.page-contenu .image-une { margin: 0 0 32px; }
.page-contenu .image-une img { display: block; width: 100%; height: auto; }
.contenu { font-size: 17px; line-height: 1.8; color: var(--texte-doux); }
.contenu h2, .contenu h3 { font-family: var(--serif); font-weight: 500; color: var(--texte); line-height: 1.2; }
.contenu h2 { font-size: 32px; } .contenu h3 { font-size: 24px; }
.contenu a { text-decoration: underline; text-underline-offset: 3px; }
.contenu img { display: block; height: auto; }
.contenu blockquote { margin: 28px 0; padding-left: 20px; border-left: 1px solid var(--bord); font-family: var(--serif); font-size: 22px; font-style: italic; color: var(--texte); }
.contenu input, .contenu textarea, .contenu select { width: 100%; padding: 12px 14px; background: #0e0d0c; border: 1px solid var(--bord); border-radius: 6px; color: var(--texte); font: inherit; }
.contenu input[type="submit"], .contenu button { width: auto; min-height: 48px; padding: 0 24px; background: var(--texte); color: var(--fond); border: 0; border-radius: 999px; font-weight: 600; cursor: pointer; }
.alignleft { float: left; margin: 6px 40px 20px 0; }
.alignright { float: right; margin: 6px 0 20px 40px; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption, figure { max-width: 100%; margin: 24px 0; }
.wp-caption-text, figcaption { font-size: 13px; color: var(--discret); }
.vide { padding: 80px var(--gouttiere); text-align: center; color: var(--doux); }

/* ---------- Pied de page ---------- */
.site-footer { border-top: 1px solid #1a1815; padding: 28px var(--gouttiere); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--doux); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.site-footer a { color: var(--doux); }
.site-footer a:hover { color: #fff; }
.site-footer .droite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }

/* ---------- Actualités ---------- */
.actualites { max-width: 1040px; margin: 0 auto; padding: 0 var(--gouttiere) 40px; }
.actu { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; padding: 32px 0; border-top: 1px solid var(--trait); align-items: start; }
.actu-image { display: block; background: #000; }
.actu-image img { width: 100%; height: auto; display: block; }
.actu h2 { margin: 8px 0 12px; font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.1; }
.actu p { margin: 0 0 16px; color: var(--texte-doux); font-size: 15px; line-height: 1.7; }
.actu .lire { font-size: 14px; color: var(--doux); }
@media (max-width: 600px) { .contenu .alignleft, .contenu .alignright { float: none; max-width: 100%; margin: 0 0 24px; } }
@media (max-width: 700px) { .actu { grid-template-columns: minmax(0, 1fr); gap: 16px; } .actu h2 { font-size: 26px; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
	.lumiere { animation: none !important; }
}