/* =============================================
   Eden Essences — Couche V2 (2026-08-15)
   Chargée APRÈS eden.css. Additive et réversible :
   retirer l'enqueue dans functions.php suffit à revenir en arrière.

   1. Jetons complémentaires
   2. Lisibilité — l'or ne passe pas en texte sur fond clair
   3. Pied de page — correction du menu et des redondances
   4. Le Journal — archive
   5. Le Journal — article
   6. Micro-interactions
   ============================================= */

:root {
	/* Bronze profond : 5,8:1 sur ivoire et 5,0:1 sur craie — conforme AA,
	   là où --or (2,5:1) et --or-pale (1,8:1) échouaient. Réservé au TEXTE ;
	   l'or clair reste pour les filets, bordures et fonds. */
	--or-texte: #7A5C33;
	--lecture: 720px;
	--respire: clamp(80px, 9vw, 150px);
}

/* =============================================
   2. LISIBILITÉ
   Les surtitres étaient en or clair 10-11 px sur fond ivoire : mesurés
   entre 1,8:1 et 3,0:1 pour un minimum requis de 4,5:1. Illisibles —
   or ce sont les phrases qui portent le positionnement de la maison.
   ============================================= */

.upper { font-size: 12px; letter-spacing: 0.2em; }

.manifesto-eyebrow,
.universes-teaser-eyebrow,
.matieres-eyebrow,
.hp-eyebrow,
.shop-card-famille,
.hp-carnet-cat,
.diag-count,
.hp-sign-fam,
.hp-patri-mots,
.hp-patri-x,
.step-num,
.pro-offre-num,
.bridge-header .upper,
.universes-header .upper,
.matters-header .upper,
.ritual-content .upper,
.journal-header .upper,
.journal-card .upper,
.eden-ezekiel .upper,
.universes-footnote em,
.universes-teaser-footnote em,
.lieu-meta strong {
	color: var(--or-texte);
}

/* Les listes à puces décoratives gagnent aussi en présence. */
.hp-savoir-bloc li::before,
.pro-offre li::before { color: var(--or-texte); }

/* Petits textes remontés : 10-11 px en majuscules très espacées est
   sous le seuil de confort de lecture, quelle que soit la couleur. */
.hp-eyebrow,
.matieres-eyebrow,
.shop-card-famille,
.hp-carnet-cat,
.diag-count,
.lieu-meta strong { font-size: 12px; }

/* Contextes sombres : l'or clair y est parfaitement lisible, on le garde. */
.footer-newsletter .upper,
.footer-col-title,
.eden-portal-eyebrow,
.hp-eyebrow-light,
.universe-tease-num,
.universe-tease-veil,
.support-glyph { color: var(--or-pale); }

/* Surtitres posés sur une image : on les décolle du fond plutôt que de
   les assombrir, pour ne pas casser la composition du hero. */
.hero-eyebrow {
	color: #F3E3C4;
	text-shadow: 0 1px 14px rgba(15, 14, 13, 0.6);
}

/* Hero Espace Pro : l'image de fond est très claire en haut, le voile
   d'origine n'assombrissait que le bas. Résultat, surtitre et titre se
   perdaient. Éclaircir le texte ne réglait rien — c'est le voile qu'il faut
   renforcer, du côté où le texte est posé. Gain double : lisibilité, et un
   hero qui cesse d'être délavé. */
.pro-hero-scrim,
.cse-hero-scrim {
	background:
		linear-gradient(95deg, rgba(17, 16, 14, 0.74) 0%, rgba(17, 16, 14, 0.48) 42%, rgba(17, 16, 14, 0.14) 78%, rgba(17, 16, 14, 0.05) 100%),
		linear-gradient(180deg, rgba(17, 16, 14, 0.34) 0%, rgba(17, 16, 14, 0.16) 38%, rgba(17, 16, 14, 0.72) 100%) !important;
}
.pro-hero .hp-eyebrow-light,
.pro-hero .upper,
.cse-hero .hp-eyebrow-light,
.cse-hero .upper {
	color: var(--or-pale);
	text-shadow: 0 1px 12px rgba(15, 14, 13, 0.7);
}
.pro-hero-title,
.pro-hero-sub { text-shadow: 0 2px 24px rgba(15, 14, 13, 0.45); }

