/**
 * Porc Experience — styles publics.
 * Direction : carrelage vert de boucherie, papier os, un seul accent sang.
 */

@font-face {
	font-family: 'PE Archivo';
	src: url('../fonts/Archivo-Regular.woff2') format('woff2'), url('../fonts/Archivo-Regular.ttf') format('truetype');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'PE Archivo';
	src: url('../fonts/Archivo-SemiBold.woff2') format('woff2'), url('../fonts/Archivo-SemiBold.ttf') format('truetype');
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'PE Archivo';
	src: url('../fonts/Archivo-Bold.woff2') format('woff2'), url('../fonts/Archivo-Bold.ttf') format('truetype');
	font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'PE Archivo';
	src: url('../fonts/Archivo-ExtraBold.woff2') format('woff2'), url('../fonts/Archivo-ExtraBold.ttf') format('truetype');
	font-weight: 800; font-style: normal; font-display: swap;
}

.pe {
	--pe-vert: #16352a;
	--pe-vert-2: #1f4736;
	--pe-vert-3: #2a5a44;
	--pe-os: #f4f1e8;
	--pe-encre: #14120e;
	--pe-sang: #c8323c;
	--pe-sang-fonce: #a5232c;
	--pe-sang-clair: #e4636b;
	--pe-craie: #a8b8a8;
	--pe-ligne: rgba(244, 241, 232, 0.14);

	--pe-1: 4px; --pe-2: 8px; --pe-3: 12px; --pe-4: 16px;
	--pe-6: 24px; --pe-8: 32px; --pe-12: 48px; --pe-16: 64px;

	--pe-r: 3px;
	--pe-r-lg: 6px;

	--pe-sortie: cubic-bezier(0.16, 1, 0.3, 1);

	font-family: 'PE Archivo', system-ui, sans-serif;
	background: var(--pe-vert);
	color: var(--pe-craie);
	border-radius: var(--pe-r-lg);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.pe *, .pe *::before, .pe *::after { box-sizing: border-box; }

.pe-bloc {
	max-width: 1080px;
	margin: 0 auto;
	padding: var(--pe-12) var(--pe-6);
}
.pe-bloc + .pe-bloc { border-top: 1px solid var(--pe-ligne); }

/* ---------- Pleine largeur ----------
   Les thèmes enferment le contenu dans une colonne étroite (souvent 650 px).
   Le parcours de composition a besoin de toute la largeur de l'écran.
   « overflow-x: clip » (et non « hidden ») évite la barre de défilement
   horizontale sans casser la jauge collante. */

.pe.pe-pleine-largeur {
	/* !important assumé : il faut passer outre la mise en page contrainte
	   du thème, qui a une spécificité élevée sur les thèmes à blocs. */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	border-radius: 0;
}
html:has(.pe-pleine-largeur) { overflow-x: clip; }
.pe-pleine-largeur .pe-barre { border-radius: 0; }

/* ---------- Typographie ---------- */

.pe-h2 {
	font-size: clamp(1.75rem, 5vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.08;
	color: var(--pe-os);
	margin: 0 0 var(--pe-3);
}
.pe-h3 {
	font-size: clamp(1.15rem, 2.6vw, 1.4rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--pe-os);
	margin: 0;
}
.pe-chapo {
	font-size: 1rem;
	color: var(--pe-craie);
	max-width: 56ch;
	margin: 0;
}
.pe-aide {
	font-size: 0.875rem;
	color: var(--pe-craie);
	margin: var(--pe-2) 0 var(--pe-4);
	max-width: 60ch;
}
.pe-aide-serree { margin: var(--pe-2) 0 0; }
.pe-tete { margin-bottom: var(--pe-8); }

/* ---------- Étapes ---------- */

.pe-etape { margin-top: var(--pe-12); }
.pe-etape:first-of-type { margin-top: var(--pe-8); }

.pe-etape-tete {
	display: flex;
	align-items: center;
	gap: var(--pe-3);
	margin-bottom: var(--pe-4);
}
.pe-etape-num {
	flex: none;
	width: 26px; height: 26px;
	display: grid; place-items: center;
	border: 1px solid var(--pe-ligne);
	border-radius: 50%;
	font-size: 0.8rem; font-weight: 700;
	color: var(--pe-craie);
}

/* ---------- Curseurs ---------- */

.pe input[type="range"] {
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 34px;
	background: transparent; cursor: pointer; margin: 0;
}
.pe input[type="range"]::-webkit-slider-runnable-track {
	height: 4px; border-radius: 2px; background: var(--pe-vert-3);
}
.pe input[type="range"]::-moz-range-track {
	height: 4px; border-radius: 2px; background: var(--pe-vert-3);
}
.pe input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 26px; height: 26px; margin-top: -11px;
	border-radius: 50%;
	background: var(--pe-os);
	border: 5px solid var(--pe-sang);
	transition: transform 120ms var(--pe-sortie);
}
.pe input[type="range"]::-moz-range-thumb {
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--pe-os); border: 5px solid var(--pe-sang);
}
.pe input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.pe input[type="range"]:focus-visible { outline: 2px solid var(--pe-os); outline-offset: 4px; border-radius: 4px; }

