/*
Theme Name: Paraconseil Comptoir
Theme URI: https://paraconseil.fr
Author: Paraconseil
Description: Thème code-pur pour paraconseil.fr — le rayon de parapharmacie qu'on lit comme une étiquette de flacon.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: paraconseil-comptoir
*/

/* =========================================================================
   0. Fondations — palette, typo, grille. Mode clair uniquement.
   ========================================================================= */
:root{
	color-scheme: light;

	--porcelaine: #F4F3EF;
	--coton: #FFFFFF;
	--encre: #14182B;
	--bleuet: #2340E8;
	--bleuet-fonce: #1A30B8;
	--rose: #F5D8D0;
	--bleuet-clair: #E8ECFC;

	--font-titre: 'Radio Canada Big', Arial, sans-serif;
	--font-corps: 'Rasa', Georgia, serif;

	--conteneur: 1280px;
	--marge: 24px;
	--rayon-carte: 4px;
	--rayon-etiquette: 2px;

	--h1-home: 84px;
	--h1-article: 52px;
	--h2-section: 60px;
	--corps-taille: 20px;
	--chapo-taille: 24px;
	--chiffre-taille: 112px;

	--duree: 200ms;
}

@media (max-width: 600px){
	:root{
		--marge: 16px;
		--h1-home: 44px;
		--h1-article: 34px;
		--h2-section: 34px;
		--corps-taille: 19px;
		--chapo-taille: 19px;
		--chiffre-taille: 56px;
	}
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: clip; max-width: 100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
	margin: 0;
	background: var(--porcelaine);
	color: var(--encre);
	font-family: var(--font-corps);
	font-size: var(--corps-taille);
	line-height: 1.62;
	overflow-x: clip;
}