/* =============================================
   3. PIED DE PAGE
   .footer-menu n'avait aucun style : il sortait en puces noires natives
   sur toutes les pages, juste sous un bloc newsletter par ailleurs soigné.
   ============================================= */

.footer-cols .footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 30px;
}
.footer-cols .footer-menu li { list-style: none; }
.footer-cols .footer-menu li::marker { content: ''; }
.footer-cols .footer-menu a {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(251, 248, 244, 0.62);
	border-bottom: 1px solid transparent;
	padding-bottom: 3px;
	transition: color 0.4s var(--easing), border-color 0.4s var(--easing);
}
.footer-cols .footer-menu a:hover {
	color: var(--or-pale);
	border-bottom-color: rgba(212, 184, 134, 0.5);
}

/* Note : le thème contient un pied de page riche à cinq colonnes
   (.footer-cols-grid), mais footer.php ne l'affiche que si AUCUN menu n'est
   assigné à l'emplacement « footer ». Un menu l'étant, le site sortait la
   liste à puces et gardait le beau pied de page caché. Le menu a été
   désassigné côté WordPress ; le style ci-dessus reste en filet de sécurité
   si un menu y est réassigné un jour. */

/* Formulaire d'inscription : états de retour. */
.footer-form { position: relative; }
.footer-form.est-envoi button { opacity: 0.55; pointer-events: none; }
.eden-form-message {
	display: none;
	margin-top: 16px;
	font-size: 13px;
	line-height: 1.6;
	letter-spacing: 0.02em;
}
.eden-form-message.visible { display: block; }
.eden-form-message.ok { color: var(--or-pale); }
.eden-form-message.erreur { color: #E8A87C; }

/* =============================================
   3 bis. BANDEAU DE CONSENTEMENT
   Complianz sortait son thème par défaut : bouton vert sapin, angles arrondis,
   croix bleue. C'est la première chose que voit un visiteur, superposée au hero.
   Le plugin pilotant tout par variables CSS, il suffit de les redéfinir : pas de
   surcharge à coups de sélecteurs, pas de modification du plugin.
   Le !important est nécessaire car la feuille de Complianz est chargée après.
   ============================================= */

:root {
	--cmplz_banner_background_color: #FBF8F4 !important;
	--cmplz_banner_border_color: #E8E1D5 !important;
	--cmplz_banner_border_width: 1px 1px 1px 1px !important;
	--cmplz_banner_border_radius: 0 !important;
	--cmplz_text_color: #0F0E0D !important;
	--cmplz_hyperlink_color: #7A5C33 !important;

	/* Accepter : l'action principale, en graphite plein. */
	--cmplz_button_accept_background_color: #0F0E0D !important;
	--cmplz_button_accept_border_color: #0F0E0D !important;
	--cmplz_button_accept_text_color: #FBF8F4 !important;

	/* Refuser et préférences : en contour, à égalité de lisibilité. */
	--cmplz_button_deny_background_color: transparent !important;
	--cmplz_button_deny_border_color: #D8C8B3 !important;
	--cmplz_button_deny_text_color: #0F0E0D !important;
	--cmplz_button_settings_background_color: transparent !important;
	--cmplz_button_settings_border_color: #D8C8B3 !important;
	--cmplz_button_settings_text_color: #0F0E0D !important;
	--cmplz_button_border_radius: 0 !important;

	--cmplz_slider_active_color: #7A5C33 !important;
	--cmplz_slider_inactive_color: #B9A894 !important;
	--cmplz_slider_bullet_color: #FBF8F4 !important;

	--cmplz_title_font_size: 19px !important;
	--cmplz_text_font_size: 13px !important;
	--cmplz_link_font_size: 12px !important;
	--cmplz_button_font_size: 12px !important;
}

/* Typographie et ombre : non pilotées par variables. */
.cmplz-cookiebanner {
	font-family: 'Schibsted Grotesk', sans-serif !important;
	box-shadow: 0 -8px 60px rgba(15, 14, 13, 0.13) !important;
}
.cmplz-cookiebanner .cmplz-title {
	font-family: 'Cormorant Garamond', serif !important;
	font-weight: 400 !important;
	letter-spacing: 0.02em !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	transition: background-color 0.45s var(--easing), border-color 0.45s var(--easing), color 0.45s var(--easing) !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
	background-color: #5B3A26 !important;
	border-color: #5B3A26 !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover {
	border-color: #7A5C33 !important;
	color: #7A5C33 !important;
}
.cmplz-cookiebanner .cmplz-close {
	color: #6B635A !important;
	opacity: 0.75;
	transition: opacity 0.4s var(--easing), color 0.4s var(--easing);
}
.cmplz-cookiebanner .cmplz-close:hover { color: #0F0E0D !important; opacity: 1; }
.cmplz-cookiebanner .cmplz-close svg,
.cmplz-cookiebanner .cmplz-close svg * {
	fill: currentColor !important;
	stroke: currentColor !important;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background-color: rgba(238, 231, 220, 0.55) !important;
}

/* =============================================
   4. LE JOURNAL — ARCHIVE
   ============================================= */

.jr-eyebrow {
	display: inline-block;
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 12px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--or-texte);
}

.jr-hero {
	padding: clamp(60px, 7vw, 110px) 28px clamp(44px, 5vw, 76px);
	text-align: center;
	background: linear-gradient(180deg, var(--craie) 0%, var(--ivoire) 100%);
}
.jr-hero-inner { max-width: 840px; margin: 0 auto; }
.jr-hero-title {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
	font-size: clamp(40px, 6.4vw, 82px);
	line-height: 1.06;
	letter-spacing: -0.012em;
	color: var(--graphite);
	margin: 26px 0 0;
}
.jr-hero-intro {
	max-width: 620px;
	margin: 28px auto 0;
	font-size: 16px;
	line-height: 1.85;
	color: rgba(15, 14, 13, 0.7);
}
.jr-hero-filet {
	display: block;
	width: 0;
	height: 1px;
	margin: 44px auto 0;
	background: linear-gradient(90deg, transparent, var(--or), transparent);
	animation: jr-filet 1.5s var(--easing) 0.25s forwards;
}
@keyframes jr-filet { to { width: 210px; } }

.jr-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(50px, 6vw, 90px) 28px clamp(90px, 10vw, 150px);
}