.pe-curseur { display: flex; align-items: center; gap: var(--pe-4); }
.pe-curseur output {
	flex: none; min-width: 52px;
	font-size: 1.25rem; font-weight: 800; color: var(--pe-os);
	text-align: right; font-variant-numeric: tabular-nums;
}

.pe-poids-lecture {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pe-3);
	margin-top: var(--pe-2);
}
.pe-poids-val {
	font-size: clamp(2rem, 7vw, 3rem);
	font-weight: 800; letter-spacing: -0.03em;
	color: var(--pe-os); line-height: 1;
	font-variant-numeric: tabular-nums;
}
.pe-poids-meta { font-size: 0.9375rem; color: var(--pe-craie); }

/* ---------- Calculateur ---------- */

.pe-calc-tete { margin-bottom: var(--pe-6); }
.pe-calc-corps {
	display: grid; gap: var(--pe-6);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.pe-calc-corps { grid-template-columns: 320px 1fr; gap: var(--pe-8); }
}

.pe-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--pe-os); margin-bottom: var(--pe-2); }

.pe-occasions { display: grid; gap: var(--pe-2); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pe-occasion { position: relative; display: block; cursor: pointer; }
.pe-occasion input { position: absolute; opacity: 0; width: 0; height: 0; }
.pe-occasion-corps {
	display: block;
	padding: var(--pe-3) var(--pe-4);
	border: 1px solid var(--pe-ligne);
	border-radius: var(--pe-r);
	transition: border-color 160ms var(--pe-sortie), background 160ms var(--pe-sortie);
}
.pe-occasion-corps strong { display: block; color: var(--pe-os); font-size: 0.9375rem; font-weight: 600; }
.pe-occasion-corps small { display: block; font-size: 0.8125rem; color: var(--pe-craie); line-height: 1.35; margin-top: 2px; }
.pe-occasion:hover .pe-occasion-corps { border-color: var(--pe-vert-3); background: var(--pe-vert-2); }
.pe-occasion input:checked + .pe-occasion-corps { border-color: var(--pe-sang); background: var(--pe-vert-2); }
.pe-occasion input:focus-visible + .pe-occasion-corps { outline: 2px solid var(--pe-os); outline-offset: 2px; }

.pe-calc-resultat {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pe-8);
	margin-top: var(--pe-8); padding-top: var(--pe-6);
	border-top: 1px solid var(--pe-ligne);
}
.pe-calc-chiffre { display: flex; flex-direction: column; }
.pe-calc-valeur {
	font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 800;
	letter-spacing: -0.03em; color: var(--pe-os); line-height: 1;
	font-variant-numeric: tabular-nums;
}
.pe-calc-chiffre:nth-child(2) .pe-calc-valeur { color: var(--pe-sang-clair); }
.pe-calc-legende { font-size: 0.8125rem; color: var(--pe-craie); margin-top: var(--pe-2); }
.pe-calc-resultat .pe-btn { margin-left: auto; }