img{ max-width: 100%; display: block; }
img, video, iframe, embed, object, table, pre, code, svg{ max-width: 100%; }
pre, code{ overflow-x: auto; overflow-wrap: anywhere; white-space: pre-wrap; }
h1, h2, h3, h4, p, a, .pcx-carte-titre, .pcx-carte-chapo, .pcx-rail-corps, .pcx-mini-liste a, .pcx-etiquette-l1, .pcx-etiquette-l2{
	overflow-wrap: anywhere; word-break: break-word;
}
a{ color: var(--bleuet); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover{ color: var(--bleuet-fonce); }
.pcx-avatar-photo{ border-radius: 50%; object-fit: cover; display: block; flex: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
	outline: 3px solid var(--bleuet);
	outline-offset: 2px;
	border-radius: 2px;
}
button{ font-family: inherit; cursor: pointer; }

h1,h2,h3,h4{ font-family: var(--font-titre); color: var(--encre); margin: 0 0 .5em; line-height: 1.05; }
h1{ font-size: var(--h1-article); font-weight: 600; }
h2{ font-size: 34px; font-weight: 600; letter-spacing: -.01em; }
h3{ font-size: 24px; font-weight: 600; }
p{ margin: 0 0 1.2em; }
em{ font-family: var(--font-corps); font-style: italic; color: var(--bleuet); font-weight: 400; }

.pcx-conteneur{ max-width: var(--conteneur); margin-inline: auto; padding-inline: var(--marge); }
.pcx-visuellement-cache{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.pcx-lien-saut{ position: absolute; left: -9999px; top: 0; background: var(--encre); color: #fff; padding: 10px 16px; z-index: 200; }
.pcx-lien-saut:focus{ left: var(--marge); }

/* Titres de section — capitales grotesques, mot en italique bleuet */
.pcx-titre-section{
	font-family: var(--font-titre);
	font-weight: 600;
	font-size: var(--h2-section);
	line-height: 1;
	letter-spacing: -.01em;
	text-transform: uppercase;
	margin: 0 0 .6em;
}
.pcx-titre-section em{ text-transform: none; }

/* Bandeau de formule (procédé signature #2) */
.pcx-formule{
	background: var(--porcelaine);
	border-top: 1px solid rgba(20,24,43,.12);
	border-bottom: 1px solid rgba(20,24,43,.12);
	padding: 20px var(--marge);
	text-align: center;
}
.pcx-formule p{
	margin: 0; font-family: var(--font-titre); font-weight: 500; font-size: 12px;
	letter-spacing: .14em; text-transform: uppercase; color: var(--encre);
	font-variant-numeric: tabular-nums;
}
.pcx-formule strong{ color: var(--bleuet); font-weight: 600; }

.pcx-etoit{ margin: 0 8px; color: rgba(20,24,43,.4); }

/* =========================================================================
   1. En-tête
   ========================================================================= */
.pcx-liseret{
	background: var(--encre); color: #fff; font-family: var(--font-titre);
	font-size: 13px; letter-spacing: .02em; padding: 8px var(--marge);
}
.pcx-liseret .pcx-conteneur{ display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pcx-liseret a{ color: #fff; }
.pcx-liseret-actions{ display: flex; align-items: center; gap: 18px; }

.pcx-header{ background: var(--coton); border-bottom: 1px solid rgba(20,24,43,.1); position: sticky; top: 0; z-index: 100; }
.pcx-header-rangee{ display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; }
.pcx-nav{ min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pcx-nav::-webkit-scrollbar{ display: none; }

.pcx-logo{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.pcx-logotype{ font-family: var(--font-titre); font-size: 26px; letter-spacing: -.02em; color: var(--encre); }
.pcx-logotype-para{ font-weight: 400; }
.pcx-logotype-conseil{ font-weight: 600; }
.pcx-logotype-clair{ color: #fff; }

.pcx-nav-toggle{
	display: none; background: none; border: 1px solid var(--encre); border-radius: var(--rayon-carte);
	width: 44px; height: 44px; align-items: center; justify-content: center;
}
.pcx-nav-toggle svg{ width: 22px; height: 22px; }

.pcx-menu-liste{ list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: nowrap; }
.pcx-menu-liste a{
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; white-space: nowrap;
	font-family: var(--font-titre); font-weight: 500; font-size: 15px; text-transform: uppercase;
	letter-spacing: .02em; color: var(--encre); text-decoration: none; border-radius: var(--rayon-carte);
}
.pcx-menu-liste a:hover, .pcx-menu-liste a:focus-visible{ color: var(--bleuet); background: var(--porcelaine); }

.pcx-header-actions{ display: flex; align-items: center; gap: 10px; }
.pcx-recherche-toggle, .pcx-recherche-form{ display: flex; align-items: center; }
.pcx-recherche-form input[type="search"]{
	border: 1px solid rgba(20,24,43,.25); border-radius: var(--rayon-carte); padding: 10px 12px;
	font-family: var(--font-corps); font-size: 15px; min-height: 44px; width: 150px;
}
.pcx-recherche-form button{ background: none; border: none; min-width: 44px; min-height: 44px; color: var(--encre); }

.pcx-recherche-mobile{ display: none; }

@media (max-width: 900px){
	.pcx-nav-toggle{ display: flex; }
	.pcx-recherche-desktop{ display: none; }
	.pcx-nav{ overflow: visible; display: none; }
	.pcx-menu-liste{ flex-direction: column; gap: 0; flex-wrap: wrap; }
	.pcx-header.pcx-menu-ouvert .pcx-nav{
		display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%;
		background: var(--coton); border-top: 1px solid rgba(20,24,43,.1);
		padding: 16px var(--marge) 20px; max-height: calc(100vh - 60px); overflow-y: auto; gap: 14px;
	}
	.pcx-header.pcx-menu-ouvert .pcx-menu-liste a{ width: 100%; font-size: 16px; white-space: normal; }
	.pcx-header.pcx-menu-ouvert .pcx-recherche-mobile{ display: flex; }
	.pcx-recherche-mobile input[type="search"]{ flex: 1; width: auto; min-width: 0; }
}

/* Barre de navigation basse, fixe, façon application (B-MO-05) */
.pcx-barre-app{ display: none; }
@media (max-width: 900px){
	body{ padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
	.pcx-barre-app{
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
		background: var(--coton); border-top: 1px solid rgba(20,24,43,.14);
		padding: 6px var(--marge) calc(6px + env(safe-area-inset-bottom));
		gap: 4px;
	}
	.pcx-barre-app a, .pcx-barre-app button{
		flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
		min-height: 44px; background: none; border: none; color: var(--encre); text-decoration: none;
		font-family: var(--font-titre); font-size: 11px; text-transform: uppercase; letter-spacing: .02em;
	}
	.pcx-barre-app svg{ width: 22px; height: 22px; }
	.pcx-barre-app a:hover, .pcx-barre-app button:hover,
	.pcx-barre-app a:focus-visible, .pcx-barre-app button:focus-visible{ color: var(--bleuet); }
}

/* =========================================================================
   2. Héros d'accueil
   ========================================================================= */
.pcx-hero{ background: var(--porcelaine); }
.pcx-hero-grille{ display: grid; grid-template-columns: 2fr 1fr; gap: 32px; padding: 32px 0 48px; align-items: start; }
.pcx-hero-photo{
	position: relative; border-radius: var(--rayon-carte); overflow: hidden;
	aspect-ratio: 16/10; min-height: 320px; background: linear-gradient(135deg, var(--bleuet-clair), var(--rose));
}
.pcx-hero-photo img{ width: 100%; height: 100%; object-fit: cover; }
.pcx-hero-voile{
	position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,24,43,.85), rgba(20,24,43,.45) 60%, rgba(20,24,43,.25));
	display: flex; flex-direction: column; justify-content: flex-end; padding: 28px;
}
.pcx-hero-titre{ color: #fff; font-size: var(--h1-home); text-transform: uppercase; margin: 0 0 .4em; max-width: 14ch; }
.pcx-hero-titre em{ text-transform: none; color: var(--rose); }
.pcx-hero-recherche{ display: flex; gap: 8px; max-width: 480px; flex-wrap: wrap; }
.pcx-hero-recherche input[type="search"]{
	flex: 1; min-width: 160px; min-height: 48px; border-radius: var(--rayon-carte); border: none;
	padding: 0 14px; font-family: var(--font-corps); font-size: 16px;
}
.pcx-hero-recherche button{
	min-height: 48px; padding: 0 20px; border: none; border-radius: var(--rayon-carte);
	background: var(--bleuet); color: #fff; font-family: var(--font-titre); font-weight: 600;
	text-transform: uppercase; letter-spacing: .04em;
}
.pcx-hero-recherche button:hover{ background: var(--bleuet-fonce); }
.pcx-hero-suggestions{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pcx-hero-suggestions a{
	background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.4);
	border-radius: 999px; padding: 6px 12px; font-size: 12px; text-transform: uppercase;
	letter-spacing: .06em; text-decoration: none;
}

.pcx-rail{ background: var(--coton); border-radius: var(--rayon-carte); border: 1px solid rgba(20,24,43,.1); padding: 18px; }
.pcx-rail h2{ font-family: var(--font-titre); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; }
.pcx-rail-liste{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pcx-rail-liste li{ display: flex; gap: 12px; align-items: flex-start; }
.pcx-rail-vignette{ display: block; flex: none; width: 80px; height: 80px; border-radius: var(--rayon-carte); overflow: hidden; background: var(--porcelaine); }
.pcx-rail-vignette img{ width: 100%; height: 100%; object-fit: cover; }
.pcx-rail-corps{ min-width: 0; flex: 1; }
.pcx-rail-corps a{ font-weight: 600; color: var(--encre); text-decoration: none; font-size: 15px; line-height: 1.3; }
.pcx-rail-corps a:hover{ color: var(--bleuet); }
.pcx-rail-meta{ display: block; font-size: 12px; color: rgba(20,24,43,.72); margin-top: 4px; font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 900px){
	.pcx-hero-grille{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
	.pcx-hero-photo{ min-height: 0; aspect-ratio: auto; }
	.pcx-hero-photo img{ position: absolute; inset: 0; }
	.pcx-hero-voile{ position: relative; inset: auto; min-height: 340px; padding: 28px 18px 20px; background: linear-gradient(to top, rgba(20,24,43,.82), rgba(20,24,43,.35)); }
	.pcx-hero-titre{ font-size: 32px; max-width: 100%; margin-bottom: 14px; }
	.pcx-hero-recherche{ flex-direction: column; align-items: stretch; max-width: none; }
	.pcx-hero-recherche input[type="search"]{ width: 100%; min-width: 0; }
	.pcx-hero-recherche button{ width: 100%; }
	.pcx-hero-suggestions{ margin-top: 8px; }
}

/* =========================================================================
   3. Le rayon (8 rubriques, procédé signature #4)
   ========================================================================= */
.pcx-bloc{ padding: 56px 0; }
.pcx-bloc-porcelaine{ background: var(--porcelaine); }
.pcx-bloc-coton{ background: var(--coton); }
.pcx-bloc-rose{ background: var(--rose); }
.pcx-bloc-encre{ background: var(--encre); color: #fff; }
.pcx-bloc-encre .pcx-titre-section{ color: #fff; }

.pcx-rayon{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.pcx-rayon-item a{ display: flex; flex-direction: column; text-decoration: none; color: var(--encre); }
.pcx-rayon-photo{
	display: block; aspect-ratio: 1/1; border-radius: var(--rayon-carte) var(--rayon-carte) 0 0; overflow: hidden;
	border-bottom: 2px solid var(--encre); transition: transform var(--duree) ease;
}
.pcx-rayon-photo img{ width: 100%; height: 100%; object-fit: cover; }
.pcx-rayon-item:hover .pcx-rayon-photo, .pcx-rayon-item a:focus-visible .pcx-rayon-photo{ transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce){ .pcx-rayon-item:hover .pcx-rayon-photo{ transform: none; } }
.pcx-rayon-nom{
	font-family: var(--font-titre); font-weight: 600; text-transform: uppercase; font-size: 14px;
	letter-spacing: .02em; margin-top: 12px;
}
.pcx-rayon-compte{ font-size: 13px; color: rgba(20,24,43,.72); }

@media (max-width: 900px){ .pcx-rayon{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){
	.pcx-rayon{ display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; gap: 14px; -webkit-overflow-scrolling: touch; }
	.pcx-rayon-item{ flex: 0 0 76%; scroll-snap-align: start; }
}

/* =========================================================================
   4. Cartes & étiquette de flacon (procédé signature #1)
   ========================================================================= */
.pcx-grille{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; }
.pcx-grille-2{ grid-template-columns: repeat(2, 1fr); }
.pcx-grille-forte{ grid-template-columns: 7fr 5fr; align-items: stretch; }
.pcx-grille-forte .pcx-sous-grille{ display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }

.pcx-carte{ min-width: 0; background: var(--coton); border-radius: var(--rayon-carte); overflow: hidden; border: 1px solid rgba(20,24,43,.08); display: flex; flex-direction: column; }
.pcx-carte a.pcx-carte-lien{ text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.pcx-carte-media{ display: block; position: relative; aspect-ratio: 4/3; background: var(--porcelaine); overflow: hidden; }
.pcx-carte-forte .pcx-carte-media{ aspect-ratio: 4/3; }
.pcx-carte-media img{ width: 100%; height: 100%; object-fit: cover; }
.pcx-vignette-repli{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pcx-ton-porcelaine{ background: var(--porcelaine); }
.pcx-ton-rose{ background: var(--rose); }
.pcx-ton-bleuet-clair{ background: var(--bleuet-clair); }
.pcx-vignette-picto{ width: 40%; height: 40%; color: var(--encre); opacity: .55; }

.pcx-etiquette{
	position: absolute; top: 10px; left: 10px; background: var(--coton); border: 1px solid var(--encre);
	border-radius: var(--rayon-etiquette); padding: 6px 8px; display: flex; flex-direction: column; gap: 2px;
	font-family: var(--font-titre); text-transform: uppercase; line-height: 1.2; box-shadow: 0 1px 0 rgba(20,24,43,.05);
}
.pcx-etiquette-l1{ font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--encre); }
.pcx-etiquette-l2{ font-size: 10px; font-weight: 500; letter-spacing: .08em; color: var(--bleuet); }

.pcx-carte-corps{ padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pcx-carte-titre{ font-size: 18px; font-weight: 600; margin: 0; line-height: 1.25; }
.pcx-carte-forte .pcx-carte-titre{ font-size: 26px; }
.pcx-carte-chapo{ font-size: 14px; color: rgba(20,24,43,.75); margin: 0; }
.pcx-carte-meta{ margin-top: auto; font-size: 12px; color: rgba(20,24,43,.7); font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; }
.pcx-carte-mini .pcx-carte-titre-lien{ text-decoration: none; color: inherit; }
.pcx-mini-liste{ max-width: none; background: none; border: none; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pcx-mini-liste li{ border: none; box-shadow: none; padding: 0; }
.pcx-mini-liste li::before{ display: none; }
.pcx-mini-liste a{ font-size: 14px; }
.pcx-titre-section-petit{ font-size: 26px; text-transform: none; }

@media (max-width: 900px){ .pcx-grille{ grid-template-columns: repeat(2,1fr); } .pcx-grille-forte{ grid-template-columns: 1fr; } }
@media (max-width: 600px){ .pcx-grille, .pcx-grille-2{ grid-template-columns: 1fr; } }

/* =========================================================================
   5. Chiffres repères (procédé signature #6)
   ========================================================================= */
.pcx-chiffres{ display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; text-align: center; }
.pcx-chiffre{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pcx-chiffre-valeur{ font-family: var(--font-titre); font-size: var(--chiffre-taille); font-weight: 400; color: var(--bleuet); line-height: 1; font-variant-numeric: tabular-nums; }
.pcx-chiffre-contexte{ max-width: 26ch; }
.pcx-chiffre-source{ font-family: var(--font-titre); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(20,24,43,.7); text-decoration: none; border-bottom: 1px dotted rgba(20,24,43,.4); }
@media (max-width: 700px){ .pcx-chiffres{ grid-template-columns: 1fr; } }

/* =========================================================================
   6. Demandez au comptoir — FAQ + formulaire, fond bleuet plein
   ========================================================================= */
.pcx-comptoir-grille{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.pcx-comptoir-grille > div{ min-width: 0; }
.pcx-bloc-encre .pcx-comptoir-grille{ }
.pcx-comptoir{ background: var(--bleuet); color: #fff; }
.pcx-comptoir .pcx-titre-section{ color: #fff; }
.pcx-comptoir .pcx-titre-section em{ color: var(--rose); }
.pcx-comptoir-grille{}
.pcx-comptoir-faq details{ border-top: 1px solid rgba(255,255,255,.3); padding: 14px 0; }
.pcx-comptoir-faq summary{ cursor: pointer; font-family: var(--font-titre); font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 12px; min-height: 44px; align-items: center; }
.pcx-comptoir-faq summary::-webkit-details-marker{ display: none; }
.pcx-comptoir-faq summary::after{ content: '+'; font-size: 22px; flex: none; }
.pcx-comptoir-faq details[open] summary::after{ content: '−'; }
.pcx-comptoir-faq p{ margin: 10px 0 0; color: rgba(255,255,255,.92); }

.pcx-comptoir .pcx-form label{ color: #fff; }
.pcx-comptoir .pcx-form input, .pcx-comptoir .pcx-form textarea{ background: #fff; color: var(--encre); }
.pcx-comptoir .pcx-btn-accent{ background: var(--encre); }
.pcx-comptoir .pcx-btn-accent:hover{ background: #000; }

@media (max-width: 900px){ .pcx-comptoir-grille{ grid-template-columns: 1fr; } }

/* =========================================================================
   7. Formulaires (contact, comptoir, décodeur)
   ========================================================================= */
.pcx-form{ display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.pcx-form-piege{ position: absolute; left: -9999px; }
.pcx-form-champ{ display: flex; flex-direction: column; gap: 6px; margin: 0; }
.pcx-form-champ label{ font-family: var(--font-titre); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.pcx-form-champ input, .pcx-form-champ textarea{
	border: 1px solid rgba(20,24,43,.3); border-radius: var(--rayon-carte); padding: 12px 14px;
	font-family: var(--font-corps); font-size: 16px; min-height: 48px; background: var(--coton); color: var(--encre);
}
.pcx-form-champ textarea{ min-height: 120px; resize: vertical; }
.pcx-btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
	padding: 0 22px; border-radius: var(--rayon-carte); border: 1px solid transparent; cursor: pointer;
	font-family: var(--font-titre); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
	text-decoration: none; transition: background var(--duree) ease;
}
.pcx-btn-accent{ background: var(--bleuet); color: #fff; }
.pcx-btn-accent:hover{ background: var(--bleuet-fonce); }
.pcx-btn-ligne{ background: transparent; border-color: var(--encre); color: var(--encre); }
.pcx-btn-ligne:hover{ background: var(--encre); color: #fff; }
.pcx-form-ok{ font-family: var(--font-titre); font-weight: 600; color: var(--bleuet-fonce); background: var(--bleuet-clair); border-radius: var(--rayon-carte); padding: 10px 14px; }

/* =========================================================================
   8. Corps d'article — notice dépliée, notice comparée, listes, tables
   ========================================================================= */
.pcx-article-grille{ display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 48px; align-items: start; }
.pcx-corps{ max-width: 68ch; }
.pcx-corps > *{ max-width: 68ch; }
.pcx-corps h2{ font-size: 30px; margin-top: 1.6em; }
.pcx-corps h3{ font-size: 22px; margin-top: 1.4em; }
.pcx-corps strong{ font-weight: 600; }
.pcx-corps a{
	text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--bleuet);
	transition: text-decoration-color var(--duree) ease, color var(--duree) ease;
}
.pcx-corps a:hover, .pcx-corps a:focus-visible{ color: var(--bleuet-fonce); text-decoration-thickness: 3px; text-decoration-color: var(--bleuet-fonce); }
@media (prefers-reduced-motion: reduce){ .pcx-corps a{ transition: none; } }
.pcx-corps figure{ margin: 1.6em 0; max-width: none; }
.pcx-corps figure img{ border-radius: var(--rayon-carte); width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.pcx-corps figcaption{ font-size: 14px; color: rgba(20,24,43,.7); margin-top: 8px; font-family: var(--font-titre); }

/* Notice dépliée : toute liste à puces/numérotée devient une bande de volets */
.pcx-corps ul:not(.pcx-comptoir-faq *):not(.pcx-menu-liste),
.pcx-corps ol{
	max-width: none;
	list-style: none;
	margin: 2em 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0;
	background: var(--coton);
	border: 1px solid rgba(20,24,43,.1);
	border-radius: var(--rayon-carte);
	counter-reset: pcx-volet;
}
.pcx-corps ul:not(.pcx-comptoir-faq *):not(.pcx-menu-liste) li,
.pcx-corps ol li{
	counter-increment: pcx-volet;
	padding: 20px;
	position: relative;
	border-left: 1px dashed rgba(20,24,43,.25);
	box-shadow: -3px 0 6px -4px rgba(20,24,43,.15);
}
.pcx-corps ul:not(.pcx-comptoir-faq *):not(.pcx-menu-liste) li:first-child,
.pcx-corps ol li:first-child{ border-left: none; box-shadow: none; }
.pcx-corps ul:not(.pcx-comptoir-faq *):not(.pcx-menu-liste) li::before,
.pcx-corps ol li::before{
	content: counter(pcx-volet);
	display: block;
	font-family: var(--font-titre);
	font-size: 32px;
	font-weight: 400;
	color: var(--bleuet);
	margin-bottom: 8px;
}
@media (max-width: 700px){
	.pcx-corps ul:not(.pcx-comptoir-faq *):not(.pcx-menu-liste),
	.pcx-corps ol{ grid-template-columns: 1fr; }
	.pcx-corps ul:not(.pcx-comptoir-faq *):not(.pcx-menu-liste) li,
	.pcx-corps ol li{ border-left: none; border-top: 1px dashed rgba(20,24,43,.25); box-shadow: 0 -3px 6px -4px rgba(20,24,43,.15); }
	.pcx-corps ul:not(.pcx-comptoir-faq *):not(.pcx-menu-liste) li:first-child,
	.pcx-corps ol li:first-child{ border-top: none; box-shadow: none; }
}

/* Notice comparée : deux colonnes issues du bloc "Colonnes" natif */
.pcx-corps .wp-block-columns{
	max-width: none; background: var(--coton); border: 1px solid rgba(20,24,43,.1); border-radius: var(--rayon-carte);
	padding: 8px; gap: 0 !important;
}
.pcx-corps .wp-block-column{ padding: 20px; border-left: 1px dashed rgba(20,24,43,.25); }
.pcx-corps .wp-block-column:first-child{ border-left: none; }
@media (max-width: 700px){ .pcx-corps .wp-block-column{ border-left: none; border-top: 1px dashed rgba(20,24,43,.25); } .pcx-corps .wp-block-column:first-child{ border-top: none; } }

/* Encadrés éditoriaux — classe additionnelle posée dans l'éditeur */
.pcx-corps .pcx-essentiel{ max-width: none; background: var(--porcelaine); border-top: 4px solid var(--bleuet); border-radius: var(--rayon-carte); padding: 20px 24px; margin: 2em 0; }
.pcx-corps .pcx-quand-consulter{ max-width: none; background: var(--rose); border-left: 4px solid var(--encre); border-radius: 0 var(--rayon-carte) var(--rayon-carte) 0; padding: 18px 22px; margin: 2em 0; }
.pcx-corps .pcx-quand-consulter p:last-child{ margin-bottom: 0; }

/* FAQ en accordéon — bloc natif "Détails" */
.pcx-corps details, .pcx-faq-item{
	max-width: none; border: 1px solid rgba(20,24,43,.15); border-radius: var(--rayon-carte);
	padding: 14px 18px; margin: 12px 0; background: var(--coton);
}
.pcx-corps summary{ cursor: pointer; font-family: var(--font-titre); font-weight: 600; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
.pcx-corps summary::-webkit-details-marker{ display: none; }
.pcx-corps summary::after{ content: '+'; color: var(--bleuet); font-size: 22px; flex: none; }
.pcx-corps details[open] summary::after{ content: '−'; }

/* Tableaux — enveloppés par le socle (.sbs_tableau), stylés ici */
.sbs_tableau{ overflow-x: auto; margin: 2em 0; border-radius: var(--rayon-carte); border: 1px solid rgba(20,24,43,.15); -webkit-overflow-scrolling: touch; }
.sbs_tableau table{ width: 100%; border-collapse: collapse; min-width: 480px; font-size: 15px; }
.sbs_tableau caption{ text-align: left; padding: 10px 14px; font-weight: 600; }
.sbs_tableau th, .sbs_tableau td{ padding: 10px 14px; border-bottom: 1px solid rgba(20,24,43,.1); text-align: left; }
.sbs_tableau thead th{ background: var(--encre); color: #fff; font-family: var(--font-titre); text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }

/* Infographies du socle (sbs_lieu / sbs_tarifs / sbs_frise / sbs_jauges) */
.sbs_lieu, .sbs_tarifs, .sbs_frise, .sbs_jauges{ display: block; max-width: none; background: var(--coton); border: 1px solid rgba(20,24,43,.12); border-radius: var(--rayon-carte); padding: 18px 20px; margin: 2em 0; }
.sbs_tarif, .sbs_etape, .sbs_jauge{ display: block; padding: 8px 0; border-top: 1px dashed rgba(20,24,43,.2); }
.sbs_tarif:first-of-type, .sbs_etape:first-of-type, .sbs_jauge:first-of-type{ border-top: none; }
.sbs_tarif_barre{ width: 100%; height: 8px; margin-top: 4px; }
.sbs_source{ display: block; margin-top: 10px; color: rgba(20,24,43,.72); }

/* Bloc Sources en fin d'article */
.pcx-sources{ max-width: none; background: var(--porcelaine); border-radius: var(--rayon-carte); padding: 18px 20px; margin: 2.4em 0; }
.pcx-sources h2{ font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; }
.pcx-sources ul{ max-width: none; list-style: none; margin: 0; padding: 0; display: block; background: none; border: none; }
.pcx-sources li{ padding: 6px 0; border: none; box-shadow: none; font-size: 14px; }
.pcx-sources li::before{ display: none; }

/* Sommaire collant */
.pcx-sommaire{ position: sticky; top: 100px; background: var(--coton); border: 1px solid rgba(20,24,43,.1); border-radius: var(--rayon-carte); padding: 18px; align-self: start; }
.pcx-sommaire h2{ font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; }
.pcx-sommaire ol{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pcx-sommaire a{ font-size: 14px; color: var(--encre); text-decoration: none; }
.pcx-sommaire a:hover{ color: var(--bleuet); }
.pcx-sommaire-encart{ margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(20,24,43,.1); font-size: 13px; }

@media (max-width: 1000px){
	.pcx-article-grille{ grid-template-columns: 1fr; }
	.pcx-sommaire{ position: static; }
}

/* Fil d'Ariane */
.pcx-fil{ font-size: 13px; color: rgba(20,24,43,.7); margin: 18px 0; }
.pcx-fil a{ color: rgba(20,24,43,.7); text-decoration: none; }
.pcx-fil a:hover{ color: var(--bleuet); }
.pcx-fil span[aria-hidden]{ margin: 0 6px; }

/* En-tête d'article */
.pcx-article-tete{ padding: 24px 0 0; }
.pcx-article-chapo{ font-size: var(--chapo-taille); font-style: italic; color: rgba(20,24,43,.85); max-width: 68ch; }
.pcx-article-ligne-auteur{ display: flex; align-items: center; gap: 12px; margin: 18px 0 24px; }
.pcx-article-ligne-auteur .pcx-avatar{ width: 40px; height: 40px; }
.pcx-article-ligne-auteur a{ font-weight: 600; color: var(--encre); text-decoration: none; }
.pcx-article-ligne-auteur a:hover{ color: var(--bleuet); }
.pcx-article-dates{ font-size: 13px; color: rgba(20,24,43,.72); }

.pcx-une{ margin: 24px 0 40px; }
.pcx-une-media{ display: block; position: relative; aspect-ratio: 16/9; border-radius: var(--rayon-carte); overflow: hidden; }
.pcx-etiquette-independante{ position: relative; display: inline-block; margin: 16px 0 0; }
.pcx-une-media img{ width: 100%; height: 100%; object-fit: cover; }
.pcx-une figcaption{ font-size: 14px; color: rgba(20,24,43,.7); margin-top: 10px; }

/* Signature auteur en fin d'article */
.pcx-signature{ display: flex; gap: 18px; align-items: flex-start; background: var(--coton); border: 1px solid rgba(20,24,43,.1); border-radius: var(--rayon-carte); padding: 24px; margin: 3em 0; max-width: none; flex-wrap: wrap; }
.pcx-signature .pcx-avatar{ width: 96px; height: 96px; flex: none; }
.pcx-signature > div{ min-width: 0; flex: 1 1 200px; }
.pcx-signature-nom{ font-family: var(--font-titre); font-weight: 600; font-size: 18px; margin: 0 0 4px; }
.pcx-signature-role{ font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--bleuet); font-family: var(--font-titre); margin: 0 0 8px; }
.pcx-signature-bio{ font-size: 15px; margin: 0 0 10px; }
.pcx-signature a.pcx-btn-ligne{ align-self: flex-start; }

/* Articles liés */
.pcx-lies{ margin: 3em 0; }

/* =========================================================================
   9. Page rubrique — bandeau 21:9, filtres, pagination
   ========================================================================= */
.pcx-bandeau-rubrique{ position: relative; min-height: 260px; background: var(--rose); overflow: hidden; border-bottom: 1px solid rgba(20,24,43,.08); }
.pcx-bandeau-rubrique::before{ content: ""; position: absolute; right: -6%; top: -40%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--porcelaine); opacity: .7; }
.pcx-bandeau-rubrique::after{ content: ""; position: absolute; right: 18%; bottom: -55%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: var(--bleuet); opacity: .12; }
.pcx-bandeau-rubrique img{ display: none; }
.pcx-bandeau-voile{ position: relative; z-index: 1; min-height: 260px; display: flex; align-items: flex-end; padding: 40px 0 36px; }
.pcx-bandeau-voile .pcx-conteneur{ width: 100%; }
.pcx-bandeau-voile a, .pcx-bandeau-voile nav{ color: var(--encre); }
.pcx-bandeau-titre{ color: var(--encre); text-transform: uppercase; font-size: var(--h1-home); margin: 0; }
.pcx-bandeau-titre em{ text-transform: none; color: var(--bleuet); }
.pcx-bandeau-picto{ position: absolute; z-index: 1; top: 50%; right: 9%; transform: translateY(-50%); width: 150px; height: 150px; color: var(--bleuet); opacity: .9; }
.pcx-bandeau-picto svg{ width: 100%; height: 100%; }
@media (max-width: 600px){ .pcx-bandeau-picto{ width: 56px; height: 56px; top: 22px; right: 18px; transform: none; } .pcx-bandeau-rubrique, .pcx-bandeau-voile{ min-height: 200px; } }

.pcx-rubrique-chapo{ font-size: var(--chapo-taille); font-style: italic; max-width: 68ch; margin: 32px auto 0; }

.pcx-filtres{ display: flex; gap: 8px; flex-wrap: wrap; margin: 28px 0; }
.pcx-filtres a{
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
	border: 1px solid rgba(20,24,43,.25); font-family: var(--font-titre); font-size: 12px; text-transform: uppercase;
	letter-spacing: .06em; text-decoration: none; color: var(--encre);
}
.pcx-filtres a[aria-current="true"]{ background: var(--encre); color: #fff; border-color: var(--encre); }
.pcx-filtres a:hover{ border-color: var(--bleuet); color: var(--bleuet); }

.pcx-pagination{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 40px 0; font-family: var(--font-titre); text-transform: uppercase; font-size: 13px; }
.pcx-pagination .page-numbers{ display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border-radius: var(--rayon-carte); text-decoration: none; color: var(--encre); }
.pcx-pagination a.page-numbers:hover{ background: var(--porcelaine); }
.pcx-pagination .page-numbers.current{ background: var(--bleuet); color: #fff; }

/* =========================================================================
   10. Page auteur
   ========================================================================= */
.pcx-auteur-bandeau{ background: var(--porcelaine); padding: 48px 0; }
.pcx-auteur-tete{ display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.pcx-auteur-tete .pcx-avatar{ width: 160px; height: 160px; }
.pcx-auteur-nom{ text-transform: uppercase; font-size: 40px; margin: 0 0 6px; }
.pcx-auteur-role{ font-family: var(--font-titre); color: var(--bleuet); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; margin: 0 0 12px; }
.pcx-auteur-bio{ max-width: 60ch; }
.pcx-auteur-tags{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pcx-auteur-tags span{ background: var(--coton); border: 1px solid rgba(20,24,43,.2); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 700px){ .pcx-auteur-tete .pcx-avatar{ width: 120px; height: 120px; } .pcx-auteur-nom{ font-size: 28px; } }

/* =========================================================================
   11. Pages annexes / contact / 404 / recherche
   ========================================================================= */
.pcx-page-tete{ background: var(--porcelaine); padding: 40px 0; }
.pcx-page-photo{ display: block; aspect-ratio: 21/9; border-radius: var(--rayon-carte); overflow: hidden; margin-top: 24px; background: linear-gradient(135deg, var(--rose), var(--bleuet-clair)); }
.pcx-page-photo img{ width: 100%; height: 100%; object-fit: cover; }
.pcx-page-corps{ max-width: 68ch; padding: 40px 0; }
.pcx-page-corps h2{ font-size: 26px; }
.pcx-page-tete-compacte{ padding: 24px 0; }
.pcx-page-photo-compacte{ aspect-ratio: 21/9; max-height: 220px; margin-top: 16px; }
.pcx-page-texte{ margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(20,24,43,.1); }

/* Page « Dossiers » — le rayon des 8 rubriques, tous les articles, groupés */
.pcx-dossiers-intro{ padding-top: 40px; }
.pcx-dossier-groupe{ padding: 48px 0; border-top: 1px solid rgba(20,24,43,.1); }
.pcx-dossier-groupe:first-of-type{ border-top: none; }
.pcx-dossier-groupe-tete{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.pcx-dossier-groupe-tete .pcx-titre-section-petit{ margin: 0; }
.pcx-dossier-decodeur{ background: var(--porcelaine); border-top: 4px solid var(--bleuet); border-radius: var(--rayon-carte); padding: 40px 32px; margin: 8px 0 56px; text-align: center; }
.pcx-dossier-decodeur-corps{ max-width: 60ch; margin-inline: auto; }
.pcx-dossier-decodeur-corps p{ margin-bottom: 20px; }

.pcx-404{ text-align: center; padding: 60px 0 20px; }
.pcx-404-titre{ text-transform: uppercase; font-size: var(--h1-home); }
.pcx-404-titre em{ text-transform: none; }
.pcx-404 .pcx-hero-recherche{ margin: 24px auto; justify-content: center; }

.pcx-recherche-tete{ background: var(--porcelaine); padding: 48px 0; text-align: center; }
.pcx-recherche-tete .pcx-recherche-form{ max-width: 560px; margin: 0 auto; }
.pcx-recherche-tete input[type="search"]{ width: 100%; min-height: 56px; font-size: 18px; border-radius: var(--rayon-carte); }
.pcx-sans-resultat{ text-align: center; padding: 20px 0 60px; }

/* =========================================================================
   12. Décodeur d'étiquette
   ========================================================================= */
.pcx-decodeur{ padding: 40px 0 80px; max-width: 720px; margin-inline: auto; }
.pcx-decodeur-outil{ background: var(--coton); border: 1px solid rgba(20,24,43,.12); border-radius: var(--rayon-carte); padding: 24px; margin: 24px 0 40px; }
.pcx-decodeur-champ{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.pcx-decodeur-champ label{ font-family: var(--font-titre); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.pcx-decodeur-champ select, .pcx-decodeur-champ input{ border: 1px solid rgba(20,24,43,.3); border-radius: var(--rayon-carte); padding: 12px 14px; font-size: 16px; min-height: 48px; font-family: var(--font-corps); }
.pcx-decodeur-resultat{ margin-top: 20px; padding: 20px; border-radius: var(--rayon-carte); background: var(--porcelaine); }
.pcx-decodeur-pourcent{ font-family: var(--font-titre); font-size: 56px; color: var(--bleuet); line-height: 1; font-variant-numeric: tabular-nums; }
.pcx-decodeur-meter{ width: 100%; height: 10px; margin-top: 10px; }
.pcx-decodeur-alerte{ background: var(--rose); border-left: 4px solid var(--encre); padding: 12px 16px; margin-top: 14px; border-radius: 0 var(--rayon-carte) var(--rayon-carte) 0; font-size: 14px; display: none; }
.pcx-decodeur-alerte[data-visible="1"]{ display: block; }

.pcx-decodeur-illustration{ display: flex; justify-content: center; margin: 8px 0 32px; }
.pcx-decodeur-illustration svg{ max-width: 100%; height: auto; }

.pcx-mentions{ border: 1px solid rgba(20,24,43,.15); border-radius: var(--rayon-carte); padding: 18px 20px; margin: 24px 0; }
.pcx-mentions summary{ cursor: pointer; font-family: var(--font-titre); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.pcx-mentions-corps{ margin-top: 12px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.pcx-mentions-corps p{ margin: 0; }

.pcx-renvoi-pro{ margin-top: 24px; font-size: 14px; color: rgba(20,24,43,.7); border-top: 1px solid rgba(20,24,43,.15); padding-top: 16px; }

/* =========================================================================
   13. Pied de page
   ========================================================================= */
.pcx-footer{ background: var(--encre); color: #fff; padding: 56px 0 28px; }
.pcx-footer a{ color: rgba(255,255,255,.85); text-decoration: none; }
.pcx-footer a:hover{ color: #fff; text-decoration: underline; }
.pcx-footer-grille{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.pcx-footer-marque{ display: flex; flex-direction: column; gap: 12px; }
.pcx-footer-formule{ font-family: var(--font-titre); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.pcx-footer h2{ color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 14px; }
.pcx-footer-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pcx-footer-col li a{ font-size: 14px; }
.pcx-footer-rappel{ margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); font-size: 13px; color: rgba(255,255,255,.7); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

@media (max-width: 900px){ .pcx-footer-grille{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .pcx-footer-grille{ grid-template-columns: 1fr; } }

/* =========================================================================
   14. Utilitaires de révélation au défilement
   ========================================================================= */
/* Roxane R2-R4 (30/09) : une carte n'est JAMAIS masquée en attendant le défilement —
   une capture pleine page ou un défilement rapide montrait des sections entières vides.
   L'animation ne fait plus que soulever la carte, elle est toujours visible. */
.pcx-reveal{ opacity: 1; }

/* Cibles tactiles minimales partout */
.pcx-btn, .pcx-menu-liste a, .pcx-filtres a, .pcx-pagination a, .pcx-nav-toggle, .pcx-recherche-form button{ min-height: 44px; }

/* Fil d’Ariane posé sur le bandeau rose de rubrique : encre (contraste ≥ 4.5). */
.pcx-bandeau-rubrique .pcx-fil, .pcx-bandeau-rubrique .pcx-fil a, .pcx-bandeau-rubrique .pcx-fil span{ color: var(--encre) !important; opacity: 1; }

/* Logo jamais coupé, même avec 7 entrées de menu ; bloc photo vide de page masqué. */
.pcx-logo{ flex-shrink: 0; white-space: nowrap; }
.pcx-logotype{ white-space: nowrap; }
.pcx-page-photo:empty{ display: none; }
@media (min-width: 901px) and (max-width: 1280px){ .pcx-menu-liste a{ padding-left: 8px; padding-right: 8px; } }

/* =========================================================================
   15. Page À propos — chapô, promesse en cartes, équipe, sources, CTA
   ========================================================================= */
.pcx-propos-chapo{ font-size: var(--chapo-taille); font-style: italic; color: rgba(20,24,43,.85); max-width: 68ch; margin-top: 16px; }

.pcx-propos-formule-grille{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.pcx-propos-formule-carte{ background: var(--porcelaine); border: 1px solid rgba(20,24,43,.1); border-radius: var(--rayon-carte); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.pcx-propos-formule-icone{ width: 40px; height: 40px; color: var(--bleuet); flex: none; }
.pcx-propos-formule-titre{ font-family: var(--font-titre); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; margin: 0; color: var(--encre); }
.pcx-propos-formule-texte{ font-size: 15px; margin: 0; color: rgba(20,24,43,.85); }
@media (max-width: 700px){ .pcx-propos-formule-grille{ grid-template-columns: 1fr; } }

.pcx-propos-equipe-grille{ display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; list-style: none; margin: 0; padding: 0; }
.pcx-propos-equipe-carte{ background: var(--coton); border: 1px solid rgba(20,24,43,.1); border-radius: var(--rayon-carte); padding: 28px; display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; min-width: 0; }
.pcx-propos-equipe-carte .pcx-avatar{ width: 96px; height: 96px; flex: none; }
.pcx-propos-equipe-corps{ min-width: 0; flex: 1 1 200px; }
.pcx-propos-equipe-nom{ font-family: var(--font-titre); font-weight: 600; font-size: 20px; margin: 0 0 4px; text-decoration: none; color: var(--encre); display: inline-block; }
.pcx-propos-equipe-nom:hover, .pcx-propos-equipe-nom:focus-visible{ color: var(--bleuet); }
.pcx-propos-equipe-role{ font-family: var(--font-titre); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--bleuet); margin: 0 0 10px; }
.pcx-propos-equipe-bio{ font-size: 15px; margin: 0 0 10px; }
.pcx-propos-equipe-compte{ font-size: 13px; color: rgba(20,24,43,.7); margin: 0 0 14px; font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 700px){ .pcx-propos-equipe-grille{ grid-template-columns: 1fr; } .pcx-propos-equipe-carte{ padding: 20px; } }

.pcx-propos-sources{ background: var(--porcelaine); border-radius: var(--rayon-carte); padding: 24px; }
.pcx-propos-sources-liste{ display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 14px 0 0; padding: 0; }
.pcx-propos-sources-tag{ display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; background: var(--coton); border: 1px solid rgba(20,24,43,.25); border-radius: 999px; font-size: 14px; color: var(--encre); }

.pcx-propos-cta-grille{ display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; list-style: none; margin: 0; padding: 0; }
.pcx-propos-cta-carte{ background: var(--coton); border: 1px solid rgba(20,24,43,.1); border-radius: var(--rayon-carte); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.pcx-propos-cta-icone{ width: 36px; height: 36px; color: var(--bleuet); flex: none; }
.pcx-propos-cta-titre{ font-family: var(--font-titre); font-weight: 600; font-size: 20px; margin: 0; color: var(--encre); }
.pcx-propos-cta-texte{ font-size: 15px; margin: 0; color: rgba(20,24,43,.85); }
.pcx-propos-cta-carte .pcx-btn{ align-self: flex-start; }
@media (max-width: 700px){ .pcx-propos-cta-grille{ grid-template-columns: 1fr; } }

/* =========================================================================
   Corrections Roxane — 30/09/2026
   ========================================================================= */

/* Accueil : tête de section avec renvoi vers la rubrique (Alimentation, Actualité) */
.pcx-section-tete{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.pcx-section-tete .pcx-titre-section{ margin: 0; }
.pcx-carte-corps .pcx-carte-chapo{ margin-top: 6px; }

/* Rubriques / Dossiers / auteur (R12) : une dernière ligne de 2 cartes s'étale sur toute la largeur */
@media (min-width: 1001px){
	.pcx-grille:not(.pcx-grille-2):not(.pcx-grille-forte){ grid-template-columns: repeat(6, 1fr); }
	.pcx-grille:not(.pcx-grille-2):not(.pcx-grille-forte) > *{ grid-column: span 2; }
	.pcx-grille:not(.pcx-grille-2):not(.pcx-grille-forte) > :last-child:nth-child(3n+2),
	.pcx-grille:not(.pcx-grille-2):not(.pcx-grille-forte) > :nth-last-child(2):nth-child(3n+1){ grid-column: span 3; }
	.pcx-grille:not(.pcx-grille-2):not(.pcx-grille-forte) > :last-child:nth-child(3n+2) .pcx-carte-media,
	.pcx-grille:not(.pcx-grille-2):not(.pcx-grille-forte) > :nth-last-child(2):nth-child(3n+1) .pcx-carte-media{ aspect-ratio: 16/9; }
	.pcx-grille:not(.pcx-grille-2):not(.pcx-grille-forte) > :last-child:nth-child(3n+1):not(:first-child){ grid-column: 3 / span 2; }
}

/* Bandeaux de page (R14 Dossiers, R16/R18 Décodeur, R20 À propos) */
.pcx-bandeau-page{ min-height: 0; }
.pcx-bandeau-ton-rose{ background: var(--rose); }
.pcx-bandeau-ton-bleuet-clair{ background: var(--bleuet-clair); }
.pcx-bandeau-ton-porcelaine{ background: var(--porcelaine); }
.pcx-bandeau-ton-porcelaine::before{ background: var(--rose); opacity: .55; }
.pcx-bandeau-page-grille{ position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 36px; padding-bottom: 44px; }
.pcx-bandeau-page .pcx-fil{ margin: 0 0 18px; }
.pcx-bandeau-page .pcx-fil a{ color: var(--encre); }
.pcx-bandeau-page .pcx-bandeau-titre{ line-height: 1; }
.pcx-bandeau-chapo{ font-size: var(--chapo-taille); font-style: italic; line-height: 1.45; max-width: 46ch; margin: 18px 0 0; color: rgba(20,24,43,.88); }
.pcx-bandeau-illu{ display: flex; justify-content: center; align-items: center; min-width: 0; }
.pcx-bandeau-illu > svg{ width: 100%; max-width: 380px; height: auto; }
.pcx-bandeau-action{ margin: 24px 0 0; }
.pcx-bandeau-raccourcis{ display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.pcx-bandeau-raccourcis a{
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 999px;
	background: var(--coton); border: 1px solid rgba(20,24,43,.18); color: var(--encre); text-decoration: none;
	font-family: var(--font-titre); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
	transition: border-color var(--duree) ease, color var(--duree) ease;
}
.pcx-bandeau-raccourcis a:hover, .pcx-bandeau-raccourcis a:focus-visible{ border-color: var(--bleuet); color: var(--bleuet); }
.pcx-bandeau-raccourcis .pcx-picto{ width: 22px; height: 22px; color: var(--bleuet); flex: none; }
.pcx-dossier-groupe{ scroll-margin-top: 90px; }

/* À propos : les deux portraits de la rédaction dans le bandeau */
.pcx-illu-equipe{ position: relative; width: 100%; max-width: 380px; aspect-ratio: 19/15; }
.pcx-illu-equipe-membre{ position: absolute; display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); }
.pcx-illu-equipe-membre .pcx-avatar{ width: 190px; height: 190px; border-radius: 50%; object-fit: cover; border: 6px solid var(--coton); box-shadow: 0 10px 30px rgba(20,24,43,.12); }
.pcx-illu-equipe-0{ left: 0; top: 0; }
.pcx-illu-equipe-1{ right: 0; bottom: 0; }
.pcx-illu-equipe-nom{ font-family: var(--font-titre); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; background: var(--coton); border: 1px solid var(--encre); border-radius: var(--rayon-etiquette); padding: 5px 10px; }
.pcx-illu-equipe-membre:hover .pcx-illu-equipe-nom, .pcx-illu-equipe-membre:focus-visible .pcx-illu-equipe-nom{ background: var(--encre); color: #fff; }
.pcx-illu-equipe-bulle{ position: absolute; right: 4%; top: 10%; background: var(--bleuet); color: #fff; font-family: var(--font-titre); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 8px 12px; border-radius: 14px 14px 14px 2px; }

/* Décodeur (R17) : le formulaire arrive juste sous le bandeau, sans grand vide */
.pcx-decodeur{ padding-top: 32px; }
.pcx-decodeur > .pcx-corps > :first-child{ margin-top: 0; }
.pcx-decodeur > .pcx-corps:empty{ display: none; }

@media (max-width: 900px){
	.pcx-bandeau-page-grille{ grid-template-columns: 1fr; gap: 24px; padding-top: 24px; padding-bottom: 32px; }
	.pcx-bandeau-illu > svg{ max-width: 280px; }
	.pcx-illu-equipe{ max-width: 300px; margin-inline: auto; }
	.pcx-illu-equipe-membre .pcx-avatar{ width: 150px; height: 150px; }
}
@media (max-width: 600px){
	.pcx-bandeau-page .pcx-bandeau-picto{ display: none; }
	.pcx-bandeau-illu > svg{ max-width: 240px; }
	.pcx-illu-equipe{ max-width: 260px; }
	.pcx-illu-equipe-membre .pcx-avatar{ width: 128px; height: 128px; }
}

/* Contact (R21/R22) : habillage du bloc « Demandez au comptoir » */
.pcx-contact{ padding: 40px 0 72px; }
.pcx-fil-clair, .pcx-fil-clair a, .pcx-fil-clair span{ color: rgba(255,255,255,.85); }
.pcx-contact-titre{ font-size: var(--h1-article); margin: 8px 0 12px; }
.pcx-contact-chapo{ font-size: var(--chapo-taille); font-style: italic; color: rgba(255,255,255,.92); max-width: 52ch; margin: 0 0 36px; }
.pcx-contact-grille{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.pcx-contact-form{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); border-radius: var(--rayon-carte); padding: 28px; }
.pcx-contact-form .pcx-titre-section-petit{ margin-top: 0; }
.pcx-contact-cote{ display: flex; flex-direction: column; gap: 24px; }
.pcx-contact-illu{ display: flex; justify-content: center; }
.pcx-contact-illu svg{ width: 100%; max-width: 380px; height: auto; }
.pcx-contact .pcx-contact-reperes{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pcx-contact .pcx-contact-reperes li{ display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 14px 44px; position: relative; background: #fff; color: var(--encre); border-radius: var(--rayon-carte); }
.pcx-contact .pcx-contact-reperes li::before{ content: ""; position: absolute; left: 16px; top: 18px; width: 16px; height: 16px; border-radius: 50%; background: var(--bleuet); box-shadow: inset 0 0 0 4px var(--bleuet-clair); }
.pcx-contact .pcx-contact-reperes strong{ font-family: var(--font-titre); font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.pcx-contact .pcx-contact-reperes span{ font-size: 16px; line-height: 1.4; }
.pcx-contact-faq{ margin-top: 56px; max-width: 860px; }
@media (max-width: 900px){
	.pcx-contact-grille{ grid-template-columns: 1fr; gap: 32px; }
	.pcx-contact-form{ padding: 20px; }
	.pcx-contact-illu svg{ max-width: 260px; }
}

/* Articles (R5-R8) : repères visuels dans le corps */
.pcx-corps .pcx-encadre{ max-width: none; border-radius: var(--rayon-carte); margin: 2em 0; padding: 22px 24px; position: relative; }
.pcx-corps .pcx-encadre-titre{ font-family: var(--font-titre); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.pcx-corps .pcx-encadre-titre::before{ content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--bleuet) center / 14px no-repeat; }
.pcx-corps .pcx-encadre p{ max-width: none; }
.pcx-corps .pcx-encadre p:last-child{ margin-bottom: 0; }
/* À retenir : bande porcelaine, points numérotés */
.pcx-corps .pcx-encadre-retenir{ background: var(--porcelaine); border-top: 4px solid var(--bleuet); counter-reset: pcx-point; }
.pcx-corps .pcx-encadre-retenir .pcx-encadre-titre::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.pcx-corps .pcx-retenir-point{ counter-increment: pcx-point; position: relative; padding: 10px 0 10px 44px; margin: 0; border-top: 1px dashed rgba(20,24,43,.2); font-size: 18px; line-height: 1.45; }
.pcx-corps .pcx-retenir-point:first-of-type{ border-top: none; }
.pcx-corps .pcx-retenir-point::before{ content: counter(pcx-point); position: absolute; left: 0; top: 8px; font-family: var(--font-titre); font-size: 24px; font-weight: 400; color: var(--bleuet); line-height: 1.2; }
/* Le saviez-vous : carte rose, point d'interrogation */
.pcx-corps .pcx-encadre-saviez{ background: var(--rose); border-left: 4px solid var(--encre); border-radius: 0 var(--rayon-carte) var(--rayon-carte) 0; }
.pcx-corps .pcx-encadre-saviez .pcx-encadre-titre::before{ background-color: var(--encre); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M9 9a3 3 0 1 1 4 2.8c-.7.3-1 1-1 1.7V14'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E"); }
.pcx-corps .pcx-encadre-saviez p:not(.pcx-encadre-titre){ font-size: 19px; font-style: italic; }
/* Pour qui / pas pour qui : deux cartes côte à côte */
.pcx-corps .pcx-pourqui{ max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 2em 0; }
.pcx-corps .pcx-pourqui-col{ background: var(--coton); border: 1px solid rgba(20,24,43,.14); border-radius: var(--rayon-carte); padding: 20px 22px; }
.pcx-corps .pcx-pourqui-oui{ border-top: 4px solid var(--bleuet); }
.pcx-corps .pcx-pourqui-non{ border-top: 4px solid var(--encre); background: var(--porcelaine); }
.pcx-corps .pcx-pourqui-oui .pcx-encadre-titre::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.pcx-corps .pcx-pourqui-non .pcx-encadre-titre::before{ background-color: var(--encre); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.pcx-corps .pcx-pourqui-item{ margin: 0; padding: 8px 0; border-top: 1px dashed rgba(20,24,43,.18); font-size: 17px; line-height: 1.4; }
.pcx-corps .pcx-pourqui-item:first-of-type{ border-top: none; }
/* Duel de deux formules (bisglycinate / citrate…) */
.pcx-corps .pcx-duel{ max-width: none; display: grid; grid-template-columns: 1fr 44px 1fr; align-items: stretch; gap: 0; margin: 2em 0; }
.pcx-corps .pcx-duel-carte{ background: var(--coton); border: 1px solid rgba(20,24,43,.14); border-radius: var(--rayon-carte); padding: 20px 22px; }
.pcx-corps .pcx-duel-carte:first-child{ border-top: 4px solid var(--bleuet); }
.pcx-corps .pcx-duel-carte:last-child{ border-top: 4px solid var(--encre); }
.pcx-corps .pcx-duel-nom{ font-family: var(--font-titre); font-weight: 600; font-size: 20px; text-transform: uppercase; margin: 0 0 4px; }
.pcx-corps .pcx-duel-sous{ font-family: var(--font-titre); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--bleuet-fonce); margin: 0 0 12px; }
.pcx-corps .pcx-duel-ligne{ margin: 0; padding: 8px 0; border-top: 1px dashed rgba(20,24,43,.18); font-size: 17px; line-height: 1.4; }
.pcx-corps .pcx-duel-vs{ align-self: center; justify-self: center; margin: 0 -8px; z-index: 1; width: 52px; height: 52px; border-radius: 50%; background: var(--bleuet); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-titre); font-weight: 600; font-size: 14px; text-transform: uppercase; box-shadow: 0 0 0 5px var(--porcelaine); }
.pcx-corps .pcx-duel-verdict{ grid-column: 1 / -1; max-width: none; margin: 14px 0 0; padding: 14px 18px; background: var(--bleuet-clair); border-radius: var(--rayon-carte); font-size: 17px; }
@media (max-width: 700px){
	.pcx-corps .pcx-pourqui{ grid-template-columns: 1fr; }
	.pcx-corps .pcx-duel{ grid-template-columns: 1fr; }
	.pcx-corps .pcx-duel-vs{ justify-self: center; margin: -12px 0; }
	.pcx-corps .pcx-encadre{ padding: 18px; }
}
.pcx-corps strong{ font-weight: 700; background: linear-gradient(transparent 62%, var(--bleuet-clair) 62%); }
/* Le bandeau de rubrique masque ses <img> (B-CAT-09) : les portraits de l'équipe, eux, restent visibles. */
.pcx-bandeau-page .pcx-illu-equipe img.pcx-avatar{ display: block; }
.pcx-illu-equipe-bulle{ right: auto; top: auto; left: 0; bottom: 2%; }
@media (max-width: 900px){ .pcx-illu-equipe-bulle{ display: none; } }

/* =========================================================================
   Gabarit d'article v2 — 30/09/2026 (Mathias : « à refaire sérieusement »)
   ========================================================================= */
.pcx-lecture-barre{ position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 200; pointer-events: none; }
.pcx-lecture-barre span{ display: block; height: 100%; background: var(--bleuet); transform: scaleX(0); transform-origin: 0 50%; }

/* Haut de page : texte à gauche, photo à droite — la lecture commence dans le premier écran */
.pcx-art-hero{ position: relative; overflow: hidden; background: var(--porcelaine); border-bottom: 1px solid rgba(20,24,43,.08); }
.pcx-art-hero::before{ content: ""; position: absolute; right: -8%; top: -30%; width: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--rose); opacity: .55; }
.pcx-art-hero-grille{ position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 28px; padding-bottom: 44px; }
.pcx-art-hero .pcx-fil{ margin: 0 0 18px; }
.pcx-art-rayon{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.pcx-art-rayon a{ display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 8px; border-radius: 999px; background: var(--coton); border: 1px solid var(--encre); color: var(--encre); text-decoration: none; font-family: var(--font-titre); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.pcx-art-rayon a:hover{ background: var(--encre); color: #fff; }
.pcx-art-rayon .pcx-picto{ width: 20px; height: 20px; color: var(--bleuet); }
.pcx-art-rayon a:hover .pcx-picto{ color: #fff; }
.pcx-art-type{ font-family: var(--font-titre); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--bleuet-fonce); background: var(--bleuet-clair); border-radius: 999px; padding: 9px 12px; line-height: 1; }
.pcx-art-titre{ font-size: clamp(32px, 3.6vw, 50px); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 18px; text-wrap: balance; }
.pcx-art-chapo{ font-size: 21px; line-height: 1.5; font-style: italic; color: rgba(20,24,43,.86); margin: 0 0 24px; max-width: 56ch; }
.pcx-art-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: 18px; border-top: 1px solid rgba(20,24,43,.14); }
.pcx-art-auteur{ display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--encre); }
.pcx-art-auteur .pcx-avatar{ width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.pcx-art-auteur > span{ display: flex; flex-direction: column; }
.pcx-art-auteur-nom{ font-family: var(--font-titre); font-weight: 600; font-size: 16px; }
.pcx-art-auteur:hover .pcx-art-auteur-nom{ color: var(--bleuet); }
.pcx-art-auteur-role{ font-size: 13px; color: rgba(20,24,43,.72); line-height: 1.3; max-width: 30ch; }
.pcx-art-reperes{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pcx-art-reperes li{ display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-titre); font-size: 13px; color: rgba(20,24,43,.8); }
.pcx-art-reperes svg{ width: 18px; height: 18px; fill: none; stroke: var(--bleuet); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pcx-art-une{ margin: 0; position: relative; }
.pcx-art-une img{ width: 100%; aspect-ratio: 4/3; height: auto; object-fit: cover; border-radius: 6px; box-shadow: 0 18px 40px -18px rgba(20,24,43,.35); }
.pcx-art-une figcaption{ font-family: var(--font-titre); font-size: 12px; color: rgba(20,24,43,.65); margin-top: 8px; }

/* Corps + colonne droite collante */
.pcx-art-grille{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; padding-top: 48px; }
.pcx-art-corps{ max-width: 70ch; }
.pcx-art-corps > p:first-of-type{ font-size: 21px; line-height: 1.6; }
.pcx-art-cote{ align-self: stretch; }
.pcx-art-cote-colle{ position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.pcx-art-carte{ display: block; background: var(--coton); border: 1px solid rgba(20,24,43,.12); border-radius: 6px; padding: 18px 20px; color: var(--encre); text-decoration: none; }
.pcx-art-carte-titre{ display: block; font-family: var(--font-titre); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 8px; }
/* Le sommaire garde la classe .pcx-sommaire (JS) : on neutralise l'ancien habillage */
.pcx-art-cote .pcx-sommaire{ position: static; padding: 18px 20px; background: var(--coton); }
.pcx-art-restant{ font-family: var(--font-titre); font-size: 13px; color: rgba(20,24,43,.72); margin: 0 0 8px; }
.pcx-art-restant span{ color: var(--bleuet); font-weight: 600; }
.pcx-art-jauge{ display: block; height: 4px; border-radius: 4px; background: var(--bleuet-clair); overflow: hidden; margin-bottom: 14px; }
.pcx-art-jauge span{ display: block; height: 100%; background: var(--bleuet); transform: scaleX(0); transform-origin: 0 50%; }
.pcx-art-cote .pcx-sommaire ol{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: pcx-som; }
.pcx-art-cote .pcx-sommaire li{ counter-increment: pcx-som; position: relative; padding: 6px 0 6px 34px; border-radius: 4px; }
.pcx-art-cote .pcx-sommaire li::before{ content: counter(pcx-som, decimal-leading-zero); position: absolute; left: 6px; top: 7px; font-family: var(--font-titre); font-size: 12px; font-weight: 600; color: rgba(20,24,43,.45); }
.pcx-art-cote .pcx-sommaire a{ font-family: var(--font-titre); font-size: 14px; line-height: 1.35; color: var(--encre); text-decoration: none; display: block; }
.pcx-art-cote .pcx-sommaire a:hover{ color: var(--bleuet); }
.pcx-art-cote .pcx-sommaire li.pcx-lu::before{ color: var(--bleuet); }
.pcx-art-cote .pcx-sommaire li.pcx-actif{ background: var(--bleuet-clair); }
.pcx-art-cote .pcx-sommaire li.pcx-actif::before{ color: var(--bleuet); }
.pcx-art-cote .pcx-sommaire li.pcx-actif a{ color: var(--bleuet-fonce); font-weight: 600; }
.pcx-art-outil{ display: flex; gap: 14px; align-items: flex-start; background: var(--rose); border-color: transparent; transition: transform var(--duree) ease; }
.pcx-art-outil:hover{ transform: translateY(-2px); }
.pcx-art-outil-picto{ flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--coton); display: flex; align-items: center; justify-content: center; }
.pcx-art-outil-picto svg{ width: 30px; height: 30px; fill: none; stroke: var(--encre); stroke-width: 2.2; stroke-linecap: round; }
.pcx-art-outil > span:last-child{ display: flex; flex-direction: column; }
.pcx-art-outil-texte{ font-size: 15px; line-height: 1.4; }
.pcx-art-lien{ font-family: var(--font-titre); font-weight: 600; font-size: 13px; color: var(--bleuet-fonce); margin-top: 8px; }
.pcx-art-question{ background: var(--encre); color: #fff; border-color: var(--encre); }
.pcx-art-question p:not(.pcx-art-carte-titre){ font-size: 15px; line-height: 1.45; margin: 0 0 14px; color: rgba(255,255,255,.88); }
.pcx-art-question .pcx-btn{ width: 100%; justify-content: center; background: var(--bleuet); }
.pcx-art-sommaire-mobile{ display: none; }

/* Intertitres numérotés comme le sommaire */
.pcx-corps h2.pcx-h2-num{ position: relative; padding-top: 22px; border-top: 1px solid rgba(20,24,43,.12); margin-top: 2em; }
.pcx-corps h2.pcx-h2-num::before{ content: attr(data-pcx-num); display: block; font-family: var(--font-titre); font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--bleuet); margin-bottom: 6px; }
.pcx-corps h2, .pcx-corps h3{ scroll-margin-top: 96px; text-wrap: balance; }
.pcx-corps figure img{ box-shadow: 0 14px 30px -18px rgba(20,24,43,.35); }

/* Sources : fiche numérotée, sans URL brute (R-0458/R-0496) */
.pcx-corps .pcx-sources-bloc{ max-width: none; margin: 3em 0 0; padding: 22px 24px; background: var(--porcelaine); border-radius: 6px; border-top: 4px solid var(--encre); }
.pcx-corps .pcx-sources-titre{ font-size: 14px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; padding: 0; border: 0; }
.pcx-corps .pcx-sources-liste{ display: block; list-style: none; margin: 0; padding: 0; background: none; border: 0; counter-reset: pcx-src; }
.pcx-corps .pcx-sources-liste li.pcx-source{ counter-increment: pcx-src; display: flex; flex-direction: column; gap: 2px; padding: 10px 0 10px 40px; border: 0; border-top: 1px dashed rgba(20,24,43,.2); box-shadow: none; position: relative; }
.pcx-corps .pcx-sources-liste li.pcx-source:first-child{ border-top: 0; }
.pcx-corps .pcx-sources-liste li.pcx-source::before{ content: counter(pcx-src); position: absolute; left: 0; top: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--coton); border: 1px solid var(--encre); font-family: var(--font-titre); font-size: 12px; font-weight: 600; color: var(--encre); display: flex; align-items: center; justify-content: center; margin: 0; }
.pcx-source-titre{ font-family: var(--font-titre); font-weight: 600; font-size: 15px; line-height: 1.35; }
.pcx-source-org{ font-size: 15px; line-height: 1.4; color: rgba(20,24,43,.85); }
.pcx-source-date{ font-family: var(--font-titre); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: rgba(20,24,43,.6); }

/* Pied d'article : respiration (R-0539) */
.pcx-art-pied{ padding-top: 56px; padding-bottom: 72px; }
.pcx-art-pied .pcx-signature{ max-width: 860px; }
.pcx-art-pied .pcx-lies{ margin-top: 64px; }

@media (max-width: 1100px){
	.pcx-art-grille{ grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
}
@media (max-width: 900px){
	.pcx-art-hero-grille{ grid-template-columns: 1fr; gap: 24px; padding-bottom: 28px; }
	.pcx-art-une{ order: -1; margin: 0 calc(var(--marge) * -1); }
	.pcx-art-une img{ aspect-ratio: 16/9; border-radius: 0; box-shadow: none; }
	.pcx-art-hero-grille{ padding-top: 0; }
	.pcx-art-hero .pcx-fil{ margin-top: 4px; }
	.pcx-art-grille{ grid-template-columns: 1fr; padding-top: 24px; }
	.pcx-art-cote-colle{ position: static; }
	.pcx-art-cote .pcx-sommaire{ display: none; }
	.pcx-art-sommaire-mobile{ display: block; max-width: none; margin: 0 0 28px; background: var(--coton); border: 1px solid rgba(20,24,43,.14); border-radius: 6px; padding: 0 16px; }
	.pcx-art-sommaire-mobile summary{ font-family: var(--font-titre); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; min-height: 52px; display: flex; align-items: center; justify-content: space-between; }
	.pcx-art-sommaire-mobile summary span{ margin-left: auto; margin-right: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; color: rgba(20,24,43,.65); }
	.pcx-corps .pcx-art-sommaire-mobile ol{ display: block; background: none; border: 0; margin: 0 0 12px; counter-reset: pcx-som; }
	.pcx-corps .pcx-art-sommaire-mobile ol li{ counter-increment: pcx-som; padding: 8px 0 8px 30px; border: 0; border-top: 1px dashed rgba(20,24,43,.18); box-shadow: none; }
	.pcx-corps .pcx-art-sommaire-mobile ol li::before{ content: counter(pcx-som, decimal-leading-zero); position: absolute; left: 0; top: 9px; font-size: 12px; font-weight: 600; margin: 0; color: var(--bleuet); }
	.pcx-corps .pcx-art-sommaire-mobile a{ font-family: var(--font-titre); font-size: 15px; text-decoration: none; color: var(--encre); }
	.pcx-art-corps > p:first-of-type{ font-size: 19px; }
	.pcx-art-titre{ font-size: 32px; }
	.pcx-art-chapo{ font-size: 18px; }
}

/* Signature propre à paraconseil (R-0607) : l'ouverture d'article est un flacon et son étiquette.
   La photo prend l'épaule arrondie d'un flacon ; les repères sont une étiquette de parapharmacie à cases. */
.pcx-art-une{ padding: 14px; background: var(--coton); border: 2px solid var(--encre); border-radius: 180px 180px 14px 14px; box-shadow: 10px 10px 0 var(--bleuet-clair); }
.pcx-art-une img{ border-radius: 166px 166px 6px 6px; box-shadow: none; aspect-ratio: 5/4; }
.pcx-art-une::before{ content: ""; position: absolute; left: 50%; top: -18px; transform: translateX(-50%); width: 34%; height: 18px; background: var(--encre); border-radius: 6px 6px 0 0; }
.pcx-art-meta{ border-top: 0; padding-top: 0; flex-direction: column; align-items: stretch; gap: 16px; }
.pcx-art-etiquette{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border: 1.5px solid var(--encre); border-radius: 4px; background: var(--coton); max-width: 620px; }
.pcx-art-etiquette li{ padding: 10px 14px; border-left: 1.5px solid var(--encre); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; line-height: 1.3; }
.pcx-art-etiquette li:first-child{ border-left: 0; }
.pcx-signature-nom a{ color: inherit; text-decoration: none; }
.pcx-signature-nom a:hover{ color: var(--bleuet); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px){
	.pcx-art-une{ margin: 18px 0 0; padding: 10px; border-radius: 140px 140px 12px 12px; box-shadow: 6px 6px 0 var(--bleuet-clair); order: 0; }
	.pcx-art-une img{ border-radius: 130px 130px 6px 6px; aspect-ratio: 4/3; }
	.pcx-art-hero-grille{ padding-top: 16px; }
	.pcx-art-etiquette{ grid-template-columns: 1fr; }
	.pcx-art-etiquette li{ border-left: 0; border-top: 1.5px solid var(--encre); }
	.pcx-art-etiquette li:first-child{ border-top: 0; }
}

/* R-1778/R-1779 (30/09) : le texte occupe la largeur jusqu'au rail, gouttière serrée ;
   R-1780 : la signature suit l'article sans grand vide. */
.pcx-art-grille{ gap: 40px; }
.pcx-art-corps, .pcx-art-corps > *{ max-width: none; }
.pcx-art-pied{ padding-top: 24px; }
@media (max-width: 1100px){ .pcx-art-grille{ gap: 32px; } }
/* R-1794 (Mathias 30/09) : gouttière texte / barre latérale encore resserrée. */
.pcx-art-grille{ gap: 28px; grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 1100px){ .pcx-art-grille{ gap: 24px; grid-template-columns: minmax(0, 1fr) 270px; } }
@media (max-width: 900px){ .pcx-art-grille{ grid-template-columns: 1fr; } }
.pcx-art-question .pcx-btn{ display: flex; align-items: center; justify-content: center; text-align: center; font-size: 14px; line-height: 1.2; min-height: 46px; padding: 10px 16px; }