/* --- L'article à la une --- */
.jr-une {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(34px, 4.5vw, 74px);
	align-items: center;
}
.jr-une-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--craie);
}
.jr-une-media .jr-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.015);
	transition: transform 1.5s var(--easing);
}
.jr-une:hover .jr-img { transform: scale(1.055); }

.jr-une-titre {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
	font-size: clamp(29px, 3.3vw, 46px);
	line-height: 1.12;
	color: var(--graphite);
	margin: 16px 0 20px;
}
.jr-une-titre a {
	background-image: linear-gradient(var(--or), var(--or));
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.65s var(--easing);
}
.jr-une-titre a:hover { background-size: 100% 1px; }
.jr-une-chapo {
	font-size: 15.5px;
	line-height: 1.85;
	color: rgba(15, 14, 13, 0.72);
	margin-bottom: 30px;
}

.jr-meta {
	display: block;
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 11.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cendre);
}
.jr-sep { margin: 0 0.55em; color: var(--or-texte); }

.jr-lien {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--graphite);
	padding-bottom: 6px;
	border-bottom: 1px solid var(--or);
	transition: color 0.4s var(--easing), letter-spacing 0.5s var(--easing);
}
.jr-lien:hover { color: var(--or-texte); letter-spacing: 0.29em; }

.jr-rule {
	height: 1px;
	margin: clamp(56px, 6.5vw, 100px) 0;
	background: linear-gradient(90deg, transparent, var(--pierre) 18%, var(--pierre) 82%, transparent);
}