/* ---------- Packs ---------- */

.pe-packs {
	display: grid; gap: var(--pe-3);
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.pe-pack {
	text-align: left;
	background: var(--pe-vert-2);
	border: 1px solid var(--pe-ligne);
	border-radius: var(--pe-r);
	padding: var(--pe-4);
	color: inherit; font: inherit; cursor: pointer;
	transition: border-color 160ms var(--pe-sortie), transform 160ms var(--pe-sortie);
}
.pe-pack:hover { border-color: var(--pe-sang); transform: translateY(-2px); }
.pe-pack:focus-visible { outline: 2px solid var(--pe-os); outline-offset: 2px; }
.pe-pack-nom { display: block; font-weight: 700; color: var(--pe-os); font-size: 1rem; }
.pe-pack-desc { display: block; font-size: 0.8125rem; color: var(--pe-craie); margin: var(--pe-1) 0 var(--pe-3); line-height: 1.4; }
.pe-pack-meta { display: flex; gap: var(--pe-2); align-items: baseline; font-size: 0.8125rem; }
.pe-pack-poids { font-weight: 700; color: var(--pe-os); }
.pe-pack-prix { color: var(--pe-sang-clair); font-weight: 600; }

/* ---------- Filtres ---------- */

.pe-filtres { display: flex; flex-wrap: wrap; gap: var(--pe-2); margin-bottom: var(--pe-4); }
.pe-filtre {
	background: none; border: 1px solid var(--pe-ligne);
	border-radius: 100px; padding: 6px 14px;
	color: var(--pe-craie); font: inherit; font-size: 0.8125rem; cursor: pointer;
	transition: color 160ms var(--pe-sortie), border-color 160ms var(--pe-sortie);
}
.pe-filtre:hover { color: var(--pe-os); border-color: var(--pe-vert-3); }
.pe-filtre-actif { color: var(--pe-encre); background: var(--pe-os); border-color: var(--pe-os); font-weight: 600; }

/* ---------- Morceaux ---------- */

.pe-morceaux {
	display: grid; gap: var(--pe-3);
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.pe-morceau {
	display: flex; flex-direction: column;
	background: var(--pe-os);
	color: var(--pe-encre);
	border-radius: var(--pe-r);
	border: 2px solid transparent;
	overflow: hidden;
	transition: border-color 160ms var(--pe-sortie);
}
.pe-morceau-actif { border-color: var(--pe-sang); }

.pe-morceau-photo {
	aspect-ratio: 4 / 3;
	background: #ded8ca;
	overflow: hidden;
	position: relative;
}
.pe-morceau-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-morceau-vide {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	font-size: 0.75rem; color: #8a8272; letter-spacing: 0.06em;
}
.pe-morceau-badge {
	position: absolute; top: var(--pe-2); left: var(--pe-2);
	background: var(--pe-sang); color: #fff;
	font-size: 0.8125rem; font-weight: 700;
	padding: 3px 9px; border-radius: 2px;
	font-variant-numeric: tabular-nums;
}

.pe-morceau-corps { padding: var(--pe-3) var(--pe-4) var(--pe-4); display: flex; flex-direction: column; flex: 1; }
.pe-morceau-nom { font-size: 1rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.pe-morceau-usage { font-size: 0.8125rem; color: #5c5548; line-height: 1.4; margin: var(--pe-1) 0 var(--pe-3); flex: 1; }
.pe-morceau-prix { font-size: 0.8125rem; color: #5c5548; margin-bottom: var(--pe-3); }
.pe-morceau-prix b { color: var(--pe-encre); font-weight: 700; }

.pe-pas { display: flex; align-items: center; gap: var(--pe-2); }
.pe-pas button {
	flex: none; width: 38px; height: 38px;
	border: 1px solid #ccc4b2; background: transparent;
	border-radius: var(--pe-r);
	font: inherit; font-size: 1.25rem; line-height: 1; color: var(--pe-encre);
	cursor: pointer;
	transition: background 120ms var(--pe-sortie), border-color 120ms var(--pe-sortie);
}
.pe-pas button:hover:not(:disabled) { background: var(--pe-encre); color: var(--pe-os); border-color: var(--pe-encre); }
.pe-pas button:disabled { opacity: 0.3; cursor: not-allowed; }
.pe-pas-valeur {
	flex: 1; text-align: center;
	font-weight: 700; font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}
.pe-pas-ajouter {
	width: 100%; height: 38px;
	border: 1px solid var(--pe-encre); background: transparent;
	border-radius: var(--pe-r);
	font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--pe-encre);
	cursor: pointer;
	transition: background 120ms var(--pe-sortie), color 120ms var(--pe-sortie);
}
.pe-pas-ajouter:hover { background: var(--pe-encre); color: var(--pe-os); }

/* ---------- Promesses ---------- */

.pe-promesses {
	list-style: none; margin: var(--pe-12) 0 0; padding: var(--pe-6) 0 0;
	border-top: 1px solid var(--pe-ligne);
	display: grid; gap: var(--pe-3);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pe-promesses li {
	font-size: 0.875rem; color: var(--pe-craie);
	padding-left: 22px; position: relative; line-height: 1.45;
}
.pe-promesses li::before {
	content: ''; position: absolute; left: 0; top: 8px;
	width: 8px; height: 8px; background: var(--pe-sang); border-radius: 50%;
}

/* ---------- Barre collante ---------- */

.pe-barre {
	position: sticky; bottom: 0; z-index: 40;
	background: rgba(11, 27, 21, 0.96);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--pe-ligne);
	border-radius: 0 0 var(--pe-r-lg) var(--pe-r-lg);
}
.pe-barre-inner {
	max-width: 1080px; margin: 0 auto;
	padding: var(--pe-3) var(--pe-4);
	display: grid; gap: var(--pe-2) var(--pe-4);
	grid-template-columns: auto 1fr;
	grid-template-areas: "jauge jauge" "total actions";
	align-items: center;
}
.pe-jauge { grid-area: jauge; }
.pe-barre-total { grid-area: total; }
.pe-barre-actions { grid-area: actions; justify-content: flex-end; }

@media (min-width: 860px) {
	.pe-barre-inner {
		padding: var(--pe-3) var(--pe-6);
		grid-template-columns: 1fr auto auto;
		grid-template-areas: "jauge total actions";
		gap: var(--pe-6);
	}
}

.pe-jauge-piste {
	height: 8px; border-radius: 100px;
	background: var(--pe-vert-3); overflow: hidden;
}
.pe-jauge-remplie {
	height: 100%; width: 0%;
	background: var(--pe-sang);
	border-radius: 100px;
	transition: width 260ms var(--pe-sortie), background 200ms var(--pe-sortie);
}
.pe-jauge-pleine .pe-jauge-remplie { background: #4f9d6b; }
.pe-jauge-texte { font-size: 0.8125rem; color: var(--pe-craie); margin: 6px 0 0; }
.pe-jauge-texte b { color: var(--pe-os); font-weight: 600; }

.pe-barre-total { display: flex; align-items: baseline; gap: 6px; }
.pe-barre-prix {
	font-size: 1.375rem; font-weight: 800; color: var(--pe-os);
	letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.pe-barre-devise { font-size: 0.8125rem; color: var(--pe-craie); }
.pe-barre-actions { display: flex; gap: var(--pe-2); }
.pe-barre-actions .pe-btn { white-space: nowrap; padding: 10px 16px; }
@media (min-width: 860px) { .pe-barre-prix { font-size: 1.625rem; } }

/* ---------- Boutons ---------- */

.pe .pe-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: var(--pe-2);
	padding: 11px 20px;
	border-radius: var(--pe-r);
	font: inherit; font-size: 0.9375rem; font-weight: 600;
	text-decoration: none; cursor: pointer;
	border: 1px solid transparent;
	transition: background 140ms var(--pe-sortie), color 140ms var(--pe-sortie), opacity 140ms var(--pe-sortie);
}
.pe .pe-btn-plein { background: var(--pe-sang); color: #fff; }
.pe .pe-btn-plein:hover { background: var(--pe-sang-fonce); }
.pe .pe-btn-ligne { background: transparent; color: var(--pe-os); border-color: var(--pe-ligne); }
.pe .pe-btn-ligne:hover { border-color: var(--pe-os); }
.pe .pe-btn-large { width: 100%; padding: 14px 20px; margin-top: var(--pe-3); }
.pe .pe-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pe .pe-btn:focus-visible { outline: 2px solid var(--pe-os); outline-offset: 2px; }

/* ---------- Modales ---------- */

.pe-modale { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: end center; }
/* L'attribut hidden doit gagner sur display:grid, sinon la modale invisible bloque les clics. */
.pe-modale[hidden], .pe-barre[hidden], .pe-visuel[hidden] { display: none !important; }
@media (min-width: 720px) { .pe-modale { place-items: center; } }

.pe-modale-fond { position: absolute; inset: 0; background: rgba(10, 22, 17, 0.72); }
.pe-modale-boite {
	position: relative;
	width: min(560px, 100%);
	max-height: 92vh; overflow-y: auto;
	background: var(--pe-os); color: var(--pe-encre);
	border-radius: var(--pe-r-lg) var(--pe-r-lg) 0 0;
	padding: var(--pe-8) var(--pe-6) var(--pe-6);
	animation: pe-monte 300ms var(--pe-sortie) both;
}
@media (min-width: 720px) { .pe-modale-boite { border-radius: var(--pe-r-lg); } }

@keyframes pe-monte { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.pe-modale-boite { animation: none; }
	.pe *, .pe *::before { transition-duration: 1ms !important; }
}

.pe-modale-boite .pe-h3 { color: var(--pe-encre); }
.pe-modale-boite .pe-aide { color: #5c5548; }
.pe-modale-fermer {
	position: absolute; top: 10px; right: 10px;
	width: 36px; height: 36px;
	border: none; background: transparent;
	font-size: 1.5rem; line-height: 1; color: #5c5548; cursor: pointer;
	border-radius: var(--pe-r);
}
.pe-modale-fermer:hover { background: rgba(20, 18, 14, 0.07); color: var(--pe-encre); }

/* ---------- Récapitulatif ---------- */

.pe-recap {
	background: rgba(20, 18, 14, 0.045);
	border-radius: var(--pe-r);
	padding: var(--pe-4);
	margin-bottom: var(--pe-6);
	font-size: 0.875rem;
}
.pe-recap-ligne { display: flex; justify-content: space-between; gap: var(--pe-3); padding: 3px 0; }
.pe-recap-ligne span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pe-recap-total {
	display: flex; justify-content: space-between; gap: var(--pe-3);
	margin-top: var(--pe-3); padding-top: var(--pe-3);
	border-top: 1px solid rgba(20, 18, 14, 0.12);
	font-weight: 700; font-size: 1rem;
}
.pe-recap-total span:last-child { font-variant-numeric: tabular-nums; }

/* ---------- Formulaires ---------- */

.pe-form { display: grid; gap: var(--pe-4); }
.pe-champ { display: grid; gap: 6px; }
.pe-champ-double { display: grid; gap: var(--pe-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .pe-champ-double { grid-template-columns: 1fr 1fr; } }

.pe-champ label {
	font-size: 0.8125rem; font-weight: 600; color: var(--pe-os);
}
.pe-modale-boite .pe-champ label,
.pe-modale-boite .pe-label,
.pe-cagnotte .pe-form .pe-champ label,
.pe-cagnotte .pe-form .pe-label { color: var(--pe-encre); }
.pe-cagnotte .pe-form .pe-aide { color: #5c5548; }
.pe-modale-boite .pe-curseur output,
.pe-cagnotte .pe-form .pe-curseur output { color: var(--pe-encre); }
.pe-modale-boite input[type="range"]::-webkit-slider-runnable-track,
.pe-cagnotte .pe-form input[type="range"]::-webkit-slider-runnable-track { background: rgba(20,18,14,0.15); }
.pe-modale-boite input[type="range"]::-moz-range-track,
.pe-cagnotte .pe-form input[type="range"]::-moz-range-track { background: rgba(20,18,14,0.15); }

.pe input[type="text"], .pe input[type="tel"], .pe select, .pe textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid #ccc4b2;
	border-radius: var(--pe-r);
	background: #fff; color: var(--pe-encre);
	font: inherit; font-size: 1rem;
	transition: border-color 140ms var(--pe-sortie);
}
.pe input:focus, .pe select:focus, .pe textarea:focus {
	outline: none; border-color: var(--pe-sang);
	box-shadow: 0 0 0 3px rgba(200, 50, 60, 0.14);
}
.pe textarea { resize: vertical; }

.pe-erreur {
	background: rgba(200, 50, 60, 0.1);
	border-left: 3px solid var(--pe-sang);
	color: #8d1d25;
	padding: var(--pe-3) var(--pe-4);
	border-radius: 0 var(--pe-r) var(--pe-r) 0;
	font-size: 0.875rem; margin: 0;
}
.pe-mention { font-size: 0.75rem; color: #6d6656; margin: var(--pe-3) 0 0; line-height: 1.45; }
.pe-mention a { color: var(--pe-sang); }

.pe-charge { position: relative; pointer-events: none; opacity: 0.6; }

/* ---------- Case à cocher explicite ---------- */

.pe-bascule {
	display: flex; align-items: flex-start; gap: var(--pe-3);
	padding: var(--pe-3) var(--pe-4);
	border: 1px solid #ccc4b2;
	border-radius: var(--pe-r);
	cursor: pointer;
	transition: border-color 160ms var(--pe-sortie), background 160ms var(--pe-sortie);
}
.pe-bascule:hover { border-color: var(--pe-encre); }
.pe-bascule input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pe-sang); cursor: pointer; }
.pe-bascule-corps strong { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--pe-encre); }
.pe-bascule-corps small { display: block; font-size: 0.8125rem; color: #5c5548; line-height: 1.4; margin-top: 2px; }
.pe-bascule:has(input:checked) { border-color: var(--pe-sang); background: rgba(200, 50, 60, 0.05); }

/* ---------- Succès et partage ---------- */

.pe-succes { text-align: center; }
.pe-succes-ref { font-size: 0.8125rem; color: #6d6656; margin: 0 0 var(--pe-2); }
.pe-succes-ref strong { color: var(--pe-encre); font-variant-numeric: tabular-nums; }

.pe-visuel { margin: 0 0 var(--pe-4); border-radius: var(--pe-r); overflow: hidden; background: var(--pe-vert); }
.pe-visuel img { width: 100%; height: auto; display: block; }

.pe-lien { display: flex; gap: var(--pe-2); }
.pe-lien input { flex: 1; font-size: 0.8125rem; }
.pe-modale-boite .pe-btn-ligne { color: var(--pe-encre); border-color: #ccc4b2; }
.pe-modale-boite .pe-btn-ligne:hover { border-color: var(--pe-encre); }

/* ---------- Page cagnotte ---------- */

.pe-cagnotte { padding: var(--pe-8) var(--pe-6) var(--pe-16); }
.pe-cagnotte-grille { display: grid; gap: var(--pe-8); grid-template-columns: 1fr; max-width: 980px; margin: 0 auto; }
@media (min-width: 880px) { .pe-cagnotte-grille { grid-template-columns: 1.15fr 1fr; gap: var(--pe-12); } }

.pe-compo { list-style: none; margin: var(--pe-6) 0 0; padding: 0; display: grid; gap: var(--pe-4); }
.pe-compo li { display: grid; gap: 6px; }
.pe-compo-tete { display: flex; justify-content: space-between; gap: var(--pe-3); font-size: 0.9375rem; }
.pe-compo-tete strong { color: var(--pe-os); font-weight: 600; }
.pe-compo-tete span { color: var(--pe-craie); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pe-compo-barre { height: 10px; background: var(--pe-vert-3); border-radius: 2px; overflow: hidden; }
.pe-compo-barre i { display: block; height: 100%; background: var(--pe-sang); border-radius: 2px; }

.pe-panneau {
	background: var(--pe-vert-2);
	border: 1px solid var(--pe-ligne);
	border-radius: var(--pe-r-lg);
	padding: var(--pe-6);
}
.pe-part {
	font-size: clamp(2.25rem, 8vw, 3.25rem); font-weight: 800;
	color: var(--pe-os); letter-spacing: -0.03em; line-height: 1;
	font-variant-numeric: tabular-nums;
}
.pe-part-legende { font-size: 0.875rem; color: var(--pe-craie); margin: var(--pe-2) 0 var(--pe-6); }

.pe-livraison {
	font-size: 0.8125rem; color: var(--pe-craie);
	line-height: 1.45; margin: 0 0 var(--pe-6);
	padding-top: var(--pe-4); border-top: 1px solid var(--pe-ligne);
}
.pe-livraison-pastille {
	display: table; font-size: 0.6875rem; font-weight: 700;
	letter-spacing: 0.05em; text-transform: uppercase;
	padding: 3px 8px; border-radius: 2px; margin-bottom: 6px;
	background: var(--pe-sang); color: #fff;
}
.pe-livraison-offerte { background: #4f9d6b; }

.pe-progress { margin-bottom: var(--pe-6); }
.pe-progress-piste { height: 8px; background: var(--pe-vert-3); border-radius: 100px; overflow: hidden; }
.pe-progress-remplie { height: 100%; background: var(--pe-sang); border-radius: 100px; transition: width 320ms var(--pe-sortie); }
.pe-progress-texte { font-size: 0.8125rem; color: var(--pe-craie); margin: var(--pe-2) 0 0; }

.pe-participants { list-style: none; margin: var(--pe-6) 0 0; padding: var(--pe-4) 0 0; border-top: 1px solid var(--pe-ligne); display: grid; gap: var(--pe-2); }
.pe-participants li { display: flex; justify-content: space-between; font-size: 0.875rem; }
.pe-participants strong { color: var(--pe-os); font-weight: 600; }
.pe-participants span { color: var(--pe-craie); font-variant-numeric: tabular-nums; }

.pe-cagnotte .pe-form { background: var(--pe-os); padding: var(--pe-6); border-radius: var(--pe-r); margin-top: var(--pe-6); }
.pe-cagnotte .pe-form .pe-h3 { color: var(--pe-encre); }

.pe-etat {
	display: inline-block; font-size: 0.75rem; font-weight: 700;
	letter-spacing: 0.06em; padding: 4px 10px; border-radius: 2px;
	background: var(--pe-sang); color: #fff; margin-bottom: var(--pe-4);
}
.pe-etat-complete { background: #4f9d6b; }

.pe-vide { padding: var(--pe-8); background: var(--pe-vert); color: var(--pe-craie); border-radius: var(--pe-r-lg); font-family: 'PE Archivo', system-ui, sans-serif; }
.pe-vide strong { color: var(--pe-os); }