/* --- La grille --- */
.jr-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(30px, 3.4vw, 56px) clamp(24px, 2.8vw, 42px);
}
.jr-card { display: flex; flex-direction: column; }
.jr-card-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--craie);
	margin-bottom: 20px;
}
.jr-card-media .jr-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.6s var(--easing);
}
.jr-card-voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(58, 43, 34, 0) 45%, rgba(58, 43, 34, 0.3) 100%);
	opacity: 0;
	transition: opacity 0.8s var(--easing);
}
.jr-card:hover .jr-img { transform: scale(1.075); }
.jr-card:hover .jr-card-voile { opacity: 1; }

.jr-card-titre {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
	font-size: clamp(20px, 1.65vw, 25px);
	line-height: 1.25;
	color: var(--graphite);
	margin: 12px 0 10px;
}
.jr-card-titre a {
	background-image: linear-gradient(var(--or), var(--or));
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.6s var(--easing);
}
.jr-card:hover .jr-card-titre a { background-size: 100% 1px; }
.jr-card-chapo {
	font-size: 14.5px;
	line-height: 1.8;
	color: rgba(15, 14, 13, 0.66);
}

/* Repli quand l'article n'a pas d'image : un carré minéral signé. */
.jr-img--vide {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(120% 90% at 30% 20%, rgba(212, 184, 134, 0.24), transparent 62%),
		linear-gradient(150deg, var(--craie), var(--pierre));
}
.jr-img--vide em {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 20px;
	letter-spacing: 0.16em;
	color: rgba(122, 92, 51, 0.5);
}

/* --- Pagination --- */
.jr-wrap .navigation.pagination {
	margin-top: clamp(60px, 7vw, 100px);
	display: flex;
	justify-content: center;
}
.jr-wrap .nav-links { display: flex; gap: 10px; align-items: center; }
.jr-wrap .page-numbers {
	min-width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--cendre);
	border: 1px solid var(--pierre);
	transition: all 0.45s var(--easing);
}
.jr-wrap .page-numbers:hover { border-color: var(--or); color: var(--graphite); }
.jr-wrap .page-numbers.current {
	background: var(--graphite);
	border-color: var(--graphite);
	color: var(--ivoire);
}
.jr-wrap .screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.jr-vide { text-align: center; }
.jr-vide h2 { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 14px; }
.jr-vide p { color: var(--cendre); }

/* =============================================
   5. LE JOURNAL — ARTICLE
   ============================================= */

/* Le hero remonte sous le header pour occuper tout le haut d'écran. */
body.single-post .eden-main { padding-top: 0; }

.jr-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 2px;
	z-index: 120;
	background: transparent;
	pointer-events: none;
}
.jr-progress-barre {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--or-patine), var(--or-pale));
	transition: width 0.12s linear;
}

.jr-single-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.jr-single-hero--image {
	min-height: 74vh;
	background: var(--charbon);
}
.jr-single-hero--sobre {
	min-height: auto;
	padding-top: 200px;
	background: linear-gradient(180deg, var(--craie) 0%, var(--ivoire) 100%);
}
.jr-single-media { position: absolute; inset: 0; }
.jr-single-media .jr-single-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04);
	animation: jr-respire 12s ease-out forwards;
}
@keyframes jr-respire { to { transform: scale(1); } }
.jr-single-voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17, 16, 14, 0.34) 0%, rgba(17, 16, 14, 0.1) 38%, rgba(17, 16, 14, 0.82) 100%);
}
.jr-single-hero-inner {
	position: relative;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 28px clamp(48px, 6vw, 86px);
	text-align: center;
}
.jr-single-hero--sobre .jr-single-hero-inner { padding-bottom: clamp(40px, 5vw, 70px); }

.jr-retour {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 24px;
	padding-bottom: 5px;
	border-bottom: 1px solid transparent;
	transition: border-color 0.45s var(--easing);
}
.jr-single-hero--image .jr-retour { color: var(--or-pale); }
.jr-single-hero--sobre .jr-retour { color: var(--or-texte); }
.jr-retour:hover { border-bottom-color: currentColor; }

.jr-single-titre {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
	font-size: clamp(33px, 5.4vw, 70px);
	line-height: 1.07;
	letter-spacing: -0.014em;
	margin: 0 0 22px;
	max-width: 15ch;
	margin-inline: auto;
}
.jr-single-hero--image .jr-single-titre {
	color: var(--ivoire);
	text-shadow: 0 2px 30px rgba(15, 14, 13, 0.4);
}
.jr-single-hero--sobre .jr-single-titre { color: var(--graphite); }

.jr-meta--hero { letter-spacing: 0.24em; }
.jr-single-hero--image .jr-meta--hero { color: rgba(251, 248, 244, 0.82); }
.jr-single-hero--sobre .jr-meta--hero { color: var(--cendre); }

.jr-single-corps {
	max-width: var(--lecture);
	margin: 0 auto;
	padding: clamp(52px, 6.5vw, 92px) 28px clamp(60px, 7vw, 100px);
}

.jr-chapo {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 300;
	font-size: clamp(20px, 2.1vw, 27px);
	line-height: 1.55;
	color: var(--ambre);
	margin: 0 0 44px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--pierre);
}

/* --- Le contenu rédactionnel --- */
.jr-content { font-size: 17px; line-height: 1.9; color: rgba(15, 14, 13, 0.84); }
.jr-content > p { margin-bottom: 26px; }
.jr-content > p:first-of-type { font-size: 18.5px; color: rgba(15, 14, 13, 0.9); }

.jr-content h2,
.jr-content h3,
.jr-content h4 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 400;
	color: var(--graphite);
	line-height: 1.22;
	letter-spacing: -0.005em;
}
.jr-content h2 { font-size: clamp(26px, 2.8vw, 36px); margin: 58px 0 20px; }
.jr-content h3 { font-size: clamp(21px, 2.1vw, 27px); margin: 44px 0 16px; }
.jr-content h4 { font-size: 19px; margin: 34px 0 12px; }

/* Filet discret sous les intertitres de premier niveau. */
.jr-content h2::after {
	content: '';
	display: block;
	width: 44px;
	height: 1px;
	margin-top: 18px;
	background: var(--or);
}

.jr-content ul,
.jr-content ol { margin: 0 0 28px; padding-left: 4px; list-style: none; }
.jr-content ol { counter-reset: jr-li; }
.jr-content li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 12px;
	line-height: 1.85;
}
.jr-content ul > li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 0.78em;
	width: 12px;
	height: 1px;
	background: var(--or-texte);
}
.jr-content ol > li {
	counter-increment: jr-li;
}
.jr-content ol > li::before {
	content: counter(jr-li);
	position: absolute;
	left: 0;
	top: 0;
	font-family: 'Cormorant Garamond', serif;
	font-size: 17px;
	color: var(--or-texte);
}

.jr-content blockquote {
	margin: 48px 0;
	padding: 4px 0 4px 30px;
	border-left: 1px solid var(--or);
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: clamp(21px, 2.2vw, 27px);
	line-height: 1.55;
	color: var(--ambre);
}
.jr-content blockquote p { margin-bottom: 12px; }

.jr-content a {
	color: var(--ambre);
	background-image: linear-gradient(rgba(91, 58, 38, 0.32), rgba(91, 58, 38, 0.32));
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.4s var(--easing), color 0.4s var(--easing);
}
.jr-content a:hover { color: var(--graphite); background-size: 100% 2px; }

.jr-content img,
.jr-content figure { margin: 46px 0; }
.jr-content figure img { width: 100%; }
.jr-content figcaption {
	margin-top: 12px;
	font-size: 12.5px;
	letter-spacing: 0.06em;
	color: var(--cendre);
	text-align: center;
}
.jr-content strong { font-weight: 600; color: var(--graphite); }
.jr-content hr {
	border: 0;
	height: 1px;
	margin: 52px 0;
	background: linear-gradient(90deg, transparent, var(--pierre) 20%, var(--pierre) 80%, transparent);
}

.jr-single-pied {
	margin-top: 56px;
	padding-top: 34px;
	border-top: 1px solid var(--pierre);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.jr-single-signature {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 19px;
	color: var(--or-texte);
}
.jr-single-cats { display: flex; gap: 10px; flex-wrap: wrap; }
.jr-single-cats a {
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cendre);
	border: 1px solid var(--pierre);
	padding: 7px 15px;
	transition: all 0.4s var(--easing);
}
.jr-single-cats a:hover { border-color: var(--or); color: var(--graphite); }

.jr-suite {
	background: var(--craie);
	padding: clamp(64px, 8vw, 118px) 0;
}
.jr-suite-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 28px;
}
.jr-suite .jr-eyebrow { display: block; text-align: center; margin-bottom: 46px; }
.jr-suite .jr-card-media { background: var(--pierre); }

/* =============================================
   6. MICRO-INTERACTIONS
   ============================================= */

/* Apparition resserrée pour les seuls éléments du Journal — les sections
   de la page d'accueil gardent leur rythme d'origine. */
.jr-une.fade-in,
.jr-card.fade-in {
	transform: translateY(26px);
	transition: opacity 1.05s var(--easing), transform 1.05s var(--easing);
}

/* Repli indispensable : sans JavaScript, aucun contenu ne doit rester
   invisible — l'observateur d'intersection ne poserait jamais .visible.
   La classe .js est ajoutée sur <html> dès le <head> quand JS répond. */
html:not(.js) .fade-in { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
	.fade-in,
	.jr-img,
	.jr-single-img,
	.jr-hero-filet {
		transition: none !important;
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		width: 210px;
	}
	.jr-hero-filet { width: 210px; }
}

/* Focus visible, cohérent avec la palette. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--or-texte);
	outline-offset: 3px;
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 1000px) {
	.jr-grid { grid-template-columns: repeat(2, 1fr); }
	.jr-une { grid-template-columns: 1fr; gap: 28px; }
	.jr-une-media { aspect-ratio: 16 / 10; }
}

@media (max-width: 620px) {
	.jr-grid { grid-template-columns: 1fr; gap: 44px; }
	.jr-card-media { aspect-ratio: 4 / 3; }
	.jr-hero { padding-left: 22px; padding-right: 22px; }
	.jr-wrap { padding-left: 22px; padding-right: 22px; }
	.jr-single-hero--image { min-height: 58vh; }
	.jr-single-hero--sobre { padding-top: 150px; }
	.jr-single-corps { padding-left: 22px; padding-right: 22px; }
	.jr-single-titre { max-width: none; }
	.jr-content { font-size: 16.5px; }
	.footer-cols .footer-menu { gap: 12px 20px; }
}

/* =============================================
   7. LA BOUTIQUE
   Le système de design existait déjà dans eden.css (.shop-inner, .shop-card,
   .shop-chip…) mais aucun template ne l'utilisait : WooCommerce sortait sa
   mise en page par défaut. archive-product.php le branche enfin ; ce bloc
   complète ce qui manquait.
   ============================================= */

/* padding : déjà porté par section.eden-shop dans eden.css */
.shop-head { margin-bottom: clamp(38px, 4vw, 56px); }

/* Le surtitre était en 11 px ambré : remonté pour le confort de lecture. */
.shop-eyebrow { font-size: 12px; letter-spacing: 0.34em; }

/* Chips de famille olfactive — la taxonomie existait sans jamais servir. */
.shop-chip { font-size: 12px; letter-spacing: 0.14em; padding: 11px 22px; }
.shop-chip:focus-visible { outline: 2px solid var(--or-texte); outline-offset: 3px; }

.shop-card { transition: opacity 0.5s var(--easing); }
.shop-card[hidden] { display: none; }
.shop-card-name a {
	background-image: linear-gradient(var(--bronze), var(--bronze));
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.6s var(--easing);
}
.shop-card:hover .shop-card-name a { background-size: 100% 1px; }

/* Bouton « ajouter au panier » de WooCommerce, habillé sans casser l'AJAX. */
.shop-card-cta .button,
.shop-card-cta a.added_to_cart {
	display: inline-block;
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--cacao);
	background: transparent;
	border: 1px solid rgba(58, 43, 34, 0.28);
	border-radius: 0;
	padding: 10px 18px;
	line-height: 1.2;
	transition: all 0.45s var(--easing);
}
.shop-card-cta .button:hover,
.shop-card-cta a.added_to_cart:hover {
	background: var(--cacao);
	border-color: var(--cacao);
	color: var(--ivoire);
}
.shop-card-cta .button.loading { opacity: 0.55; pointer-events: none; }
.shop-card-cta a.added_to_cart { margin-left: 8px; }

.shop-vide-filtre {
	text-align: center;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 20px;
	color: var(--cendre);
	padding: 60px 0;
}

section.eden-shop .navigation.pagination { margin-top: clamp(60px, 7vw, 100px); display: flex; justify-content: center; }
section.eden-shop .nav-links { display: flex; gap: 10px; align-items: center; }
section.eden-shop .page-numbers {
	min-width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 12px; font-size: 12px; letter-spacing: 0.14em;
	color: var(--cendre); border: 1px solid var(--pierre);
	transition: all 0.45s var(--easing);
}
section.eden-shop .page-numbers:hover { border-color: var(--or); color: var(--graphite); }
section.eden-shop .page-numbers.current { background: var(--cacao); border-color: var(--cacao); color: var(--ivoire); }
section.eden-shop .screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.shop-allcta { text-align: center; margin-top: clamp(56px, 6vw, 88px); }
.shop-allcta a {
	font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500;
	color: var(--cacao); padding-bottom: 6px; border-bottom: 1px solid var(--bronze);
	transition: letter-spacing 0.5s var(--easing);
}
.shop-allcta a:hover { letter-spacing: 0.29em; }

@media (max-width: 1180px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 22px; } }
@media (max-width: 520px)  {
	.shop-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
	.shop-card-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
	section.eden-shop { padding-left: 20px; padding-right: 20px; }
}

/* =============================================
   8. LA FICHE PRODUIT
   ============================================= */

/* Les listes du descriptif sortaient en puces noires natives. */
.eden-woo .woocommerce-Tabs-panel ul,
.eden-woo div[itemprop="description"] ul,
.eden-woo .woocommerce-product-details__short-description ul {
	list-style: none;
	padding-left: 2px;
	margin-bottom: 22px;
}
.eden-woo .woocommerce-Tabs-panel ul > li,
.eden-woo div[itemprop="description"] ul > li,
.eden-woo .woocommerce-product-details__short-description ul > li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
	line-height: 1.8;
}
.eden-woo .woocommerce-Tabs-panel ul > li::before,
.eden-woo div[itemprop="description"] ul > li::before,
.eden-woo .woocommerce-product-details__short-description ul > li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0.8em;
	width: 12px;
	height: 1px;
	background: var(--or-texte);
}

/* Klarna : sur un flacon à 19,90 €, le badge rose criait plus fort que le
   prix. On le garde — c'est un moyen de paiement — mais on le calme. */
.eden-woo .wc-stripe-klarna-payment-message,
.eden-woo klarna-placement,
.eden-woo [data-testid="klarna-placement"] {
	opacity: 0.72;
	transform: scale(0.92);
	transform-origin: left center;
	margin: 6px 0 14px;
	filter: saturate(0.55);
	transition: opacity 0.4s var(--easing), filter 0.4s var(--easing);
}
.eden-woo .wc-stripe-klarna-payment-message:hover,
.eden-woo klarna-placement:hover { opacity: 1; filter: saturate(1); }

/* Menus déroulants : le style natif du système jurait avec le reste. */
.eden-woo select,
.pro-form select,
.cse-form select,
.woocommerce-ordering select {
	appearance: none;
	-webkit-appearance: none;
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 13px;
	color: var(--graphite);
	background-color: transparent;
	background-image: linear-gradient(45deg, transparent 50%, var(--or-texte) 50%), linear-gradient(135deg, var(--or-texte) 50%, transparent 50%);
	background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	border: 1px solid var(--pierre);
	border-radius: 0;
	padding: 12px 40px 12px 14px;
	transition: border-color 0.4s var(--easing);
}
.eden-woo select:focus,
.pro-form select:focus,
.cse-form select:focus { border-color: var(--or-texte); outline: none; }

/* Pieds de carte alignés : les produits sans famille olfactive remontaient
   leur ligne prix/bouton, ce qui cassait la régularité de la grille. */
.shop-card { height: 100%; }
.shop-card-foot { margin-top: auto; }